add user notifications (#148)

* added notification settings

* notifications: added list to profile

* notifications: changed appearance for comment notifications

src/containers/notifications/NotificationList/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { NotificationComment } from '~/components/notifications/NotificationComment';
+import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
+
+import styles from './styles.module.scss';
+
+interface NotificationListProps {}
+
+const NotificationList: FC<NotificationListProps> = () => {
+  const { isLoading, items } = useNotificationsList();
+
+  if (isLoading) {
+    return <LoaderCircle />;
+  }
+
+  return (
+    <div className={styles.grid}>
+      {/* <div className={styles.head}>HEAD</div> */}
+      <div className={styles.list}>
+        <div className={styles.items}>
+          {items?.map((item) => (
+            <div className={styles.item} key={item.created_at}>
+              <NotificationComment item={item} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { NotificationList };

src/containers/notifications/NotificationList/styles.module.scss

@@ -0,0 +1,41 @@
+@import 'src/styles/variables';
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 4;
+  height: 100%;
+}
+
+.head {
+  @include row_shadow;
+
+  width: 100%;
+  padding: $gap;
+}
+
+.list {
+  @include row_shadow;
+
+  overflow-y: auto;
+  flex: 1 1;
+  overflow: auto;
+  width: 100%;
+}
+
+.items {
+  display: grid;
+  grid-auto-flow: row;
+}
+
+.item {
+  @include row_shadow;
+  padding-right: $gap;
+  transition: background-color 0.25s;
+
+  &:hover {
+    background-color: $content_bg_lighter;
+  }
+}

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, VFC } from 'react';
 
 import classNames from 'classnames';
 
+import { Superpower } from '~/components/boris/Superpower';
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Zone } from '~/components/containers/Zone';
@@ -44,7 +45,13 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
               Настройки
             </VerticalMenu.Item>
 
-            <VerticalMenu.Item onClick={() => setActiveTab(1)}>
+            <Superpower>
+              <VerticalMenu.Item onClick={() => setActiveTab(1)}>
+                Уведомления
+              </VerticalMenu.Item>
+            </Superpower>
+
+            <VerticalMenu.Item onClick={() => setActiveTab(2)}>
               Заметки
             </VerticalMenu.Item>
           </VerticalMenu>

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, VFC } from 'react';
 
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { ProfileSidebarNotes } from '~/components/profile/ProfileSidebarNotes';
+import { ProfileSidebarNotifications } from '~/components/profile/ProfileSidebarNotifications';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
 import { SidebarStack } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
@@ -13,7 +14,7 @@ import { useUser } from '~/hooks/auth/useUser';
 import type { SidebarComponentProps } from '~/types/sidebar';
 import { isNil } from '~/utils/ramda';
 
-const tabs = ['profile', 'bookmarks'] as const;
+const tabs = ['profile', 'notifications', 'bookmarks'] as const;
 type TabName = typeof tabs[number];
 
 interface SettingsSidebarProps
@@ -71,6 +72,7 @@ const SettingsSidebar: VFC<SettingsSidebarProps> = ({
 
         <SidebarStack.Cards>
           <ProfileSidebarSettings />
+          <ProfileSidebarNotifications />
           <ProfileSidebarNotes />
         </SidebarStack.Cards>
       </SidebarStack>