From 564de5e5ccc9ae7a5230d9af016cd9cbaf63584e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <fedor.katurov@playrix.com>
Date: Mon, 21 Nov 2022 15:56:28 +0600
Subject: [PATCH 01/46] fixed swiper version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e79a5ab7..37c66c71 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "react-router-dom": "^5.1.2",
     "react-sticky-box": "^1.0.2",
     "sass": "^1.49.0",
-    "swiper": "^8.0.7",
+    "swiper": "^8.4.4",
     "swr": "^1.0.1",
     "throttle-debounce": "^2.1.0",
     "typescript": "^4.0.5",

From ed9694c246e98c68bf3125f0e10a1c1fa622eac8 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <fedor.katurov@playrix.com>
Date: Mon, 21 Nov 2022 15:56:35 +0600
Subject: [PATCH 02/46] fixed theme memoization

---
 src/utils/providers/ThemeProvider.tsx | 34 +++++++++++++++------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/utils/providers/ThemeProvider.tsx b/src/utils/providers/ThemeProvider.tsx
index 68930c3d..6869a8aa 100644
--- a/src/utils/providers/ThemeProvider.tsx
+++ b/src/utils/providers/ThemeProvider.tsx
@@ -1,6 +1,7 @@
 import React, {
   createContext,
   FC,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -23,8 +24,23 @@ const themeClass: Record<Theme, string> = {
 };
 
 const ThemeProvider: FC<ProvidersProps> = ({ children }) => {
-  const [theme, setTheme] = useState(Theme.Default);
-  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+  const [theme, setThemeValue] = useState(Theme.Default);
+
+  const setTheme = useCallback(
+    (val: Theme) => {
+      if (themeClass[theme]) {
+        document.documentElement.classList.remove(themeClass[theme]);
+      }
+
+      localStorage.setItem('vault__theme', val);
+      setThemeValue(val);
+
+      if (themeClass[val]) {
+        document.documentElement.classList.add(themeClass[val]);
+      }
+    },
+    [theme],
+  );
 
   useEffect(() => {
     const stored = localStorage.getItem('vault__theme');
@@ -34,19 +50,7 @@ const ThemeProvider: FC<ProvidersProps> = ({ children }) => {
     setTheme(stored as Theme);
   }, []);
 
-  useEffect(() => {
-    if (!themeClass[theme]) {
-      return;
-    }
-
-    document.documentElement.classList.add(themeClass[theme]);
-
-    try {
-      localStorage.setItem('vault__theme', theme);
-    } catch {}
-
-    return () => document.documentElement.classList.remove(themeClass[theme]);
-  }, [theme]);
+  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
 
   return (
     <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>

From 75dc20ca0b5f6737074f11d59a3a591aa6d89d24 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <fedor.katurov@playrix.com>
Date: Tue, 22 Nov 2022 10:46:41 +0600
Subject: [PATCH 03/46] fixed user hydration

---
 .../comment/CommentContent/index.tsx          | 75 ++++++++++++++-----
 .../containers/Authorized/index.tsx           | 15 ++--
 src/components/flow/FlowGrid/index.tsx        | 60 +++++++++------
 src/components/menu/SeparatedMenu/index.tsx   |  4 +-
 src/components/node/NodeTitle/index.tsx       | 61 ++++++++-------
 src/containers/main/Header/index.tsx          | 12 ++-
 src/containers/main/Header/styles.module.scss | 10 ++-
 src/hooks/auth/useAuth.ts                     |  1 +
 src/hooks/auth/useUser.ts                     | 20 +++--
 src/hooks/node/useNodePermissions.ts          | 18 ++++-
 src/layouts/NodeLayout/index.tsx              |  6 +-
 src/store/auth/AuthStore.ts                   |  5 ++
 src/utils/providers/AuthProvider.tsx          |  2 +
 13 files changed, 194 insertions(+), 95 deletions(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 51c9f96e..17f1eac1 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -1,9 +1,19 @@
-import React, { createElement, FC, Fragment, memo, ReactNode, useCallback, useMemo, useState } from 'react';
+import React, {
+  createElement,
+  FC,
+  Fragment,
+  memo,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 
 import classnames from 'classnames';
 import classNames from 'classnames';
 
 import { CommentForm } from '~/components/comment/CommentForm';
+import { Authorized } from '~/components/containers/Authorized';
 import { Group } from '~/components/containers/Group';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
@@ -28,7 +38,15 @@ interface IProps {
 }
 
 const CommentContent: FC<IProps> = memo(
-  ({ comment, canEdit, nodeId, saveComment, onDelete, onShowImageModal, prefix }) => {
+  ({
+    comment,
+    canEdit,
+    nodeId,
+    saveComment,
+    onDelete,
+    onShowImageModal,
+    prefix,
+  }) => {
     const [isEditing, setIsEditing] = useState(false);
 
     const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
@@ -38,11 +56,13 @@ const CommentContent: FC<IProps> = memo(
       () =>
         reduce(
           (group, file) =>
-            file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
+            file.type
+              ? assocPath([file.type], append(file, group[file.type]), group)
+              : group,
           {} as Record<UploadType, IFile[]>,
-          comment.files
+          comment.files,
         ),
-      [comment]
+      [comment],
     );
 
     const onLockClick = useCallback(() => {
@@ -50,8 +70,9 @@ const CommentContent: FC<IProps> = memo(
     }, [comment, onDelete]);
 
     const menu = useMemo(
-      () => canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
-      [canEdit, startEditing, onLockClick]
+      () =>
+        canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
+      [canEdit, startEditing, onLockClick],
     );
 
     const blocks = useMemo(
@@ -59,7 +80,7 @@ const CommentContent: FC<IProps> = memo(
         !!comment.text.trim()
           ? formatCommentText(path(['user', 'username'], comment), comment.text)
           : [],
-      [comment]
+      [comment],
     );
 
     if (isEditing) {
@@ -78,17 +99,22 @@ const CommentContent: FC<IProps> = memo(
         {!!prefix && <div className={styles.prefix}>{prefix}</div>}
         {comment.text.trim() && (
           <Group className={classnames(styles.block, styles.block_text)}>
-            {menu}
+            <Authorized>{menu}</Authorized>
 
             <Group className={styles.renderers}>
               {blocks.map(
                 (block, key) =>
                   COMMENT_BLOCK_RENDERERS[block.type] &&
-                  createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
+                  createElement(COMMENT_BLOCK_RENDERERS[block.type], {
+                    block,
+                    key,
+                  }),
               )}
             </Group>
 
-            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+            <div className={styles.date}>
+              {getPrettyDate(comment.created_at)}
+            </div>
           </Group>
         )}
 
@@ -102,32 +128,45 @@ const CommentContent: FC<IProps> = memo(
               })}
             >
               {groupped.image.map((file, index) => (
-                <div key={file.id} onClick={() => onShowImageModal(groupped.image, index)}>
-                  <img src={getURL(file, ImagePresets['600'])} alt={file.name} />
+                <div
+                  key={file.id}
+                  onClick={() => onShowImageModal(groupped.image, index)}
+                >
+                  <img
+                    src={getURL(file, ImagePresets['600'])}
+                    alt={file.name}
+                  />
                 </div>
               ))}
             </div>
 
-            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+            <div className={styles.date}>
+              {getPrettyDate(comment.created_at)}
+            </div>
           </div>
         )}
 
         {groupped.audio && groupped.audio.length > 0 && (
           <Fragment>
-            {groupped.audio.map(file => (
-              <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
+            {groupped.audio.map((file) => (
+              <div
+                className={classnames(styles.block, styles.block_audio)}
+                key={file.id}
+              >
                 {menu}
 
                 <AudioPlayer file={file} />
 
-                <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+                <div className={styles.date}>
+                  {getPrettyDate(comment.created_at)}
+                </div>
               </div>
             ))}
           </Fragment>
         )}
       </div>
     );
-  }
+  },
 );
 
 export { CommentContent };
diff --git a/src/components/containers/Authorized/index.tsx b/src/components/containers/Authorized/index.tsx
index 739e1ec8..d38a9ea6 100644
--- a/src/components/containers/Authorized/index.tsx
+++ b/src/components/containers/Authorized/index.tsx
@@ -1,15 +1,20 @@
 import React, { FC } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { useAuth } from '~/hooks/auth/useAuth';
 
-interface IProps {}
+interface IProps {
+  // don't wait for user refetch, trust hydration
+  hydratedOnly?: boolean;
+}
 
-const Authorized: FC<IProps> = ({ children }) => {
-  const { isUser } = useAuth();
+const Authorized: FC<IProps> = observer(({ children, hydratedOnly }) => {
+  const { isUser, fetched } = useAuth();
 
-  if (!isUser) return null;
+  if (!isUser || (!hydratedOnly && !fetched)) return null;
 
   return <>{children}</>;
-};
+});
 
 export { Authorized };
diff --git a/src/components/flow/FlowGrid/index.tsx b/src/components/flow/FlowGrid/index.tsx
index 3d451b54..5aac50b5 100644
--- a/src/components/flow/FlowGrid/index.tsx
+++ b/src/components/flow/FlowGrid/index.tsx
@@ -1,9 +1,11 @@
 import React, { FC, Fragment } from 'react';
 
 import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
 
 import { FlowCell } from '~/components/flow/FlowCell';
 import { flowDisplayToPreset, URLS } from '~/constants/urls';
+import { useAuth } from '~/hooks/auth/useAuth';
 import { FlowDisplay, IFlowNode, INode } from '~/types';
 import { IUser } from '~/types/auth';
 import { getURLFromString } from '~/utils/dom';
@@ -17,28 +19,38 @@ interface Props {
   onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
 }
 
-export const FlowGrid: FC<Props> = ({ user, nodes, onChangeCellView }) => {
-  if (!nodes) {
-    return null;
-  }
+export const FlowGrid: FC<Props> = observer(
+  ({ user, nodes, onChangeCellView }) => {
+    const { fetched, isUser } = useAuth();
 
-  return (
-    <Fragment>
-      {nodes.map(node => (
-        <div className={classNames(styles.cell, styles[node.flow.display])} key={node.id}>
-          <FlowCell
-            id={node.id}
-            color={node.flow.dominant_color}
-            to={URLS.NODE_URL(node.id)}
-            image={getURLFromString(node.thumbnail, flowDisplayToPreset[node.flow.display])}
-            flow={node.flow}
-            text={node.description}
-            title={node.title}
-            canEdit={canEditNode(node, user)}
-            onChangeCellView={onChangeCellView}
-          />
-        </div>
-      ))}
-    </Fragment>
-  );
-};
+    if (!nodes) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        {nodes.map((node) => (
+          <div
+            className={classNames(styles.cell, styles[node.flow.display])}
+            key={node.id}
+          >
+            <FlowCell
+              id={node.id}
+              color={node.flow.dominant_color}
+              to={URLS.NODE_URL(node.id)}
+              image={getURLFromString(
+                node.thumbnail,
+                flowDisplayToPreset[node.flow.display],
+              )}
+              flow={node.flow}
+              text={node.description}
+              title={node.title}
+              canEdit={fetched && isUser && canEditNode(node, user)}
+              onChangeCellView={onChangeCellView}
+            />
+          </div>
+        ))}
+      </Fragment>
+    );
+  },
+);
diff --git a/src/components/menu/SeparatedMenu/index.tsx b/src/components/menu/SeparatedMenu/index.tsx
index 19a4c9e3..c030220b 100644
--- a/src/components/menu/SeparatedMenu/index.tsx
+++ b/src/components/menu/SeparatedMenu/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-interface SeparatedMenuProps {
+export interface SeparatedMenuProps {
   className?: string;
 }
 
@@ -14,7 +14,7 @@ const SeparatedMenu: FC<SeparatedMenuProps> = ({ children, className }) => {
       return [];
     }
 
-    return (Array.isArray(children) ? children : [children]).filter(it => it);
+    return (Array.isArray(children) ? children : [children]).filter((it) => it);
   }, [children]);
 
   return (
diff --git a/src/components/node/NodeTitle/index.tsx b/src/components/node/NodeTitle/index.tsx
index d33a4bab..99ae85ae 100644
--- a/src/components/node/NodeTitle/index.tsx
+++ b/src/components/node/NodeTitle/index.tsx
@@ -2,6 +2,7 @@ import React, { memo, VFC } from 'react';
 
 import classNames from 'classnames';
 
+import { Authorized } from '~/components/containers/Authorized';
 import { Icon } from '~/components/input/Icon';
 import { SeparatedMenu } from '~/components/menu/SeparatedMenu';
 import { NodeEditMenu } from '~/components/node/NodeEditMenu';
@@ -76,37 +77,39 @@ const NodeTitle: VFC<IProps> = memo(
             )}
           </div>
 
-          <SeparatedMenu className={styles.buttons}>
-            {canEdit && (
-              <NodeEditMenu
-                className={styles.button}
-                canStar={canStar}
-                isHeroic={isHeroic}
-                isLocked={isLocked}
-                onStar={onStar}
-                onLock={onLock}
-                onEdit={onEdit}
-              />
-            )}
+          <Authorized>
+            <SeparatedMenu className={styles.buttons}>
+              {canEdit && (
+                <NodeEditMenu
+                  className={styles.button}
+                  canStar={canStar}
+                  isHeroic={isHeroic}
+                  isLocked={isLocked}
+                  onStar={onStar}
+                  onLock={onLock}
+                  onEdit={onEdit}
+                />
+              )}
 
-            {canLike && (
-              <div
-                className={classNames(styles.button, styles.like, {
-                  [styles.is_liked]: isLiked,
-                })}
-              >
-                {isLiked ? (
-                  <Icon icon="heart_full" size={24} onClick={onLike} />
-                ) : (
-                  <Icon icon="heart" size={24} onClick={onLike} />
-                )}
+              {canLike && (
+                <div
+                  className={classNames(styles.button, styles.like, {
+                    [styles.is_liked]: isLiked,
+                  })}
+                >
+                  {isLiked ? (
+                    <Icon icon="heart_full" size={24} onClick={onLike} />
+                  ) : (
+                    <Icon icon="heart" size={24} onClick={onLike} />
+                  )}
 
-                {!!likeCount && likeCount > 0 && (
-                  <div className={styles.like_count}>{likeCount}</div>
-                )}
-              </div>
-            )}
-          </SeparatedMenu>
+                  {!!likeCount && likeCount > 0 && (
+                    <div className={styles.like_count}>{likeCount}</div>
+                  )}
+                </div>
+              )}
+            </SeparatedMenu>
+          </Authorized>
         </div>
       </div>
     );
diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx
index 893737d3..113409f3 100644
--- a/src/containers/main/Header/index.tsx
+++ b/src/containers/main/Header/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import isBefore from 'date-fns/isBefore';
@@ -16,7 +16,6 @@ import { URLS } from '~/constants/urls';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useScrollTop } from '~/hooks/dom/useScrollTop';
 import { useFlow } from '~/hooks/flow/useFlow';
-import { useGetLabStats } from '~/hooks/lab/useGetLabStats';
 import { useModal } from '~/hooks/modal/useModal';
 import { useUpdates } from '~/hooks/updates/useUpdates';
 import { useSidebar } from '~/utils/providers/SidebarProvider';
@@ -66,8 +65,13 @@ const Header: FC<HeaderProps> = observer(() => {
 
         <Filler className={styles.filler} />
 
-        <nav className={styles.plugs}>
-          <Authorized>
+        <nav
+          className={classNames(styles.plugs, {
+            // [styles.active]: isHydrated && fetched,
+            [styles.active]: true,
+          })}
+        >
+          <Authorized hydratedOnly>
             <Anchor
               className={classNames(styles.item, {
                 [styles.has_dot]: hasFlowUpdates,
diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss
index fd01a468..3d2b0401 100644
--- a/src/containers/main/Header/styles.module.scss
+++ b/src/containers/main/Header/styles.module.scss
@@ -2,10 +2,10 @@
 
 @keyframes appear {
   from {
-    transform: translate(0, -$header_height);
+    opacity: 0;
   }
   to {
-    transform: translate(0, 0);
+    opacity: 1;
   }
 }
 
@@ -55,6 +55,12 @@
   user-select: none;
   text-transform: uppercase;
   align-items: center;
+  opacity: 0;
+  transition: all 250ms;
+
+  &.active {
+    opacity: 1;
+  }
 
   @include tablet {
     flex: 1;
diff --git a/src/hooks/auth/useAuth.ts b/src/hooks/auth/useAuth.ts
index c15a2ab7..91649d00 100644
--- a/src/hooks/auth/useAuth.ts
+++ b/src/hooks/auth/useAuth.ts
@@ -16,5 +16,6 @@ export const useAuth = () => {
     setToken: auth.setToken,
     isTester: auth.isTester,
     setIsTester: auth.setIsTester,
+    fetched: auth.fetched,
   };
 };
diff --git a/src/hooks/auth/useUser.ts b/src/hooks/auth/useUser.ts
index 23fa3efc..e362ede7 100644
--- a/src/hooks/auth/useUser.ts
+++ b/src/hooks/auth/useUser.ts
@@ -10,11 +10,19 @@ import { IUser } from '~/types/auth';
 import { showErrorToast } from '~/utils/errors/showToast';
 
 export const useUser = () => {
-  const { token, setUser } = useAuthStore();
-  const { data, mutate } = useSWR(token ? API.USER.ME : null, () => apiAuthGetUser(), {
-    onSuccess: data => setUser(data?.user || EMPTY_USER),
-    onError: error => showErrorToast(error),
-  });
+  const { token, setUser, setFetched, user } = useAuthStore();
+  const { data, mutate } = useSWR(
+    token ? API.USER.ME : null,
+    () => apiAuthGetUser(),
+    {
+      onSuccess: (data) => {
+        setUser(data?.user || EMPTY_USER);
+        setFetched(true);
+      },
+      onError: (error) => showErrorToast(error),
+      fallbackData: { user },
+    },
+  );
 
   const update = useCallback(
     async (user: Partial<IUser>, revalidate?: boolean) => {
@@ -25,7 +33,7 @@ export const useUser = () => {
 
       await mutate({ ...data, user: { ...data.user, ...user } }, revalidate);
     },
-    [data, mutate]
+    [data, mutate],
   );
 
   return { user: data?.user || EMPTY_USER, update };
diff --git a/src/hooks/node/useNodePermissions.ts b/src/hooks/node/useNodePermissions.ts
index a0825141..b1b9c7be 100644
--- a/src/hooks/node/useNodePermissions.ts
+++ b/src/hooks/node/useNodePermissions.ts
@@ -4,12 +4,24 @@ import { useUser } from '~/hooks/auth/useUser';
 import { INode } from '~/types';
 import { canEditNode, canLikeNode, canStarNode } from '~/utils/node';
 
+import { useAuth } from '../auth/useAuth';
+
 export const useNodePermissions = (node?: INode) => {
   const { user } = useUser();
+  const { fetched, isUser } = useAuth();
 
-  const edit = useMemo(() => canEditNode(node, user), [node, user]);
-  const like = useMemo(() => canLikeNode(node, user), [node, user]);
-  const star = useMemo(() => canStarNode(node, user), [node, user]);
+  const edit = useMemo(
+    () => fetched && isUser && canEditNode(node, user),
+    [node, user, fetched, isUser],
+  );
+  const like = useMemo(
+    () => fetched && isUser && canLikeNode(node, user),
+    [node, user, fetched, isUser],
+  );
+  const star = useMemo(
+    () => fetched && isUser && canStarNode(node, user),
+    [node, user, fetched, isUser],
+  );
 
   return [edit, like, star];
 };
diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx
index 0e600c8b..c4c7611f 100644
--- a/src/layouts/NodeLayout/index.tsx
+++ b/src/layouts/NodeLayout/index.tsx
@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { Superpower } from '~/components/boris/Superpower';
 import { ScrollHelperBottom } from '~/components/common/ScrollHelperBottom';
 import { Card } from '~/components/containers/Card';
@@ -18,7 +20,7 @@ import styles from './styles.module.scss';
 
 type IProps = {};
 
-const NodeLayout: FC<IProps> = () => {
+const NodeLayout: FC<IProps> = observer(() => {
   const { node, isLoading, update } = useNodeContext();
   const { head, block } = useNodeBlocks(node, isLoading);
   const [canEdit, canLike, canStar] = useNodePermissions(node);
@@ -70,6 +72,6 @@ const NodeLayout: FC<IProps> = () => {
       </Superpower>
     </div>
   );
-};
+});
 
 export { NodeLayout };
diff --git a/src/store/auth/AuthStore.ts b/src/store/auth/AuthStore.ts
index 52cb63c3..e80806bc 100644
--- a/src/store/auth/AuthStore.ts
+++ b/src/store/auth/AuthStore.ts
@@ -9,6 +9,7 @@ export class AuthStore {
   token: string = '';
   user: IUser = EMPTY_USER;
   isTesterInternal: boolean = false;
+  fetched = false;
 
   constructor() {
     makeAutoObservable(this);
@@ -46,4 +47,8 @@ export class AuthStore {
     this.token = '';
     this.setUser(EMPTY_USER);
   };
+
+  setFetched = (fetched: boolean) => {
+    this.fetched = fetched;
+  };
 }
diff --git a/src/utils/providers/AuthProvider.tsx b/src/utils/providers/AuthProvider.tsx
index 34aa4200..89d569e3 100644
--- a/src/utils/providers/AuthProvider.tsx
+++ b/src/utils/providers/AuthProvider.tsx
@@ -1,6 +1,7 @@
 import { createContext, FC, useContext } from 'react';
 
 import { observer } from 'mobx-react-lite';
+import { boolean } from 'yup';
 
 import { EMPTY_USER } from '~/constants/auth';
 import { useAuth } from '~/hooks/auth/useAuth';
@@ -18,6 +19,7 @@ const AuthContext = createContext<AuthProviderContextType>({
   logout: () => {},
   login: async () => EMPTY_USER,
   setToken: () => {},
+  fetched: false,
 });
 
 export const AuthProvider: FC = observer(({ children }) => {

From 2e88b79d67263d3d9c186f2355842086d15bad4d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <fedor.katurov@playrix.com>
Date: Tue, 22 Nov 2022 17:22:06 +0600
Subject: [PATCH 04/46] only show boris updates to fetched users

---
 src/containers/main/Header/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx
index 113409f3..4d676f53 100644
--- a/src/containers/main/Header/index.tsx
+++ b/src/containers/main/Header/index.tsx
@@ -27,7 +27,7 @@ export interface HeaderProps {}
 const Header: FC<HeaderProps> = observer(() => {
   const [isScrolled, setIsScrolled] = useState(false);
   const { showModal } = useModal();
-  const { isUser, user } = useAuth();
+  const { isUser, user, fetched } = useAuth();
   const { hasFlowUpdates, hasLabUpdates } = useFlow();
   const { borisCommentedAt } = useUpdates();
   const { open } = useSidebar();
@@ -44,9 +44,9 @@ const Header: FC<HeaderProps> = observer(() => {
     () =>
       isUser &&
       borisCommentedAt &&
-      (!user.last_seen_boris ||
+      ((fetched && !user.last_seen_boris) ||
         isBefore(new Date(user.last_seen_boris), new Date(borisCommentedAt))),
-    [borisCommentedAt, isUser, user.last_seen_boris],
+    [borisCommentedAt, isUser, user.last_seen_boris, fetched],
   );
 
   // Needed for SSR

From e2d870f1874967b904e4ecb311aa7ecac5c0ca8e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <fedor.katurov@playrix.com>
Date: Wed, 23 Nov 2022 14:31:00 +0600
Subject: [PATCH 05/46] fixed image attachments on SSR

---
 src/components/comment/CommentContent/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 17f1eac1..38cef4a8 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -70,8 +70,15 @@ const CommentContent: FC<IProps> = memo(
     }, [comment, onDelete]);
 
     const menu = useMemo(
-      () =>
-        canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
+      () => (
+        <div>
+          {canEdit && (
+            <Authorized>
+              <CommentMenu onDelete={onLockClick} onEdit={startEditing} />
+            </Authorized>
+          )}
+        </div>
+      ),
       [canEdit, startEditing, onLockClick],
     );
 
@@ -97,9 +104,10 @@ const CommentContent: FC<IProps> = memo(
     return (
       <div className={styles.wrap}>
         {!!prefix && <div className={styles.prefix}>{prefix}</div>}
+
         {comment.text.trim() && (
           <Group className={classnames(styles.block, styles.block_text)}>
-            <Authorized>{menu}</Authorized>
+            {menu}
 
             <Group className={styles.renderers}>
               {blocks.map(

From 50f561de96b560048a8aefc3af782d09634f54a4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 17:55:04 +0600
Subject: [PATCH 06/46] added lazy loading to flow images

---
 next.config.js                                       |  9 +++++++++
 src/components/flow/FlowCell/index.tsx               |  1 -
 src/components/flow/FlowCellImage/index.tsx          | 11 +++++++++--
 src/components/flow/FlowCellImage/styles.module.scss | 10 ----------
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/next.config.js b/next.config.js
index 306a0017..fe80bc2b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -22,5 +22,14 @@ module.exports = withBundleAnalyzer(
 
     /** don't try to optimize fonts */
     optimizeFonts: false,
+    images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.vault48.org',
+        pathname: '/**',
+      },
+    ],
+  },
   })
 );
diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx
index db3c3f9c..cf0308fe 100644
--- a/src/components/flow/FlowCell/index.tsx
+++ b/src/components/flow/FlowCell/index.tsx
@@ -119,7 +119,6 @@ const FlowCell: FC<Props> = ({
         {image && (
           <FlowCellImage
             src={image}
-            height={400}
             className={styles.thumb}
             style={{ backgroundColor: color }}
           />
diff --git a/src/components/flow/FlowCellImage/index.tsx b/src/components/flow/FlowCellImage/index.tsx
index e05bfc48..3d49b4f4 100644
--- a/src/components/flow/FlowCellImage/index.tsx
+++ b/src/components/flow/FlowCellImage/index.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import classNames from 'classnames';
+import Image from 'next/image';
 
 import { IMGProps } from '~/utils/types';
 
@@ -10,9 +11,15 @@ interface Props extends IMGProps {
   height?: number;
 }
 
-const FlowCellImage: FC<Props> = ({ className, children, ...rest }) => (
+const FlowCellImage: FC<Props> = ({
+  className,
+  children,
+  src,
+  alt,
+  ...rest
+}) => (
   <div className={classNames(styles.wrapper, className)}>
-    <img {...rest} src={rest.src} alt="" />
+    <Image {...rest} src={src!} alt={alt} placeholder="empty" layout="fill" />
     {children}
   </div>
 );
diff --git a/src/components/flow/FlowCellImage/styles.module.scss b/src/components/flow/FlowCellImage/styles.module.scss
index 442206b1..0bbdbccc 100644
--- a/src/components/flow/FlowCellImage/styles.module.scss
+++ b/src/components/flow/FlowCellImage/styles.module.scss
@@ -2,14 +2,4 @@
   width: 100%;
   height: 100%;
   position: relative;
-
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%, -50%);
-    object-fit: cover;
-  }
 }

From 71764af45fd304e3371a0c5bec047368b91a6209 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 18:08:35 +0600
Subject: [PATCH 07/46] added lazy loading to flow hero

---
 src/components/flow/FlowSwiperHero/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx
index dfc67e6f..4aa6ddb8 100644
--- a/src/components/flow/FlowSwiperHero/index.tsx
+++ b/src/components/flow/FlowSwiperHero/index.tsx
@@ -29,8 +29,11 @@ const autoplay = {
 };
 
 const lazy = {
-  loadPrevNextAmount: 3,
-  checkInView: false,
+  enabled: true,
+  loadPrevNextAmount: 2,
+  loadOnTransitionStart: true,
+  loadPrevNext: true,
+  checkInView: true,
 };
 
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
@@ -130,13 +133,14 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
         onClick={onClick}
         followFinger
         shortSwipes={false}
+        watchSlidesProgress
       >
         {heroes
-          .filter(node => node.thumbnail)
-          .map(node => (
+          .filter((node) => node.thumbnail)
+          .map((node) => (
             <SwiperSlide key={node.id}>
               <img
-                src={getURLFromString(node.thumbnail!, preset)}
+                data-src={getURLFromString(node.thumbnail!, preset)}
                 alt=""
                 className={classNames(styles.preview, 'swiper-lazy')}
               />

From e2ffdcd1f2ade4f61ba9853a9bc785216fe42142 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 19:00:56 +0600
Subject: [PATCH 08/46] fixed image preloading for swiper

---
 .../node/NodeImageSwiperBlock/index.tsx       | 33 ++++++++++++++-----
 .../NodeImageSwiperBlock/styles.module.scss   |  7 ++--
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 12f93888..b6ea234b 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -1,16 +1,24 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { observer } from 'mobx-react-lite';
-import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper';
+import Image from 'next/future/image';
+import SwiperCore, {
+  Keyboard,
+  Navigation,
+  Pagination,
+  SwiperOptions,
+} from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { INodeComponentProps } from '~/constants/node';
+import { ImagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { normalizeBrightColor } from '~/utils/color';
+import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
@@ -27,7 +35,9 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 const pagination = { type: 'fraction' as const };
 
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
-  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
+  const [controlledSwiper, setControlledSwiper] = useState<
+    SwiperClass | undefined
+  >(undefined);
   const showPhotoSwiper = useImageModal();
   const { isOpened: isModalActive } = useModal();
 
@@ -38,7 +48,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
       enabled: !isModalActive,
       onlyInViewport: true,
     }),
-    [isModalActive]
+    [isModalActive],
   );
 
   const updateSwiper = useCallback(() => {
@@ -53,14 +63,17 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
 
   const onOpenPhotoSwipe = useCallback(
     (index: number) => {
-      if (index !== controlledSwiper?.activeIndex && controlledSwiper?.slideTo) {
+      if (
+        index !== controlledSwiper?.activeIndex &&
+        controlledSwiper?.slideTo
+      ) {
         controlledSwiper.slideTo(index, 300);
         return;
       }
 
       showPhotoSwiper(images, index);
     },
-    [images, controlledSwiper, showPhotoSwiper]
+    [images, controlledSwiper, showPhotoSwiper],
   );
 
   useEffect(() => {
@@ -116,12 +129,16 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
       >
         {images.map((file, i) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <ImagePreloader
-              file={file}
+            <Image
+              src={getURL(file, ImagePresets['1600'])}
+              width={file.metadata?.width}
+              height={file.metadata?.height}
               onLoad={updateSwiper}
               onClick={() => onOpenPhotoSwipe(i)}
               className={styles.image}
               color={normalizeBrightColor(file?.metadata?.dominant_color)}
+              alt=""
+              priority={i < 2}
             />
           </SwiperSlide>
         ))}
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 46d4d405..0b2a3506 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -95,12 +95,12 @@
   width: auto;
   max-width: 100vw;
   opacity: 1;
-  //transform: translate(0, 10px);
   transform: scale(0.99);
   filter: brightness(50%) saturate(0.5);
   transition: opacity 0.5s, filter 0.5s, transform 0.5s;
   padding-bottom: $gap * 1.5;
   padding-top: $gap;
+  position: relative;
 
   &:global(.swiper-slide-active) {
     opacity: 1;
@@ -117,12 +117,11 @@
 }
 
 .image {
-  max-height: calc(100vh - 70px - 70px);
-  max-width: 100%;
+  max-inline-size: min(calc(100vh - 70px - 70px), 100vw);
+  block-size: auto;
   border-radius: $radius;
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
-  opacity: 0;
 
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,

From 4ded317fd05a23145cb1e0a64c101359b2f900d4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 19:12:21 +0600
Subject: [PATCH 09/46] set default node count on flow to 20

---
 src/hooks/flow/useFlowLoader.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/hooks/flow/useFlowLoader.ts b/src/hooks/flow/useFlowLoader.ts
index 4c6e5e68..0e505397 100644
--- a/src/hooks/flow/useFlowLoader.ts
+++ b/src/hooks/flow/useFlowLoader.ts
@@ -19,6 +19,7 @@ export const useFlowLoader = () => {
       const { before, after, heroes, recent, updated } = await getNodeDiff({
         start: new Date().toISOString(),
         end: new Date().toISOString(),
+        take: 20,
         with_heroes: true,
         with_updated: true,
         with_recent: true,
@@ -45,7 +46,9 @@ export const useFlowLoader = () => {
       setIsSyncing(true);
 
       const start = flow.nodes[0].created_at;
-      const end = flow.nodes[flow.nodes.length - 1] && flow.nodes[flow.nodes.length - 1].created_at;
+      const end =
+        flow.nodes[flow.nodes.length - 1] &&
+        flow.nodes[flow.nodes.length - 1].created_at;
 
       const data = await getNodeDiff({
         start,
@@ -58,7 +61,9 @@ export const useFlowLoader = () => {
 
       const nodes = uniq([
         ...(data.before || []),
-        ...(data.valid ? flow.nodes.filter(node => data.valid.includes(node.id)) : flow.nodes),
+        ...(data.valid
+          ? flow.nodes.filter((node) => data.valid.includes(node.id))
+          : flow.nodes),
         ...(data.after || []),
       ]);
 
@@ -75,7 +80,7 @@ export const useFlowLoader = () => {
       });
 
       // wait a little to debounce
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     } catch (error) {
       showErrorToast(error);
     } finally {

From 15a83b67933405f0a156ad9bb0d7ca5fb544f18b Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 22:30:40 +0600
Subject: [PATCH 10/46] added dominant color to node swiper block

---
 src/components/node/NodeImageSwiperBlock/index.tsx          | 1 +
 src/components/node/NodeImageSwiperBlock/styles.module.scss | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index b6ea234b..0e8b6102 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -130,6 +130,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         {images.map((file, i) => (
           <SwiperSlide className={styles.slide} key={file.id}>
             <Image
+              style={{ backgroundColor: file.metadata?.dominant_color }}
               src={getURL(file, ImagePresets['1600'])}
               width={file.metadata?.width}
               height={file.metadata?.height}
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 0b2a3506..85b6a749 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -122,6 +122,7 @@
   border-radius: $radius;
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
+  background-color: red;
 
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,

From 991f829216e9eb8f01d26016636375264a60ef6a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 22:42:42 +0600
Subject: [PATCH 11/46] removed red background on images without meta

---
 src/components/common/LoadingProgress/styles.module.scss    | 1 -
 src/components/node/NodeImageSwiperBlock/styles.module.scss | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/common/LoadingProgress/styles.module.scss b/src/components/common/LoadingProgress/styles.module.scss
index 61b5a8aa..fab3e022 100644
--- a/src/components/common/LoadingProgress/styles.module.scss
+++ b/src/components/common/LoadingProgress/styles.module.scss
@@ -29,7 +29,6 @@
   top: $gap + 4px;
   left: 50%;
   font: $font_12_semibold;
-  background: red;
   z-index: 100;
   transform: translate(-50%, 0);
   padding: 2px 10px;
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 85b6a749..0b2a3506 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -122,7 +122,6 @@
   border-radius: $radius;
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
-  background-color: red;
 
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,

From 10bb6f01b57baa16f21604548f6ce430f67d289c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Tue, 6 Dec 2022 21:00:37 +0600
Subject: [PATCH 12/46] added lazy loading to NodeImageSwiperBlock

---
 .../comment/CommentContent/index.tsx          |  4 +-
 src/components/common/Avatar/index.tsx        |  6 +-
 .../containers/CoverBackdrop/index.tsx        |  6 +-
 .../containers/PageCoverProvider/index.tsx    |  8 ++-
 .../editors/EditorUploadCoverButton/index.tsx | 12 ++--
 src/components/flow/FlowSwiperHero/index.tsx  |  4 +-
 src/components/main/UserButton/index.tsx      |  4 +-
 src/components/media/ImagePreloader/index.tsx | 48 ++++++++++---
 .../node/NodeAudioImageBlock/index.tsx        |  9 ++-
 .../node/NodeImageSwiperBlock/index.tsx       | 35 ++++++++--
 src/components/node/NodeRelatedItem/index.tsx |  6 +-
 .../profile/ProfileAvatar/index.tsx           |  2 +-
 .../sortable/SortableImageGrid/index.tsx      | 27 +++++--
 src/constants/urls.ts                         | 70 +++++++++++--------
 src/containers/dialogs/PhotoSwipe/index.tsx   | 14 ++--
 .../profile/ProfilePageLeft/index.tsx         |  4 +-
 src/utils/dom.ts                              | 57 +++++++++------
 17 files changed, 210 insertions(+), 106 deletions(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 38cef4a8..9999e9c2 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -18,7 +18,7 @@ import { Group } from '~/components/containers/Group';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
 import { UploadType } from '~/constants/uploads';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { IComment, IFile } from '~/types';
 import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
 import { append, assocPath, path, reduce } from '~/utils/ramda';
@@ -141,7 +141,7 @@ const CommentContent: FC<IProps> = memo(
                   onClick={() => onShowImageModal(groupped.image, index)}
                 >
                   <img
-                    src={getURL(file, ImagePresets['600'])}
+                    src={getURL(file, imagePresets['600'])}
                     alt={file.name}
                   />
                 </div>
diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
index 19d5a3f7..3f73ecea 100644
--- a/src/components/common/Avatar/index.tsx
+++ b/src/components/common/Avatar/index.tsx
@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Square } from '~/components/common/Square';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { getURLFromString } from '~/utils/dom';
 import { DivProps } from '~/utils/types';
@@ -14,12 +14,12 @@ interface Props extends DivProps {
   url?: string;
   username?: string;
   size?: number;
-  preset?: typeof ImagePresets[keyof typeof ImagePresets];
+  preset?: typeof imagePresets[keyof typeof imagePresets];
 }
 
 const Avatar = forwardRef<HTMLDivElement, Props>(
   (
-    { url, username, size, className, preset = ImagePresets.avatar, ...rest },
+    { url, username, size, className, preset = imagePresets.avatar, ...rest },
     ref,
   ) => {
     return (
diff --git a/src/components/containers/CoverBackdrop/index.tsx b/src/components/containers/CoverBackdrop/index.tsx
index 33aaa823..f9bc38a6 100644
--- a/src/components/containers/CoverBackdrop/index.tsx
+++ b/src/components/containers/CoverBackdrop/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { IUser } from '~/types/auth';
 import { getURL } from '~/utils/dom';
 
@@ -19,14 +19,14 @@ const CoverBackdrop: FC<IProps> = ({ cover }) => {
 
   const onLoad = useCallback(() => setIsLoaded(true), [setIsLoaded]);
 
-  const image = getURL(cover, ImagePresets.cover);
+  const image = getURL(cover, imagePresets.cover);
 
   useEffect(() => {
     if (!cover || !cover.url || !ref || !ref.current) return;
 
     ref.current.src = '';
     setIsLoaded(false);
-    ref.current.src = getURL(cover, ImagePresets.cover);
+    ref.current.src = getURL(cover, imagePresets.cover);
   }, [cover]);
 
   if (!cover) return null;
diff --git a/src/components/containers/PageCoverProvider/index.tsx b/src/components/containers/PageCoverProvider/index.tsx
index 68c6c288..acdad00e 100644
--- a/src/components/containers/PageCoverProvider/index.tsx
+++ b/src/components/containers/PageCoverProvider/index.tsx
@@ -2,7 +2,7 @@ import React, { createContext, FC, useContext, useState } from 'react';
 
 import { createPortal } from 'react-dom';
 
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
 
@@ -27,9 +27,11 @@ const PageCoverProvider: FC = ({ children }) => {
         createPortal(
           <div
             className={styles.wrap}
-            style={{ backgroundImage: `url("${getURL(cover, ImagePresets.cover)}")` }}
+            style={{
+              backgroundImage: `url("${getURL(cover, imagePresets.cover)}")`,
+            }}
           />,
-          document.body
+          document.body,
         )}
 
       {children}
diff --git a/src/components/editors/EditorUploadCoverButton/index.tsx b/src/components/editors/EditorUploadCoverButton/index.tsx
index cb792f88..b6f5f579 100644
--- a/src/components/editors/EditorUploadCoverButton/index.tsx
+++ b/src/components/editors/EditorUploadCoverButton/index.tsx
@@ -2,7 +2,7 @@ import React, { ChangeEvent, FC, useCallback, useEffect } from 'react';
 
 import { Icon } from '~/components/input/Icon';
 import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useUploader } from '~/hooks/data/useUploader';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { IEditorComponentProps } from '~/types/node';
@@ -18,10 +18,12 @@ const EditorUploadCoverButton: FC<IProps> = () => {
   const { uploadFile, files, pendingImages } = useUploader(
     UploadSubject.Editor,
     UploadTarget.Nodes,
-    values.cover ? [values.cover] : []
+    values.cover ? [values.cover] : [],
   );
 
-  const background = values.cover ? getURL(values.cover, ImagePresets['300']) : null;
+  const background = values.cover
+    ? getURL(values.cover, imagePresets['300'])
+    : null;
   const preview = pendingImages?.[0]?.thumbnail || '';
 
   const onDropCover = useCallback(() => {
@@ -31,13 +33,13 @@ const EditorUploadCoverButton: FC<IProps> = () => {
   const onInputChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(event.target.files || [])
-        .filter(file => getFileType(file) === UploadType.Image)
+        .filter((file) => getFileType(file) === UploadType.Image)
         .slice(0, 1);
 
       const result = await uploadFile(files[0]);
       setFieldValue('cover', result);
     },
-    [uploadFile, setFieldValue]
+    [uploadFile, setFieldValue],
   );
 
   useEffect(() => {
diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx
index 4aa6ddb8..d6e62839 100644
--- a/src/components/flow/FlowSwiperHero/index.tsx
+++ b/src/components/flow/FlowSwiperHero/index.tsx
@@ -7,7 +7,7 @@ import SwiperClass from 'swiper/types/swiper-class';
 
 import { Icon } from '~/components/input/Icon';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { ImagePresets, URLS } from '~/constants/urls';
+import { imagePresets, URLS } from '~/constants/urls';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useNavigation } from '~/hooks/navigation/useNavigation';
 import { IFlowNode } from '~/types';
@@ -45,7 +45,7 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
   >(undefined);
   const [currentIndex, setCurrentIndex] = useState(heroes.length);
   const preset = useMemo(
-    () => (isTablet ? ImagePresets.cover : ImagePresets.small_hero),
+    () => (isTablet ? imagePresets.cover : imagePresets.small_hero),
     [isTablet],
   );
 
diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx
index dd06a27b..b7e6c3c4 100644
--- a/src/components/main/UserButton/index.tsx
+++ b/src/components/main/UserButton/index.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { Avatar } from '~/components/common/Avatar';
 import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
 
@@ -20,7 +20,7 @@ const UserButton: FC<IProps> = ({ username, photo, onClick }) => {
     <button className={styles.wrap} onClick={onClick}>
       <Group horizontal className={styles.user_button}>
         <div className={styles.username}>{username}</div>
-        <Avatar url={getURL(photo, ImagePresets.avatar)} size={32} />
+        <Avatar url={getURL(photo, imagePresets.avatar)} size={32} />
       </Group>
     </button>
   );
diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx
index e650a8aa..f1b00ea3 100644
--- a/src/components/media/ImagePreloader/index.tsx
+++ b/src/components/media/ImagePreloader/index.tsx
@@ -1,4 +1,10 @@
-import React, { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import React, {
+  FC,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
 
@@ -6,7 +12,7 @@ import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad';
 import { Icon } from '~/components/input/Icon';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useResizeHandler } from '~/hooks/dom/useResizeHandler';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -24,7 +30,13 @@ interface IProps {
 const DEFAULT_WIDTH = 1920;
 const DEFAULT_HEIGHT = 1020;
 
-const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className }) => {
+const ImagePreloader: FC<IProps> = ({
+  file,
+  color,
+  onLoad,
+  onClick,
+  className,
+}) => {
   const [maxHeight, setMaxHeight] = useState(0);
   const [loaded, setLoaded] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -47,8 +59,11 @@ const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className })
   }, [setHasError]);
 
   const [width, height] = useMemo(
-    () => [file?.metadata?.width || DEFAULT_WIDTH, file?.metadata?.height || DEFAULT_HEIGHT],
-    [file]
+    () => [
+      file?.metadata?.width || DEFAULT_WIDTH,
+      file?.metadata?.height || DEFAULT_HEIGHT,
+    ],
+    [file],
   );
 
   useResizeHandler(onResize);
@@ -74,11 +89,18 @@ const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className })
         </defs>
 
         <g filter="url(#f1)">
-          <rect fill={fill} width="100%" height="100%" stroke="none" rx="8" ry="8" />
+          <rect
+            fill={fill}
+            width="100%"
+            height="100%"
+            stroke="none"
+            rx="8"
+            ry="8"
+          />
 
           {!hasError && (
             <image
-              xlinkHref={getURL(file, ImagePresets['300'])}
+              xlinkHref={getURL(file, imagePresets['300'])}
               width="100%"
               height="100%"
               onLoad={onLoad}
@@ -88,8 +110,12 @@ const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className })
       </svg>
 
       <ImageWithSSRLoad
-        className={classNames(styles.image, { [styles.is_loaded]: loaded }, className)}
-        src={getURL(file, ImagePresets['1600'])}
+        className={classNames(
+          styles.image,
+          { [styles.is_loaded]: loaded },
+          className,
+        )}
+        src={getURL(file, imagePresets['1600'])}
         alt=""
         key={file.id}
         onLoad={onImageLoad}
@@ -98,7 +124,9 @@ const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className })
         onError={onError}
       />
 
-      {!loaded && !hasError && <LoaderCircle className={styles.icon} size={64} />}
+      {!loaded && !hasError && (
+        <LoaderCircle className={styles.icon} size={64} />
+      )}
 
       {hasError && (
         <div className={styles.error}>
diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx
index 28726f0e..2563ae73 100644
--- a/src/components/node/NodeAudioImageBlock/index.tsx
+++ b/src/components/node/NodeAudioImageBlock/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { INodeComponentProps } from '~/constants/node';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
 import { path } from '~/utils/ramda';
@@ -19,7 +19,12 @@ const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
     <div className={styles.wrap}>
       <div
         className={styles.slide}
-        style={{ backgroundImage: `url("${getURL(path([0], images), ImagePresets.small_hero)}")` }}
+        style={{
+          backgroundImage: `url("${getURL(
+            path([0], images),
+            imagePresets.small_hero,
+          )}")`,
+        }}
       />
     </div>
   );
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 0e8b6102..040a3c44 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -1,5 +1,6 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
+import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import Image from 'next/future/image';
 import SwiperCore, {
@@ -7,22 +8,26 @@ import SwiperCore, {
   Navigation,
   Pagination,
   SwiperOptions,
+  Lazy,
 } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { INodeComponentProps } from '~/constants/node';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
+import { IFile } from '~/types';
 import { normalizeBrightColor } from '~/utils/color';
 import { getURL } from '~/utils/dom';
 
+import { imageSrcSets, ImagePreset } from '../../../constants/urls';
+
 import styles from './styles.module.scss';
 
-SwiperCore.use([Navigation, Pagination, Keyboard]);
+SwiperCore.use([Navigation, Pagination, Keyboard, Lazy]);
 
 interface IProps extends INodeComponentProps {}
 
@@ -34,6 +39,22 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 
 const pagination = { type: 'fraction' as const };
 
+const lazy = {
+  enabled: true,
+  loadPrevNextAmount: 1,
+  loadOnTransitionStart: true,
+  loadPrevNext: true,
+  checkInView: true,
+};
+
+const generateSrcSet = (file: IFile) =>
+  Object.keys(imageSrcSets)
+    .map(
+      (preset) =>
+        `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`,
+    )
+    .join(', ');
+
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   const [controlledSwiper, setControlledSwiper] = useState<
     SwiperClass | undefined
@@ -126,20 +147,22 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         autoHeight
         zoom
         navigation
+        watchSlidesProgress
+        lazy={lazy}
       >
         {images.map((file, i) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <Image
+            <img
               style={{ backgroundColor: file.metadata?.dominant_color }}
-              src={getURL(file, ImagePresets['1600'])}
+              data-srcset={generateSrcSet(file)}
               width={file.metadata?.width}
               height={file.metadata?.height}
               onLoad={updateSwiper}
               onClick={() => onOpenPhotoSwipe(i)}
-              className={styles.image}
+              className={classNames(styles.image, 'swiper-lazy')}
               color={normalizeBrightColor(file?.metadata?.dominant_color)}
               alt=""
-              priority={i < 2}
+              sizes="(max-width: 560px) 100vw, 50vh"
             />
           </SwiperSlide>
         ))}
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index be7186f1..cba4585b 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeRelatedItem/index.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad';
 import { Square } from '~/components/common/Square';
 import { Icon } from '~/components/input/Icon';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { INode } from '~/types';
@@ -42,7 +42,7 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   const thumb = useMemo(
     () =>
       item.thumbnail
-        ? getURL({ url: item.thumbnail }, ImagePresets.avatar)
+        ? getURL({ url: item.thumbnail }, imagePresets.avatar)
         : '',
     [item],
   );
@@ -68,7 +68,7 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   }, [width]);
 
   const image = useMemo(
-    () => getURL({ url: item.thumbnail }, ImagePresets.avatar),
+    () => getURL({ url: item.thumbnail }, imagePresets.avatar),
     [item.thumbnail],
   );
 
diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx
index 4168d385..7cdd652c 100644
--- a/src/components/profile/ProfileAvatar/index.tsx
+++ b/src/components/profile/ProfileAvatar/index.tsx
@@ -2,7 +2,7 @@ import React, { ChangeEvent, FC, useCallback } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
 import { Button } from '~/components/input/Button';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
 
diff --git a/src/components/sortable/SortableImageGrid/index.tsx b/src/components/sortable/SortableImageGrid/index.tsx
index ecc9e7c7..3b547dc8 100644
--- a/src/components/sortable/SortableImageGrid/index.tsx
+++ b/src/components/sortable/SortableImageGrid/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
 import { ImageUpload } from '~/components/upload/ImageUpload';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { UploadStatus } from '~/store/uploader/UploaderStore';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -18,8 +18,18 @@ interface SortableImageGridProps {
   className?: string;
   size?: number;
 }
-const renderItem = ({ item, onDelete }: { item: IFile; onDelete: (fileId: number) => void }) => (
-  <ImageUpload id={item.id} thumb={getURL(item, ImagePresets.cover)} onDrop={onDelete} />
+const renderItem = ({
+  item,
+  onDelete,
+}: {
+  item: IFile;
+  onDelete: (fileId: number) => void;
+}) => (
+  <ImageUpload
+    id={item.id}
+    thumb={getURL(item, imagePresets.cover)}
+    onDrop={onDelete}
+  />
 );
 
 const renderLocked = ({
@@ -29,7 +39,12 @@ const renderLocked = ({
   locked: UploadStatus;
   onDelete: (fileId: number) => void;
 }) => (
-  <ImageUpload thumb={locked.thumbnail} onDrop={onDelete} progress={locked.progress} uploading />
+  <ImageUpload
+    thumb={locked.thumbnail}
+    onDrop={onDelete}
+    progress={locked.progress}
+    uploading
+  />
 );
 
 const SortableImageGrid: FC<SortableImageGridProps> = ({
@@ -46,8 +61,8 @@ const SortableImageGrid: FC<SortableImageGridProps> = ({
     <SortableGrid
       items={items}
       locked={locked}
-      getID={it => it.id}
-      getLockedID={it => it.id}
+      getID={(it) => it.id}
+      getLockedID={(it) => it.id}
       renderItem={renderItem}
       renderItemProps={props}
       renderLocked={renderLocked}
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 5f1fc6f7..9f3a8b7b 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -1,49 +1,61 @@
-import { FlowDisplayVariant, INode } from "~/types";
+import { FlowDisplayVariant, INode } from '~/types';
 
 export const URLS = {
-  BASE: "/",
-  LAB: "/lab",
-  BORIS: "/boris",
+  BASE: '/',
+  LAB: '/lab',
+  BORIS: '/boris',
   AUTH: {
-    LOGIN: "/auth/login",
+    LOGIN: '/auth/login',
   },
   EXAMPLES: {
-    EDITOR: "/examples/edit",
-    IMAGE: "/examples/image",
+    EDITOR: '/examples/edit',
+    IMAGE: '/examples/image',
   },
   ERRORS: {
-    NOT_FOUND: "/lost",
-    BACKEND_DOWN: "/oopsie",
+    NOT_FOUND: '/lost',
+    BACKEND_DOWN: '/oopsie',
   },
-  NODE_URL: (id: INode["id"] | string) => `/post${id}`,
+  NODE_URL: (id: INode['id'] | string) => `/post${id}`,
   PROFILE_PAGE: (username: string) => `/profile/${username}`,
   SETTINGS: {
-    BASE: "/settings",
-    NOTES: "/settings/notes",
-    TRASH: "/settings/trash",
+    BASE: '/settings',
+    NOTES: '/settings/notes',
+    TRASH: '/settings/trash',
   },
-  NOTES: "/notes/",
+  NOTES: '/notes/',
   NOTE: (id: number) => `/notes/${id}`,
 };
 
-export const ImagePresets = {
-  "1600": "1600",
-  "600": "600",
-  "300": "300",
-  cover: "cover",
-  small_hero: "small_hero",
-  avatar: "avatar",
-  flow_square: "flow_square",
-  flow_vertical: "flow_vertical",
-  flow_horizontal: "flow_horizontal",
+export const imagePresets = {
+  '1600': '1600',
+  '900': '900',
+  '1200': '1200',
+  '600': '600',
+  '300': '300',
+  cover: 'cover',
+  small_hero: 'small_hero',
+  avatar: 'avatar',
+  flow_square: 'flow_square',
+  flow_vertical: 'flow_vertical',
+  flow_horizontal: 'flow_horizontal',
 } as const;
 
+export type ImagePreset = typeof imagePresets[keyof typeof imagePresets];
+
+export const imageSrcSets: Partial<Record<ImagePreset, number>> = {
+  [imagePresets[1600]]: 1600,
+  [imagePresets[900]]: 900,
+  [imagePresets[1200]]: 1200,
+  [imagePresets[600]]: 600,
+  [imagePresets[300]]: 300,
+};
+
 export const flowDisplayToPreset: Record<
   FlowDisplayVariant,
-  typeof ImagePresets[keyof typeof ImagePresets]
+  typeof imagePresets[keyof typeof imagePresets]
 > = {
-  single: "flow_square",
-  quadro: "flow_square",
-  vertical: "flow_vertical",
-  horizontal: "flow_horizontal",
+  single: 'flow_square',
+  quadro: 'flow_square',
+  vertical: 'flow_vertical',
+  horizontal: 'flow_horizontal',
 };
diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx
index f64395b0..a66ed514 100644
--- a/src/containers/dialogs/PhotoSwipe/index.tsx
+++ b/src/containers/dialogs/PhotoSwipe/index.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
 import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
 
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useModal } from '~/hooks/modal/useModal';
 import { IFile } from '~/types';
@@ -25,18 +25,18 @@ const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
   const { isTablet } = useWindowSize();
 
   useEffect(() => {
-    new Promise(async resolve => {
+    new Promise(async (resolve) => {
       const images = await Promise.all(
         items.map(
-          image =>
-            new Promise(resolveImage => {
+          (image) =>
+            new Promise((resolveImage) => {
               const img = new Image();
 
               img.onload = () => {
                 resolveImage({
                   src: getURL(
                     image,
-                    isTablet ? ImagePresets[900] : ImagePresets[1600],
+                    isTablet ? imagePresets[900] : imagePresets[1600],
                   ),
                   h: img.naturalHeight,
                   w: img.naturalWidth,
@@ -47,13 +47,13 @@ const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
                 resolveImage({});
               };
 
-              img.src = getURL(image, ImagePresets[1600]);
+              img.src = getURL(image, imagePresets[1600]);
             }),
         ),
       );
 
       resolve(images);
-    }).then(images => {
+    }).then((images) => {
       const ps = new PhotoSwipeJs(ref.current, PhotoSwipeUI_Default, images, {
         index: index || 0,
         closeOnScroll: false,
diff --git a/src/containers/profile/ProfilePageLeft/index.tsx b/src/containers/profile/ProfilePageLeft/index.tsx
index a5360f1e..b6f13062 100644
--- a/src/containers/profile/ProfilePageLeft/index.tsx
+++ b/src/containers/profile/ProfilePageLeft/index.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { Avatar } from '~/components/common/Avatar';
 import { Markdown } from '~/components/containers/Markdown';
 import { Placeholder } from '~/components/placeholders/Placeholder';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { IUser } from '~/types/auth';
 import { formatText } from '~/utils/dom';
 
@@ -22,7 +22,7 @@ const ProfilePageLeft: FC<IProps> = ({ username, profile, isLoading }) => {
         username={username}
         url={profile?.photo?.url}
         className={styles.avatar}
-        preset={ImagePresets['600']}
+        preset={imagePresets['600']}
       />
 
       <div className={styles.region}>
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 8e93e4e5..1bed443a 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -5,8 +5,12 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import isAfter from 'date-fns/isAfter';
 import ru from 'date-fns/locale/ru';
 
-import { COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES, ICommentBlock } from '~/constants/comment';
-import { ImagePresets } from '~/constants/urls';
+import {
+  COMMENT_BLOCK_DETECTORS,
+  COMMENT_BLOCK_TYPES,
+  ICommentBlock,
+} from '~/constants/comment';
+import { imagePresets } from '~/constants/urls';
 import { IFile, ValueOf } from '~/types';
 import { CONFIG } from '~/utils/config';
 import {
@@ -22,6 +26,8 @@ import {
 import { pipe } from '~/utils/ramda';
 import { splitTextByYoutube, splitTextOmitEmpty } from '~/utils/splitText';
 
+import { ImagePreset } from '../constants/urls';
+
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
   const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
 
@@ -36,7 +42,7 @@ export const describeArc = (
   y: number,
   radius: number,
   startAngle: number = 0,
-  endAngle: number = 360
+  endAngle: number = 360,
 ): string => {
   const start = polarToCartesian(x, y, radius, endAngle);
   const end = polarToCartesian(x, y, radius, startAngle);
@@ -64,12 +70,12 @@ export const describeArc = (
   ].join(' ');
 };
 
-export const getURLFromString = (
-  url?: string,
-  size?: typeof ImagePresets[keyof typeof ImagePresets]
-): string => {
+export const getURLFromString = (url?: string, size?: ImagePreset): string => {
   if (size) {
-    return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.remoteCurrent}cache/${size}/`);
+    return (url || '').replace(
+      'REMOTE_CURRENT://',
+      `${CONFIG.remoteCurrent}cache/${size}/`,
+    );
   }
 
   return (url || '').replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
@@ -77,7 +83,7 @@ export const getURLFromString = (
 
 export const getURL = (
   file: Partial<IFile> | undefined,
-  size?: typeof ImagePresets[keyof typeof ImagePresets]
+  size?: ImagePreset,
 ) => {
   return file?.url ? getURLFromString(file.url, size) : '';
 };
@@ -90,27 +96,34 @@ export const formatText = pipe(
   formatTextDash,
   formatTextMarkdown,
   formatTextSanitizeTags,
-  formatTextClickableUsernames
+  formatTextClickableUsernames,
 );
 
-export const formatTextParagraphs = (text: string): string => (text && formatText(text)) || '';
+export const formatTextParagraphs = (text: string): string =>
+  (text && formatText(text)) || '';
 
-export const findBlockType = (line: string): ValueOf<typeof COMMENT_BLOCK_TYPES> => {
-  const match = Object.values(COMMENT_BLOCK_DETECTORS).find(detector => line.match(detector.test));
+export const findBlockType = (
+  line: string,
+): ValueOf<typeof COMMENT_BLOCK_TYPES> => {
+  const match = Object.values(COMMENT_BLOCK_DETECTORS).find((detector) =>
+    line.match(detector.test),
+  );
   return (match && match.type) || COMMENT_BLOCK_TYPES.TEXT;
 };
 
 export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
   pipe(
     splitTextByYoutube,
-    splitTextOmitEmpty
-  )([text]).map(line => ({
+    splitTextOmitEmpty,
+  )([text]).map((line) => ({
     type: findBlockType(line),
     content: line,
   }));
 
-export const formatCommentText = (author?: string, text?: string): ICommentBlock[] =>
-  author && text ? splitCommentByBlocks(text) : [];
+export const formatCommentText = (
+  author?: string,
+  text?: string,
+): ICommentBlock[] => (author && text ? splitCommentByBlocks(text) : []);
 
 export const getPrettyDate = (date?: string): string => {
   if (!date) {
@@ -135,10 +148,12 @@ export const getYoutubeThumb = (url: string) => {
   const match =
     url &&
     url.match(
-      /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)(&(amp;)?[\w?=]*)?/
+      /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)(&(amp;)?[\w?=]*)?/,
     );
 
-  return match && match[1] ? `https://i.ytimg.com/vi/${match[1]}/hqdefault.jpg` : null;
+  return match && match[1]
+    ? `https://i.ytimg.com/vi/${match[1]}/hqdefault.jpg`
+    : null;
 };
 
 export const stringToColour = (str: string) => {
@@ -191,5 +206,7 @@ export const sizeOf = (bytes: number): string => {
     return '0.00 B';
   }
   let e = Math.floor(Math.log(bytes) / Math.log(1024));
-  return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+  return (
+    (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B'
+  );
 };

From 182ff11d2be8d85aad146d160318202a4c37494e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 7 Dec 2022 13:17:47 +0600
Subject: [PATCH 13/46] added lazy loading to lab

---
 src/components/lab/LabImage/index.tsx         | 12 +++++++++---
 .../lab/LabImage/styles.module.scss           |  2 ++
 .../node/NodeImageSwiperBlock/index.tsx       | 19 +++----------------
 src/utils/srcset.ts                           | 12 ++++++++++++
 4 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/srcset.ts

diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx
index b132691d..8bc085a4 100644
--- a/src/components/lab/LabImage/index.tsx
+++ b/src/components/lab/LabImage/index.tsx
@@ -1,13 +1,16 @@
 import React, { FC } from 'react';
 
+import Image from 'next/future/image';
 import SwiperCore, { A11y, Navigation, Pagination } from 'swiper';
 
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { INodeComponentProps } from '~/constants/node';
+import { imagePresets } from '~/constants/urls';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { normalizeBrightColor } from '~/utils/color';
+import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
@@ -19,7 +22,7 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
   const images = useNodeImages(node);
   const onClick = useGotoNode(node.id);
 
-  if (!images?.length && !isLoading) {
+  if (!images?.length) {
     return null;
   }
 
@@ -28,9 +31,12 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
   return (
     <Placeholder active={isLoading} width="100%" height={400}>
       <div className={styles.wrapper}>
-        <ImagePreloader
-          file={file}
+        <Image
+          src={getURL(file, imagePresets[600])}
+          width={file.metadata?.width}
+          height={file.metadata?.height}
           onClick={onClick}
+          alt=""
           className={styles.image}
           color={normalizeBrightColor(file?.metadata?.dominant_color)}
         />
diff --git a/src/components/lab/LabImage/styles.module.scss b/src/components/lab/LabImage/styles.module.scss
index bf0e220c..a8aecef7 100644
--- a/src/components/lab/LabImage/styles.module.scss
+++ b/src/components/lab/LabImage/styles.module.scss
@@ -51,6 +51,8 @@
   max-height: calc(100vh - 70px - 70px);
   max-width: 100%;
   transition: box-shadow 1s;
+  max-inline-size: 100%;
+  block-size: auto;
 
   @include tablet {
     padding-bottom: 0;
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 040a3c44..07b4807b 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -2,28 +2,23 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import Image from 'next/future/image';
 import SwiperCore, {
   Keyboard,
+  Lazy,
   Navigation,
   Pagination,
   SwiperOptions,
-  Lazy,
 } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { INodeComponentProps } from '~/constants/node';
-import { imagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
-import { IFile } from '~/types';
 import { normalizeBrightColor } from '~/utils/color';
-import { getURL } from '~/utils/dom';
-
-import { imageSrcSets, ImagePreset } from '../../../constants/urls';
+import { getFileSrcSet } from '~/utils/srcset';
 
 import styles from './styles.module.scss';
 
@@ -47,14 +42,6 @@ const lazy = {
   checkInView: true,
 };
 
-const generateSrcSet = (file: IFile) =>
-  Object.keys(imageSrcSets)
-    .map(
-      (preset) =>
-        `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`,
-    )
-    .join(', ');
-
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   const [controlledSwiper, setControlledSwiper] = useState<
     SwiperClass | undefined
@@ -154,7 +141,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
           <SwiperSlide className={styles.slide} key={file.id}>
             <img
               style={{ backgroundColor: file.metadata?.dominant_color }}
-              data-srcset={generateSrcSet(file)}
+              data-srcset={getFileSrcSet(file)}
               width={file.metadata?.width}
               height={file.metadata?.height}
               onLoad={updateSwiper}
diff --git a/src/utils/srcset.ts b/src/utils/srcset.ts
new file mode 100644
index 00000000..01272e09
--- /dev/null
+++ b/src/utils/srcset.ts
@@ -0,0 +1,12 @@
+import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+
+import { imageSrcSets, ImagePreset } from '../constants/urls';
+
+export const getFileSrcSet = (file: IFile) =>
+  Object.keys(imageSrcSets)
+    .map(
+      (preset) =>
+        `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`,
+    )
+    .join(', ');

From 02763fb8d41182c2c1c2e810969ce39fbc8a17e3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 7 Dec 2022 16:33:39 +0600
Subject: [PATCH 14/46] fixed aspect ratio calculation for lab nodes

---
 .../node/NodeImageSwiperBlock/styles.module.scss         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 0b2a3506..58d023ac 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -117,7 +117,8 @@
 }
 
 .image {
-  max-inline-size: min(calc(100vh - 70px - 70px), 100vw);
+  max-inline-size: calc(100vh - 150px);
+  writing-mode: vertical-rl;
   block-size: auto;
   border-radius: $radius;
   transition: box-shadow 1s;
@@ -133,7 +134,9 @@
     max-height: 100vh;
     border-radius: 0;
   }
-}
 
-.loader {
+  @media (orientation: portrait) {
+    max-inline-size: 100vw;
+    writing-mode: horizontal-tb;
+  }
 }

From f55665c9818753fbdd77bc2f30e1523031e30f1d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 8 Dec 2022 15:35:35 +0600
Subject: [PATCH 15/46] added srcsets to images for comments

---
 .../comment/CommentContent/index.tsx          | 20 +-------
 .../comment/CommentContent/styles.module.scss | 29 ------------
 .../comment/CommentImageGrid/index.tsx        | 46 +++++++++++++++++++
 .../CommentImageGrid/styles.module.scss       | 32 +++++++++++++
 4 files changed, 80 insertions(+), 47 deletions(-)
 create mode 100644 src/components/comment/CommentImageGrid/index.tsx
 create mode 100644 src/components/comment/CommentImageGrid/styles.module.scss

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 9999e9c2..89cbb9c4 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 
 import classnames from 'classnames';
-import classNames from 'classnames';
 
 import { CommentForm } from '~/components/comment/CommentForm';
 import { Authorized } from '~/components/containers/Authorized';
@@ -23,6 +22,7 @@ import { IComment, IFile } from '~/types';
 import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
 import { append, assocPath, path, reduce } from '~/utils/ramda';
 
+import { CommentImageGrid } from '../CommentImageGrid';
 import { CommentMenu } from '../CommentMenu';
 
 import styles from './styles.module.scss';
@@ -130,23 +130,7 @@ const CommentContent: FC<IProps> = memo(
           <div className={classnames(styles.block, styles.block_image)}>
             {menu}
 
-            <div
-              className={classNames(styles.images, {
-                [styles.multiple]: groupped.image.length > 1,
-              })}
-            >
-              {groupped.image.map((file, index) => (
-                <div
-                  key={file.id}
-                  onClick={() => onShowImageModal(groupped.image, index)}
-                >
-                  <img
-                    src={getURL(file, imagePresets['600'])}
-                    alt={file.name}
-                  />
-                </div>
-              ))}
-            </div>
+            <CommentImageGrid files={groupped.image} />
 
             <div className={styles.date}>
               {getPrettyDate(comment.created_at)}
diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss
index 14954339..7b6fd4c2 100644
--- a/src/components/comment/CommentContent/styles.module.scss
+++ b/src/components/comment/CommentContent/styles.module.scss
@@ -117,35 +117,6 @@
   touch-action: none;
 }
 
-.images {
-  cursor: pointer;
-
-  img {
-    max-height: 400px;
-    border-radius: $radius;
-    max-width: 100%;
-  }
-
-  &.multiple {
-    img {
-      max-height: none;
-    }
-
-    // Desktop devices
-    @include flexbin(25vh, $flexbin-space);
-
-    // Tablet devices
-    @media (max-width: $flexbin-tablet-max) {
-      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
-    }
-
-    // Phone devices
-    @media (max-width: $flexbin-phone-max) {
-      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
-    }
-  }
-}
-
 .audios {
   & > div {
     height: $comment_height;
diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx
new file mode 100644
index 00000000..14d8d55d
--- /dev/null
+++ b/src/components/comment/CommentImageGrid/index.tsx
@@ -0,0 +1,46 @@
+import React, { FC, useMemo } from 'react';
+
+import classNames from 'classnames';
+import Image from 'next/future/image';
+import Gallery, { ImageWithSize } from 'react-easy-image-gallery';
+
+import { imagePresets } from '~/constants/urls';
+import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+import { getFileSrcSet } from '~/utils/srcset';
+
+import styles from './styles.module.scss';
+
+interface CommentImageGridProps {
+  files: IFile[];
+}
+
+const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
+const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
+
+const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
+  return (
+    <div
+      className={classNames(styles.images, {
+        [styles.multiple]: files.length > 1,
+      })}
+    >
+      {files.map((file, index) => (
+        <div
+          key={file.id}
+          // onClick={() => onShowImageModal(groupped.image, index)}
+        >
+          <img
+            srcSet={getFileSrcSet(file)}
+            src={getURL(file, imagePresets['300'])}
+            alt={file.name}
+            className={styles.image}
+            sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export { CommentImageGrid };
diff --git a/src/components/comment/CommentImageGrid/styles.module.scss b/src/components/comment/CommentImageGrid/styles.module.scss
new file mode 100644
index 00000000..e7525fe8
--- /dev/null
+++ b/src/components/comment/CommentImageGrid/styles.module.scss
@@ -0,0 +1,32 @@
+@import 'src/styles/variables';
+@import '~flexbin/flexbin';
+
+.images {
+  cursor: pointer;
+
+  &.multiple {
+    // Desktop devices
+    @include flexbin(25vh, $flexbin-space);
+
+    // Tablet devices
+    @media (max-width: $flexbin-tablet-max) {
+      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
+    }
+
+    // Phone devices
+    @media (max-width: $flexbin-phone-max) {
+      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
+    }
+  }
+}
+
+.image {
+  max-height: 400px;
+  border-radius: $radius;
+  max-width: 100%;
+
+  .multiple & {
+    max-height: 250px;
+    max-inline-size: 250px;
+  }
+}

From 6957813cd0448ef684a6977939dbd7d011863777 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 8 Dec 2022 16:07:24 +0600
Subject: [PATCH 16/46] added husky

---
 .husky/pre-commit                                 | 4 ++++
 package.json                                      | 5 ++++-
 src/components/comment/CommentImageGrid/index.tsx | 4 +---
 yarn.lock                                         | 8 ++++----
 4 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100755 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000..d2ae35e8
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
diff --git a/package.json b/package.json
index 37c66c71..0a0e38d0 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,10 @@
   },
   "lint-staged": {
     "./**/*.{js,jsx,ts,tsx}": [
-      "next lint --fix"
+      "eslint --fix"
     ]
+  },
+  "husky": {
+    "pre-push": "lint-staged"
   }
 }
diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx
index 14d8d55d..73a8b886 100644
--- a/src/components/comment/CommentImageGrid/index.tsx
+++ b/src/components/comment/CommentImageGrid/index.tsx
@@ -1,8 +1,6 @@
-import React, { FC, useMemo } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
-import Image from 'next/future/image';
-import Gallery, { ImageWithSize } from 'react-easy-image-gallery';
 
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
diff --git a/yarn.lock b/yarn.lock
index 25addd5c..568f7393 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2809,10 +2809,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swiper@^8.0.7:
-  version "8.0.7"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.0.7.tgz#9eefe26c703e627a6dc7237c0109e172ce06e3f6"
-  integrity sha512-GHjDfxSZdupfU7LrSVOpaNaT7R1D2zxopPGBFz1UOXOtsYvVJLg0k6NvkTAD7qn0ASl5pTti82qoYwvYvIkg4g==
+swiper@^8.4.4:
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.4.5.tgz#149ca81f67393d3f33abddd0f968fc37e99980b5"
+  integrity sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==
   dependencies:
     dom7 "^4.0.4"
     ssr-window "^4.0.2"

From dd8b4e9dcf7b23b21aa0ea8ac992946e276a63d0 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 14 Dec 2022 09:39:12 +0600
Subject: [PATCH 17/46] fixed comment attachments click

---
 src/components/comment/CommentContent/index.tsx   | 8 +++++++-
 src/components/comment/CommentImageGrid/index.tsx | 8 +++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 89cbb9c4..d36cde9d 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -69,6 +69,12 @@ const CommentContent: FC<IProps> = memo(
       onDelete(comment.id, !comment.deleted_at);
     }, [comment, onDelete]);
 
+    const onImageClick = useCallback(
+      (file: IFile) =>
+        onShowImageModal(groupped.image, groupped.image.indexOf(file)),
+      [onShowImageModal, groupped],
+    );
+
     const menu = useMemo(
       () => (
         <div>
@@ -130,7 +136,7 @@ const CommentContent: FC<IProps> = memo(
           <div className={classnames(styles.block, styles.block_image)}>
             {menu}
 
-            <CommentImageGrid files={groupped.image} />
+            <CommentImageGrid files={groupped.image} onClick={onImageClick} />
 
             <div className={styles.date}>
               {getPrettyDate(comment.created_at)}
diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx
index 73a8b886..b6ca70f0 100644
--- a/src/components/comment/CommentImageGrid/index.tsx
+++ b/src/components/comment/CommentImageGrid/index.tsx
@@ -11,12 +11,13 @@ import styles from './styles.module.scss';
 
 interface CommentImageGridProps {
   files: IFile[];
+  onClick: (file: IFile) => void;
 }
 
 const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
 const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
 
-const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
+const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
   return (
     <div
       className={classNames(styles.images, {
@@ -24,10 +25,7 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
       })}
     >
       {files.map((file, index) => (
-        <div
-          key={file.id}
-          // onClick={() => onShowImageModal(groupped.image, index)}
-        >
+        <div key={file.id} onClick={() => onClick(file)}>
           <img
             srcSet={getFileSrcSet(file)}
             src={getURL(file, imagePresets['300'])}

From c888f13c606f1d902fb781f16a36c5796d0e1297 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 14 Dec 2022 09:43:01 +0600
Subject: [PATCH 18/46] fixed image preloading on PhotoSwipe modal

---
 src/containers/dialogs/PhotoSwipe/index.tsx | 30 ++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx
index a66ed514..a0437ec3 100644
--- a/src/containers/dialogs/PhotoSwipe/index.tsx
+++ b/src/containers/dialogs/PhotoSwipe/index.tsx
@@ -28,26 +28,38 @@ const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
     new Promise(async (resolve) => {
       const images = await Promise.all(
         items.map(
-          (image) =>
-            new Promise((resolveImage) => {
+          (file) =>
+            new Promise((resolve) => {
+              const src = getURL(
+                file,
+                isTablet ? imagePresets[900] : imagePresets[1600],
+              );
+
+              if (file.metadata?.width && file.metadata.height) {
+                resolve({
+                  src,
+                  w: file.metadata.width,
+                  h: file.metadata.height,
+                });
+
+                return;
+              }
+
               const img = new Image();
 
               img.onload = () => {
-                resolveImage({
-                  src: getURL(
-                    image,
-                    isTablet ? imagePresets[900] : imagePresets[1600],
-                  ),
+                resolve({
+                  src,
                   h: img.naturalHeight,
                   w: img.naturalWidth,
                 });
               };
 
               img.onerror = () => {
-                resolveImage({});
+                resolve({});
               };
 
-              img.src = getURL(image, imagePresets[1600]);
+              img.src = getURL(file, imagePresets[1600]);
             }),
         ),
       );

From f5ca7350499ccdeab2aed97beceebcf2db6726c5 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 14 Dec 2022 16:18:36 +0600
Subject: [PATCH 19/46] added hoverable hints

---
 .../comment/CommentImageGrid/index.tsx        |  13 +-
 .../CommentImageGrid/styles.module.scss       |   4 +
 src/components/common/Hoverable/index.tsx     |  30 +++
 .../common/Hoverable/styles.module.scss       |  43 ++++
 src/components/node/NodeRelated/index.tsx     |   8 +-
 src/components/node/NodeRelatedItem/index.tsx |   2 +-
 src/sprites/Sprites.tsx                       | 207 ++++++++++++++++--
 7 files changed, 278 insertions(+), 29 deletions(-)
 create mode 100644 src/components/common/Hoverable/index.tsx
 create mode 100644 src/components/common/Hoverable/styles.module.scss

diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx
index b6ca70f0..179f8ca8 100644
--- a/src/components/comment/CommentImageGrid/index.tsx
+++ b/src/components/comment/CommentImageGrid/index.tsx
@@ -2,6 +2,8 @@ import { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Hoverable } from '~/components/common/Hoverable';
+import { Icon } from '~/components/input/Icon';
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -24,8 +26,13 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
         [styles.multiple]: files.length > 1,
       })}
     >
-      {files.map((file, index) => (
-        <div key={file.id} onClick={() => onClick(file)}>
+      {files.map((file) => (
+        <Hoverable
+          key={file.id}
+          onClick={() => onClick(file)}
+          className={styles.item}
+          icon={<Icon icon="zoom" size={30} />}
+        >
           <img
             srcSet={getFileSrcSet(file)}
             src={getURL(file, imagePresets['300'])}
@@ -33,7 +40,7 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
             className={styles.image}
             sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
           />
-        </div>
+        </Hoverable>
       ))}
     </div>
   );
diff --git a/src/components/comment/CommentImageGrid/styles.module.scss b/src/components/comment/CommentImageGrid/styles.module.scss
index e7525fe8..2440b3f7 100644
--- a/src/components/comment/CommentImageGrid/styles.module.scss
+++ b/src/components/comment/CommentImageGrid/styles.module.scss
@@ -30,3 +30,7 @@
     max-inline-size: 250px;
   }
 }
+
+.item {
+  border-radius: $radius;
+}
diff --git a/src/components/common/Hoverable/index.tsx b/src/components/common/Hoverable/index.tsx
new file mode 100644
index 00000000..e628bfae
--- /dev/null
+++ b/src/components/common/Hoverable/index.tsx
@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface HoverableProps extends DivProps {
+  icon?: ReactNode;
+}
+
+const Hoverable: FC<HoverableProps> = ({
+  children,
+  className,
+  icon,
+  ...rest
+}) => (
+  <div
+    {...rest}
+    className={classNames(styles.hoverable, className, {
+      [styles.with_icon]: !!icon,
+    })}
+  >
+    {icon && <div className={styles.icon}>{icon}</div>}
+    {children}
+  </div>
+);
+
+export { Hoverable };
diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss
new file mode 100644
index 00000000..d6b48675
--- /dev/null
+++ b/src/components/common/Hoverable/styles.module.scss
@@ -0,0 +1,43 @@
+@import 'src/styles/variables';
+
+.hoverable {
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    inset: 0;
+    border-radius: $radius;
+    opacity: 0;
+    transition: all 100ms;
+    box-shadow: inset $color_primary 0 0 0 2px;
+    touch-action: none;
+    pointer-events: none;
+  }
+
+  &.with_icon::after {
+    background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
+  }
+
+  &:hover {
+    z-index: 10;
+    transition: all 100ms;
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.icon {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  z-index: 2;
+  opacity: 0;
+
+  .hoverable:hover & {
+    opacity: 1;
+  }
+}
diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx
index fc324707..6cce0818 100644
--- a/src/components/node/NodeRelated/index.tsx
+++ b/src/components/node/NodeRelated/index.tsx
@@ -1,5 +1,6 @@
 import React, { FC, ReactElement } from 'react';
 
+import { Hoverable } from '~/components/common/Hoverable';
 import { SubTitle } from '~/components/common/SubTitle';
 import { Group } from '~/components/containers/Group';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
@@ -7,7 +8,6 @@ import { INode } from '~/types';
 
 import styles from './styles.module.scss';
 
-
 interface IProps {
   title: ReactElement | string;
   items: Partial<INode>[];
@@ -19,8 +19,10 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
       <SubTitle className={styles.title}>{title}</SubTitle>
 
       <div className={styles.grid}>
-        {items.map(item => (
-          <NodeRelatedItem item={item} key={item.id} />
+        {items.map((item) => (
+          <Hoverable key={item.id}>
+            <NodeRelatedItem item={item} />
+          </Hoverable>
         ))}
       </div>
     </Group>
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index cba4585b..d33693b8 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeRelatedItem/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { FC, memo, useEffect, useMemo, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx
index 18bee9f6..4e81bef7 100644
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@@ -15,9 +15,33 @@ const Sprites: FC = () => (
     </defs>
 
     <g id="cell-single" stroke="none">
-      <rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect
+        x="13.5"
+        y="2.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
+      <rect
+        x="13.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
+      <rect
+        x="2.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -28,8 +52,24 @@ const Sprites: FC = () => (
     </g>
 
     <g id="cell-double-h" stroke="none">
-      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect
+        x="13.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
+      <rect
+        x="2.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -40,8 +80,24 @@ const Sprites: FC = () => (
     </g>
 
     <g id="cell-double-h-text" stroke="none">
-      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect
+        x="13.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
+      <rect
+        x="2.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -49,14 +105,54 @@ const Sprites: FC = () => (
         fill="currentColor"
         stroke="none"
       />
-      <rect x="4" y="4" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
-      <rect x="4" y="6" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
-      <rect x="4" y="8" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect
+        x="4"
+        y="4"
+        width="5"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="4"
+        y="6"
+        width="6"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="4"
+        y="8"
+        width="6"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
     </g>
 
     <g id="cell-double-v" stroke="none">
-      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect
+        x="13.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
+      <rect
+        x="13.5"
+        y="2.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -66,8 +162,24 @@ const Sprites: FC = () => (
       />
     </g>
     <g id="cell-double-v-text" stroke="none">
-      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect
+        x="13.5"
+        y="13.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
+      <rect
+        x="13.5"
+        y="2.5"
+        width="8"
+        height="8"
+        rx="1.5"
+        stroke="currentColor"
+        fill="none"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -75,9 +187,33 @@ const Sprites: FC = () => (
         fill="currentColor"
         stroke="none"
       />
-      <rect x="4" y="15" width="3" height="1" rx="0.5" fill="currentColor" stroke="none" />
-      <rect x="4" y="17" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
-      <rect x="4" y="19" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect
+        x="4"
+        y="15"
+        width="3"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="4"
+        y="17"
+        width="5"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="4"
+        y="19"
+        width="5"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
     </g>
 
     <g id="cell-quadro" stroke="none">
@@ -97,9 +233,33 @@ const Sprites: FC = () => (
         fill="currentColor"
         stroke="none"
       />
-      <rect x="4" y="15" width="4" height="1" rx="0.5" fill="currentColor" stroke="none" />
-      <rect x="4" y="17" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
-      <rect x="4" y="19" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect
+        x="4"
+        y="15"
+        width="4"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="4"
+        y="17"
+        width="6"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect
+        x="4"
+        y="19"
+        width="6"
+        height="1"
+        rx="0.5"
+        fill="currentColor"
+        stroke="none"
+      />
     </g>
 
     <g id="play">
@@ -190,6 +350,11 @@ const Sprites: FC = () => (
       <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />
     </g>
 
+    <g id="zoom" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M3 21v-6h2v2.6l3.1-3.1 1.4 1.4L6.4 19H9v2Zm12 0v-2h2.6l-3.1-3.1 1.4-1.4 3.1 3.1V15h2v6ZM8.1 9.5 5 6.4V9H3V3h6v2H6.4l3.1 3.1Zm7.8 0-1.4-1.4L17.6 5H15V3h6v6h-2V6.4Z" />
+    </g>
+
     <g id="profile" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
@@ -423,8 +588,6 @@ const Sprites: FC = () => (
         d="M11 13q.425 0 .713-.288Q12 12.425 12 12t-.287-.713Q11.425 11 11 11t-.712.287Q10 11.575 10 12t.288.712Q10.575 13 11 13Zm-4 8v-2l6-1V6.875q0-.375-.225-.675-.225-.3-.575-.35L7 5V3l5.5.9q1.1.2 1.8 1.025T15 6.85v12.8Zm-4 0v-2h2V5q0-.85.588-1.425Q6.175 3 7 3h10q.85 0 1.425.575Q19 4.15 19 5v14h2v2Zm4-2h10V5H7Z"
       />
     </g>
-
-    
   </svg>
 );
 

From 585f9b57cb3fb7d451fe99ec5d968e12ca24fa05 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 14 Dec 2022 17:21:56 +0600
Subject: [PATCH 20/46] added image preloader to swiper

---
 .../common/ImageLoadingWrapper/index.tsx      | 52 +++++++++++++++++++
 .../ImageLoadingWrapper/styles.module.scss    | 26 ++++++++++
 .../node/NodeImageSwiperBlock/index.tsx       | 50 +++++++++---------
 .../NodeImageSwiperBlock/styles.module.scss   |  4 ++
 4 files changed, 106 insertions(+), 26 deletions(-)
 create mode 100644 src/components/common/ImageLoadingWrapper/index.tsx
 create mode 100644 src/components/common/ImageLoadingWrapper/styles.module.scss

diff --git a/src/components/common/ImageLoadingWrapper/index.tsx b/src/components/common/ImageLoadingWrapper/index.tsx
new file mode 100644
index 00000000..3941a41b
--- /dev/null
+++ b/src/components/common/ImageLoadingWrapper/index.tsx
@@ -0,0 +1,52 @@
+import React, {
+  CSSProperties,
+  FC,
+  useCallback,
+  useMemo,
+  useReducer,
+  useState,
+} from 'react';
+
+import classNames from 'classnames';
+
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface ImageLoadingWrapperProps extends Omit<DivProps, 'children'> {
+  children: (props: { loading: boolean; onLoad: () => void }) => void;
+  preview?: string;
+}
+
+const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
+  className,
+  children,
+  preview,
+  color,
+  ...props
+}) => {
+  const [loading, onLoad] = useReducer((v) => false, true);
+
+  const style = useMemo<CSSProperties>(
+    () => ({
+      backgroundImage: `url('${preview}')`,
+      backgroundColor: color || 'var(--color-primary)',
+    }),
+    [preview, color],
+  );
+
+  return (
+    <div className={classNames(styles.wrapper, className)} {...props}>
+      {!!loading && !!preview && (
+        <div className={styles.preview}>
+          <div className={styles.thumbnail} style={style} />
+          <LoaderCircle size={32} />
+        </div>
+      )}
+      {children({ loading, onLoad })}
+    </div>
+  );
+};
+
+export { ImageLoadingWrapper };
diff --git a/src/components/common/ImageLoadingWrapper/styles.module.scss b/src/components/common/ImageLoadingWrapper/styles.module.scss
new file mode 100644
index 00000000..7b2ced09
--- /dev/null
+++ b/src/components/common/ImageLoadingWrapper/styles.module.scss
@@ -0,0 +1,26 @@
+@import 'src/styles/variables';
+
+.wrapper {
+  position: relative;
+}
+
+.preview {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  touch-action: none;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: $gap;
+}
+
+.thumbnail {
+  filter: blur(10px);
+  position: absolute;
+  inset: 0;
+  border-radius: $radius;
+  background-size: cover;
+  background-position: 50% 50%;
+  box-sizing: border-box;
+}
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 07b4807b..50a9c2db 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -12,12 +12,14 @@ import SwiperCore, {
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
-import { ImagePreloader } from '~/components/media/ImagePreloader';
+import { ImageLoadingWrapper } from '~/components/common/ImageLoadingWrapper/index';
 import { INodeComponentProps } from '~/constants/node';
+import { imagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { normalizeBrightColor } from '~/utils/color';
+import { getURL } from '~/utils/dom';
 import { getFileSrcSet } from '~/utils/srcset';
 
 import styles from './styles.module.scss';
@@ -101,18 +103,6 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
     return null;
   }
 
-  if (images.length === 1) {
-    return (
-      <div className={styles.single}>
-        <ImagePreloader
-          file={images[0]}
-          onClick={() => onOpenPhotoSwipe(0)}
-          className={styles.image}
-        />
-      </div>
-    );
-  }
-
   return (
     <div className={styles.wrapper}>
       <Swiper
@@ -137,20 +127,28 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         watchSlidesProgress
         lazy={lazy}
       >
-        {images.map((file, i) => (
+        {images.map((file, index) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <img
-              style={{ backgroundColor: file.metadata?.dominant_color }}
-              data-srcset={getFileSrcSet(file)}
-              width={file.metadata?.width}
-              height={file.metadata?.height}
-              onLoad={updateSwiper}
-              onClick={() => onOpenPhotoSwipe(i)}
-              className={classNames(styles.image, 'swiper-lazy')}
-              color={normalizeBrightColor(file?.metadata?.dominant_color)}
-              alt=""
-              sizes="(max-width: 560px) 100vw, 50vh"
-            />
+            <ImageLoadingWrapper
+              preview={getURL(file, imagePresets['300'])}
+              color={file.metadata?.dominant_color}
+            >
+              {({ loading, onLoad }) => (
+                <img
+                  data-srcset={getFileSrcSet(file)}
+                  width={file.metadata?.width}
+                  height={file.metadata?.height}
+                  onLoad={onLoad}
+                  onClick={() => onOpenPhotoSwipe(index)}
+                  className={classNames(styles.image, 'swiper-lazy', {
+                    [styles.loading]: loading,
+                  })}
+                  color={normalizeBrightColor(file?.metadata?.dominant_color)}
+                  alt=""
+                  sizes="(max-width: 560px) 100vw, 50vh"
+                />
+              )}
+            </ImageLoadingWrapper>
           </SwiperSlide>
         ))}
       </Swiper>
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 58d023ac..4e59a912 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -124,6 +124,10 @@
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
 
+  &.loading {
+    opacity: 0;
+  }
+
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
       transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;

From 60fdced2374e7c5cc6bf39899f8094fdd2a29082 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 15 Dec 2022 11:18:45 +0600
Subject: [PATCH 21/46] fixed 'show more' status while initial comment load

---
 src/containers/node/NodeComments/index.tsx | 18 ++++++++++++------
 src/hooks/comments/useGetComments.ts       | 11 ++++++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/containers/node/NodeComments/index.tsx b/src/containers/node/NodeComments/index.tsx
index 27252081..6fbcf1fd 100644
--- a/src/containers/node/NodeComments/index.tsx
+++ b/src/containers/node/NodeComments/index.tsx
@@ -34,15 +34,21 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
   const groupped: ICommentGroup[] = useGrouppedComments(
     comments,
     order,
-    lastSeenCurrent ?? undefined
+    lastSeenCurrent ?? undefined,
   );
 
   const more = useMemo(
     () =>
-      hasMore && <div className={styles.more}>
-        <LoadMoreButton isLoading={isLoadingMore} onClick={onLoadMoreComments} />
-      </div>,
-    [hasMore, onLoadMoreComments, isLoadingMore]
+      hasMore &&
+      !isLoading && (
+        <div className={styles.more}>
+          <LoadMoreButton
+            isLoading={isLoadingMore}
+            onClick={onLoadMoreComments}
+          />
+        </div>
+      ),
+    [hasMore, onLoadMoreComments, isLoadingMore, isLoading],
   );
 
   if (!node?.id) {
@@ -53,7 +59,7 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
     <div className={styles.wrap}>
       {order === 'DESC' && more}
 
-      {groupped.map(group => (
+      {groupped.map((group) => (
         <Comment
           nodeId={node.id!}
           key={group.ids.join()}
diff --git a/src/hooks/comments/useGetComments.ts b/src/hooks/comments/useGetComments.ts
index 29c42afa..9462aa7d 100644
--- a/src/hooks/comments/useGetComments.ts
+++ b/src/hooks/comments/useGetComments.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
@@ -26,6 +26,8 @@ const extractKey = (key: string) => {
 };
 
 export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
+  const [isInitialLoaded, setIsInitialLoaded] = useState(false);
+
   const { data, isValidating, setSize, size, mutate } = useSWRInfinite(
     getKey(nodeId),
     async (key: string) => {
@@ -39,6 +41,7 @@ export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
     },
     {
       fallbackData: fallbackData && [fallbackData],
+      onSuccess: () => setIsInitialLoaded(true),
     },
   );
 
@@ -52,13 +55,15 @@ export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
     [setSize, size],
   );
 
+  const isLoading = isValidating && !isInitialLoaded;
+
   return {
     comments,
     hasMore,
     onLoadMoreComments,
-    isLoading: !data && isValidating,
+    isLoading,
     mutate,
     data,
-    isLoadingMore: !!data?.length && isValidating,
+    isLoadingMore: !!data?.length && isValidating && isInitialLoaded,
   };
 };

From de4207ab63b3ab05a9ffb574c2a1a63f7d3478da Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 19 Dec 2022 17:11:23 +0600
Subject: [PATCH 22/46] fixed youtube image loading

---
 next.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/next.config.js b/next.config.js
index fe80bc2b..89180bbb 100644
--- a/next.config.js
+++ b/next.config.js
@@ -29,6 +29,11 @@ module.exports = withBundleAnalyzer(
         hostname: '*.vault48.org',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: '*.ytimg.com',
+        pathname: '/**',
+      },
     ],
   },
   })

From f7cd6316f57796aa6622f4939046a9a70e0a608a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 19 Dec 2022 18:27:51 +0600
Subject: [PATCH 23/46] fixed lab infinite scroll

---
 src/components/containers/Columns/index.tsx   | 44 ++++++++++++++---
 .../containers/Columns/styles.module.scss     |  5 +-
 src/containers/lab/LabGrid/index.tsx          | 29 ++++++-----
 src/hooks/dom/useScrollEnd.ts                 | 48 +++++++++++++++++++
 4 files changed, 103 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/dom/useScrollEnd.ts

diff --git a/src/components/containers/Columns/index.tsx b/src/components/containers/Columns/index.tsx
index 094beb83..b3a3759d 100644
--- a/src/components/containers/Columns/index.tsx
+++ b/src/components/containers/Columns/index.tsx
@@ -1,7 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import Masonry from 'react-masonry-css';
 
+import { useScrollEnd } from '~/hooks/dom/useScrollEnd';
+
 import styles from './styles.module.scss';
 
 const defaultColumns = {
@@ -11,12 +13,42 @@ const defaultColumns = {
 
 interface ColumnsProps {
   cols?: Record<number, number>;
+  onScrollEnd?: () => void;
+  hasMore?: boolean;
 }
 
-const Columns: FC<ColumnsProps> = ({ children, cols = defaultColumns }) => (
-  <Masonry className={styles.wrap} breakpointCols={cols} columnClassName={styles.column}>
-    {children}
-  </Masonry>
-);
+const Columns: FC<ColumnsProps> = ({
+  children,
+  cols = defaultColumns,
+  onScrollEnd,
+  hasMore,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [columns, setColumns] = useState<Element[]>([]);
+
+  useEffect(() => {
+    const childs = ref.current?.querySelectorAll(`.${styles.column}`);
+
+    if (!childs) return;
+
+    const timeout = setTimeout(() => setColumns([...childs]), 150);
+
+    return () => clearTimeout(timeout);
+  }, [ref.current]);
+
+  useScrollEnd(columns, onScrollEnd, { active: hasMore, threshold: 2 });
+
+  return (
+    <div ref={ref}>
+      <Masonry
+        className={styles.wrap}
+        breakpointCols={cols}
+        columnClassName={styles.column}
+      >
+        {children}
+      </Masonry>
+    </div>
+  );
+};
 
 export { Columns };
diff --git a/src/components/containers/Columns/styles.module.scss b/src/components/containers/Columns/styles.module.scss
index 41c651d9..63663702 100644
--- a/src/components/containers/Columns/styles.module.scss
+++ b/src/components/containers/Columns/styles.module.scss
@@ -1,11 +1,12 @@
-@import "src/styles/variables";
-@import "src/styles/mixins";
+@import 'src/styles/variables';
+@import 'src/styles/mixins';
 
 div.wrap {
   display: flex;
   width: 100%;
   margin-right: 0;
   padding: $gap $gap * 0.5;
+  align-items: flex-start;
 
   @include tablet {
     padding: 0 $gap * 0.5;
diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx
index a8b9c1a3..9ae933d6 100644
--- a/src/containers/lab/LabGrid/index.tsx
+++ b/src/containers/lab/LabGrid/index.tsx
@@ -11,27 +11,26 @@ import styles from './styles.module.scss';
 interface IProps {}
 
 const LabGrid: FC<IProps> = memo(() => {
-  const { nodes, hasMore, loadMore, search, setSearch } = useLabContext();
+  const { nodes, hasMore, loadMore, search, setSearch, isLoading } =
+    useLabContext();
 
   if (search && !nodes.length) {
     return <LabNoResults resetSearch={() => setSearch('')} />;
   }
 
   return (
-    <InfiniteScroll hasMore={hasMore} loadMore={loadMore}>
-      <div className={styles.wrap}>
-        <Columns>
-          {nodes.map((node) => (
-            <LabNode
-              node={node.node}
-              key={node.node.id}
-              lastSeen={node.last_seen}
-              commentCount={node.comment_count}
-            />
-          ))}
-        </Columns>
-      </div>
-    </InfiniteScroll>
+    <div className={styles.wrap}>
+      <Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}>
+        {nodes.map((node) => (
+          <LabNode
+            node={node.node}
+            key={node.node.id}
+            lastSeen={node.last_seen}
+            commentCount={node.comment_count}
+          />
+        ))}
+      </Columns>
+    </div>
   );
 });
 
diff --git a/src/hooks/dom/useScrollEnd.ts b/src/hooks/dom/useScrollEnd.ts
new file mode 100644
index 00000000..bc08f14d
--- /dev/null
+++ b/src/hooks/dom/useScrollEnd.ts
@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { throttle } from 'throttle-debounce';
+
+import { useWindowSize } from './useWindowSize';
+
+interface Options {
+  active?: boolean;
+  threshold?: number;
+}
+
+export const useScrollEnd = (
+  item: Element | Element[] | undefined | null,
+  callback?: () => void,
+  { active = true, threshold = 1.5 }: Options = {},
+) => {
+  const debouncedCallback = useMemo(
+    () => callback && throttle(1000, callback),
+    [callback],
+  );
+
+  const { innerHeight } = useWindowSize();
+
+  useEffect(() => {
+    if (!item || !active || !debouncedCallback) return;
+
+    const items = Array.isArray(item) ? item : [item];
+    const positions = items.map((it) => {
+      const { top, height } = it.getBoundingClientRect();
+      return top + window.scrollY + height;
+    });
+
+    const eventHandler = () => {
+      if (
+        !positions.some(
+          (it) => it < window.scrollY + window.innerHeight * threshold,
+        )
+      )
+        return;
+
+      debouncedCallback();
+    };
+
+    window.addEventListener('scroll', eventHandler);
+
+    return () => window.removeEventListener('scroll', eventHandler);
+  }, [item, active, innerHeight, debouncedCallback]);
+};

From ae7347fbb7e449e51dcf1946a3514f3570ae9304 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Tue, 20 Dec 2022 15:17:39 +0600
Subject: [PATCH 24/46] fixed upload progress

---
 .../input/ArcProgress/styles.module.scss      |  4 --
 .../sortable/SortableImageGrid/index.tsx      | 50 +++++++++----------
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/components/input/ArcProgress/styles.module.scss b/src/components/input/ArcProgress/styles.module.scss
index e5ba5472..e45a511e 100644
--- a/src/components/input/ArcProgress/styles.module.scss
+++ b/src/components/input/ArcProgress/styles.module.scss
@@ -3,8 +3,4 @@
 .icon {
   fill: $color_danger;
   stroke: none;
-
-  //path {
-  //  transition: d 0.5s;
-  //}
 }
diff --git a/src/components/sortable/SortableImageGrid/index.tsx b/src/components/sortable/SortableImageGrid/index.tsx
index 3b547dc8..086fd268 100644
--- a/src/components/sortable/SortableImageGrid/index.tsx
+++ b/src/components/sortable/SortableImageGrid/index.tsx
@@ -1,5 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import { imagePresets } from '~/constants/urls';
 import { UploadStatus } from '~/store/uploader/UploaderStore';
@@ -18,33 +20,31 @@ interface SortableImageGridProps {
   className?: string;
   size?: number;
 }
-const renderItem = ({
-  item,
-  onDelete,
-}: {
-  item: IFile;
-  onDelete: (fileId: number) => void;
-}) => (
-  <ImageUpload
-    id={item.id}
-    thumb={getURL(item, imagePresets.cover)}
-    onDrop={onDelete}
-  />
+const renderItem = observer(
+  ({ item, onDelete }: { item: IFile; onDelete: (fileId: number) => void }) => (
+    <ImageUpload
+      id={item.id}
+      thumb={getURL(item, imagePresets.cover)}
+      onDrop={onDelete}
+    />
+  ),
 );
 
-const renderLocked = ({
-  locked,
-  onDelete,
-}: {
-  locked: UploadStatus;
-  onDelete: (fileId: number) => void;
-}) => (
-  <ImageUpload
-    thumb={locked.thumbnail}
-    onDrop={onDelete}
-    progress={locked.progress}
-    uploading
-  />
+const renderLocked = observer(
+  ({
+    locked,
+    onDelete,
+  }: {
+    locked: UploadStatus;
+    onDelete: (fileId: number) => void;
+  }) => (
+    <ImageUpload
+      thumb={locked.thumbnail}
+      onDrop={onDelete}
+      progress={locked.progress}
+      uploading
+    />
+  ),
 );
 
 const SortableImageGrid: FC<SortableImageGridProps> = ({

From 0dd006d397e056fa34e620260366ebbb48cbd95d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Tue, 20 Dec 2022 15:30:50 +0600
Subject: [PATCH 25/46] made better hoverables

---
 .../comment/CommentImageGrid/styles.module.scss    |  1 +
 src/components/common/Hoverable/styles.module.scss |  3 ++-
 src/containers/lab/LabGrid/index.tsx               | 14 ++++++++------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/comment/CommentImageGrid/styles.module.scss b/src/components/comment/CommentImageGrid/styles.module.scss
index 2440b3f7..cfdc9d71 100644
--- a/src/components/comment/CommentImageGrid/styles.module.scss
+++ b/src/components/comment/CommentImageGrid/styles.module.scss
@@ -3,6 +3,7 @@
 
 .images {
   cursor: pointer;
+  overflow: visible !important;
 
   &.multiple {
     // Desktop devices
diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss
index d6b48675..e648faff 100644
--- a/src/components/common/Hoverable/styles.module.scss
+++ b/src/components/common/Hoverable/styles.module.scss
@@ -11,7 +11,6 @@
     border-radius: $radius;
     opacity: 0;
     transition: all 100ms;
-    box-shadow: inset $color_primary 0 0 0 2px;
     touch-action: none;
     pointer-events: none;
   }
@@ -23,6 +22,8 @@
   &:hover {
     z-index: 10;
     transition: all 100ms;
+    transform: scale(1.025) translateY(-2%);
+    box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
 
     &::after {
       opacity: 1;
diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx
index 9ae933d6..8f0b9896 100644
--- a/src/containers/lab/LabGrid/index.tsx
+++ b/src/containers/lab/LabGrid/index.tsx
@@ -1,5 +1,6 @@
 import { FC, memo } from 'react';
 
+import { Hoverable } from '~/components/common/Hoverable';
 import { Columns } from '~/components/containers/Columns';
 import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { LabNoResults } from '~/components/lab/LabNoResults';
@@ -22,12 +23,13 @@ const LabGrid: FC<IProps> = memo(() => {
     <div className={styles.wrap}>
       <Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}>
         {nodes.map((node) => (
-          <LabNode
-            node={node.node}
-            key={node.node.id}
-            lastSeen={node.last_seen}
-            commentCount={node.comment_count}
-          />
+          <Hoverable key={node.node.id}>
+            <LabNode
+              node={node.node}
+              lastSeen={node.last_seen}
+              commentCount={node.comment_count}
+            />
+          </Hoverable>
         ))}
       </Columns>
     </div>

From 1d7c09aa7b395b51b9d3ad6c06b061aeebc61d15 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Tue, 20 Dec 2022 15:35:39 +0600
Subject: [PATCH 26/46] fixed node related item hoverable border radius

---
 src/components/node/NodeRelated/index.tsx          | 2 +-
 src/components/node/NodeRelated/styles.module.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx
index 6cce0818..ea300ff6 100644
--- a/src/components/node/NodeRelated/index.tsx
+++ b/src/components/node/NodeRelated/index.tsx
@@ -20,7 +20,7 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
 
       <div className={styles.grid}>
         {items.map((item) => (
-          <Hoverable key={item.id}>
+          <Hoverable key={item.id} className={styles.item}>
             <NodeRelatedItem item={item} />
           </Hoverable>
         ))}
diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss
index ee44bbea..3bcd2b74 100644
--- a/src/components/node/NodeRelated/styles.module.scss
+++ b/src/components/node/NodeRelated/styles.module.scss
@@ -42,3 +42,7 @@
     }
   }
 }
+
+.item {
+  border-radius: $radius;
+}

From 77e8705f4169aca32ad5e15e4a85c816c72fe608 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 22 Dec 2022 13:45:23 +0600
Subject: [PATCH 27/46] fixed lab hover effect

---
 src/components/common/Hoverable/index.tsx     |  6 ++-
 .../common/Hoverable/styles.module.scss       | 41 +++++++++++++++----
 src/containers/lab/LabGrid/index.tsx          |  2 +-
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Hoverable/index.tsx b/src/components/common/Hoverable/index.tsx
index e628bfae..c64c5f3e 100644
--- a/src/components/common/Hoverable/index.tsx
+++ b/src/components/common/Hoverable/index.tsx
@@ -6,19 +6,23 @@ import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
+type HoverableEffect = 'rise' | 'shine';
+
 interface HoverableProps extends DivProps {
   icon?: ReactNode;
+  effect?: HoverableEffect;
 }
 
 const Hoverable: FC<HoverableProps> = ({
   children,
   className,
   icon,
+  effect = 'rise',
   ...rest
 }) => (
   <div
     {...rest}
-    className={classNames(styles.hoverable, className, {
+    className={classNames(styles.hoverable, styles[effect], className, {
       [styles.with_icon]: !!icon,
     })}
   >
diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss
index e648faff..bb4d7850 100644
--- a/src/components/common/Hoverable/styles.module.scss
+++ b/src/components/common/Hoverable/styles.module.scss
@@ -18,19 +18,46 @@
   &.with_icon::after {
     background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
   }
+}
 
-  &:hover {
-    z-index: 10;
-    transition: all 100ms;
-    transform: scale(1.025) translateY(-2%);
-    box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
+.hoverable.rise {
+  @media (hover: hover) {
+    &:hover {
+      z-index: 10;
+      transition: all 100ms;
+      transform: scale(1.025) translateY(-2%);
+      box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
 
-    &::after {
-      opacity: 1;
+      &::after {
+        opacity: 1;
+      }
     }
   }
 }
 
+.hoverable.shine {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      150deg,
+      #{transparentize(yellow, 0.75)},
+      transparent
+    );
+    z-index: 1;
+    border-radius: $radius;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    transition: all 250ms;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
 .icon {
   position: absolute;
   bottom: 4px;
diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx
index 8f0b9896..792a00e9 100644
--- a/src/containers/lab/LabGrid/index.tsx
+++ b/src/containers/lab/LabGrid/index.tsx
@@ -23,7 +23,7 @@ const LabGrid: FC<IProps> = memo(() => {
     <div className={styles.wrap}>
       <Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}>
         {nodes.map((node) => (
-          <Hoverable key={node.node.id}>
+          <Hoverable key={node.node.id} effect="shine">
             <LabNode
               node={node.node}
               lastSeen={node.last_seen}

From 85f3de775a5352a5641dc3c66ee7503d0bf9d6ae Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 22 Dec 2022 15:02:50 +0600
Subject: [PATCH 28/46] fixed image objectFit at flow

---
 src/components/flow/FlowCellImage/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/flow/FlowCellImage/index.tsx b/src/components/flow/FlowCellImage/index.tsx
index 3d49b4f4..58a8edfb 100644
--- a/src/components/flow/FlowCellImage/index.tsx
+++ b/src/components/flow/FlowCellImage/index.tsx
@@ -19,7 +19,14 @@ const FlowCellImage: FC<Props> = ({
   ...rest
 }) => (
   <div className={classNames(styles.wrapper, className)}>
-    <Image {...rest} src={src!} alt={alt} placeholder="empty" layout="fill" />
+    <Image
+      {...rest}
+      src={src!}
+      alt={alt}
+      placeholder="empty"
+      layout="fill"
+      objectFit="cover"
+    />
     {children}
   </div>
 );

From c30ecc1b81f3b704e0e32b46d2b084d9fad8e0be Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 26 Dec 2022 13:54:35 +0600
Subject: [PATCH 29/46] fixed comment loader animation

---
 src/components/node/NodeNoComments/index.tsx  | 17 ++++++----
 .../node/NodeNoComments/styles.module.scss    | 11 ++++++-
 src/containers/boris/BorisComments/index.tsx  | 32 +++++++++----------
 src/containers/node/NodeBottomBlock/index.tsx | 24 +++++++++++---
 4 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/components/node/NodeNoComments/index.tsx b/src/components/node/NodeNoComments/index.tsx
index 3ae20562..11db8302 100644
--- a/src/components/node/NodeNoComments/index.tsx
+++ b/src/components/node/NodeNoComments/index.tsx
@@ -9,20 +9,25 @@ import { t } from '~/utils/trans';
 import styles from './styles.module.scss';
 
 interface IProps {
-  is_loading?: boolean;
+  loading?: boolean;
   count?: number;
 }
 
-const NodeNoComments: FC<IProps> = ({ is_loading = false, count = 3 }) => {
+const NodeNoComments: FC<IProps> = ({ loading = false, count = 3 }) => {
   const items = useMemo(
-    () => [...new Array(count)].map((_, i) => <div className={styles.card} key={i} />),
-    [count]
+    () =>
+      [...new Array(count)].map((_, i) => (
+        <div className={styles.card} key={i} />
+      )),
+    [count],
   );
 
   return (
-    <Group className={classNames(styles.wrap, { is_loading })}>
+    <Group className={classNames(styles.wrap, { [styles.loading]: loading })}>
       {items}
-      {!is_loading && <div className={styles.nothing}>{t(ERRORS.NO_COMMENTS)}</div>}
+      {!loading && (
+        <div className={styles.nothing}>{t(ERRORS.NO_COMMENTS)}</div>
+      )}
     </Group>
   );
 };
diff --git a/src/components/node/NodeNoComments/styles.module.scss b/src/components/node/NodeNoComments/styles.module.scss
index cdae439c..3b350569 100644
--- a/src/components/node/NodeNoComments/styles.module.scss
+++ b/src/components/node/NodeNoComments/styles.module.scss
@@ -1,5 +1,14 @@
 @import 'src/styles/variables';
 
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+}
+
 .wrap {
   user-select: none;
   overflow: hidden;
@@ -17,7 +26,7 @@
     bottom: 0;
   }
 
-  &:global(.is_loading) {
+  &.loading {
     opacity: 1;
 
     .card {
diff --git a/src/containers/boris/BorisComments/index.tsx b/src/containers/boris/BorisComments/index.tsx
index b0052db2..7f17df1f 100644
--- a/src/containers/boris/BorisComments/index.tsx
+++ b/src/containers/boris/BorisComments/index.tsx
@@ -17,27 +17,27 @@ const BorisComments: FC<IProps> = () => {
   const user = useUserContext();
   const { isUser } = useAuth();
 
-  const {
-    isLoading,
-    comments,
-    onSaveComment,
-  } = useCommentContext();
+  const { isLoading, comments, onSaveComment } = useCommentContext();
   const { node } = useNodeContext();
 
   return (
-      <Group>
-        {(isUser || isSSR) && (
-          <NodeCommentFormSSR user={user} nodeId={node.id} saveComment={onSaveComment} />
-        )}
+    <Group>
+      {(isUser || isSSR) && (
+        <NodeCommentFormSSR
+          user={user}
+          nodeId={node.id}
+          saveComment={onSaveComment}
+        />
+      )}
 
-        {isLoading || !comments?.length ? (
-          <NodeNoComments is_loading count={7} />
-        ) : (
-          <NodeComments order="ASC" />
-        )}
+      {isLoading || !comments?.length ? (
+        <NodeNoComments loading count={7} />
+      ) : (
+        <NodeComments order="ASC" />
+      )}
 
-        <Footer />
-      </Group>
+      <Footer />
+    </Group>
   );
 };
 
diff --git a/src/containers/node/NodeBottomBlock/index.tsx b/src/containers/node/NodeBottomBlock/index.tsx
index 5532cf44..6553b7f7 100644
--- a/src/containers/node/NodeBottomBlock/index.tsx
+++ b/src/containers/node/NodeBottomBlock/index.tsx
@@ -26,7 +26,11 @@ interface IProps {
 const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
   const user = useUserContext();
   const { node, isLoading } = useNodeContext();
-  const { comments, isLoading: isLoadingComments, onSaveComment } = useCommentContext();
+  const {
+    comments,
+    isLoading: isLoadingComments,
+    onSaveComment,
+  } = useCommentContext();
   const { related, isLoading: isLoadingRelated } = useNodeRelatedContext();
   const { inline } = useNodeBlocks(node, isLoading);
   const { isUser } = useAuthProvider();
@@ -43,15 +47,21 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
             {inline && <div className={styles.inline}>{inline}</div>}
 
             <article>
-              {isLoading || isLoadingComments || (!comments.length && !inline) ? (
-                <NodeNoComments is_loading={isLoadingComments || isLoading} />
+              {isLoading ||
+              isLoadingComments ||
+              (!comments.length && !inline) ? (
+                <NodeNoComments loading={isLoadingComments || isLoading} />
               ) : (
                 <NodeComments order={commentsOrder} />
               )}
             </article>
 
             {isUser && !isLoading && (
-              <NodeCommentFormSSR nodeId={node.id} saveComment={onSaveComment} user={user} />
+              <NodeCommentFormSSR
+                nodeId={node.id}
+                saveComment={onSaveComment}
+                user={user}
+              />
             )}
           </Group>
 
@@ -66,7 +76,11 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
                   <NodeTagsBlock />
                 </div>
                 <div className={styles.left_item}>
-                  <NodeRelatedBlock isLoading={isLoadingRelated} node={node} related={related} />
+                  <NodeRelatedBlock
+                    isLoading={isLoadingRelated}
+                    node={node}
+                    related={related}
+                  />
                 </div>
               </Sticky>
             </div>

From e4c9d6571f0e0e748e2ccbd1f45cbb66e2ba7e5e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 26 Dec 2022 14:03:39 +0600
Subject: [PATCH 30/46] fixed related items loading animations

---
 src/components/node/NodeRelated/placeholder.tsx    |  2 +-
 src/components/node/NodeRelated/styles.module.scss | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/node/NodeRelated/placeholder.tsx b/src/components/node/NodeRelated/placeholder.tsx
index b9a8d011..e1749b2e 100644
--- a/src/components/node/NodeRelated/placeholder.tsx
+++ b/src/components/node/NodeRelated/placeholder.tsx
@@ -23,7 +23,7 @@ const NodeRelatedPlaceholder: FC<IProps> = memo(() => {
       </div>
 
       <div className={styles.grid}>
-        {range(0, 6).map(el => (
+        {range(0, 6).map((el) => (
           <div className={cell_style.item} key={el} />
         ))}
       </div>
diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss
index 3bcd2b74..1d4de34d 100644
--- a/src/components/node/NodeRelated/styles.module.scss
+++ b/src/components/node/NodeRelated/styles.module.scss
@@ -1,5 +1,14 @@
 @import 'src/styles/variables';
 
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
 .wrap {
   border-radius: $panel_radius;
   padding: $gap 0;
@@ -39,6 +48,7 @@
   .grid {
     div {
       background: $placeholder_bg;
+      animation: fade 0.5s infinite alternate;
     }
   }
 }

From 23701a5261ca54f0360e22065f53360f94b6cae9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 10 Mar 2023 10:06:26 +0600
Subject: [PATCH 31/46] disable blur on firefox mobile

---
 src/styles/_mixins.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 033defe2..905c471c 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -112,7 +112,16 @@
   @supports (
     (-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))
   ) {
-    @content;
+    @supports not (-moz-appearance: none) {
+      @content;
+    }
+
+    // disable blur on firefox mobile (until they fix its performance)
+    @supports (-moz-appearance: none) {
+      @media (hover: hover) {
+        @content;
+      }
+    }
   }
 }
 

From a39d000ff2a7ea54dbf63351affc80642a078229 Mon Sep 17 00:00:00 2001
From: muerwre <33246675+muerwre@users.noreply.github.com>
Date: Sat, 11 Mar 2023 17:16:31 +0600
Subject: [PATCH 32/46] add user notifications (#148)

* added notification settings

* notifications: added list to profile

* notifications: changed appearance for comment notifications
---
 src/api/notifications/settings.ts             |  17 +++
 src/api/notifications/types.ts                |  13 +++
 .../common/InlineUsername/index.tsx           |  20 ++++
 .../common/InlineUsername/styles.module.scss  |   6 +
 .../notifications/NotificationBadge/index.tsx |  77 +++++++++++++
 .../NotificationBadge/styles.module.scss      |  33 ++++++
 .../NotificationBubble/index.tsx              |  47 --------
 .../NotificationBubble/styles.module.scss     | 106 ------------------
 .../NotificationComment/index.tsx             |  43 +++++++
 .../NotificationComment/styles.module.scss    |  52 +++++++++
 .../NotificationMessage/index.tsx             |  32 ------
 .../ProfileSidebarNotes/styles.module.scss    |   7 --
 .../ProfileSidebarNotifications/index.tsx     |  27 +++++
 src/constants/api.ts                          |   4 +
 .../notifications/NotificationList/index.tsx  |  34 ++++++
 .../NotificationList/styles.module.scss       |  41 +++++++
 .../profile/ProfileSidebarMenu/index.tsx      |   9 +-
 .../sidebars/ProfileSidebar/index.tsx         |   4 +-
 .../notifications/useNotificationSettings.ts  |  28 +++++
 .../useNotificationSettingsRequest.ts         |  36 ++++++
 .../notifications/useNotificationsList.ts     |  20 ++++
 src/pages/_app.tsx                            |  43 +++----
 src/styles/_mixins.scss                       |   8 ++
 src/types/auth/index.ts                       |   6 +
 src/types/notifications/index.ts              |  16 +++
 src/utils/dom.ts                              |  10 +-
 src/utils/providers/NotificationProvider.tsx  |  31 +++++
 27 files changed, 552 insertions(+), 218 deletions(-)
 create mode 100644 src/api/notifications/settings.ts
 create mode 100644 src/api/notifications/types.ts
 create mode 100644 src/components/common/InlineUsername/index.tsx
 create mode 100644 src/components/common/InlineUsername/styles.module.scss
 create mode 100644 src/components/notifications/NotificationBadge/index.tsx
 create mode 100644 src/components/notifications/NotificationBadge/styles.module.scss
 delete mode 100644 src/components/notifications/NotificationBubble/index.tsx
 delete mode 100644 src/components/notifications/NotificationBubble/styles.module.scss
 create mode 100644 src/components/notifications/NotificationComment/index.tsx
 create mode 100644 src/components/notifications/NotificationComment/styles.module.scss
 delete mode 100644 src/components/notifications/NotificationMessage/index.tsx
 delete mode 100644 src/components/profile/ProfileSidebarNotes/styles.module.scss
 create mode 100644 src/components/profile/ProfileSidebarNotifications/index.tsx
 create mode 100644 src/containers/notifications/NotificationList/index.tsx
 create mode 100644 src/containers/notifications/NotificationList/styles.module.scss
 create mode 100644 src/hooks/notifications/useNotificationSettings.ts
 create mode 100644 src/hooks/notifications/useNotificationSettingsRequest.ts
 create mode 100644 src/hooks/notifications/useNotificationsList.ts
 create mode 100644 src/types/notifications/index.ts
 create mode 100644 src/utils/providers/NotificationProvider.tsx

diff --git a/src/api/notifications/settings.ts b/src/api/notifications/settings.ts
new file mode 100644
index 00000000..8f670dac
--- /dev/null
+++ b/src/api/notifications/settings.ts
@@ -0,0 +1,17 @@
+import { API } from '~/constants/api';
+import { api, cleanResult } from '~/utils/api';
+
+import {
+  ApiGetNotificationSettingsResponse,
+  ApiGetNotificationsResponse,
+} from './types';
+
+export const apiGetNotificationSettings = () =>
+  api
+    .get<ApiGetNotificationSettingsResponse>(API.NOTIFICATIONS.SETTINGS)
+    .then(cleanResult);
+
+export const apiGetNotifications = () =>
+  api
+    .get<ApiGetNotificationsResponse>(API.NOTIFICATIONS.LIST)
+    .then(cleanResult);
diff --git a/src/api/notifications/types.ts b/src/api/notifications/types.ts
new file mode 100644
index 00000000..b242fc76
--- /dev/null
+++ b/src/api/notifications/types.ts
@@ -0,0 +1,13 @@
+import { NotificationItem } from '~/types/notifications';
+
+export interface ApiGetNotificationSettingsResponse {
+  enabled: boolean;
+  flow: boolean;
+  comments: boolean;
+  last_seen?: string | null;
+  last_date?: string | null;
+}
+
+export interface ApiGetNotificationsResponse {
+  items?: NotificationItem[];
+}
diff --git a/src/components/common/InlineUsername/index.tsx b/src/components/common/InlineUsername/index.tsx
new file mode 100644
index 00000000..1bfb3124
--- /dev/null
+++ b/src/components/common/InlineUsername/index.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { useColorFromString } from '~/hooks/color/useColorFromString';
+
+import styles from './styles.module.scss';
+
+interface InlineUsernameProps {
+  children: string;
+}
+
+const InlineUsername: FC<InlineUsernameProps> = ({ children }) => {
+  const backgroundColor = useColorFromString(children);
+  return (
+    <span style={{ backgroundColor }} className={styles.username}>
+      ~{children}
+    </span>
+  );
+};
+
+export { InlineUsername };
diff --git a/src/components/common/InlineUsername/styles.module.scss b/src/components/common/InlineUsername/styles.module.scss
new file mode 100644
index 00000000..552c701a
--- /dev/null
+++ b/src/components/common/InlineUsername/styles.module.scss
@@ -0,0 +1,6 @@
+.username {
+  font-size: 0.9em;
+  padding: 0 2px;
+  text-transform: lowercase;
+  border-radius: 0.2em;
+}
diff --git a/src/components/notifications/NotificationBadge/index.tsx b/src/components/notifications/NotificationBadge/index.tsx
new file mode 100644
index 00000000..20c32a29
--- /dev/null
+++ b/src/components/notifications/NotificationBadge/index.tsx
@@ -0,0 +1,77 @@
+import React, { FC } from 'react';
+
+import { Anchor } from '~/components/common/Anchor';
+import { InlineUsername } from '~/components/common/InlineUsername';
+import { Square } from '~/components/common/Square';
+import { Card } from '~/components/containers/Card';
+import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
+import { NotificationItem, NotificationType } from '~/types/notifications';
+import { formatText, getPrettyDate, getURLFromString } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface NotificationBadgeProps {
+  item: NotificationItem;
+}
+
+const getTitle = (item: NotificationItem) => {
+  if (!item.user.username) {
+    return '';
+  }
+
+  switch (item.type) {
+    case NotificationType.Comment:
+      return (
+        <span>
+          <InlineUsername>{item.user.username}</InlineUsername> пишет:
+        </span>
+      );
+    case NotificationType.Node:
+      return (
+        <span>
+          Новый пост от <InlineUsername>{item.user.username}</InlineUsername>:
+        </span>
+      );
+  }
+};
+
+const getContent = (item: NotificationItem) => {
+  switch (item.type) {
+    case NotificationType.Comment:
+      return (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: formatText(item.text),
+          }}
+        />
+      );
+    case NotificationType.Node:
+      return (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: formatText(item.text),
+          }}
+        />
+      );
+  }
+};
+
+const getIcon = (item: NotificationItem) => {
+  return <Square image={getURLFromString(item.thumbnail, 'avatar')} />;
+};
+
+const NotificationBadge: FC<NotificationBadgeProps> = ({ item }) => (
+  <Anchor href={item.url} className={styles.link}>
+    <div className={styles.message}>
+      <div className={styles.icon}>{getIcon(item)}</div>
+
+      <div>
+        <b className={styles.title}>{getTitle(item)}</b>
+        <div className={styles.text}>{getContent(item)}</div>
+        <div className={styles.time}>{getPrettyDate(item.created_at)}</div>
+      </div>
+    </div>
+  </Anchor>
+);
+
+export { NotificationBadge };
diff --git a/src/components/notifications/NotificationBadge/styles.module.scss b/src/components/notifications/NotificationBadge/styles.module.scss
new file mode 100644
index 00000000..8468237e
--- /dev/null
+++ b/src/components/notifications/NotificationBadge/styles.module.scss
@@ -0,0 +1,33 @@
+@import 'src/styles/variables';
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.message {
+  font: $font_14_regular;
+  line-height: 1.3em;
+  padding: $gap/2 $gap/2 $gap/4 $gap/2;
+  min-height: calc(1.3em * 3 + $gap);
+  display: grid;
+  grid-template-columns: 40px auto;
+  column-gap: $gap;
+}
+
+.text {
+  @include clamp(2, 14px);
+  text-overflow: ellipsis;
+}
+
+.title {
+  font: $font_14_semibold;
+  margin-bottom: $gap / 2;
+}
+
+.time {
+  font: $font_10_regular;
+  text-align: right;
+  margin-top: 2px;
+  color: $gray_75;
+}
diff --git a/src/components/notifications/NotificationBubble/index.tsx b/src/components/notifications/NotificationBubble/index.tsx
deleted file mode 100644
index 0ef0d796..00000000
--- a/src/components/notifications/NotificationBubble/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { createElement, FC } from 'react';
-
-import { Icon } from '~/components/input/Icon';
-import { useRandomPhrase } from '~/constants/phrases';
-import { INotification, NOTIFICATION_TYPES } from '~/types';
-
-import { NotificationMessage } from '../NotificationMessage';
-
-import styles from './styles.module.scss';
-
-interface IProps {
-  notifications: INotification[];
-  onClick: (notification: INotification) => void;
-}
-
-const NOTIFICATION_RENDERERS = {
-  [NOTIFICATION_TYPES.message]: NotificationMessage,
-};
-
-const NotificationBubble: FC<IProps> = ({ notifications, onClick }) => {
-  const placeholder = useRandomPhrase('NOTHING_HERE');
-
-  return (
-    <div className={styles.wrap}>
-      <div className={styles.list}>
-        {notifications.length === 0 && (
-          <div className={styles.placeholder}>
-            <Icon icon="bell_ring" />
-            <div>{placeholder}</div>
-          </div>
-        )}
-        {notifications.length > 0 &&
-          notifications
-            .filter(notification => notification.type && NOTIFICATION_RENDERERS[notification.type])
-            .map(notification =>
-              createElement(NOTIFICATION_RENDERERS[notification.type], {
-                notification,
-                onClick,
-                key: notification.content.id,
-              })
-            )}
-      </div>
-    </div>
-  );
-};
-
-export { NotificationBubble };
diff --git a/src/components/notifications/NotificationBubble/styles.module.scss b/src/components/notifications/NotificationBubble/styles.module.scss
deleted file mode 100644
index d351ef4d..00000000
--- a/src/components/notifications/NotificationBubble/styles.module.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@import 'src/styles/variables';
-
-$notification_color: $content_bg_dark;
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.wrap {
-  position: absolute;
-  background: $notification_color;
-  top: 42px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  border-radius: $radius;
-  animation: appear 0.25s forwards;
-  z-index: 2;
-
-  &::before {
-    content: ' ';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 0 16px 16px;
-    border-color: transparent transparent $notification_color transparent;
-    position: absolute;
-    left: 50%;
-    top: -16px;
-    transform: translate(-20px, 0);
-  }
-}
-
-.list {
-  width: 300px;
-  max-width: 100vw;
-  min-width: 0;
-  max-height: 400px;
-  overflow: auto;
-}
-
-.item {
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  flex-direction: column;
-  padding: $gap;
-  min-width: 0;
-  cursor: pointer;
-
-  svg {
-    fill: white;
-    margin-right: $gap;
-  }
-}
-
-.item_head {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-.item_title {
-  flex: 1;
-  white-space: nowrap;
-  font: $font_14_semibold;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  // text-transform: none;
-}
-
-.item_text {
-  font: $font_14_regular;
-  max-height: 2.4em;
-  padding-left: 30px;
-  overflow: hidden;
-}
-
-.placeholder {
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-transform: uppercase;
-  font: $font_16_semibold;
-  box-sizing: border-box;
-  padding: 80px;
-  text-align: center;
-  line-height: 1.6em;
-
-  svg {
-    width: 120px;
-    height: 120px;
-    opacity: 0.05;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
diff --git a/src/components/notifications/NotificationComment/index.tsx b/src/components/notifications/NotificationComment/index.tsx
new file mode 100644
index 00000000..2f7c1b42
--- /dev/null
+++ b/src/components/notifications/NotificationComment/index.tsx
@@ -0,0 +1,43 @@
+import { FC } from 'react';
+
+import { Anchor } from '~/components/common/Anchor';
+import { InlineUsername } from '~/components/common/InlineUsername';
+import { Square } from '~/components/common/Square';
+import { NotificationItem } from '~/types/notifications';
+import { formatText, getPrettyDate, getURLFromString } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface NotificationCommentProps {
+  item: NotificationItem;
+}
+
+const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
+  <Anchor href={item.url} className={styles.link}>
+    <div className={styles.message}>
+      <div className={styles.icon}>
+        <Square
+          image={getURLFromString(item.user.photo, 'avatar')}
+          className={styles.circle}
+        />
+      </div>
+
+      <div className={styles.content}>
+        <b className={styles.title}>
+          <span>
+            <InlineUsername>{item.user.username}</InlineUsername>:
+          </span>
+        </b>
+        <div className={styles.text}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: formatText(item.text),
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  </Anchor>
+);
+
+export { NotificationComment };
diff --git a/src/components/notifications/NotificationComment/styles.module.scss b/src/components/notifications/NotificationComment/styles.module.scss
new file mode 100644
index 00000000..6d57a501
--- /dev/null
+++ b/src/components/notifications/NotificationComment/styles.module.scss
@@ -0,0 +1,52 @@
+@import 'src/styles/variables';
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.message {
+  font: $font_14_regular;
+  line-height: 1.3em;
+  padding: $gap/2 $gap/2 $gap/4 $gap/2;
+  min-height: calc(1.3em * 3 + $gap);
+  display: grid;
+  grid-template-columns: 40px auto;
+  column-gap: 0;
+}
+
+.content {
+  background: $content_bg;
+  padding: 5px;
+  border-radius: 0 4px 4px 4px;
+  position: relative;
+
+  &:before {
+    content: ' ';
+    position: absolute;
+    top: $gap;
+    right: 100%;
+    @include arrow_left(10px, $content_bg);
+  }
+}
+
+.text {
+  @include clamp(2, 14px);
+  text-overflow: ellipsis;
+}
+
+.title {
+  font: $font_14_semibold;
+  margin-bottom: $gap / 2;
+}
+
+.time {
+  font: $font_10_regular;
+  text-align: right;
+  margin-top: 2px;
+  color: $gray_75;
+}
+
+.circle {
+  border-radius: 4px 0 0 4px;
+}
diff --git a/src/components/notifications/NotificationMessage/index.tsx b/src/components/notifications/NotificationMessage/index.tsx
deleted file mode 100644
index 760d9390..00000000
--- a/src/components/notifications/NotificationMessage/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { FC, useCallback } from 'react';
-
-import { Icon } from '~/components/input/Icon';
-import styles from '~/components/notifications/NotificationBubble/styles.module.scss';
-import { IMessageNotification, INotification } from '~/types';
-
-interface IProps {
-  notification: IMessageNotification;
-  onClick: (notification: INotification) => void;
-}
-
-const NotificationMessage: FC<IProps> = ({
-  notification,
-  notification: {
-    content: { text, from },
-  },
-  onClick,
-}) => {
-  const onMouseDown = useCallback(() => onClick(notification), [onClick, notification]);
-
-  return (
-    <div className={styles.item} onMouseDown={onMouseDown}>
-      <div className={styles.item_head}>
-        <Icon icon="message" />
-        <div className={styles.item_title}>Сообщение от ~{from?.username}:</div>
-      </div>
-      <div className={styles.item_text}>{text}</div>
-    </div>
-  );
-};
-
-export { NotificationMessage };
diff --git a/src/components/profile/ProfileSidebarNotes/styles.module.scss b/src/components/profile/ProfileSidebarNotes/styles.module.scss
deleted file mode 100644
index 078e0081..00000000
--- a/src/components/profile/ProfileSidebarNotes/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "src/styles/variables";
-
-.scroller {
-  flex: 1;
-  overflow: auto;
-  padding: $gap;
-}
diff --git a/src/components/profile/ProfileSidebarNotifications/index.tsx b/src/components/profile/ProfileSidebarNotifications/index.tsx
new file mode 100644
index 00000000..07fc114c
--- /dev/null
+++ b/src/components/profile/ProfileSidebarNotifications/index.tsx
@@ -0,0 +1,27 @@
+import { VFC } from 'react';
+
+import { useStackContext } from '~/components/sidebar/SidebarStack';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
+
+import { NotificationList } from '../../../containers/notifications/NotificationList/index';
+
+interface ProfileSidebarNotificationsProps {}
+
+const ProfileSidebarNotifications: VFC<
+  ProfileSidebarNotificationsProps
+> = () => {
+  const { closeAllTabs } = useStackContext();
+
+  return (
+    <SidebarStackCard
+      width={400}
+      headerFeature="back"
+      title="Уведомления"
+      onBackPress={closeAllTabs}
+    >
+      <NotificationList />
+    </SidebarStackCard>
+  );
+};
+
+export { ProfileSidebarNotifications };
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 6cb36bf4..fe16b3c5 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -62,4 +62,8 @@ export const API = {
     STATS: '/nodes/lab/stats',
     UPDATES: '/nodes/lab/updates',
   },
+  NOTIFICATIONS: {
+    LIST: '/notifications/',
+    SETTINGS: '/notifications/settings',
+  },
 };
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
new file mode 100644
index 00000000..f2860246
--- /dev/null
+++ b/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 };
diff --git a/src/containers/notifications/NotificationList/styles.module.scss b/src/containers/notifications/NotificationList/styles.module.scss
new file mode 100644
index 00000000..594c5406
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx
index 4cf8ae07..368e3174 100644
--- a/src/containers/profile/ProfileSidebarMenu/index.tsx
+++ b/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>
diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx
index 05ffaeb3..54c21597 100644
--- a/src/containers/sidebars/ProfileSidebar/index.tsx
+++ b/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>
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
new file mode 100644
index 00000000..8e2f4f80
--- /dev/null
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -0,0 +1,28 @@
+import { isAfter, isValid, parse, parseISO } from 'date-fns';
+
+import { useAuth } from '../auth/useAuth';
+
+import { useNotificationSettingsRequest } from './useNotificationSettingsRequest';
+
+export const useNotificationSettings = () => {
+  const { isUser } = useAuth();
+
+  const {
+    error: settingsError,
+    enabled: settingsEnabled,
+    lastSeen,
+    lastDate,
+    isLoading: isLoadingSettings,
+  } = useNotificationSettingsRequest();
+
+  const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
+
+  const hasNew =
+    enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
+
+  return {
+    enabled,
+    hasNew,
+    available: isUser,
+  };
+};
diff --git a/src/hooks/notifications/useNotificationSettingsRequest.ts b/src/hooks/notifications/useNotificationSettingsRequest.ts
new file mode 100644
index 00000000..32e9de9a
--- /dev/null
+++ b/src/hooks/notifications/useNotificationSettingsRequest.ts
@@ -0,0 +1,36 @@
+import { isValid, parseISO } from 'date-fns';
+import useSWR from 'swr';
+
+import { apiGetNotificationSettings } from '~/api/notifications/settings';
+import { API } from '~/constants/api';
+
+import { useAuth } from '../auth/useAuth';
+
+const refreshInterval = 60e3; // 1min
+
+export const useNotificationSettingsRequest = () => {
+  const { isUser } = useAuth();
+  const {
+    data,
+    isValidating: isLoading,
+    error,
+  } = useSWR(
+    isUser ? API.NOTIFICATIONS.SETTINGS : null,
+    async () => apiGetNotificationSettings(),
+    { refreshInterval },
+  );
+
+  return {
+    isLoading,
+    error,
+    lastSeen:
+      data?.last_seen && isValid(parseISO(data.last_seen))
+        ? parseISO(data?.last_seen)
+        : undefined,
+    lastDate:
+      data?.last_date && isValid(parseISO(data.last_date))
+        ? parseISO(data?.last_date)
+        : undefined,
+    enabled: !!data?.enabled && (data.flow || data.comments),
+  };
+};
diff --git a/src/hooks/notifications/useNotificationsList.ts b/src/hooks/notifications/useNotificationsList.ts
new file mode 100644
index 00000000..1f3cfd78
--- /dev/null
+++ b/src/hooks/notifications/useNotificationsList.ts
@@ -0,0 +1,20 @@
+import useSWR from 'swr';
+
+import { apiGetNotifications } from '~/api/notifications/settings';
+import { API } from '~/constants/api';
+
+import { useAuth } from '../auth/useAuth';
+
+export const useNotificationsList = () => {
+  const { isUser } = useAuth();
+
+  const {
+    data,
+    isValidating: isLoading,
+    error,
+  } = useSWR(isUser ? API.NOTIFICATIONS.LIST : null, async () =>
+    apiGetNotifications(),
+  );
+
+  return { isLoading, error, ...data };
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6e8009c6..477d18f7 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import App from 'next/app';
 import Head from 'next/head';
 
@@ -16,14 +14,15 @@ import { UserContextProvider } from '~/utils/context/UserContextProvider';
 import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider';
 import { AuthProvider } from '~/utils/providers/AuthProvider';
 import { MetadataProvider } from '~/utils/providers/MetadataProvider';
+import { NotificationProvider } from '~/utils/providers/NotificationProvider';
 import { SWRConfigProvider } from '~/utils/providers/SWRConfigProvider';
 import { SearchProvider } from '~/utils/providers/SearchProvider';
 import { SidebarProvider } from '~/utils/providers/SidebarProvider';
 import { ThemeProvider } from '~/utils/providers/ThemeProvider';
 import { ToastProvider } from '~/utils/providers/ToastProvider';
 
-import '~/styles/main.scss';
 import 'tippy.js/dist/tippy.css';
+import '~/styles/main.scss';
 
 const mobxStore = getMOBXStore();
 
@@ -45,26 +44,28 @@ export default class MyApp extends App {
                     <AudioPlayerProvider>
                       <MetadataProvider>
                         <AuthProvider>
-                          <SidebarProvider>
-                            <Head>
-                              <meta
-                                name="viewport"
-                                content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0"
-                              />
+                          <NotificationProvider>
+                            <SidebarProvider>
+                              <Head>
+                                <meta
+                                  name="viewport"
+                                  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0"
+                                />
 
-                              {!!canonicalURL && (
-                                <link rel="canonical" href={canonicalURL} />
-                              )}
-                            </Head>
+                                {!!canonicalURL && (
+                                  <link rel="canonical" href={canonicalURL} />
+                                )}
+                              </Head>
 
-                            <MainLayout>
-                              <ToastProvider />
-                              <Modal />
-                              <Sprites />
-                              <Component {...pageProps} />
-                            </MainLayout>
-                            <BottomContainer />
-                          </SidebarProvider>
+                              <MainLayout>
+                                <ToastProvider />
+                                <Modal />
+                                <Sprites />
+                                <Component {...pageProps} />
+                              </MainLayout>
+                              <BottomContainer />
+                            </SidebarProvider>
+                          </NotificationProvider>
                         </AuthProvider>
                       </MetadataProvider>
                     </AudioPlayerProvider>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 905c471c..2a0f4a84 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -297,3 +297,11 @@
     right: -10px;
   }
 }
+
+@mixin arrow_left($size: 50, $color: $content_bg) {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: $size $size $size 0;
+  border-color: transparent $color transparent transparent;
+}
diff --git a/src/types/auth/index.ts b/src/types/auth/index.ts
index 86779798..d34c6b3d 100644
--- a/src/types/auth/index.ts
+++ b/src/types/auth/index.ts
@@ -28,3 +28,9 @@ export interface ISocialAccount {
   name: string;
   photo: string;
 }
+
+export interface ShallowUser {
+  id: number;
+  username: string;
+  photo: string;
+}
diff --git a/src/types/notifications/index.ts b/src/types/notifications/index.ts
new file mode 100644
index 00000000..0ceab48e
--- /dev/null
+++ b/src/types/notifications/index.ts
@@ -0,0 +1,16 @@
+import { ShallowUser } from '../auth';
+
+export interface NotificationItem {
+  id: number;
+  url: string;
+  type: NotificationType;
+  text: string;
+  user: ShallowUser;
+  thumbnail: string;
+  created_at: string;
+}
+
+export enum NotificationType {
+  Node = 'node',
+  Comment = 'comment',
+}
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 1bed443a..91098e8c 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -88,10 +88,8 @@ export const getURL = (
   return file?.url ? getURLFromString(file.url, size) : '';
 };
 
-export const formatText = pipe(
-  formatTextSanitizeYoutube,
+export const formatTextWithoutImages = pipe(
   formatTextComments,
-  formatTextTodos,
   formatExclamations,
   formatTextDash,
   formatTextMarkdown,
@@ -99,6 +97,12 @@ export const formatText = pipe(
   formatTextClickableUsernames,
 );
 
+export const formatText = pipe(
+  formatTextSanitizeYoutube,
+  formatTextTodos,
+  formatTextWithoutImages,
+);
+
 export const formatTextParagraphs = (text: string): string =>
   (text && formatText(text)) || '';
 
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
new file mode 100644
index 00000000..6f3d3c29
--- /dev/null
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -0,0 +1,31 @@
+import { createContext, FC, useContext } from 'react';
+
+import { observer } from 'mobx-react-lite';
+
+import { useNotificationSettings } from '~/hooks/notifications/useNotificationSettings';
+
+interface NotificationProviderProps {}
+
+const defaultValue = {
+  available: false,
+  enabled: false,
+  hasNew: false,
+};
+
+const NotificationContext = createContext(defaultValue);
+
+const NotificationProvider: FC<NotificationProviderProps> = observer(
+  ({ children }) => {
+    const value = useNotificationSettings();
+
+    return (
+      <NotificationContext.Provider value={value}>
+        {children}
+      </NotificationContext.Provider>
+    );
+  },
+);
+
+export const useNotifications = () => useContext(NotificationContext);
+
+export { NotificationProvider };

From 97590d88af27245ec80b0b5c3d16697e4a98892c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 11 Mar 2023 19:30:18 +0600
Subject: [PATCH 33/46] notifications: updating lastSeen when list is opened

---
 src/api/notifications/settings.ts             | 12 +++++
 src/api/notifications/types.ts                |  4 ++
 .../NotificationComment/styles.module.scss    |  2 +-
 .../notifications/NotificationList/index.tsx  |  8 +++-
 .../notifications/useNotificationSettings.ts  | 17 ++++++-
 .../useNotificationSettingsRequest.ts         | 48 ++++++++++++++++++-
 src/utils/providers/NotificationProvider.tsx  |  1 +
 7 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/src/api/notifications/settings.ts b/src/api/notifications/settings.ts
index 8f670dac..6947bd81 100644
--- a/src/api/notifications/settings.ts
+++ b/src/api/notifications/settings.ts
@@ -4,6 +4,8 @@ import { api, cleanResult } from '~/utils/api';
 import {
   ApiGetNotificationSettingsResponse,
   ApiGetNotificationsResponse,
+  ApiUpdateNotificationSettingsResponse,
+  ApiUpdateNotificationSettingsRequest,
 } from './types';
 
 export const apiGetNotificationSettings = () =>
@@ -15,3 +17,13 @@ export const apiGetNotifications = () =>
   api
     .get<ApiGetNotificationsResponse>(API.NOTIFICATIONS.LIST)
     .then(cleanResult);
+
+export const apiUpdateNotificationSettings = (
+  settings: ApiUpdateNotificationSettingsRequest,
+) =>
+  api
+    .post<ApiUpdateNotificationSettingsResponse>(
+      API.NOTIFICATIONS.SETTINGS,
+      settings,
+    )
+    .then(cleanResult);
diff --git a/src/api/notifications/types.ts b/src/api/notifications/types.ts
index b242fc76..d998a1ec 100644
--- a/src/api/notifications/types.ts
+++ b/src/api/notifications/types.ts
@@ -7,7 +7,11 @@ export interface ApiGetNotificationSettingsResponse {
   last_seen?: string | null;
   last_date?: string | null;
 }
+export type ApiUpdateNotificationSettingsResponse =
+  ApiGetNotificationSettingsResponse;
 
+export type ApiUpdateNotificationSettingsRequest =
+  Partial<ApiGetNotificationSettingsResponse>;
 export interface ApiGetNotificationsResponse {
   items?: NotificationItem[];
 }
diff --git a/src/components/notifications/NotificationComment/styles.module.scss b/src/components/notifications/NotificationComment/styles.module.scss
index 6d57a501..e12c2ecd 100644
--- a/src/components/notifications/NotificationComment/styles.module.scss
+++ b/src/components/notifications/NotificationComment/styles.module.scss
@@ -11,7 +11,7 @@
   padding: $gap/2 $gap/2 $gap/4 $gap/2;
   min-height: calc(1.3em * 3 + $gap);
   display: grid;
-  grid-template-columns: 40px auto;
+  grid-template-columns: 32px auto;
   column-gap: 0;
 }
 
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index f2860246..c1759845 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/src/containers/notifications/NotificationList/index.tsx
@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { NotificationComment } from '~/components/notifications/NotificationComment';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
+import { useNotifications } from '~/utils/providers/NotificationProvider';
 
 import styles from './styles.module.scss';
 
@@ -10,6 +11,11 @@ interface NotificationListProps {}
 
 const NotificationList: FC<NotificationListProps> = () => {
   const { isLoading, items } = useNotificationsList();
+  const { markAsRead } = useNotifications();
+
+  useEffect(() => {
+    return () => markAsRead();
+  }, []);
 
   if (isLoading) {
     return <LoaderCircle />;
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index 8e2f4f80..a4c6c354 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -1,4 +1,6 @@
-import { isAfter, isValid, parse, parseISO } from 'date-fns';
+import { useCallback } from 'react';
+
+import { isAfter, isBefore, isEqual, isValid, parse, parseISO } from 'date-fns';
 
 import { useAuth } from '../auth/useAuth';
 
@@ -13,6 +15,7 @@ export const useNotificationSettings = () => {
     lastSeen,
     lastDate,
     isLoading: isLoadingSettings,
+    update,
   } = useNotificationSettingsRequest();
 
   const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
@@ -20,9 +23,21 @@ export const useNotificationSettings = () => {
   const hasNew =
     enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
 
+  const markAsRead = useCallback(() => {
+    if (
+      !lastDate ||
+      (lastSeen && (isEqual(lastSeen, lastDate) || isAfter(lastSeen, lastDate)))
+    ) {
+      return;
+    }
+
+    update({ last_seen: lastDate.toISOString() });
+  }, [update, lastDate, lastSeen]);
+
   return {
     enabled,
     hasNew,
     available: isUser,
+    markAsRead,
   };
 };
diff --git a/src/hooks/notifications/useNotificationSettingsRequest.ts b/src/hooks/notifications/useNotificationSettingsRequest.ts
index 32e9de9a..6e54c08d 100644
--- a/src/hooks/notifications/useNotificationSettingsRequest.ts
+++ b/src/hooks/notifications/useNotificationSettingsRequest.ts
@@ -1,25 +1,68 @@
+import { useCallback, useState } from 'react';
+
 import { isValid, parseISO } from 'date-fns';
 import useSWR from 'swr';
 
-import { apiGetNotificationSettings } from '~/api/notifications/settings';
+import {
+  apiGetNotificationSettings,
+  apiUpdateNotificationSettings,
+} from '~/api/notifications/settings';
+import { ApiUpdateNotificationSettingsRequest } from '~/api/notifications/types';
 import { API } from '~/constants/api';
+import { getErrorMessage } from '~/utils/errors/getErrorMessage';
+import { showErrorToast } from '~/utils/errors/showToast';
 
 import { useAuth } from '../auth/useAuth';
 
 const refreshInterval = 60e3; // 1min
 
 export const useNotificationSettingsRequest = () => {
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [updateError, setUpdateError] = useState('');
+
   const { isUser } = useAuth();
   const {
     data,
     isValidating: isLoading,
     error,
+    mutate,
   } = useSWR(
     isUser ? API.NOTIFICATIONS.SETTINGS : null,
     async () => apiGetNotificationSettings(),
     { refreshInterval },
   );
 
+  const update = useCallback(
+    async (settings: ApiUpdateNotificationSettingsRequest) => {
+      if (!data) {
+        return;
+      }
+
+      try {
+        setIsUpdating(true);
+        setUpdateError('');
+
+        mutate({ ...data, ...settings }, { revalidate: false });
+
+        const result = await apiUpdateNotificationSettings(settings);
+
+        mutate(result, { revalidate: false });
+      } catch (error) {
+        mutate(data, { revalidate: false });
+
+        const message = getErrorMessage(error);
+        if (message) {
+          setUpdateError(message);
+        }
+
+        showErrorToast(error);
+      } finally {
+        setIsUpdating(true);
+      }
+    },
+    [data, mutate],
+  );
+
   return {
     isLoading,
     error,
@@ -32,5 +75,8 @@ export const useNotificationSettingsRequest = () => {
         ? parseISO(data?.last_date)
         : undefined,
     enabled: !!data?.enabled && (data.flow || data.comments),
+    update,
+    updateError,
+    isUpdating,
   };
 };
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
index 6f3d3c29..c1231183 100644
--- a/src/utils/providers/NotificationProvider.tsx
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -10,6 +10,7 @@ const defaultValue = {
   available: false,
   enabled: false,
   hasNew: false,
+  markAsRead: () => {},
 };
 
 const NotificationContext = createContext(defaultValue);

From dc90f2505c4d13555aa932a97e972ad6c794d5e9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sun, 12 Mar 2023 11:07:32 +0600
Subject: [PATCH 34/46] notifications: added profile indicator

---
 src/components/common/Avatar/index.tsx        | 29 +++++++++++++----
 .../common/Avatar/styles.module.scss          | 16 ++++++++++
 src/components/main/UserButton/index.tsx      | 11 +++++--
 src/components/menu/VerticalMenu/index.tsx    | 17 +++++++---
 .../menu/VerticalMenu/styles.module.scss      | 13 ++++++++
 src/containers/main/Header/index.tsx          | 28 ++++++----------
 .../UserButtonWithNotifications/index.tsx     | 32 +++++++++++++++++++
 .../profile/ProfileSidebarMenu/index.tsx      |  7 +++-
 .../notifications/useNotificationSettings.ts  | 10 ++++--
 src/utils/providers/NotificationProvider.tsx  |  1 +
 10 files changed, 127 insertions(+), 37 deletions(-)
 create mode 100644 src/containers/main/UserButtonWithNotifications/index.tsx

diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
index 3f73ecea..442a7dff 100644
--- a/src/components/common/Avatar/index.tsx
+++ b/src/components/common/Avatar/index.tsx
@@ -14,22 +14,37 @@ interface Props extends DivProps {
   url?: string;
   username?: string;
   size?: number;
+  hasUpdates?: boolean;
   preset?: typeof imagePresets[keyof typeof imagePresets];
 }
 
 const Avatar = forwardRef<HTMLDivElement, Props>(
   (
-    { url, username, size, className, preset = imagePresets.avatar, ...rest },
+    {
+      url,
+      username,
+      size,
+      className,
+      preset = imagePresets.avatar,
+      hasUpdates,
+      ...rest
+    },
     ref,
   ) => {
     return (
-      <Square
+      <div
         {...rest}
-        image={getURLFromString(url, preset) || '/images/john_doe.svg'}
-        className={classNames(styles.avatar, className)}
-        size={size}
-        ref={ref}
-      />
+        className={classNames(styles.container, {
+          [styles.has_dot]: hasUpdates,
+        })}
+      >
+        <Square
+          image={getURLFromString(url, preset) || '/images/john_doe.svg'}
+          className={classNames(styles.avatar, className)}
+          size={size}
+          ref={ref}
+        />
+      </div>
     );
   },
 );
diff --git a/src/components/common/Avatar/styles.module.scss b/src/components/common/Avatar/styles.module.scss
index 4225c783..389a9772 100644
--- a/src/components/common/Avatar/styles.module.scss
+++ b/src/components/common/Avatar/styles.module.scss
@@ -1,5 +1,20 @@
 @import 'src/styles/variables';
 
+.container {
+  &.has_dot::after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: $color_danger;
+    z-index: 1;
+    box-shadow: $content_bg 0 0 0 2px;
+  }
+}
+
 .avatar {
   @include outer_shadow;
 
@@ -12,6 +27,7 @@
   background-position: center;
   background-size: cover;
   cursor: pointer;
+  position: relative;
 
   img {
     object-fit: cover;
diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx
index b7e6c3c4..85c7bf2d 100644
--- a/src/components/main/UserButton/index.tsx
+++ b/src/components/main/UserButton/index.tsx
@@ -2,7 +2,6 @@ import { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
 import { Group } from '~/components/containers/Group';
-import { Icon } from '~/components/input/Icon';
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -12,15 +11,21 @@ import styles from './styles.module.scss';
 interface IProps {
   username: string;
   photo?: IFile;
+  hasUpdates?: boolean;
+
   onClick?: () => void;
 }
 
-const UserButton: FC<IProps> = ({ username, photo, onClick }) => {
+const UserButton: FC<IProps> = ({ username, photo, hasUpdates, onClick }) => {
   return (
     <button className={styles.wrap} onClick={onClick}>
       <Group horizontal className={styles.user_button}>
         <div className={styles.username}>{username}</div>
-        <Avatar url={getURL(photo, imagePresets.avatar)} size={32} />
+        <Avatar
+          url={getURL(photo, imagePresets.avatar)}
+          size={32}
+          hasUpdates={hasUpdates}
+        />
       </Group>
     </button>
   );
diff --git a/src/components/menu/VerticalMenu/index.tsx b/src/components/menu/VerticalMenu/index.tsx
index 0b84065e..23c20e41 100644
--- a/src/components/menu/VerticalMenu/index.tsx
+++ b/src/components/menu/VerticalMenu/index.tsx
@@ -1,8 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 import classNames from 'classnames';
 
-import { Card } from '~/components/containers/Card';
+import { Anchor } from '~/components/common/Anchor';
 import { DivProps, LinkProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
@@ -11,7 +11,9 @@ interface VerticalMenuProps extends DivProps {
   appearance?: 'inset' | 'flat' | 'default';
 }
 
-interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {}
+interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {
+  hasUpdates?: boolean;
+}
 
 function VerticalMenu({
   children,
@@ -28,8 +30,13 @@ function VerticalMenu({
   );
 }
 
-VerticalMenu.Item = ({ ...props }: VerticalMenuItemProps) => (
-  <a {...props} className={classNames(styles.item, props.className)} />
+VerticalMenu.Item = ({ hasUpdates, ...props }: VerticalMenuItemProps) => (
+  <a
+    {...props}
+    className={classNames(styles.item, props.className, {
+      [styles.has_dot]: hasUpdates,
+    })}
+  />
 );
 
 export { VerticalMenu };
diff --git a/src/components/menu/VerticalMenu/styles.module.scss b/src/components/menu/VerticalMenu/styles.module.scss
index 1c3e5d1d..81b66ffa 100644
--- a/src/components/menu/VerticalMenu/styles.module.scss
+++ b/src/components/menu/VerticalMenu/styles.module.scss
@@ -33,6 +33,19 @@ a.item {
   cursor: pointer;
   background-color: transparent;
   transition: background-color 0.25s;
+  position: relative;
+
+  &.has_dot::after {
+    content: ' ';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 8px;
+    height: 8px;
+    background: $color_danger;
+    border-radius: 8px;
+    transform: translate(0, -50%);
+  }
 
   &:hover {
     background-color: $content_bg_success;
diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx
index 4d676f53..10b43801 100644
--- a/src/containers/main/Header/index.tsx
+++ b/src/containers/main/Header/index.tsx
@@ -9,16 +9,16 @@ import { Authorized } from '~/components/containers/Authorized';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import { Logo } from '~/components/main/Logo';
-import { UserButton } from '~/components/main/UserButton';
 import { Dialog } from '~/constants/modal';
-import { SidebarName } from '~/constants/sidebar';
 import { URLS } from '~/constants/urls';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useScrollTop } from '~/hooks/dom/useScrollTop';
 import { useFlow } from '~/hooks/flow/useFlow';
 import { useModal } from '~/hooks/modal/useModal';
 import { useUpdates } from '~/hooks/updates/useUpdates';
-import { useSidebar } from '~/utils/providers/SidebarProvider';
+import { useNotifications } from '~/utils/providers/NotificationProvider';
+
+import { UserButtonWithNotifications } from '../UserButtonWithNotifications';
 
 import styles from './styles.module.scss';
 
@@ -30,11 +30,7 @@ const Header: FC<HeaderProps> = observer(() => {
   const { isUser, user, fetched } = useAuth();
   const { hasFlowUpdates, hasLabUpdates } = useFlow();
   const { borisCommentedAt } = useUpdates();
-  const { open } = useSidebar();
-
-  const openProfileSidebar = useCallback(() => {
-    open(SidebarName.Settings, {});
-  }, [open]);
+  const { indicatorEnabled } = useNotifications();
 
   const onLogin = useCallback(() => showModal(Dialog.Login, {}), [showModal]);
 
@@ -43,6 +39,7 @@ const Header: FC<HeaderProps> = observer(() => {
   const hasBorisUpdates = useMemo(
     () =>
       isUser &&
+      !indicatorEnabled &&
       borisCommentedAt &&
       ((fetched && !user.last_seen_boris) ||
         isBefore(new Date(user.last_seen_boris), new Date(borisCommentedAt))),
@@ -67,14 +64,13 @@ const Header: FC<HeaderProps> = observer(() => {
 
         <nav
           className={classNames(styles.plugs, {
-            // [styles.active]: isHydrated && fetched,
             [styles.active]: true,
           })}
         >
           <Authorized hydratedOnly>
             <Anchor
               className={classNames(styles.item, {
-                [styles.has_dot]: hasFlowUpdates,
+                [styles.has_dot]: hasFlowUpdates && !indicatorEnabled,
               })}
               href={URLS.BASE}
             >
@@ -83,7 +79,7 @@ const Header: FC<HeaderProps> = observer(() => {
 
             <Anchor
               className={classNames(styles.item, styles.lab, {
-                [styles.has_dot]: hasLabUpdates,
+                [styles.has_dot]: hasLabUpdates && !indicatorEnabled,
               })}
               href={URLS.LAB}
             >
@@ -92,7 +88,7 @@ const Header: FC<HeaderProps> = observer(() => {
 
             <Anchor
               className={classNames(styles.item, styles.boris, {
-                [styles.has_dot]: hasBorisUpdates,
+                [styles.has_dot]: hasBorisUpdates && !indicatorEnabled,
               })}
               href={URLS.BORIS}
             >
@@ -101,13 +97,7 @@ const Header: FC<HeaderProps> = observer(() => {
           </Authorized>
         </nav>
 
-        {isUser && (
-          <UserButton
-            username={user.username}
-            photo={user.photo}
-            onClick={openProfileSidebar}
-          />
-        )}
+        {isUser && <UserButtonWithNotifications />}
 
         {!isUser && (
           <Button className={styles.user_button} onClick={onLogin} round>
diff --git a/src/containers/main/UserButtonWithNotifications/index.tsx b/src/containers/main/UserButtonWithNotifications/index.tsx
new file mode 100644
index 00000000..d0862575
--- /dev/null
+++ b/src/containers/main/UserButtonWithNotifications/index.tsx
@@ -0,0 +1,32 @@
+import { FC, useCallback } from 'react';
+
+import { UserButton } from '~/components/main/UserButton';
+import { SidebarName } from '~/constants/sidebar';
+import { useAuth } from '~/hooks/auth/useAuth';
+import { useNotifications } from '~/utils/providers/NotificationProvider';
+import { useSidebar } from '~/utils/providers/SidebarProvider';
+
+interface UserButtonWithNotificationsProps {}
+
+const UserButtonWithNotifications: FC<
+  UserButtonWithNotificationsProps
+> = () => {
+  const { user } = useAuth();
+  const { open } = useSidebar();
+  const { hasNew, indicatorEnabled } = useNotifications();
+
+  const openProfileSidebar = useCallback(() => {
+    open(SidebarName.Settings, {});
+  }, [open]);
+
+  return (
+    <UserButton
+      hasUpdates={hasNew && indicatorEnabled}
+      username={user.username}
+      photo={user.photo}
+      onClick={openProfileSidebar}
+    />
+  );
+};
+
+export { UserButtonWithNotifications };
diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx
index 368e3174..3bd05c47 100644
--- a/src/containers/profile/ProfileSidebarMenu/index.tsx
+++ b/src/containers/profile/ProfileSidebarMenu/index.tsx
@@ -13,6 +13,7 @@ import { ProfileStats } from '~/containers/profile/ProfileStats';
 import { ThemeSwitcher } from '~/containers/settings/ThemeSwitcher';
 import { useAuth } from '~/hooks/auth/useAuth';
 import markdown from '~/styles/common/markdown.module.scss';
+import { useNotifications } from '~/utils/providers/NotificationProvider';
 
 import { ProfileSidebarLogoutButton } from '../ProfileSidebarLogoutButton';
 import { ProfileToggles } from '../ProfileToggles';
@@ -26,6 +27,7 @@ interface ProfileSidebarMenuProps {
 const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
   const { logout } = useAuth();
   const { setActiveTab } = useStackContext();
+  const { hasNew } = useNotifications();
 
   const onLogout = useCallback(() => {
     logout();
@@ -46,7 +48,10 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
             </VerticalMenu.Item>
 
             <Superpower>
-              <VerticalMenu.Item onClick={() => setActiveTab(1)}>
+              <VerticalMenu.Item
+                onClick={() => setActiveTab(1)}
+                hasUpdates={hasNew}
+              >
                 Уведомления
               </VerticalMenu.Item>
             </Superpower>
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index a4c6c354..4b0c0ac2 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -7,7 +7,8 @@ import { useAuth } from '../auth/useAuth';
 import { useNotificationSettingsRequest } from './useNotificationSettingsRequest';
 
 export const useNotificationSettings = () => {
-  const { isUser } = useAuth();
+  // TODO: remove isTester
+  const { isUser, isTester } = useAuth();
 
   const {
     error: settingsError,
@@ -18,11 +19,15 @@ export const useNotificationSettings = () => {
     update,
   } = useNotificationSettingsRequest();
 
-  const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
+  const enabled =
+    !isLoadingSettings && !settingsError && settingsEnabled && isTester;
 
   const hasNew =
     enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
 
+  // TODO: store `indicator` as option and include it here
+  const indicatorEnabled = enabled && true;
+
   const markAsRead = useCallback(() => {
     if (
       !lastDate ||
@@ -37,6 +42,7 @@ export const useNotificationSettings = () => {
   return {
     enabled,
     hasNew,
+    indicatorEnabled,
     available: isUser,
     markAsRead,
   };
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
index c1231183..b6d698ec 100644
--- a/src/utils/providers/NotificationProvider.tsx
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -10,6 +10,7 @@ const defaultValue = {
   available: false,
   enabled: false,
   hasNew: false,
+  indicatorEnabled: false,
   markAsRead: () => {},
 };
 

From 3e9f5dedecbccd6ac7212b2315fc236d0a81e034 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sun, 12 Mar 2023 11:08:47 +0600
Subject: [PATCH 35/46] themes: fixed color reordering on render

---
 src/containers/settings/ThemeSwitcher/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/settings/ThemeSwitcher/index.tsx b/src/containers/settings/ThemeSwitcher/index.tsx
index c112fa0d..3cc9f5eb 100644
--- a/src/containers/settings/ThemeSwitcher/index.tsx
+++ b/src/containers/settings/ThemeSwitcher/index.tsx
@@ -28,7 +28,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = () => {
         >
           <Group>
             <div className={styles.palette}>
-              {item.colors.reverse().map((color) => (
+              {item.colors.map((color) => (
                 <div
                   key={color}
                   className={styles.sample}

From e994176bffb99196945d8da033c11d77df54f7a3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 13 Mar 2023 17:32:44 +0600
Subject: [PATCH 36/46] telegram: added telegram attach functionality

---
 next.config.js                                |  2 +-
 package.json                                  |  1 +
 src/api/auth/index.ts                         |  5 +++
 .../auth/oauth/TelegramLoginForm/index.tsx    | 25 +++++++++++
 src/constants/api.ts                          |  1 +
 src/constants/modal/index.ts                  |  3 ++
 .../dialogs/TelegramAttachDialog/index.tsx    | 31 +++++++++++++
 .../profile/ProfileAccounts/index.tsx         | 43 +++++++++++++++----
 src/hooks/auth/useTelegramAccount.ts          | 13 ++++++
 yarn.lock                                     | 16 +++++++
 10 files changed, 131 insertions(+), 9 deletions(-)
 create mode 100644 src/components/auth/oauth/TelegramLoginForm/index.tsx
 create mode 100644 src/containers/dialogs/TelegramAttachDialog/index.tsx
 create mode 100644 src/hooks/auth/useTelegramAccount.ts

diff --git a/next.config.js b/next.config.js
index 89180bbb..b3b05794 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,7 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
-const withTM = require('next-transpile-modules')(['ramda']);
+const withTM = require('next-transpile-modules')(['ramda', '@v9v/ts-react-telegram-login']);
 
 module.exports = withBundleAnalyzer(
   withTM({
diff --git a/package.json b/package.json
index 0a0e38d0..848d90c6 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@tippyjs/react": "^4.2.6",
+    "@v9v/ts-react-telegram-login": "^1.1.1",
     "autosize": "^4.0.2",
     "axios": "^0.21.2",
     "body-scroll-lock": "^2.6.4",
diff --git a/src/api/auth/index.ts b/src/api/auth/index.ts
index 06a46c75..0c1526c6 100644
--- a/src/api/auth/index.ts
+++ b/src/api/auth/index.ts
@@ -1,3 +1,5 @@
+import { TelegramUser } from '@v9v/ts-react-telegram-login';
+
 import {
   ApiAttachSocialRequest,
   ApiAttachSocialResult,
@@ -98,3 +100,6 @@ export const apiLoginWithSocial = ({
       password,
     })
     .then(cleanResult);
+
+export const apiAttachTelegram = (data: TelegramUser) =>
+  api.post(API.USER.ATTACH_TELEGRAM, data);
diff --git a/src/components/auth/oauth/TelegramLoginForm/index.tsx b/src/components/auth/oauth/TelegramLoginForm/index.tsx
new file mode 100644
index 00000000..67a904cf
--- /dev/null
+++ b/src/components/auth/oauth/TelegramLoginForm/index.tsx
@@ -0,0 +1,25 @@
+import React, { FC, useEffect } from 'react';
+
+import TelegramLoginButton, {
+  TelegramUser,
+} from '@v9v/ts-react-telegram-login';
+
+interface TelegramLoginFormProps {
+  botName: string;
+  onSuccess?: (token: TelegramUser) => void;
+}
+
+const TelegramLoginForm: FC<TelegramLoginFormProps> = ({
+  botName,
+  onSuccess,
+}) => {
+  return (
+    <TelegramLoginButton
+      dataOnAuth={onSuccess}
+      botName={botName}
+      requestAccess
+    />
+  );
+};
+
+export { TelegramLoginForm };
diff --git a/src/constants/api.ts b/src/constants/api.ts
index fe16b3c5..b3318a30 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -24,6 +24,7 @@ export const API = {
     DROP_SOCIAL: (provider, id) => `/oauth/${provider}/${id}`,
     ATTACH_SOCIAL: `/oauth`,
     LOGIN_WITH_SOCIAL: `/oauth`,
+    ATTACH_TELEGRAM: '/oauth/telegram/attach',
   },
   NODES: {
     SAVE: '/nodes/',
diff --git a/src/constants/modal/index.ts b/src/constants/modal/index.ts
index 5717475e..344fb577 100644
--- a/src/constants/modal/index.ts
+++ b/src/constants/modal/index.ts
@@ -6,6 +6,7 @@ import { LoginSocialRegisterDialog } from '~/containers/dialogs/LoginSocialRegis
 import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe';
 import { RestorePasswordDialog } from '~/containers/dialogs/RestorePasswordDialog';
 import { RestoreRequestDialog } from '~/containers/dialogs/RestoreRequestDialog';
+import { TelegramAttachDialog } from '~/containers/dialogs/TelegramAttachDialog';
 import { TestDialog } from '~/containers/dialogs/TestDialog';
 
 export enum Dialog {
@@ -18,6 +19,7 @@ export enum Dialog {
   Photoswipe = 'Photoswipe',
   CreateNode = 'CreateNode',
   EditNode = 'EditNode',
+  TelegramAttach = 'TelegramAttach',
 }
 
 export const DIALOG_CONTENT = {
@@ -30,4 +32,5 @@ export const DIALOG_CONTENT = {
   [Dialog.Photoswipe]: PhotoSwipe,
   [Dialog.CreateNode]: EditorCreateDialog,
   [Dialog.EditNode]: EditorEditDialog,
+  [Dialog.TelegramAttach]: TelegramAttachDialog,
 } as const;
diff --git a/src/containers/dialogs/TelegramAttachDialog/index.tsx b/src/containers/dialogs/TelegramAttachDialog/index.tsx
new file mode 100644
index 00000000..7a08ec36
--- /dev/null
+++ b/src/containers/dialogs/TelegramAttachDialog/index.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount';
+import { DialogComponentProps } from '~/types/modal';
+
+import { TelegramLoginForm } from '../../../components/auth/oauth/TelegramLoginForm/index';
+import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
+
+interface TelegramAttachDialogProps extends DialogComponentProps {}
+
+const botName = process.env.NEXT_PUBLIC_BOT_USERNAME;
+
+const TelegramAttachDialog: FC<TelegramAttachDialogProps> = ({
+  onRequestClose,
+}) => {
+  const { attach } = useTelegramAccount();
+
+  if (!botName) {
+    // TODO: show something
+    return null;
+  }
+
+  return (
+    <BetterScrollDialog width={300} onClose={onRequestClose}>
+      <div>
+        <TelegramLoginForm botName={botName} onSuccess={attach} />
+      </div>
+    </BetterScrollDialog>
+  );
+};
+export { TelegramAttachDialog };
diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx
index 994dc27d..f1503d81 100644
--- a/src/containers/profile/ProfileAccounts/index.tsx
+++ b/src/containers/profile/ProfileAccounts/index.tsx
@@ -1,11 +1,14 @@
-import React, { FC, Fragment } from 'react';
+import React, { FC, Fragment, useCallback } from 'react';
 
+import { Superpower } from '~/components/boris/Superpower';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { SOCIAL_ICONS } from '~/constants/auth/socials';
+import { Dialog } from '~/constants/modal';
 import { useOAuth } from '~/hooks/auth/useOAuth';
+import { useModal } from '~/hooks/modal/useModal';
 
 import styles from './styles.module.scss';
 
@@ -13,18 +16,24 @@ type ProfileAccountsProps = {};
 
 const ProfileAccounts: FC<ProfileAccountsProps> = () => {
   const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth();
+  const { showModal } = useModal();
+
+  const showTelegramModal = useCallback(
+    () => showModal(Dialog.TelegramAttach, {}),
+    [],
+  );
 
   return (
     <Group className={styles.wrap}>
       <Group className={styles.info}>
         <p>
-          Ты можешь входить в Убежище, используя аккаунты на других сайтах вместо ввода логина и
-          пароля.
+          Ты можешь входить в Убежище, используя аккаунты на других сайтах
+          вместо ввода логина и пароля.
         </p>
 
         <p>
-          Мы честно украдём и будем хранить твои имя, фото и адрес на этом сайте, но никому о них не
-          расскажем.
+          Мы честно украдём и будем хранить твои имя, фото и адрес на этом
+          сайте, но никому о них не расскажем.
         </p>
       </Group>
 
@@ -42,11 +51,13 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
       {!isLoading && accounts.length > 0 && (
         <div className={styles.list}>
           {!isLoading &&
-            accounts.map(it => (
+            accounts.map((it) => (
               <div className={styles.account} key={`${it.provider}-${it.id}`}>
                 <div
                   className={styles.account__photo}
-                  style={{ backgroundImage: it.photo ? `url(${it.photo})` : 'none' }}
+                  style={{
+                    backgroundImage: it.photo ? `url(${it.photo})` : 'none',
+                  }}
                 >
                   <div className={styles.account__provider}>
                     <Icon icon={SOCIAL_ICONS[it.provider]} size={12} />
@@ -56,7 +67,11 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
                 <div className={styles.account__name}>{it.name || it.id}</div>
 
                 <div className={styles.account__drop}>
-                  <Icon icon="close" size={22} onClick={() => dropAccount(it.provider, it.id)} />
+                  <Icon
+                    icon="close"
+                    size={22}
+                    onClick={() => dropAccount(it.provider, it.id)}
+                  />
                 </div>
               </div>
             ))}
@@ -64,6 +79,18 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
       )}
 
       <Group horizontal className={styles.buttons}>
+        <Superpower>
+          <Button
+            size="small"
+            type="button"
+            iconLeft="telegram"
+            color="gray"
+            onClick={showTelegramModal}
+          >
+            Телеграм
+          </Button>
+        </Superpower>
+
         <Button
           size="small"
           type="button"
diff --git a/src/hooks/auth/useTelegramAccount.ts b/src/hooks/auth/useTelegramAccount.ts
new file mode 100644
index 00000000..ca1b15ea
--- /dev/null
+++ b/src/hooks/auth/useTelegramAccount.ts
@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+import { TelegramUser } from '@v9v/ts-react-telegram-login';
+
+import { apiAttachTelegram } from '../../api/auth/index';
+
+export const useTelegramAccount = () => {
+  const attach = useCallback((data: TelegramUser) => {
+    apiAttachTelegram(data);
+  }, []);
+
+  return { attach };
+};
diff --git a/yarn.lock b/yarn.lock
index 568f7393..c0c5ece2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -517,6 +517,13 @@
     "@typescript-eslint/types" "5.10.1"
     eslint-visitor-keys "^3.0.0"
 
+"@v9v/ts-react-telegram-login@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@v9v/ts-react-telegram-login/-/ts-react-telegram-login-1.1.1.tgz#438d43fe2b8cbd06dd3aec391078add63643f03f"
+  integrity sha512-aWzELPBBfZET5L7Ud3IPApCz2qzJUXF1lBDFIpaKnG6vehe4F9GT7Ss+A/buOTYh1VgraQ03oh3f/ncNy1AdhA==
+  dependencies:
+    react "^16.13.1"
+
 acorn-jsx@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2442,6 +2449,15 @@ react-sticky-box@^1.0.2:
   dependencies:
     resize-observer-polyfill "^1.5.1"
 
+react@^16.13.1:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"

From 47eee7d166e42c44a30212bedb377ca2f01b9367 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 13 Mar 2023 18:26:16 +0600
Subject: [PATCH 37/46] telegram: now able to delete it

---
 .../auth/oauth/TelegramLoginForm/index.tsx    | 33 +++++++++++++++----
 .../TelegramLoginForm/styles.module.scss      | 22 +++++++++++++
 src/constants/auth/socials.ts                 |  1 +
 .../dialogs/TelegramAttachDialog/index.tsx    | 30 +++++++++++++----
 .../profile/ProfileAccounts/index.tsx         | 12 +++++--
 src/hooks/auth/useOAuth.ts                    |  4 +--
 src/hooks/auth/useOauthEventListeners.ts      |  2 --
 src/hooks/auth/useTelegramAccount.ts          | 31 +++++++++++++----
 src/types/auth/index.ts                       |  2 +-
 src/utils/providers/SettingsProvider.tsx      |  1 -
 10 files changed, 112 insertions(+), 26 deletions(-)
 create mode 100644 src/components/auth/oauth/TelegramLoginForm/styles.module.scss

diff --git a/src/components/auth/oauth/TelegramLoginForm/index.tsx b/src/components/auth/oauth/TelegramLoginForm/index.tsx
index 67a904cf..0a4911af 100644
--- a/src/components/auth/oauth/TelegramLoginForm/index.tsx
+++ b/src/components/auth/oauth/TelegramLoginForm/index.tsx
@@ -1,24 +1,45 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 
 import TelegramLoginButton, {
   TelegramUser,
 } from '@v9v/ts-react-telegram-login';
 
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+
+import styles from './styles.module.scss';
+
 interface TelegramLoginFormProps {
   botName: string;
+  loading?: boolean;
   onSuccess?: (token: TelegramUser) => void;
 }
 
 const TelegramLoginForm: FC<TelegramLoginFormProps> = ({
   botName,
+  loading,
   onSuccess,
 }) => {
   return (
-    <TelegramLoginButton
-      dataOnAuth={onSuccess}
-      botName={botName}
-      requestAccess
-    />
+    <div className={styles.container}>
+      <div className={styles.text}>
+        {loading ? (
+          <LoaderCircle />
+        ) : (
+          <div>
+            После успешной авторизации аккаунт появится в настройках вашего
+            профиля
+          </div>
+        )}
+      </div>
+
+      <div className={styles.button}>
+        <TelegramLoginButton
+          dataOnAuth={onSuccess}
+          botName={botName}
+          requestAccess
+        />
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/auth/oauth/TelegramLoginForm/styles.module.scss b/src/components/auth/oauth/TelegramLoginForm/styles.module.scss
new file mode 100644
index 00000000..12f263e5
--- /dev/null
+++ b/src/components/auth/oauth/TelegramLoginForm/styles.module.scss
@@ -0,0 +1,22 @@
+@import 'src/styles/variables';
+
+.button {
+  flex: 0 0 48px;
+}
+
+.container {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: $gap;
+}
+
+.text {
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/constants/auth/socials.ts b/src/constants/auth/socials.ts
index 3d0532f5..f9d24fd6 100644
--- a/src/constants/auth/socials.ts
+++ b/src/constants/auth/socials.ts
@@ -3,4 +3,5 @@ import { OAuthProvider } from '~/types/auth';
 export const SOCIAL_ICONS: Record<OAuthProvider, string> = {
   vkontakte: 'vk',
   google: 'google',
+  telegram: 'telegram',
 };
diff --git a/src/containers/dialogs/TelegramAttachDialog/index.tsx b/src/containers/dialogs/TelegramAttachDialog/index.tsx
index 7a08ec36..2a284db3 100644
--- a/src/containers/dialogs/TelegramAttachDialog/index.tsx
+++ b/src/containers/dialogs/TelegramAttachDialog/index.tsx
@@ -1,5 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
+import { TelegramUser } from '@v9v/ts-react-telegram-login';
+
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
 import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount';
 import { DialogComponentProps } from '~/types/modal';
 
@@ -15,16 +19,30 @@ const TelegramAttachDialog: FC<TelegramAttachDialogProps> = ({
 }) => {
   const { attach } = useTelegramAccount();
 
+  const onAttach = useCallback(
+    (data: TelegramUser) => attach(data, onRequestClose),
+    [onRequestClose],
+  );
+
+  const buttons = useMemo(
+    () => (
+      <Padder>
+        <Button stretchy onClick={onRequestClose}>
+          Отмена
+        </Button>
+      </Padder>
+    ),
+    [onRequestClose],
+  );
+
   if (!botName) {
-    // TODO: show something
+    onRequestClose();
     return null;
   }
 
   return (
-    <BetterScrollDialog width={300} onClose={onRequestClose}>
-      <div>
-        <TelegramLoginForm botName={botName} onSuccess={attach} />
-      </div>
+    <BetterScrollDialog width={300} onClose={onRequestClose} footer={buttons}>
+      <TelegramLoginForm botName={botName} onSuccess={onAttach} />
     </BetterScrollDialog>
   );
 };
diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx
index f1503d81..0c563950 100644
--- a/src/containers/profile/ProfileAccounts/index.tsx
+++ b/src/containers/profile/ProfileAccounts/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useCallback } from 'react';
+import React, { FC, Fragment, useCallback, useMemo } from 'react';
 
 import { Superpower } from '~/components/boris/Superpower';
 import { Group } from '~/components/containers/Group';
@@ -18,6 +18,11 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
   const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth();
   const { showModal } = useModal();
 
+  const hasTelegram = useMemo(
+    () => accounts.some((acc) => acc.provider === 'telegram'),
+    [accounts],
+  );
+
   const showTelegramModal = useCallback(
     () => showModal(Dialog.TelegramAttach, {}),
     [],
@@ -64,7 +69,9 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
                   </div>
                 </div>
 
-                <div className={styles.account__name}>{it.name || it.id}</div>
+                <div className={styles.account__name}>
+                  {it.name || it.id} - {it.id} - {it.provider}
+                </div>
 
                 <div className={styles.account__drop}>
                   <Icon
@@ -86,6 +93,7 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
             iconLeft="telegram"
             color="gray"
             onClick={showTelegramModal}
+            disabled={hasTelegram}
           >
             Телеграм
           </Button>
diff --git a/src/hooks/auth/useOAuth.ts b/src/hooks/auth/useOAuth.ts
index f85b7d45..c097b4e7 100644
--- a/src/hooks/auth/useOAuth.ts
+++ b/src/hooks/auth/useOAuth.ts
@@ -43,8 +43,6 @@ export const useOAuth = () => {
         setToken(result.token);
         hideModal();
       } catch (error) {
-        console.log(path(['response'], error));
-
         const needsRegister = path(['response', 'status'], error) === 428;
 
         if (needsRegister && token) {
@@ -97,6 +95,7 @@ export const useOAuth = () => {
   );
 
   const accounts = useMemo(() => data || [], [data]);
+  const refresh = useCallback(() => mutate(), []);
 
   return {
     openOauthWindow,
@@ -106,5 +105,6 @@ export const useOAuth = () => {
     dropAccount,
     accounts,
     isLoading: !data && isLoading,
+    refresh,
   };
 };
diff --git a/src/hooks/auth/useOauthEventListeners.ts b/src/hooks/auth/useOauthEventListeners.ts
index 320804fe..1ae5c7eb 100644
--- a/src/hooks/auth/useOauthEventListeners.ts
+++ b/src/hooks/auth/useOauthEventListeners.ts
@@ -21,8 +21,6 @@ export const useOauthEventListeners = () => {
         return;
       }
 
-      console.log('caught event:', type, event.data);
-
       switch (type) {
         case EventMessageType.OAuthLogin:
           loginWithSocial(path(['data', 'payload', 'token'], event));
diff --git a/src/hooks/auth/useTelegramAccount.ts b/src/hooks/auth/useTelegramAccount.ts
index ca1b15ea..1a4d7ea8 100644
--- a/src/hooks/auth/useTelegramAccount.ts
+++ b/src/hooks/auth/useTelegramAccount.ts
@@ -1,13 +1,32 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { TelegramUser } from '@v9v/ts-react-telegram-login';
 
+import { showErrorToast } from '~/utils/errors/showToast';
+
 import { apiAttachTelegram } from '../../api/auth/index';
 
-export const useTelegramAccount = () => {
-  const attach = useCallback((data: TelegramUser) => {
-    apiAttachTelegram(data);
-  }, []);
+import { useOAuth } from './useOAuth';
 
-  return { attach };
+export const useTelegramAccount = () => {
+  const [loading, setLoading] = useState(false);
+  const { refresh } = useOAuth();
+
+  const attach = useCallback(
+    async (data: TelegramUser, callback?: () => void) => {
+      setLoading(true);
+      try {
+        await apiAttachTelegram(data);
+        await refresh();
+        callback?.();
+      } catch (error) {
+        showErrorToast(error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [],
+  );
+
+  return { attach, loading };
 };
diff --git a/src/types/auth/index.ts b/src/types/auth/index.ts
index d34c6b3d..4251a06e 100644
--- a/src/types/auth/index.ts
+++ b/src/types/auth/index.ts
@@ -20,7 +20,7 @@ export interface IUser {
   is_user: boolean;
 }
 
-export type OAuthProvider = 'vkontakte' | 'google';
+export type OAuthProvider = 'vkontakte' | 'google' | 'telegram';
 
 export interface ISocialAccount {
   provider: OAuthProvider;
diff --git a/src/utils/providers/SettingsProvider.tsx b/src/utils/providers/SettingsProvider.tsx
index 979bcc54..104e69a4 100644
--- a/src/utils/providers/SettingsProvider.tsx
+++ b/src/utils/providers/SettingsProvider.tsx
@@ -54,7 +54,6 @@ export const useSettingsForm = (
 
         const validationErrors = getValidationErrors(error);
         if (validationErrors) {
-          console.log(validationErrors);
           setErrors(validationErrors);
         }
       }

From e49f69a4e6ca956625eb5847524ecce0bd9ae887 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 13 Mar 2023 18:48:38 +0600
Subject: [PATCH 38/46] telegram: refreshing notification settings on account
 attachment

---
 src/containers/profile/ProfileAccounts/index.tsx          | 4 +---
 src/hooks/auth/useTelegramAccount.ts                      | 4 +++-
 src/hooks/notifications/useNotificationSettings.ts        | 4 +++-
 src/hooks/notifications/useNotificationSettingsRequest.ts | 3 +++
 src/utils/providers/NotificationProvider.tsx              | 1 +
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx
index 0c563950..6b953aa8 100644
--- a/src/containers/profile/ProfileAccounts/index.tsx
+++ b/src/containers/profile/ProfileAccounts/index.tsx
@@ -69,9 +69,7 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
                   </div>
                 </div>
 
-                <div className={styles.account__name}>
-                  {it.name || it.id} - {it.id} - {it.provider}
-                </div>
+                <div className={styles.account__name}>{it.name || it.id}</div>
 
                 <div className={styles.account__drop}>
                   <Icon
diff --git a/src/hooks/auth/useTelegramAccount.ts b/src/hooks/auth/useTelegramAccount.ts
index 1a4d7ea8..58d16e0d 100644
--- a/src/hooks/auth/useTelegramAccount.ts
+++ b/src/hooks/auth/useTelegramAccount.ts
@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
 import { TelegramUser } from '@v9v/ts-react-telegram-login';
 
 import { showErrorToast } from '~/utils/errors/showToast';
+import { useNotifications } from '~/utils/providers/NotificationProvider';
 
 import { apiAttachTelegram } from '../../api/auth/index';
 
@@ -11,13 +12,14 @@ import { useOAuth } from './useOAuth';
 export const useTelegramAccount = () => {
   const [loading, setLoading] = useState(false);
   const { refresh } = useOAuth();
+  const { refresh: refreshNotificationSettings } = useNotifications();
 
   const attach = useCallback(
     async (data: TelegramUser, callback?: () => void) => {
       setLoading(true);
       try {
         await apiAttachTelegram(data);
-        await refresh();
+        await Promise.all([refresh(), refreshNotificationSettings()]);
         callback?.();
       } catch (error) {
         showErrorToast(error);
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index 4b0c0ac2..f49e1e38 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { isAfter, isBefore, isEqual, isValid, parse, parseISO } from 'date-fns';
+import { isAfter, isEqual } from 'date-fns';
 
 import { useAuth } from '../auth/useAuth';
 
@@ -17,6 +17,7 @@ export const useNotificationSettings = () => {
     lastDate,
     isLoading: isLoadingSettings,
     update,
+    refresh,
   } = useNotificationSettingsRequest();
 
   const enabled =
@@ -45,5 +46,6 @@ export const useNotificationSettings = () => {
     indicatorEnabled,
     available: isUser,
     markAsRead,
+    refresh,
   };
 };
diff --git a/src/hooks/notifications/useNotificationSettingsRequest.ts b/src/hooks/notifications/useNotificationSettingsRequest.ts
index 6e54c08d..6cc5c2a9 100644
--- a/src/hooks/notifications/useNotificationSettingsRequest.ts
+++ b/src/hooks/notifications/useNotificationSettingsRequest.ts
@@ -63,6 +63,8 @@ export const useNotificationSettingsRequest = () => {
     [data, mutate],
   );
 
+  const refresh = useCallback(() => mutate(), [mutate]);
+
   return {
     isLoading,
     error,
@@ -75,6 +77,7 @@ export const useNotificationSettingsRequest = () => {
         ? parseISO(data?.last_date)
         : undefined,
     enabled: !!data?.enabled && (data.flow || data.comments),
+    refresh,
     update,
     updateError,
     isUpdating,
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
index b6d698ec..db4fe8ad 100644
--- a/src/utils/providers/NotificationProvider.tsx
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -12,6 +12,7 @@ const defaultValue = {
   hasNew: false,
   indicatorEnabled: false,
   markAsRead: () => {},
+  refresh: () => Promise.resolve() as Promise<unknown>,
 };
 
 const NotificationContext = createContext(defaultValue);

From d77a01d8bcfed7bd3641ff9eb0f9979686a4ebb5 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 14 Mar 2023 08:48:14 +0600
Subject: [PATCH 39/46] telegram: added env variable to Dockerfile

---
 .drone.yml               | 8 ++++++--
 docker/nextjs/Dockerfile | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index f18f21e2..0d9eefa7 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -16,16 +16,18 @@ steps:
       NEXT_PUBLIC_API_HOST: https://pig.vault48.org/
       NEXT_PUBLIC_REMOTE_CURRENT: https://pig.vault48.org/static/
       NEXT_PUBLIC_PUBLIC_HOST: https://vault48.org/
+      NEXT_PUBLIC_BOT_USERNAME: vault48bot
     settings:
       dockerfile: docker/nextjs/Dockerfile
       build_args_from_env:
         - NEXT_PUBLIC_API_HOST
         - NEXT_PUBLIC_REMOTE_CURRENT
         - NEXT_PUBLIC_PUBLIC_HOST
+        - NEXT_PUBLIC_BOT_USERNAME
       tag:
         - ${DRONE_BRANCH}
       custom_labels:
-        - "commit=${DRONE_COMMIT_SHA}"
+        - 'commit=${DRONE_COMMIT_SHA}'
       username:
         from_secret: global_docker_login
       password:
@@ -43,16 +45,18 @@ steps:
       NEXT_PUBLIC_API_HOST: https://pig.staging.vault48.org/
       NEXT_PUBLIC_REMOTE_CURRENT: https://pig.staging.vault48.org/static/
       NEXT_PUBLIC_PUBLIC_HOST: https://staging.vault48.org/
+      NEXT_PUBLIC_BOT_USERNAME: vault48bot
     settings:
       dockerfile: docker/nextjs/Dockerfile
       build_args_from_env:
         - NEXT_PUBLIC_API_HOST
         - NEXT_PUBLIC_REMOTE_CURRENT
         - NEXT_PUBLIC_PUBLIC_HOST
+        - NEXT_PUBLIC_BOT_USERNAME
       tag:
         - ${DRONE_BRANCH}
       custom_labels:
-        - "commit=${DRONE_COMMIT_SHA}"
+        - 'commit=${DRONE_COMMIT_SHA}'
       username:
         from_secret: global_docker_login
       password:
diff --git a/docker/nextjs/Dockerfile b/docker/nextjs/Dockerfile
index 01892cd6..3a010f69 100644
--- a/docker/nextjs/Dockerfile
+++ b/docker/nextjs/Dockerfile
@@ -7,10 +7,12 @@ COPY . .
 ARG NEXT_PUBLIC_API_HOST
 ARG NEXT_PUBLIC_REMOTE_CURRENT
 ARG NEXT_PUBLIC_PUBLIC_HOST
+ARG NEXT_PUBLIC_BOT_USERNAME
 
 ENV NEXT_PUBLIC_API_HOST $NEXT_PUBLIC_API_HOST
 ENV NEXT_PUBLIC_REMOTE_CURRENT $NEXT_PUBLIC_REMOTE_CURRENT
 ENV NEXT_PUBLIC_PUBLIC_HOST $NEXT_PUBLIC_PUBLIC_HOST
+ENV NEXT_PUBLIC_BOT_USERNAME $NEXT_PUBLIC_BOT_USERNAME
 
 RUN yarn next:build
 

From 7135d066733b2114fa85e1edf35e1d0f7530b5de Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 16 Mar 2023 11:00:29 +0600
Subject: [PATCH 40/46] notifications: notification settings page

---
 src/api/notifications/settings.ts             | 18 ++--
 src/api/notifications/types.ts                |  2 +
 src/components/input/InputRow/index.tsx       | 19 ++++
 .../input/InputRow/styles.module.scss         |  8 ++
 .../input/Toggle/styles.module.scss           |  4 +
 .../NotificationSettingsForm/index.tsx        | 91 +++++++++++++++++++
 .../styles.module.scss                        | 11 +++
 .../ProfileSidebarNotifications/index.tsx     |  6 +-
 .../NotificationSettings/index.tsx            | 30 ++++++
 .../profile/ProfileAccounts/index.tsx         | 20 ++--
 src/hooks/auth/useOAuth.ts                    | 12 +++
 .../notifications/useNotificationSettings.ts  | 14 +--
 .../useNotificationSettingsForm.ts            | 46 ++++++++++
 .../useNotificationSettingsRequest.ts         | 15 +--
 src/hooks/useFormAutosubmit.ts                | 20 ++++
 src/types/notifications/index.ts              | 10 ++
 .../notificationSettingsFromRequest.ts        | 28 ++++++
 17 files changed, 319 insertions(+), 35 deletions(-)
 create mode 100644 src/components/input/InputRow/index.tsx
 create mode 100644 src/components/input/InputRow/styles.module.scss
 create mode 100644 src/components/notifications/NotificationSettingsForm/index.tsx
 create mode 100644 src/components/notifications/NotificationSettingsForm/styles.module.scss
 create mode 100644 src/containers/notifications/NotificationSettings/index.tsx
 create mode 100644 src/hooks/notifications/useNotificationSettingsForm.ts
 create mode 100644 src/hooks/useFormAutosubmit.ts
 create mode 100644 src/utils/notifications/notificationSettingsFromRequest.ts

diff --git a/src/api/notifications/settings.ts b/src/api/notifications/settings.ts
index 6947bd81..232bbb94 100644
--- a/src/api/notifications/settings.ts
+++ b/src/api/notifications/settings.ts
@@ -1,17 +1,22 @@
 import { API } from '~/constants/api';
+import { NotificationSettings } from '~/types/notifications';
 import { api, cleanResult } from '~/utils/api';
+import {
+  notificationSettingsFromRequest,
+  notificationSettingsToRequest,
+} from '~/utils/notifications/notificationSettingsFromRequest';
 
 import {
   ApiGetNotificationSettingsResponse,
   ApiGetNotificationsResponse,
   ApiUpdateNotificationSettingsResponse,
-  ApiUpdateNotificationSettingsRequest,
 } from './types';
 
-export const apiGetNotificationSettings = () =>
+export const apiGetNotificationSettings = (): Promise<NotificationSettings> =>
   api
     .get<ApiGetNotificationSettingsResponse>(API.NOTIFICATIONS.SETTINGS)
-    .then(cleanResult);
+    .then(cleanResult)
+    .then(notificationSettingsFromRequest);
 
 export const apiGetNotifications = () =>
   api
@@ -19,11 +24,12 @@ export const apiGetNotifications = () =>
     .then(cleanResult);
 
 export const apiUpdateNotificationSettings = (
-  settings: ApiUpdateNotificationSettingsRequest,
+  settings: Partial<NotificationSettings>,
 ) =>
   api
     .post<ApiUpdateNotificationSettingsResponse>(
       API.NOTIFICATIONS.SETTINGS,
-      settings,
+      notificationSettingsToRequest(settings),
     )
-    .then(cleanResult);
+    .then(cleanResult)
+    .then(notificationSettingsFromRequest);
diff --git a/src/api/notifications/types.ts b/src/api/notifications/types.ts
index d998a1ec..c17c575d 100644
--- a/src/api/notifications/types.ts
+++ b/src/api/notifications/types.ts
@@ -4,6 +4,8 @@ export interface ApiGetNotificationSettingsResponse {
   enabled: boolean;
   flow: boolean;
   comments: boolean;
+  send_telegram: boolean;
+  show_indicator: boolean;
   last_seen?: string | null;
   last_date?: string | null;
 }
diff --git a/src/components/input/InputRow/index.tsx b/src/components/input/InputRow/index.tsx
new file mode 100644
index 00000000..9fb25231
--- /dev/null
+++ b/src/components/input/InputRow/index.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface InputRowProps {
+  className?: string;
+  input?: ReactNode;
+}
+
+const InputRow: FC<InputRowProps> = ({ children, input, className }) => (
+  <div className={classNames(styles.row, className)}>
+    <div>{children}</div>
+    {!!input && <div>{input}</div>}
+  </div>
+);
+
+export { InputRow };
diff --git a/src/components/input/InputRow/styles.module.scss b/src/components/input/InputRow/styles.module.scss
new file mode 100644
index 00000000..5de8b9d1
--- /dev/null
+++ b/src/components/input/InputRow/styles.module.scss
@@ -0,0 +1,8 @@
+@import 'src/styles/variables';
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  row-gap: $gap;
+  align-items: center;
+}
diff --git a/src/components/input/Toggle/styles.module.scss b/src/components/input/Toggle/styles.module.scss
index 52db0036..253933a6 100644
--- a/src/components/input/Toggle/styles.module.scss
+++ b/src/components/input/Toggle/styles.module.scss
@@ -38,6 +38,10 @@
     transition: transform 0.25s, color 0.25s, background-color;
   }
 
+  &:disabled {
+    opacity: 0.5;
+  }
+
   &.active {
     &::after {
       transform: translate(24px, 0);
diff --git a/src/components/notifications/NotificationSettingsForm/index.tsx b/src/components/notifications/NotificationSettingsForm/index.tsx
new file mode 100644
index 00000000..3eb1d8b2
--- /dev/null
+++ b/src/components/notifications/NotificationSettingsForm/index.tsx
@@ -0,0 +1,91 @@
+import React, { FC, useCallback } from 'react';
+
+import { Group } from '~/components/containers/Group';
+import { Zone } from '~/components/containers/Zone';
+import { Button } from '~/components/input/Button';
+import { InputRow } from '~/components/input/InputRow';
+import { Toggle } from '~/components/input/Toggle';
+import { useNotificationSettingsForm } from '~/hooks/notifications/useNotificationSettingsForm';
+import { NotificationSettings } from '~/types/notifications';
+
+import styles from './styles.module.scss';
+
+interface NotificationSettingsFormProps {
+  value: NotificationSettings;
+  onSubmit: (val: Partial<NotificationSettings>) => Promise<unknown>;
+  telegramConnected: boolean;
+  onConnectTelegram: () => void;
+}
+
+const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
+  value,
+  onSubmit,
+  telegramConnected,
+  onConnectTelegram,
+}) => {
+  const { setFieldValue, values } = useNotificationSettingsForm(
+    value,
+    onSubmit,
+  );
+
+  const toggle = useCallback(
+    (key: keyof NotificationSettings, disabled?: boolean) => (
+      <Toggle
+        handler={(val) => setFieldValue(key, val)}
+        value={values[key]}
+        disabled={disabled}
+      />
+    ),
+    [setFieldValue, values],
+  );
+
+  const telegramInput = telegramConnected ? (
+    toggle('sendTelegram', !values.enabled)
+  ) : (
+    <Button size="micro" onClick={onConnectTelegram}>
+      Подключить
+    </Button>
+  );
+
+  return (
+    <Group>
+      <Zone title="Уведомления">
+        <Group>
+          <InputRow className={styles.row} input={toggle('enabled')}>
+            Включены
+          </InputRow>
+          <InputRow
+            className={styles.row}
+            input={toggle('flow', !values.enabled)}
+          >
+            Новые посты
+          </InputRow>
+
+          <InputRow
+            className={styles.row}
+            input={toggle('comments', !values.enabled)}
+          >
+            Комментарии
+          </InputRow>
+        </Group>
+      </Zone>
+
+      <Zone title="Уведомления">
+        <Group>
+          <InputRow
+            className={styles.row}
+            input={toggle('showIndicator', !values.enabled)}
+          >
+            На иконке профиля
+          </InputRow>
+
+          <InputRow className={styles.row} input={telegramInput}>
+            Телеграм
+          </InputRow>
+        </Group>
+      </Zone>
+    </Group>
+  );
+};
+
+export { NotificationSettingsForm };
diff --git a/src/components/notifications/NotificationSettingsForm/styles.module.scss b/src/components/notifications/NotificationSettingsForm/styles.module.scss
new file mode 100644
index 00000000..c62e1dc5
--- /dev/null
+++ b/src/components/notifications/NotificationSettingsForm/styles.module.scss
@@ -0,0 +1,11 @@
+@import 'src/styles/variables';
+
+.grid {
+  display: grid;
+  grid-auto-flow: row;
+  row-gap: $gap;
+}
+
+.row {
+  font: $font_14_regular;
+}
diff --git a/src/components/profile/ProfileSidebarNotifications/index.tsx b/src/components/profile/ProfileSidebarNotifications/index.tsx
index 07fc114c..ba095528 100644
--- a/src/components/profile/ProfileSidebarNotifications/index.tsx
+++ b/src/components/profile/ProfileSidebarNotifications/index.tsx
@@ -1,9 +1,9 @@
 import { VFC } from 'react';
 
+import { Padder } from '~/components/containers/Padder';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
-
-import { NotificationList } from '../../../containers/notifications/NotificationList/index';
+import { NotificationSettings } from '~/containers/notifications/NotificationSettings';
 
 interface ProfileSidebarNotificationsProps {}
 
@@ -19,7 +19,7 @@ const ProfileSidebarNotifications: VFC<
       title="Уведомления"
       onBackPress={closeAllTabs}
     >
-      <NotificationList />
+      <NotificationSettings />
     </SidebarStackCard>
   );
 };
diff --git a/src/containers/notifications/NotificationSettings/index.tsx b/src/containers/notifications/NotificationSettings/index.tsx
new file mode 100644
index 00000000..24ac8ce5
--- /dev/null
+++ b/src/containers/notifications/NotificationSettings/index.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react';
+
+import { Padder } from '~/components/containers/Padder';
+import { NotificationSettingsForm } from '~/components/notifications/NotificationSettingsForm';
+import { useOAuth } from '~/hooks/auth/useOAuth';
+import { useNotificationSettings } from '~/hooks/notifications/useNotificationSettings';
+
+interface NotificationSettingsProps {}
+
+const NotificationSettings: FC<NotificationSettingsProps> = () => {
+  const { settings, update } = useNotificationSettings();
+  const { hasTelegram, showTelegramModal } = useOAuth();
+
+  if (!settings) {
+    return <>{null}</>;
+  }
+
+  return (
+    <Padder>
+      <NotificationSettingsForm
+        value={settings}
+        onSubmit={update}
+        telegramConnected={hasTelegram}
+        onConnectTelegram={showTelegramModal}
+      />
+    </Padder>
+  );
+};
+
+export { NotificationSettings };
diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx
index 6b953aa8..d57e7ad1 100644
--- a/src/containers/profile/ProfileAccounts/index.tsx
+++ b/src/containers/profile/ProfileAccounts/index.tsx
@@ -15,18 +15,14 @@ import styles from './styles.module.scss';
 type ProfileAccountsProps = {};
 
 const ProfileAccounts: FC<ProfileAccountsProps> = () => {
-  const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth();
-  const { showModal } = useModal();
-
-  const hasTelegram = useMemo(
-    () => accounts.some((acc) => acc.provider === 'telegram'),
-    [accounts],
-  );
-
-  const showTelegramModal = useCallback(
-    () => showModal(Dialog.TelegramAttach, {}),
-    [],
-  );
+  const {
+    isLoading,
+    accounts,
+    dropAccount,
+    openOauthWindow,
+    hasTelegram,
+    showTelegramModal,
+  } = useOAuth();
 
   return (
     <Group className={styles.wrap}>
diff --git a/src/hooks/auth/useOAuth.ts b/src/hooks/auth/useOAuth.ts
index c097b4e7..8a1f9a82 100644
--- a/src/hooks/auth/useOAuth.ts
+++ b/src/hooks/auth/useOAuth.ts
@@ -97,7 +97,19 @@ export const useOAuth = () => {
   const accounts = useMemo(() => data || [], [data]);
   const refresh = useCallback(() => mutate(), []);
 
+  const hasTelegram = useMemo(
+    () => accounts.some((acc) => acc.provider === 'telegram'),
+    [accounts],
+  );
+
+  const showTelegramModal = useCallback(
+    () => showModal(Dialog.TelegramAttach, {}),
+    [],
+  );
+
   return {
+    hasTelegram,
+    showTelegramModal,
     openOauthWindow,
     loginWithSocial,
     createSocialAccount,
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index f49e1e38..e3ad2434 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -7,8 +7,7 @@ import { useAuth } from '../auth/useAuth';
 import { useNotificationSettingsRequest } from './useNotificationSettingsRequest';
 
 export const useNotificationSettings = () => {
-  // TODO: remove isTester
-  const { isUser, isTester } = useAuth();
+  const { isUser } = useAuth();
 
   const {
     error: settingsError,
@@ -18,16 +17,15 @@ export const useNotificationSettings = () => {
     isLoading: isLoadingSettings,
     update,
     refresh,
+    settings,
   } = useNotificationSettingsRequest();
 
-  const enabled =
-    !isLoadingSettings && !settingsError && settingsEnabled && isTester;
+  const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
 
   const hasNew =
     enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
 
-  // TODO: store `indicator` as option and include it here
-  const indicatorEnabled = enabled && true;
+  const indicatorEnabled = enabled && !!settings?.showIndicator;
 
   const markAsRead = useCallback(() => {
     if (
@@ -37,7 +35,7 @@ export const useNotificationSettings = () => {
       return;
     }
 
-    update({ last_seen: lastDate.toISOString() });
+    update({ lastSeen: lastDate.toISOString() });
   }, [update, lastDate, lastSeen]);
 
   return {
@@ -45,7 +43,9 @@ export const useNotificationSettings = () => {
     hasNew,
     indicatorEnabled,
     available: isUser,
+    settings,
     markAsRead,
     refresh,
+    update,
   };
 };
diff --git a/src/hooks/notifications/useNotificationSettingsForm.ts b/src/hooks/notifications/useNotificationSettingsForm.ts
new file mode 100644
index 00000000..f01fabb7
--- /dev/null
+++ b/src/hooks/notifications/useNotificationSettingsForm.ts
@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+
+import { FormikConfig, useFormik } from 'formik';
+import { Asserts, boolean, object } from 'yup';
+
+import { showErrorToast } from '~/utils/errors/showToast';
+
+import { useFormAutoSubmit } from '../useFormAutosubmit';
+
+const validationSchema = object({
+  enabled: boolean().default(false),
+  flow: boolean().default(false),
+  comments: boolean().default(false),
+  sendTelegram: boolean().default(false),
+  showIndicator: boolean().default(false),
+});
+
+type Values = Asserts<typeof validationSchema>;
+
+export const useNotificationSettingsForm = (
+  initialValues: Values,
+  submit: (val: Values) => void,
+) => {
+  const onSubmit = useCallback<FormikConfig<Values>['onSubmit']>(
+    async (values, { setSubmitting }) => {
+      try {
+        await submit(values);
+      } catch (error) {
+        showErrorToast(error);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [submit],
+  );
+
+  const formik = useFormik<Values>({
+    initialValues,
+    validationSchema,
+    onSubmit,
+  });
+
+  useFormAutoSubmit(formik.values, formik.handleSubmit);
+
+  return formik;
+};
diff --git a/src/hooks/notifications/useNotificationSettingsRequest.ts b/src/hooks/notifications/useNotificationSettingsRequest.ts
index 6cc5c2a9..531c33b5 100644
--- a/src/hooks/notifications/useNotificationSettingsRequest.ts
+++ b/src/hooks/notifications/useNotificationSettingsRequest.ts
@@ -7,8 +7,8 @@ import {
   apiGetNotificationSettings,
   apiUpdateNotificationSettings,
 } from '~/api/notifications/settings';
-import { ApiUpdateNotificationSettingsRequest } from '~/api/notifications/types';
 import { API } from '~/constants/api';
+import { NotificationSettings } from '~/types/notifications';
 import { getErrorMessage } from '~/utils/errors/getErrorMessage';
 import { showErrorToast } from '~/utils/errors/showToast';
 
@@ -28,12 +28,12 @@ export const useNotificationSettingsRequest = () => {
     mutate,
   } = useSWR(
     isUser ? API.NOTIFICATIONS.SETTINGS : null,
-    async () => apiGetNotificationSettings(),
+    apiGetNotificationSettings,
     { refreshInterval },
   );
 
   const update = useCallback(
-    async (settings: ApiUpdateNotificationSettingsRequest) => {
+    async (settings: Partial<NotificationSettings>) => {
       if (!data) {
         return;
       }
@@ -69,14 +69,15 @@ export const useNotificationSettingsRequest = () => {
     isLoading,
     error,
     lastSeen:
-      data?.last_seen && isValid(parseISO(data.last_seen))
-        ? parseISO(data?.last_seen)
+      data?.lastSeen && isValid(parseISO(data.lastSeen))
+        ? parseISO(data?.lastSeen)
         : undefined,
     lastDate:
-      data?.last_date && isValid(parseISO(data.last_date))
-        ? parseISO(data?.last_date)
+      data?.lastDate && isValid(parseISO(data.lastDate))
+        ? parseISO(data?.lastDate)
         : undefined,
     enabled: !!data?.enabled && (data.flow || data.comments),
+    settings: data,
     refresh,
     update,
     updateError,
diff --git a/src/hooks/useFormAutosubmit.ts b/src/hooks/useFormAutosubmit.ts
new file mode 100644
index 00000000..6b966ad1
--- /dev/null
+++ b/src/hooks/useFormAutosubmit.ts
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+export const useFormAutoSubmit = <T>(
+  values: T,
+  onSubmit: () => void,
+  delay = 1000,
+) => {
+  const prevValue = useRef<T>();
+
+  useEffect(() => {
+    if (!prevValue.current) {
+      prevValue.current = values;
+      return;
+    }
+
+    const timeout = setTimeout(onSubmit, delay);
+
+    return () => clearTimeout(timeout);
+  }, [values]);
+};
diff --git a/src/types/notifications/index.ts b/src/types/notifications/index.ts
index 0ceab48e..29f038b9 100644
--- a/src/types/notifications/index.ts
+++ b/src/types/notifications/index.ts
@@ -14,3 +14,13 @@ export enum NotificationType {
   Node = 'node',
   Comment = 'comment',
 }
+
+export interface NotificationSettings {
+  enabled: boolean;
+  flow: boolean;
+  comments: boolean;
+  sendTelegram: boolean;
+  showIndicator: boolean;
+  lastSeen: string | null;
+  lastDate: string | null;
+}
diff --git a/src/utils/notifications/notificationSettingsFromRequest.ts b/src/utils/notifications/notificationSettingsFromRequest.ts
new file mode 100644
index 00000000..1f067a5d
--- /dev/null
+++ b/src/utils/notifications/notificationSettingsFromRequest.ts
@@ -0,0 +1,28 @@
+import { ApiGetNotificationSettingsResponse } from '~/api/notifications/types';
+import { NotificationSettings } from '~/types/notifications';
+
+import { ApiUpdateNotificationSettingsRequest } from '../../api/notifications/types';
+
+export const notificationSettingsFromRequest = (
+  req: ApiGetNotificationSettingsResponse,
+): NotificationSettings => ({
+  enabled: req.enabled,
+  flow: req.flow,
+  comments: req.comments,
+  sendTelegram: req.send_telegram,
+  showIndicator: req.show_indicator,
+  lastDate: req.last_date ?? null,
+  lastSeen: req.last_seen ?? null,
+});
+
+export const notificationSettingsToRequest = (
+  req: Partial<NotificationSettings>,
+): ApiUpdateNotificationSettingsRequest => ({
+  enabled: req.enabled,
+  flow: req.flow,
+  comments: req.comments,
+  send_telegram: req.sendTelegram,
+  show_indicator: req.showIndicator,
+  last_date: req.lastDate,
+  last_seen: req.lastSeen,
+});

From f9e0ecdd0ceab4cb265f6690d7c815d1e3273405 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 16 Mar 2023 11:35:31 +0600
Subject: [PATCH 41/46] notifications: added tabs to notification screen

---
 src/components/input/LoaderScreen/index.tsx   | 25 +++++++++
 .../input/LoaderScreen/styles.module.scss     | 14 +++++
 src/components/menu/HorizontalMenu/index.tsx  |  8 ++-
 .../menu/HorizontalMenu/styles.module.scss    |  5 ++
 .../NotificationSettingsForm/index.tsx        | 18 ++++--
 .../ProfileSidebarNotifications/index.tsx     | 55 ++++++++++++++++---
 .../styles.module.scss                        | 31 +++++++++++
 .../notifications/NotificationList/index.tsx  |  6 +-
 .../notifications/useNotificationSettings.ts  |  5 +-
 .../useNotificationSettingsRequest.ts         |  2 +-
 10 files changed, 148 insertions(+), 21 deletions(-)
 create mode 100644 src/components/input/LoaderScreen/index.tsx
 create mode 100644 src/components/input/LoaderScreen/styles.module.scss
 create mode 100644 src/components/profile/ProfileSidebarNotifications/styles.module.scss

diff --git a/src/components/input/LoaderScreen/index.tsx b/src/components/input/LoaderScreen/index.tsx
new file mode 100644
index 00000000..0cc3c1da
--- /dev/null
+++ b/src/components/input/LoaderScreen/index.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { LoaderCircle } from '../LoaderCircle';
+
+import styles from './styles.module.scss';
+
+interface LoaderScreenProps {
+  className?: string;
+  align?: 'top' | 'middle';
+}
+
+const LoaderScreen: FC<LoaderScreenProps> = ({
+  className,
+  align = 'middle',
+}) => (
+  <div
+    className={classNames(styles.screen, styles[`align-${align}`], className)}
+  >
+    <LoaderCircle size={32} />
+  </div>
+);
+
+export { LoaderScreen };
diff --git a/src/components/input/LoaderScreen/styles.module.scss b/src/components/input/LoaderScreen/styles.module.scss
new file mode 100644
index 00000000..09e8cce1
--- /dev/null
+++ b/src/components/input/LoaderScreen/styles.module.scss
@@ -0,0 +1,14 @@
+@import 'src/styles/variables';
+
+.screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $gap;
+
+  &.align-top {
+    align-items: flex-start;
+  }
+}
diff --git a/src/components/menu/HorizontalMenu/index.tsx b/src/components/menu/HorizontalMenu/index.tsx
index 51daf0d2..146f1ebc 100644
--- a/src/components/menu/HorizontalMenu/index.tsx
+++ b/src/components/menu/HorizontalMenu/index.tsx
@@ -14,6 +14,7 @@ interface HorizontalMenuItemProps {
   icon?: string;
   color?: 'green' | 'orange' | 'yellow';
   active?: boolean;
+  stretchy?: boolean;
   onClick?: () => void;
 }
 
@@ -31,6 +32,7 @@ HorizontalMenu.Item = ({
   children,
   isLoading,
   active,
+  stretchy,
   onClick,
 }: PropsWithChildren<HorizontalMenuItemProps>) => {
   if (isLoading) {
@@ -44,7 +46,11 @@ HorizontalMenu.Item = ({
 
   return (
     <div
-      className={classNames(styles.item, { [styles.active]: active }, styles[color])}
+      className={classNames(
+        styles.item,
+        { [styles.active]: active, [styles.stretchy]: stretchy },
+        styles[color],
+      )}
       onClick={onClick}
     >
       {!!icon && <Icon icon={icon} size={24} />}
diff --git a/src/components/menu/HorizontalMenu/styles.module.scss b/src/components/menu/HorizontalMenu/styles.module.scss
index e4ae9935..54d3c298 100644
--- a/src/components/menu/HorizontalMenu/styles.module.scss
+++ b/src/components/menu/HorizontalMenu/styles.module.scss
@@ -57,6 +57,11 @@
       background: $warning_gradient;
     }
   }
+
+  &.stretchy {
+    flex: 1;
+    justify-content: center;
+  }
 }
 
 .text {
diff --git a/src/components/notifications/NotificationSettingsForm/index.tsx b/src/components/notifications/NotificationSettingsForm/index.tsx
index 3eb1d8b2..9abebdc5 100644
--- a/src/components/notifications/NotificationSettingsForm/index.tsx
+++ b/src/components/notifications/NotificationSettingsForm/index.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useCallback } from 'react';
 
+import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
 import { Zone } from '~/components/containers/Zone';
 import { Button } from '~/components/input/Button';
@@ -49,11 +50,16 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
 
   return (
     <Group>
-      <Zone title="Уведомления">
+      <Card>
+        <InputRow className={styles.row} input={toggle('enabled')}>
+          Получать уведомления
+        </InputRow>
+      </Card>
+
+      <div />
+
+      <Zone title="Типы уведомлений">
         <Group>
-          <InputRow className={styles.row} input={toggle('enabled')}>
-            Включены
-          </InputRow>
           <InputRow
             className={styles.row}
             input={toggle('flow', !values.enabled)}
@@ -70,7 +76,9 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
         </Group>
       </Zone>
 
-      <Zone title="Уведомления">
+      <div />
+
+      <Zone title="Способы доставки">
         <Group>
           <InputRow
             className={styles.row}
diff --git a/src/components/profile/ProfileSidebarNotifications/index.tsx b/src/components/profile/ProfileSidebarNotifications/index.tsx
index ba095528..7a700117 100644
--- a/src/components/profile/ProfileSidebarNotifications/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/profile/ProfileSidebarNotifications/styles.module.scss b/src/components/profile/ProfileSidebarNotifications/styles.module.scss
new file mode 100644
index 00000000..59f37f49
--- /dev/null
+++ b/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%;
+}
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index c1759845..b086f87b 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/src/containers/notifications/NotificationList/index.tsx
@@ -1,6 +1,6 @@
-import React, { FC, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 
-import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { LoaderScreen } from '~/components/input/LoaderScreen';
 import { NotificationComment } from '~/components/notifications/NotificationComment';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
 import { useNotifications } from '~/utils/providers/NotificationProvider';
@@ -18,7 +18,7 @@ const NotificationList: FC<NotificationListProps> = () => {
   }, []);
 
   if (isLoading) {
-    return <LoaderCircle />;
+    return <LoaderScreen align="top" />;
   }
 
   return (
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index e3ad2434..aa65118e 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -14,13 +14,13 @@ export const useNotificationSettings = () => {
     enabled: settingsEnabled,
     lastSeen,
     lastDate,
-    isLoading: isLoadingSettings,
+    isLoading,
     update,
     refresh,
     settings,
   } = useNotificationSettingsRequest();
 
-  const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
+  const enabled = !isLoading && !settingsError && settingsEnabled;
 
   const hasNew =
     enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
@@ -47,5 +47,6 @@ export const useNotificationSettings = () => {
     markAsRead,
     refresh,
     update,
+    loading: isLoading,
   };
 };
diff --git a/src/hooks/notifications/useNotificationSettingsRequest.ts b/src/hooks/notifications/useNotificationSettingsRequest.ts
index 531c33b5..43046ac0 100644
--- a/src/hooks/notifications/useNotificationSettingsRequest.ts
+++ b/src/hooks/notifications/useNotificationSettingsRequest.ts
@@ -66,7 +66,7 @@ export const useNotificationSettingsRequest = () => {
   const refresh = useCallback(() => mutate(), [mutate]);
 
   return {
-    isLoading,
+    isLoading: isLoading && !data,
     error,
     lastSeen:
       data?.lastSeen && isValid(parseISO(data.lastSeen))

From 14bf5be65f29c296fcd0a6f75b217dbf32009f5e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 16 Mar 2023 14:22:52 +0600
Subject: [PATCH 42/46] notifications: show toggle button on list if
 notifications disabled

---
 .../input/InputRow/styles.module.scss         |  1 +
 .../NotificationSettingsForm/index.tsx        | 23 ++++---------------
 .../styles.module.scss                        |  4 ----
 .../notifications/NotificationList/index.tsx  | 22 ++++++++++++++++--
 .../NotificationList/styles.module.scss       | 15 ++++++++++++
 .../notifications/useNotificationSettings.ts  |  6 +++++
 .../notifications/useNotificationsList.ts     | 11 ++++-----
 src/utils/providers/NotificationProvider.tsx  |  1 +
 8 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/components/input/InputRow/styles.module.scss b/src/components/input/InputRow/styles.module.scss
index 5de8b9d1..8f341d7f 100644
--- a/src/components/input/InputRow/styles.module.scss
+++ b/src/components/input/InputRow/styles.module.scss
@@ -5,4 +5,5 @@
   grid-template-columns: 1fr auto;
   row-gap: $gap;
   align-items: center;
+  font: $font_14_medium;
 }
diff --git a/src/components/notifications/NotificationSettingsForm/index.tsx b/src/components/notifications/NotificationSettingsForm/index.tsx
index 9abebdc5..c9387ad4 100644
--- a/src/components/notifications/NotificationSettingsForm/index.tsx
+++ b/src/components/notifications/NotificationSettingsForm/index.tsx
@@ -51,26 +51,18 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
   return (
     <Group>
       <Card>
-        <InputRow className={styles.row} input={toggle('enabled')}>
-          Получать уведомления
-        </InputRow>
+        <InputRow input={toggle('enabled')}>Получать уведомления</InputRow>
       </Card>
 
       <div />
 
       <Zone title="Типы уведомлений">
         <Group>
-          <InputRow
-            className={styles.row}
-            input={toggle('flow', !values.enabled)}
-          >
+          <InputRow input={toggle('flow', !values.enabled)}>
             Новые посты
           </InputRow>
 
-          <InputRow
-            className={styles.row}
-            input={toggle('comments', !values.enabled)}
-          >
+          <InputRow input={toggle('comments', !values.enabled)}>
             Комментарии
           </InputRow>
         </Group>
@@ -80,16 +72,11 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
 
       <Zone title="Способы доставки">
         <Group>
-          <InputRow
-            className={styles.row}
-            input={toggle('showIndicator', !values.enabled)}
-          >
+          <InputRow input={toggle('showIndicator', !values.enabled)}>
             На иконке профиля
           </InputRow>
 
-          <InputRow className={styles.row} input={telegramInput}>
-            Телеграм
-          </InputRow>
+          <InputRow input={telegramInput}>Телеграм</InputRow>
         </Group>
       </Zone>
     </Group>
diff --git a/src/components/notifications/NotificationSettingsForm/styles.module.scss b/src/components/notifications/NotificationSettingsForm/styles.module.scss
index c62e1dc5..4aa76416 100644
--- a/src/components/notifications/NotificationSettingsForm/styles.module.scss
+++ b/src/components/notifications/NotificationSettingsForm/styles.module.scss
@@ -5,7 +5,3 @@
   grid-auto-flow: row;
   row-gap: $gap;
 }
-
-.row {
-  font: $font_14_regular;
-}
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index b086f87b..60f1ec4d 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/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}>
diff --git a/src/containers/notifications/NotificationList/styles.module.scss b/src/containers/notifications/NotificationList/styles.module.scss
index 594c5406..f2f9fbc1 100644
--- a/src/containers/notifications/NotificationList/styles.module.scss
+++ b/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 {
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index aa65118e..356db9f8 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -38,6 +38,11 @@ export const useNotificationSettings = () => {
     update({ lastSeen: lastDate.toISOString() });
   }, [update, lastDate, lastSeen]);
 
+  const toggleEnabled = useCallback(
+    () => update({ enabled: !settings?.enabled }),
+    [update, settings],
+  );
+
   return {
     enabled,
     hasNew,
@@ -48,5 +53,6 @@ export const useNotificationSettings = () => {
     refresh,
     update,
     loading: isLoading,
+    toggleEnabled,
   };
 };
diff --git a/src/hooks/notifications/useNotificationsList.ts b/src/hooks/notifications/useNotificationsList.ts
index 1f3cfd78..c690f0c3 100644
--- a/src/hooks/notifications/useNotificationsList.ts
+++ b/src/hooks/notifications/useNotificationsList.ts
@@ -8,13 +8,10 @@ import { useAuth } from '../auth/useAuth';
 export const useNotificationsList = () => {
   const { isUser } = useAuth();
 
-  const {
-    data,
-    isValidating: isLoading,
-    error,
-  } = useSWR(isUser ? API.NOTIFICATIONS.LIST : null, async () =>
-    apiGetNotifications(),
+  const { data, isValidating, error } = useSWR(
+    isUser ? API.NOTIFICATIONS.LIST : null,
+    async () => apiGetNotifications(),
   );
 
-  return { isLoading, error, ...data };
+  return { isLoading: isValidating && !data, error, ...data };
 };
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
index db4fe8ad..553be56e 100644
--- a/src/utils/providers/NotificationProvider.tsx
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -11,6 +11,7 @@ const defaultValue = {
   enabled: false,
   hasNew: false,
   indicatorEnabled: false,
+  toggleEnabled: () => {},
   markAsRead: () => {},
   refresh: () => Promise.resolve() as Promise<unknown>,
 };

From d9544e917bea4a7843f67e4e196ccdfd34f3fc56 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 16 Mar 2023 16:37:43 +0600
Subject: [PATCH 43/46] notifications: for nodes

---
 src/components/flow/FlowRecentItem/index.tsx  |  7 ++--
 src/components/node/NodeRelated/index.tsx     |  4 +-
 .../node/NodeRelated/placeholder.tsx          |  2 +-
 .../index.tsx                                 | 14 ++++---
 .../styles.module.scss                        |  0
 .../NotificationComment/index.tsx             | 17 ++++++--
 .../NotificationComment/styles.module.scss    | 32 ++++++++++++---
 .../notifications/NotificationNode/index.tsx  | 39 +++++++++++++++++++
 .../NotificationNode/styles.module.scss       | 36 +++++++++++++++++
 .../notifications/NotificationList/index.tsx  | 17 +++++++-
 .../NotificationList/styles.module.scss       |  3 +-
 src/hooks/node/useGotoNode.ts                 | 11 ++++--
 src/types/notifications/index.ts              |  1 +
 13 files changed, 156 insertions(+), 27 deletions(-)
 rename src/components/node/{NodeRelatedItem => NodeThumbnail}/index.tsx (92%)
 rename src/components/node/{NodeRelatedItem => NodeThumbnail}/styles.module.scss (100%)
 create mode 100644 src/components/notifications/NotificationNode/index.tsx
 create mode 100644 src/components/notifications/NotificationNode/styles.module.scss

diff --git a/src/components/flow/FlowRecentItem/index.tsx b/src/components/flow/FlowRecentItem/index.tsx
index 9c01f980..02e18c8d 100644
--- a/src/components/flow/FlowRecentItem/index.tsx
+++ b/src/components/flow/FlowRecentItem/index.tsx
@@ -1,10 +1,9 @@
-import React, { FC, MouseEventHandler } from 'react';
+import { FC, MouseEventHandler } from 'react';
 
 import classNames from 'classnames';
 
 import { Anchor } from '~/components/common/Anchor';
-import { Icon } from '~/components/input/Icon';
-import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
+import { NodeThumbnail } from '~/components/node/NodeThumbnail';
 import { URLS } from '~/constants/urls';
 import { INode } from '~/types';
 import { getPrettyDate } from '~/utils/dom';
@@ -31,7 +30,7 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
           [styles.lab]: !node.is_promoted,
         })}
       >
-        <NodeRelatedItem item={node} />
+        <NodeThumbnail item={node} />
       </div>
 
       <div className={styles.info}>
diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx
index ea300ff6..b5b7ede1 100644
--- a/src/components/node/NodeRelated/index.tsx
+++ b/src/components/node/NodeRelated/index.tsx
@@ -3,7 +3,7 @@ import React, { FC, ReactElement } from 'react';
 import { Hoverable } from '~/components/common/Hoverable';
 import { SubTitle } from '~/components/common/SubTitle';
 import { Group } from '~/components/containers/Group';
-import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
+import { NodeThumbnail } from '~/components/node/NodeThumbnail';
 import { INode } from '~/types';
 
 import styles from './styles.module.scss';
@@ -21,7 +21,7 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
       <div className={styles.grid}>
         {items.map((item) => (
           <Hoverable key={item.id} className={styles.item}>
-            <NodeRelatedItem item={item} />
+            <NodeThumbnail item={item} />
           </Hoverable>
         ))}
       </div>
diff --git a/src/components/node/NodeRelated/placeholder.tsx b/src/components/node/NodeRelated/placeholder.tsx
index e1749b2e..b63433a8 100644
--- a/src/components/node/NodeRelated/placeholder.tsx
+++ b/src/components/node/NodeRelated/placeholder.tsx
@@ -3,7 +3,7 @@ import React, { FC, memo } from 'react';
 import classNames from 'classnames';
 
 import { Group } from '~/components/containers/Group';
-import cell_style from '~/components/node/NodeRelatedItem/styles.module.scss';
+import cell_style from '~/components/node/NodeThumbnail/styles.module.scss';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { range } from '~/utils/ramda';
 
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeThumbnail/index.tsx
similarity index 92%
rename from src/components/node/NodeRelatedItem/index.tsx
rename to src/components/node/NodeThumbnail/index.tsx
index d33693b8..1dd757a3 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeThumbnail/index.tsx
@@ -8,13 +8,17 @@ import { Icon } from '~/components/input/Icon';
 import { imagePresets } from '~/constants/urls';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
-import { INode } from '~/types';
 import { getURL, getURLFromString } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-type IProps = {
-  item: Partial<INode>;
+type NodeThumbnailProps = {
+  item: {
+    thumbnail?: string;
+    title?: string;
+    is_promoted?: boolean;
+    id?: number;
+  };
 };
 
 type CellSize = 'small' | 'medium' | 'large';
@@ -33,7 +37,7 @@ const getTitleLetters = (title?: string): string => {
     : words[0].substr(0, 2).toUpperCase();
 };
 
-const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
+const NodeThumbnail: FC<NodeThumbnailProps> = memo(({ item }) => {
   const onClick = useGotoNode(item.id);
   const [is_loaded, setIsLoaded] = useState(false);
   const [width, setWidth] = useState(0);
@@ -118,4 +122,4 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   );
 });
 
-export { NodeRelatedItem };
+export { NodeThumbnail };
diff --git a/src/components/node/NodeRelatedItem/styles.module.scss b/src/components/node/NodeThumbnail/styles.module.scss
similarity index 100%
rename from src/components/node/NodeRelatedItem/styles.module.scss
rename to src/components/node/NodeThumbnail/styles.module.scss
diff --git a/src/components/notifications/NotificationComment/index.tsx b/src/components/notifications/NotificationComment/index.tsx
index 2f7c1b42..0310cc85 100644
--- a/src/components/notifications/NotificationComment/index.tsx
+++ b/src/components/notifications/NotificationComment/index.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import { Anchor } from '~/components/common/Anchor';
+import { Avatar } from '~/components/common/Avatar';
 import { InlineUsername } from '~/components/common/InlineUsername';
 import { Square } from '~/components/common/Square';
 import { NotificationItem } from '~/types/notifications';
@@ -16,8 +17,10 @@ const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
   <Anchor href={item.url} className={styles.link}>
     <div className={styles.message}>
       <div className={styles.icon}>
-        <Square
-          image={getURLFromString(item.user.photo, 'avatar')}
+        <Avatar
+          size={32}
+          url={item.user?.photo}
+          username={item.user?.username}
           className={styles.circle}
         />
       </div>
@@ -25,9 +28,17 @@ const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
       <div className={styles.content}>
         <b className={styles.title}>
           <span>
-            <InlineUsername>{item.user.username}</InlineUsername>:
+            <InlineUsername>{item.user.username}</InlineUsername>
           </span>
+          <span>-</span>
+          <Square
+            className={styles.item_image}
+            size={16}
+            image={getURLFromString(item.thumbnail, 'avatar')}
+          />
+          <div className={styles.item_title}>{item.title}</div>
         </b>
+
         <div className={styles.text}>
           <div
             dangerouslySetInnerHTML={{
diff --git a/src/components/notifications/NotificationComment/styles.module.scss b/src/components/notifications/NotificationComment/styles.module.scss
index e12c2ecd..a0f60d6b 100644
--- a/src/components/notifications/NotificationComment/styles.module.scss
+++ b/src/components/notifications/NotificationComment/styles.module.scss
@@ -8,7 +8,6 @@
 .message {
   font: $font_14_regular;
   line-height: 1.3em;
-  padding: $gap/2 $gap/2 $gap/4 $gap/2;
   min-height: calc(1.3em * 3 + $gap);
   display: grid;
   grid-template-columns: 32px auto;
@@ -18,15 +17,16 @@
 .content {
   background: $content_bg;
   padding: 5px;
-  border-radius: 0 4px 4px 4px;
+  border-radius: 0 $radius $radius $radius;
   position: relative;
+  min-width: 0;
 
   &:before {
     content: ' ';
     position: absolute;
-    top: $gap;
+    top: 8px;
     right: 100%;
-    @include arrow_left(10px, $content_bg);
+    @include arrow_left(8px, $content_bg);
   }
 }
 
@@ -36,8 +36,28 @@
 }
 
 .title {
-  font: $font_14_semibold;
+  font: $font_14_medium;
   margin-bottom: $gap / 2;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  & > * {
+    padding-right: 5px;
+  }
+}
+
+.item_title {
+  flex: 1;
+  padding-left: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.item_image {
+  flex: 0 0 16px;
+  border-radius: 2px;
 }
 
 .time {
@@ -47,6 +67,6 @@
   color: $gray_75;
 }
 
-.circle {
+div.circle {
   border-radius: 4px 0 0 4px;
 }
diff --git a/src/components/notifications/NotificationNode/index.tsx b/src/components/notifications/NotificationNode/index.tsx
new file mode 100644
index 00000000..ce7deb0d
--- /dev/null
+++ b/src/components/notifications/NotificationNode/index.tsx
@@ -0,0 +1,39 @@
+import { FC, useMemo } from 'react';
+
+import { NodeThumbnail } from '~/components/node/NodeThumbnail';
+import { NotificationItem } from '~/types/notifications';
+import { getPrettyDate } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface NotificationNodeProps {
+  item: NotificationItem;
+}
+
+const NotificationNode: FC<NotificationNodeProps> = ({ item }) => {
+  const thumbnail = useMemo(
+    () => ({
+      title: item.title,
+      thumbnail: item.thumbnail,
+      is_promoted: true,
+    }),
+    [item],
+  );
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.image}>
+        <NodeThumbnail item={thumbnail} />
+      </div>
+
+      <div className={styles.text}>
+        <div className={styles.title}>{item.title || '...'}</div>
+        <div className={styles.user}>
+          ~{item.user.username}, {getPrettyDate(item.created_at)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { NotificationNode };
diff --git a/src/components/notifications/NotificationNode/styles.module.scss b/src/components/notifications/NotificationNode/styles.module.scss
new file mode 100644
index 00000000..89672976
--- /dev/null
+++ b/src/components/notifications/NotificationNode/styles.module.scss
@@ -0,0 +1,36 @@
+@import 'src/styles/variables';
+
+.card {
+  background-color: $content_bg;
+  display: flex;
+  flex-direction: row;
+  border-radius: $radius;
+  justify-content: center;
+  align-items: center;
+  padding: $gap/2;
+}
+
+.text {
+  flex: 1;
+  min-width: 0;
+  padding-left: $gap;
+  margin-top: -0.2em;
+}
+
+.title {
+  font-size: 1.2em;
+  font-weight: bold;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-transform: capitalize;
+}
+
+.user {
+  font-size: 0.7em;
+  color: $gray_50;
+}
+
+.image {
+  flex: 0 0 48px;
+}
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index 60f1ec4d..5c859f67 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/src/containers/notifications/NotificationList/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 
 import classNames from 'classnames';
 
@@ -6,7 +6,9 @@ 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 { NotificationNode } from '~/components/notifications/NotificationNode';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
+import { NotificationItem, NotificationType } from '~/types/notifications';
 import { useNotifications } from '~/utils/providers/NotificationProvider';
 
 import styles from './styles.module.scss';
@@ -22,6 +24,17 @@ const NotificationList: FC<NotificationListProps> = () => {
     return () => markAsRead();
   }, []);
 
+  const renderItem = useCallback((item: NotificationItem) => {
+    switch (item.type) {
+      case NotificationType.Comment:
+        return <NotificationComment item={item} />;
+      case NotificationType.Node:
+        return <NotificationNode item={item} />;
+      default:
+        return null;
+    }
+  }, []);
+
   if (isLoading) {
     return <LoaderScreen align="top" />;
   }
@@ -46,7 +59,7 @@ const NotificationList: FC<NotificationListProps> = () => {
         <div className={styles.items}>
           {items?.map((item) => (
             <div className={styles.item} key={item.created_at}>
-              <NotificationComment item={item} />
+              {renderItem(item)}
             </div>
           ))}
         </div>
diff --git a/src/containers/notifications/NotificationList/styles.module.scss b/src/containers/notifications/NotificationList/styles.module.scss
index f2f9fbc1..3c391f7b 100644
--- a/src/containers/notifications/NotificationList/styles.module.scss
+++ b/src/containers/notifications/NotificationList/styles.module.scss
@@ -47,8 +47,9 @@
 
 .item {
   @include row_shadow;
-  padding-right: $gap;
+  padding: $gap / 2 $gap $gap / 2 $gap / 2;
   transition: background-color 0.25s;
+  min-width: 0;
 
   &:hover {
     background-color: $content_bg_lighter;
diff --git a/src/hooks/node/useGotoNode.ts b/src/hooks/node/useGotoNode.ts
index 8a22289c..156ea1a6 100644
--- a/src/hooks/node/useGotoNode.ts
+++ b/src/hooks/node/useGotoNode.ts
@@ -2,10 +2,15 @@ import { useCallback } from 'react';
 
 import { URLS } from '~/constants/urls';
 import { useNavigation } from '~/hooks/navigation/useNavigation';
-import { INode } from '~/types';
 
 // useGotoNode returns fn, that navigates to node
-export const useGotoNode = (id: INode['id']) => {
+export const useGotoNode = (id?: number) => {
   const { push } = useNavigation();
-  return useCallback(() => push(URLS.NODE_URL(id)), [push, id]);
+  return useCallback(() => {
+    if (!id) {
+      return;
+    }
+
+    push(URLS.NODE_URL(id));
+  }, [push, id]);
 };
diff --git a/src/types/notifications/index.ts b/src/types/notifications/index.ts
index 29f038b9..a610089a 100644
--- a/src/types/notifications/index.ts
+++ b/src/types/notifications/index.ts
@@ -4,6 +4,7 @@ export interface NotificationItem {
   id: number;
   url: string;
   type: NotificationType;
+  title: string;
   text: string;
   user: ShallowUser;
   thumbnail: string;

From fe440a44039b586b5e25f2c4f69e628241ecbfef Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 7 Jan 2023 04:24:35 +0000
Subject: [PATCH 44/46] Bump json5 from 1.0.1 to 1.0.2

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c0c5ece2..42c35d95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1820,9 +1820,9 @@ json-stable-stringify-without-jsonify@^1.0.1:
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
 json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
@@ -2002,9 +2002,9 @@ minimatch@^3.0.4:
     brace-expansion "^1.1.7"
 
 minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
 mobx-persist-store@^1.0.4:
   version "1.0.4"

From 9bc2c29daf1256212aed49850823d84d7eb29382 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 4 Dec 2022 19:50:42 +0000
Subject: [PATCH 45/46] Bump decode-uri-component from 0.2.0 to 0.2.2

Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
- [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
- [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2)

---
updated-dependencies:
- dependency-name: decode-uri-component
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 42c35d95..e4faa8c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -952,9 +952,9 @@ debug@^4.0.1, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3:
     ms "2.1.2"
 
 decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
 
 deep-is@^0.1.3:
   version "0.1.4"

From b96cdfdbaabcc8ec02290372711b9105b15aa9d4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Dec 2022 10:08:31 +0000
Subject: [PATCH 46/46] Bump minimatch from 3.0.4 to 3.1.2

Bumps [minimatch](https://github.com/isaacs/minimatch) from 3.0.4 to 3.1.2.
- [Release notes](https://github.com/isaacs/minimatch/releases)
- [Commits](https://github.com/isaacs/minimatch/compare/v3.0.4...v3.1.2)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e4faa8c5..a996182e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -890,7 +890,7 @@ commander@^8.3.0:
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
 core-js-pure@^3.20.2:
   version "3.20.3"
@@ -1995,9 +1995,9 @@ mini-create-react-context@^0.4.0:
     tiny-warning "^1.0.3"
 
 minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"