notifications: added tabs to notification screen

src/components/profile/ProfileSidebarNotifications/index.tsx

@@ -1,25 +1,62 @@
-import { VFC } from 'react';
+import { useState, VFC } from 'react';
 
-import { Padder } from '~/components/containers/Padder';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
+import { NotificationList } from '~/containers/notifications/NotificationList';
 import { NotificationSettings } from '~/containers/notifications/NotificationSettings';
+import { useNotificationSettings } from '~/hooks/notifications/useNotificationSettings';
+
+import styles from './styles.module.scss';
 
 interface ProfileSidebarNotificationsProps {}
 
+enum Tabs {
+  List,
+  Settings,
+}
+
 const ProfileSidebarNotifications: VFC<
   ProfileSidebarNotificationsProps
 > = () => {
   const { closeAllTabs } = useStackContext();
+  const [tab, setTab] = useState(Tabs.List);
+  const { loading } = useNotificationSettings();
 
   return (
-    <SidebarStackCard
-      width={400}
-      headerFeature="back"
-      title="Уведомления"
-      onBackPress={closeAllTabs}
-    >
-      <NotificationSettings />
+    <SidebarStackCard width={400} onBackPress={closeAllTabs}>
+      <div className={styles.grid}>
+        <Group className={styles.head} horizontal>
+          <HorizontalMenu className={styles.tabs}>
+            <HorizontalMenu.Item
+              active={tab === Tabs.List}
+              isLoading={loading}
+              onClick={() => setTab(Tabs.List)}
+              stretchy
+            >
+              Уведомления
+            </HorizontalMenu.Item>
+
+            <HorizontalMenu.Item
+              active={tab === Tabs.Settings}
+              isLoading={loading}
+              onClick={() => setTab(Tabs.Settings)}
+              stretchy
+            >
+              Настройки
+            </HorizontalMenu.Item>
+          </HorizontalMenu>
+
+          <Button iconLeft="right" color="link" onClick={closeAllTabs} />
+        </Group>
+
+        <div className={styles.list}>
+          {tab === Tabs.List ? <NotificationList /> : <NotificationSettings />}
+        </div>
+      </div>
     </SidebarStackCard>
   );
 };

src/components/profile/ProfileSidebarNotifications/styles.module.scss

@@ -0,0 +1,31 @@
+@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;
+  flex: 0;
+}
+
+.tabs {
+  flex: 1;
+}
+
+.list {
+  @include row_shadow;
+
+  overflow-y: auto;
+  flex: 1 1;
+  overflow: auto;
+  width: 100%;
+}