diff --git a/src/components/Nav/Notifications.tsx b/src/components/Nav/Notifications.tsx
deleted file mode 100644
index 4a53736d..00000000
--- a/src/components/Nav/Notifications.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Portal } from 'solid-js/web'
-import { useWarningsStore } from '../../stores/ui'
-import { createMemo, For, Show } from 'solid-js'
-
-export default () => {
- const { warnings } = useWarningsStore()
-
- const notSeen = createMemo(() => warnings().filter((warning) => !warning.seen))
-
- return (
-
0}>
-
-
- {(warning) => - {warning.body}
}
-
-
-
- )
-}
diff --git a/src/components/NotificationsPanel/NotificationView/NotificationView.module.scss b/src/components/NotificationsPanel/NotificationView/NotificationView.module.scss
new file mode 100644
index 00000000..284af187
--- /dev/null
+++ b/src/components/NotificationsPanel/NotificationView/NotificationView.module.scss
@@ -0,0 +1,32 @@
+.NotificationView {
+ display: flex;
+ align-items: center;
+ height: 72px;
+ margin-left: -16px;
+ border-radius: 16px;
+ padding: 16px;
+ background-color: var(--yellow-50);
+ // TODO: check markup
+ font-size: 15px;
+ // font-weight: 700;
+ line-height: 20px;
+ cursor: pointer;
+ transition: background-color 100ms;
+
+ &.seen {
+ background-color: transparent;
+ }
+
+ &:hover {
+ background-color: var(--gray-100);
+ }
+}
+
+.userpic {
+ margin-right: 15px;
+}
+
+.timeContainer {
+ margin-left: auto;
+ padding-left: 16px;
+}
diff --git a/src/components/NotificationsPanel/NotificationView/NotificationView.tsx b/src/components/NotificationsPanel/NotificationView/NotificationView.tsx
new file mode 100644
index 00000000..397572fb
--- /dev/null
+++ b/src/components/NotificationsPanel/NotificationView/NotificationView.tsx
@@ -0,0 +1,128 @@
+import { clsx } from 'clsx'
+import styles from './NotificationView.module.scss'
+import type { Notification } from '../../../graphql/types.gen'
+import { formatDate } from '../../../utils'
+import { createMemo, createSignal, onMount, Show } from 'solid-js'
+import { NotificationType } from '../../../graphql/types.gen'
+import { openPage } from '@nanostores/router'
+import { router } from '../../../stores/router'
+import { useNotifications } from '../../../context/notifications'
+import { Userpic } from '../../Author/Userpic'
+import { useLocalize } from '../../../context/localize'
+import notifications from '../../../graphql/query/notifications'
+
+type Props = {
+ notification: Notification
+ onClick: () => void
+ class?: string
+}
+
+type NotificationData = {
+ shout: {
+ slug: string
+ title: string
+ }
+ users: {
+ id: number
+ name: string
+ slug: string
+ userpic: string
+ }[]
+}
+
+export const NotificationView = (props: Props) => {
+ const {
+ actions: { markNotificationAsRead }
+ } = useNotifications()
+
+ const { t } = useLocalize()
+
+ const [data, setData] = createSignal
(null)
+
+ onMount(() => {
+ setTimeout(() => setData(JSON.parse(props.notification.data)))
+ })
+
+ const lastUser = createMemo(() => {
+ if (!data()) {
+ return null
+ }
+
+ return data().users[data().users.length - 1]
+ })
+
+ const content = createMemo(() => {
+ if (!data()) {
+ return null
+ }
+
+ let shoutTitle = ''
+ let i = 0
+ const shoutTitleWords = data().shout.title.split(' ')
+
+ while (shoutTitle.length <= 30 && i < shoutTitleWords.length) {
+ shoutTitle += shoutTitleWords[i] + ' '
+ i++
+ }
+
+ if (shoutTitle.length < data().shout.title.length) {
+ shoutTitle += '...'
+ }
+
+ switch (props.notification.type) {
+ case NotificationType.NewComment: {
+ return t('NewCommentNotificationText', {
+ commentsCount: props.notification.occurrences,
+ shoutTitle,
+ lastCommenterName: lastUser().name,
+ restUsersCount: data().users.length - 1
+ })
+ }
+ case NotificationType.NewReply: {
+ return t('NewReplyNotificationText', {
+ commentsCount: props.notification.occurrences,
+ shoutTitle,
+ lastCommenterName: lastUser().name,
+ restUsersCount: data().users.length - 1
+ })
+ }
+ }
+ })
+
+ const handleClick = () => {
+ if (!props.notification.seen) {
+ markNotificationAsRead(props.notification)
+ }
+
+ openPage(router, 'article', { slug: data().shout.slug })
+ props.onClick()
+
+ // switch (props.notification.type) {
+ // case NotificationType.NewComment: {
+ // openPage(router, 'article', { slug: data().shout.slug })
+ // break
+ // }
+ // case NotificationType.NewReply: {
+ // openPage(router, 'article', { slug: data().shout.slug })
+ // break
+ // }
+ // }
+ }
+
+ return (
+
+
+
+
{content()}
+
+ {/*{formatDate(new Date(props.notification.createdAt), { month: 'numeric' })}*/}
+
+
+
(panelRef.current = el)} class={styles.panel}>
+
+ {/*TODO: check markup (hover)*/}
+
+
+
{t('Notifications')}
+
{t('No notifications, yet')}}
+ >
+ {(notification) => (
+
+ )}
+
+
+ )
+}
diff --git a/src/components/NotificationsPanel/index.ts b/src/components/NotificationsPanel/index.ts
new file mode 100644
index 00000000..5d134561
--- /dev/null
+++ b/src/components/NotificationsPanel/index.ts
@@ -0,0 +1 @@
+export { NotificationsPanel } from './NotificationsPanel'
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 4c4399af..027d260d 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -34,7 +34,7 @@ export const AuthorView = (props: Props) => {
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { authorEntities } = useAuthorsStore({ authors: [props.author] })
- const { page } = useRouter()
+ const { page: getPage } = useRouter()
const { user } = useSession()
const author = createMemo(() => authorEntities()[props.authorSlug])
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
@@ -104,14 +104,14 @@ export const AuthorView = (props: Props) => {
// return t('Top recent')
// })
- const shouts = createMemo