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}>