notifications: show toggle button on list if notifications disabled

src/containers/notifications/NotificationList/index.tsx

@@ -1,5 +1,9 @@
 import { FC, useEffect } from 'react';
 
+import classNames from 'classnames';
+
+import { Button } from '~/components/input/Button';
+import { InputRow } from '~/components/input/InputRow';
 import { LoaderScreen } from '~/components/input/LoaderScreen';
 import { NotificationComment } from '~/components/notifications/NotificationComment';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
@@ -11,6 +15,7 @@ interface NotificationListProps {}
 
 const NotificationList: FC<NotificationListProps> = () => {
   const { isLoading, items } = useNotificationsList();
+  const { enabled, toggleEnabled } = useNotifications();
   const { markAsRead } = useNotifications();
 
   useEffect(() => {
@@ -23,8 +28,21 @@ const NotificationList: FC<NotificationListProps> = () => {
 
   return (
     <div className={styles.grid}>
-      {/* <div className={styles.head}>HEAD</div> */}
-      <div className={styles.list}>
+      {!enabled && (
+        <div className={styles.head}>
+          <InputRow
+            input={
+              <Button size="small" onClick={toggleEnabled}>
+                Включить
+              </Button>
+            }
+          >
+            Уведомления выключены
+          </InputRow>
+        </div>
+      )}
+
+      <div className={classNames(styles.list, { [styles.inactive]: !enabled })}>
         <div className={styles.items}>
           {items?.map((item) => (
             <div className={styles.item} key={item.created_at}>

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

@@ -23,6 +23,21 @@
   flex: 1 1;
   overflow: auto;
   width: 100%;
+  position: relative;
+
+  &.inactive {
+    opacity: 0.3;
+    overflow: hidden;
+
+    &::after {
+      content: ' ';
+      inset: 0;
+      position: absolute;
+      background: linear-gradient(transparent, $content_bg_backdrop);
+      pointer-events: none;
+      touch-action: none;
+    }
+  }
 }
 
 .items {