From e93cb76a78cc6b43167223227aa9861f4463bd54 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 2 Apr 2024 06:12:29 +0300
Subject: [PATCH 01/35] Disallow in robots txt

---
 public/robots.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/robots.txt b/public/robots.txt
index c2a49f4f..1f53798b 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,2 +1,2 @@
 User-agent: *
-Allow: /
+Disallow: /

From d55be2505d3a958ccae33b5651ab022a1764f575 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 2 Apr 2024 14:27:56 +0300
Subject: [PATCH 02/35] load Random Topics on Mount

---
 src/components/Views/Topic.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index e3a512e1..520f8ba8 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -59,7 +59,7 @@ export const TopicView = (props: Props) => {
     }
   })
 
-  const loadRandomTopArticles = async (topic: string) => {
+  const loadFavoriteTopArticles = async (topic: string) => {
     const options: LoadShoutsOptions = {
       filters: { featured: true, topic: topic },
       limit: 10,
@@ -69,7 +69,7 @@ export const TopicView = (props: Props) => {
     setFavoriteTopArticles(result)
   }
 
-  const loadRandomTopMonthArticles = async (topic: string) => {
+  const loadReactedTopMonthArticles = async (topic: string) => {
     const now = new Date()
     const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
 
@@ -80,16 +80,21 @@ export const TopicView = (props: Props) => {
     }
 
     const result = await apiClient.getRandomTopShouts({ options })
+
     setReactedTopMonthArticles(result)
   }
 
+
+  const loadRandom = () => {
+    console.log("!!! loadRandom:");
+    loadFavoriteTopArticles(topic()?.slug)
+    loadReactedTopMonthArticles(topic()?.slug)
+  }
+
   createEffect(
     on(
       () => topic(),
-      () => {
-        loadRandomTopArticles(topic()?.slug)
-        loadRandomTopMonthArticles(topic()?.slug)
-      },
+      () => loadRandom(),
       { defer: true },
     ),
   )
@@ -118,6 +123,7 @@ export const TopicView = (props: Props) => {
   }
 
   onMount(() => {
+    loadRandom()
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
       loadMore()
     }

From b9591d7364bc33ab87e894a81081e9ae3010e628 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 2 Apr 2024 14:28:43 +0300
Subject: [PATCH 03/35] Cleanup code

---
 src/components/Views/Topic.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index 520f8ba8..97a107dd 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -48,8 +48,6 @@ export const TopicView = (props: Props) => {
   const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
   const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
 
-  console.log('%c!!! :', 'color: #bada55', sortedArticles())
-
   const [topic, setTopic] = createSignal<Topic>()
 
   createEffect(() => {
@@ -84,9 +82,7 @@ export const TopicView = (props: Props) => {
     setReactedTopMonthArticles(result)
   }
 
-
   const loadRandom = () => {
-    console.log("!!! loadRandom:");
     loadFavoriteTopArticles(topic()?.slug)
     loadReactedTopMonthArticles(topic()?.slug)
   }

From b752357224678e6422f22e59045d72d614a8da26 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Thu, 4 Apr 2024 09:01:26 +0300
Subject: [PATCH 04/35] Fix profile settings Is Floating PanelVisible

---
 .../ProfileSettings/ProfileSettings.tsx       | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx
index 1891ddeb..b03b6aa8 100644
--- a/src/components/ProfileSettings/ProfileSettings.tsx
+++ b/src/components/ProfileSettings/ProfileSettings.tsx
@@ -1,7 +1,18 @@
 import { createFileUploader } from '@solid-primitives/upload'
 import { clsx } from 'clsx'
 import deepEqual from 'fast-deep-equal'
-import { For, Match, Show, Switch, createEffect, createSignal, lazy, onCleanup, onMount } from 'solid-js'
+import {
+  For,
+  Match,
+  Show,
+  Switch,
+  createEffect,
+  createSignal,
+  lazy,
+  onCleanup,
+  onMount,
+  on
+} from "solid-js";
 import { createStore } from 'solid-js/store'
 
 import { useConfirm } from '../../context/confirm'
@@ -156,12 +167,15 @@ export const ProfileSettings = () => {
     onCleanup(() => window.removeEventListener('beforeunload', handleBeforeUnload))
   })
 
-  createEffect(() => {
-    if (!deepEqual(form, prevForm)) {
-      setIsFloatingPanelVisible(true)
-    }
-  })
-
+  createEffect(
+    on(
+      () => deepEqual(form, prevForm),
+      () => {
+        setIsFloatingPanelVisible(!deepEqual(form, prevForm))
+      },
+      { defer: true }
+    ),
+  )
   const handleDeleteSocialLink = (link) => {
     updateFormField('links', link, true)
   }

From c3495ed0b32ac12b1e51473b2857c24e5584bb22 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Thu, 4 Apr 2024 09:02:34 +0300
Subject: [PATCH 05/35] Fil lint

---
 src/components/ProfileSettings/ProfileSettings.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx
index b03b6aa8..90a23b33 100644
--- a/src/components/ProfileSettings/ProfileSettings.tsx
+++ b/src/components/ProfileSettings/ProfileSettings.tsx
@@ -9,10 +9,10 @@ import {
   createEffect,
   createSignal,
   lazy,
+  on,
   onCleanup,
   onMount,
-  on
-} from "solid-js";
+} from 'solid-js'
 import { createStore } from 'solid-js/store'
 
 import { useConfirm } from '../../context/confirm'
@@ -173,7 +173,7 @@ export const ProfileSettings = () => {
       () => {
         setIsFloatingPanelVisible(!deepEqual(form, prevForm))
       },
-      { defer: true }
+      { defer: true },
     ),
   )
   const handleDeleteSocialLink = (link) => {

From 6851c3af6ad9c8a057bc87c2949f2928a4f6bf76 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 8 Apr 2024 14:26:20 +0300
Subject: [PATCH 06/35] Feature/header (#408)

New header
---
 public/locales/en/translation.json           |   1 +
 public/locales/ru/translation.json           |   1 +
 src/components/Nav/Header/Header.module.scss | 202 ++++++++++++++-----
 src/components/Nav/HeaderAuth.tsx            | 121 ++++++++---
 src/components/Nav/Snackbar.module.scss      |   1 -
 src/components/_shared/Icon/Icon.module.scss |  21 +-
 src/styles/app.scss                          |   4 +
 7 files changed, 262 insertions(+), 89 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 7c097558..32f06587 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -83,6 +83,7 @@
   "Coming soon": "Coming soon",
   "Comment successfully deleted": "Comment successfully deleted",
   "Commentator": "Commentator",
+  "Commenting": "Commenting",
   "Comments": "Comments",
   "CommentsWithCount": "{count, plural, =0 {{count} comments} one {{count} comment} few {{count} comments} other {{count} comments}}",
   "Communities": "Communities",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 6dfe2bbd..fc28e27e 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -87,6 +87,7 @@
   "Comment successfully deleted": "Комментарий успешно удален",
   "Comment": "Комментировать",
   "Commentator": "Комментатор",
+  "Commenting": "Комментирование",
   "Comments": "Комментарии",
   "CommentsWithCount": "{count, plural, =0 {{count} комментариев} one {{count} комментарий} few {{count} комментария} other {{count} комментариев}}",
   "Communities": "Сообщества",
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 018adc78..660a2245 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -114,6 +114,11 @@
     position: absolute;
     right: 0;
   }
+
+  .control {
+    align-items: center;
+    display: flex;
+  }
 }
 
 .mainNavigationWrapper {
@@ -192,15 +197,8 @@
     padding: divide($container-padding-x, 2) !important;
   }
 
-  @include media-breakpoint-up(md) {
-    span,
-    button {
-      padding: 0 0.4rem;
-    }
-  }
-
   :global(.view-switcher) {
-    margin: 0 -0.5rem;
+    margin: 0;
     overflow: hidden;
     padding: 0;
   }
@@ -299,9 +297,6 @@
 .burgerContainer {
   box-sizing: content-box;
   display: inline-flex;
-  padding-left: 0;
-
-  // float: right;
 
   @include media-breakpoint-up(sm) {
     padding-left: divide($container-padding-x, 2);
@@ -430,12 +425,15 @@
   width: 100%;
 
   @include media-breakpoint-up(xl) {
-    right: 2rem;
+    right: 9rem;
   }
 
   .control {
-    cursor: pointer;
     border: 0;
+    cursor: pointer;
+    height: 3.2rem;
+    margin: 0 0.6rem;
+    width: 3.2rem;
 
     &:hover {
       background: none;
@@ -451,11 +449,7 @@
   }
 
   .control + .control {
-    margin-left: 1.2rem;
-
-    @include media-breakpoint-up(sm) {
-      margin-left: 2rem;
-    }
+    margin: 0 0.6rem;
   }
 
   img {
@@ -497,10 +491,15 @@
     }
   }
 
+  .settingsControlContainer {
+    margin-left: 1rem !important;
+    margin-right: 2rem !important;
+  }
+
   .settingsControl {
     border-radius: 100%;
-    padding: 0.8rem !important;
     min-width: 4rem !important;
+    padding: 0.8rem !important;
 
     &:hover {
       background: var(--background-color-invert);
@@ -516,12 +515,18 @@
   align-items: center;
   border-radius: 100%;
   display: flex;
-  height: 2.4em;
+  height: 2.8rem;
   justify-content: center;
-  margin-left: 0.3rem;
+  margin: 0 0.4rem;
   position: relative;
   transition: margin-left 0.3s;
-  width: 2.4em;
+  width: 2.8rem;
+
+  @include media-breakpoint-up(md) {
+    height: 3.2rem;
+    margin: 0 0.7rem;
+    width: 3.2rem;
+  }
 
   @include media-breakpoint-down(sm) {
     margin-left: 0.4rem !important;
@@ -543,12 +548,13 @@
   a:link {
     border: none;
     cursor: pointer;
-    height: auto;
+    height: 100%;
     margin: 0;
     padding: 0;
+    width: 100%;
 
     &:hover {
-      background: none !important;
+      background: none;
 
       .icon {
         display: none;
@@ -571,6 +577,20 @@
   }
 }
 
+.userControlItemSearch {
+  margin: 0 1rem 0 2.2rem;
+}
+
+.userControlItemUserpic {
+  height: 3.2rem;
+  width: 3.2rem;
+
+  @include media-breakpoint-up(md) {
+    height: 4rem;
+    width: 4rem;
+  }
+}
+
 .userControlItemInbox,
 .userControlItemSearch {
   @include media-breakpoint-down(sm) {
@@ -579,7 +599,16 @@
 }
 
 .userControlItemVerbose {
-  margin-left: 0.9em !important;
+  align-items: stretch;
+  display: flex;
+  height: 3.2rem;
+  margin-left: 1rem !important;
+  width: 3.2rem;
+
+  @include media-breakpoint-up(md) {
+    height: 4rem;
+    width: 4rem;
+  }
 
   &:first-child {
     margin-left: 0 !important;
@@ -590,6 +619,7 @@
 
     @include media-breakpoint-up(xl) {
       background: none;
+      margin-left: 0.8rem !important;
     }
 
     .icon {
@@ -611,10 +641,14 @@
   }
 
   @include media-breakpoint-up(xl) {
-    margin-left: 0.5em !important;
-    margin-right: 0.5em;
+    margin-left: 3rem !important;
+    margin-right: 0;
     width: auto;
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     .icon {
       display: none !important;
     }
@@ -629,6 +663,37 @@
     }
   }
 
+  a:link,
+  a:visited,
+  button {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    @include media-breakpoint-up(xl) {
+      border-radius: 2rem;
+      box-shadow: inset 0 0 0 2px #000;
+      padding: 0 2rem;
+    }
+
+    &:hover {
+      background-color: var(--link-hover-background);
+
+      &,
+      .textLabel {
+        color: #fff !important;
+      }
+
+      .icon {
+        display: none;
+      }
+
+      .iconHover {
+        display: block;
+      }
+    }
+  }
+
   button {
     margin: 0 !important;
   }
@@ -636,27 +701,6 @@
   a::before {
     display: none;
   }
-
-  a:hover,
-  button:hover {
-    .icon {
-      display: none;
-    }
-
-    .iconHover {
-      display: block;
-    }
-
-    .textLabel {
-      color: var(--link-hover-color);
-    }
-  }
-
-  a:hover {
-    .textLabel {
-      background-color: var(--link-hover-background);
-    }
-  }
 }
 
 .subnavigation {
@@ -746,3 +790,65 @@
   position: relative;
   top: 0.15em;
 }
+
+.editorPopup {
+  border: 1px solid rgb(0 0 0 / 15%) !important;
+  border-radius: 1.6rem;
+  line-height: 1.3;
+  min-width: 28rem;
+  padding: 1.6rem !important;
+}
+
+.editorModePopupOpener {
+  display: inline-block;
+  margin-right: 2rem;
+  position: relative;
+  text-align: right;
+  width: 9em;
+}
+
+.editorModePopupOpenerIcon {
+  height: 2rem;
+  left: 100%;
+  margin-left: 0.2em;
+  top: 0;
+  transform: rotate(90deg);
+  position: absolute;
+  width: 2rem;
+}
+
+.editorModesList {
+  li {
+    cursor: pointer;
+    margin-bottom: 1.6rem;
+    padding-left: 3rem !important;
+    position: relative;
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  .editorModesSelected {
+    cursor: default;
+    opacity: 0.6;
+  }
+}
+
+.editorModeTitle {
+  color: #000;
+  margin-bottom: 0.5rem;
+}
+
+.editorModeDescription {
+  color: #696969;
+  font-size: 1.2rem;
+}
+
+.editorModeIcon {
+  height: 2.4rem;
+  left: 0;
+  position: absolute;
+  top: -0.2em;
+  width: 2.4rem;
+}
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 31a0acc6..2b6b1ea3 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -17,6 +17,8 @@ import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import { ProfilePopup } from './ProfilePopup'
 
 import { useSnackbar } from '../../context/snackbar'
+import { Popup } from '../_shared/Popup'
+import { VotersList } from '../_shared/VotersList'
 import styles from './Header/Header.module.scss'
 
 type Props = {
@@ -51,7 +53,7 @@ export const HeaderAuth = (props: Props) => {
   const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings')
   const isNotificationsVisible = createMemo(() => isAuthenticated() && !isEditorPage())
   const isSaveButtonVisible = createMemo(() => isAuthenticated() && isEditorPage())
-  const isCreatePostButtonVisible = createMemo(() => isAuthenticated() && !isEditorPage())
+  const isCreatePostButtonVisible = createMemo(() => !isEditorPage())
   const isAuthenticatedControlsVisible = createMemo(
     () => isAuthenticated() && session()?.user?.email_verified,
   )
@@ -65,6 +67,7 @@ export const HeaderAuth = (props: Props) => {
   }
 
   const [width, setWidth] = createSignal(0)
+  const [editorMode, setEditorMode] = createSignal(t('Editing'))
 
   onMount(() => {
     const handleResize = () => setWidth(window.innerWidth)
@@ -106,7 +109,7 @@ export const HeaderAuth = (props: Props) => {
       <Show when={isSessionLoaded()} keyed={true}>
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
-            <Show when={isCreatePostButtonVisible()}>
+            <Show when={isCreatePostButtonVisible() && isAuthenticated()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
@@ -117,7 +120,7 @@ export const HeaderAuth = (props: Props) => {
             </Show>
 
             <Show when={!isSaveButtonVisible()}>
-              <div class={styles.userControlItem}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemSearch)}>
                 <a href="?m=search">
                   <Icon name="search" class={styles.icon} />
                   <Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
@@ -143,13 +146,47 @@ export const HeaderAuth = (props: Props) => {
             </Show>
 
             <Show when={isSaveButtonVisible()}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
-                {renderIconedButton({
-                  value: t('Save'),
-                  icon: 'save',
-                  action: handleSaveButtonClick,
-                })}
-              </div>
+              <Popup
+                trigger={
+                  <span class={styles.editorModePopupOpener}>
+                    <Icon name="swiper-r-arr" class={styles.editorModePopupOpenerIcon} />
+                    {editorMode()}
+                  </span>
+                }
+                variant="bordered"
+                popupCssClass={styles.editorPopup}
+              >
+                <ul class={clsx('nodash', styles.editorModesList)}>
+                  <li
+                    class={clsx({ [styles.editorModesSelected]: editorMode() === t('Preview') })}
+                    onClick={() => setEditorMode(t('Preview'))}
+                  >
+                    <Icon name="eye" class={styles.editorModeIcon} />
+                    <div class={styles.editorModeTitle}>{t('Preview')}</div>
+                    <div class={styles.editorModeDescription}>
+                      Посмотрите, как материал будет выглядеть при публикации
+                    </div>
+                  </li>
+                  <li
+                    class={clsx({ [styles.editorModesSelected]: editorMode() === t('Editing') })}
+                    onClick={() => setEditorMode(t('Editing'))}
+                  >
+                    <Icon name="pencil-outline" class={styles.editorModeIcon} />
+                    <div class={styles.editorModeTitle}>{t('Editing')}</div>
+                    <div class={styles.editorModeDescription}>Изменяйте текст напрямую в редакторе</div>
+                  </li>
+                  <li
+                    class={clsx({ [styles.editorModesSelected]: editorMode() === t('Commenting') })}
+                    onClick={() => setEditorMode(t('Commenting'))}
+                  >
+                    <Icon name="comment" class={styles.editorModeIcon} />
+                    <div class={styles.editorModeTitle}>{t('Commenting')}</div>
+                    <div class={styles.editorModeDescription}>
+                      Предлагайте правки и комментарии, чтобы сделать материал лучше
+                    </div>
+                  </li>
+                </ul>
+              </Popup>
 
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 {renderIconedButton({
@@ -159,12 +196,18 @@ export const HeaderAuth = (props: Props) => {
                 })}
               </div>
 
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <div
+                class={clsx(
+                  styles.userControlItem,
+                  styles.settingsControlContainer,
+                  styles.userControlItemVerbose,
+                )}
+              >
                 <Popover content={t('Settings')}>
                   {(ref) => (
                     <Button
                       ref={ref}
-                      value={<Icon name="burger" />}
+                      value={<Icon name="ellipsis" />}
                       variant={'light'}
                       onClick={handleBurgerButtonClick}
                       class={styles.settingsControl}
@@ -173,6 +216,17 @@ export const HeaderAuth = (props: Props) => {
                 </Popover>
               </div>
             </Show>
+
+            <Show when={isCreatePostButtonVisible() && !isAuthenticated()}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                <a href={getPagePath(router, 'create')}>
+                  <span class={styles.textLabel}>{t('Create post')}</span>
+                  <Icon name="pencil" class={styles.icon} />
+                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
+                </a>
+              </div>
+            </Show>
+
             <Show
               when={isAuthenticatedControlsVisible()}
               fallback={
@@ -195,28 +249,31 @@ export const HeaderAuth = (props: Props) => {
                   </a>
                 </div>
               </Show>
-              <ProfilePopup
-                onVisibilityChange={(isVisible) => {
-                  props.setIsProfilePopupVisible(isVisible)
-                }}
-                containerCssClass={styles.control}
-                trigger={
-                  <div class={styles.userControlItem}>
-                    <button class={styles.button}>
-                      <div classList={{ entered: page().path === `/${author()?.slug}` }}>
-                        <Userpic
-                          size={'M'}
-                          name={author()?.name}
-                          userpic={author()?.pic}
-                          class={styles.userpic}
-                        />
-                      </div>
-                    </button>
-                  </div>
-                }
-              />
             </Show>
           </div>
+
+          <Show when={isAuthenticated()}>
+            <ProfilePopup
+              onVisibilityChange={(isVisible) => {
+                props.setIsProfilePopupVisible(isVisible)
+              }}
+              containerCssClass={styles.control}
+              trigger={
+                <div class={clsx(styles.userControlItem, styles.userControlItemUserpic)}>
+                  <button class={styles.button}>
+                    <div classList={{ entered: page().path === `/${author()?.slug}` }}>
+                      <Userpic
+                        size={'L'}
+                        name={author()?.name}
+                        userpic={author()?.pic}
+                        class={styles.userpic}
+                      />
+                    </div>
+                  </button>
+                </div>
+              }
+            />
+          </Show>
         </div>
       </Show>
     </ShowOnlyOnClient>
diff --git a/src/components/Nav/Snackbar.module.scss b/src/components/Nav/Snackbar.module.scss
index a0fb8e64..9af5719b 100644
--- a/src/components/Nav/Snackbar.module.scss
+++ b/src/components/Nav/Snackbar.module.scss
@@ -1,5 +1,4 @@
 .snackbar {
-  min-height: 2px;
   background-color: var(--default-color);
   color: #fff;
   font-size: 2rem;
diff --git a/src/components/_shared/Icon/Icon.module.scss b/src/components/_shared/Icon/Icon.module.scss
index 6618efa9..4cafd050 100644
--- a/src/components/_shared/Icon/Icon.module.scss
+++ b/src/components/_shared/Icon/Icon.module.scss
@@ -10,18 +10,23 @@
 }
 
 .notificationsCounter {
-  background-color: #d00820;
-  border: 2px solid #fff;
-  border-radius: 2em;
+  align-items: center;
+  background-color: #E84500;
+  border-radius: 0.8rem;
   color: #fff;
-  font-size: 1rem;
+  display: flex;
+  font-size: 1.2rem;
   font-weight: 700;
-  height: 1.6em;
-  left: 1.1em;
-  line-height: 1.25em;
+  height: 2.2rem;
+  justify-content: center;
+  left: 1.6rem;
+  min-width: 2.2rem;
   padding: 0 0.25em;
   position: absolute;
   text-align: center;
   top: -0.5rem;
-  min-width: 1.5em;
+
+  @include media-breakpoint-up(md) {
+    left: 1.8rem;
+  }
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index db3a68bc..7afcb070 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -622,6 +622,10 @@ figure {
     margin-bottom: 0.6em;
     white-space: nowrap;
 
+    @include media-breakpoint-up(md) {
+      margin-right: 2.4rem;
+    }
+
     .link {
       border-bottom: none;
     }

From 58c4d6eae7748cadcc1ab14747c5bf49ed349513 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 8 Apr 2024 15:49:40 +0300
Subject: [PATCH 07/35] app-data-author

---
 src/components/Views/Author/Author.tsx        | 26 +++++++++++-----
 .../ProfileSubscriptions.tsx                  | 30 ++++++++-----------
 src/context/following.tsx                     | 15 ++++++++--
 src/context/session.tsx                       | 14 +++++++--
 4 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index a21cebcc..efd1bb73 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -38,26 +38,36 @@ const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
   const { t } = useLocalize()
-  const { loadSubscriptions } = useFollowing()
+  const { subscriptions, followers } = useFollowing()
+  const { session } = useSession()
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
   const { authorEntities } = useAuthorsStore({ authors: [props.author] })
   const { page: getPage, searchParams } = useRouter()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [isBioExpanded, setIsBioExpanded] = createSignal(false)
-  const [followers, setFollowers] = createSignal<Author[]>([])
+  const [author, setAuthor] = createSignal<Author>()
   const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
   const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
   const [commented, setCommented] = createSignal<Reaction[]>()
   const modal = MODALS[searchParams().m]
 
   // current author
-  const [author, setAuthor] = createSignal<Author>()
   createEffect(() => {
-    try {
-      const a = authorEntities()[props.authorSlug]
-      setAuthor(a)
-    } catch (error) {
-      console.debug(error)
+    if(props.authorSlug) {
+      if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
+        console.info('my own profile')
+        const {profile, authors, topics} = session().user.app_data
+        setAuthor(profile)
+        setFollowing([...authors, ...topics])
+      }
+    } else {
+      try {
+        const a = authorEntities()[props.authorSlug]
+        setAuthor(a)
+        console.debug('[Author] expecting following data fetched')
+      } catch (error) {
+        console.debug(error)
+      }
     }
   })
 
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index 6e1b4d8d..82fe575a 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
 
+import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
 import { apiClient } from '../../../graphql/client/core'
@@ -20,23 +21,20 @@ import stylesSettings from '../../../styles/FeedSettings.module.scss'
 
 export const ProfileSubscriptions = () => {
   const { t, lang } = useLocalize()
-  const { author } = useSession()
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
-  const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([])
-  const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
+  const { author, session } = useSession()
+  const { subscriptions } = useFollowing()
+  const [following, setFollowing] = (createSignal < Array < Author) | (Topic >> [])
+  const [filtered, setFiltered] = (createSignal < Array < Author) | (Topic >> [])
+  const [subscriptionFilter, setSubscriptionFilter] = createSignal < SubscriptionFilter > 'all'
   const [searchQuery, setSearchQuery] = createSignal('')
 
-  const fetchSubscriptions = async () => {
-    try {
-      const slug = author()?.slug
-      const authorFollows = await apiClient.getAuthorFollows({ slug })
-      setFollowing([...authorFollows['authors']])
-      setFiltered([...authorFollows['authors'], ...authorFollows['topics']])
-    } catch (error) {
-      console.error('[fetchSubscriptions] :', error)
-      throw error
+  createEffect(() => {
+    if (subscriptions()) {
+      const { authors, topics } = subscriptions()
+      setFollowing([...authors, ...topics])
+      setFiltered([...authors, ...topics])
     }
-  }
+  })
 
   createEffect(() => {
     if (following()) {
@@ -53,10 +51,6 @@ export const ProfileSubscriptions = () => {
     }
   })
 
-  onMount(async () => {
-    await fetchSubscriptions()
-  })
-
   return (
     <div class="wide-container">
       <div class="row">
diff --git a/src/context/following.tsx b/src/context/following.tsx
index f3208ca9..6ee4621e 100644
--- a/src/context/following.tsx
+++ b/src/context/following.tsx
@@ -2,12 +2,13 @@ import { Accessor, JSX, createContext, createEffect, createSignal, useContext }
 import { createStore } from 'solid-js/store'
 
 import { apiClient } from '../graphql/client/core'
-import { AuthorFollows, FollowingEntity } from '../graphql/schema/core.gen'
+import { AuthorFollows, FollowingEntity, Author } from '../graphql/schema/core.gen'
 
 import { useSession } from './session'
 
 interface FollowingContextType {
   loading: Accessor<boolean>
+  followers: Accessor<Array<Author>>
   subscriptions: AuthorFollows
   setSubscriptions: (subscriptions: AuthorFollows) => void
   setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
@@ -31,6 +32,7 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollows = {
 
 export const FollowingProvider = (props: { children: JSX.Element }) => {
   const [loading, setLoading] = createSignal<boolean>(false)
+  const [followers, setFollowers] = createSignal<Array<Author>>([])
   const [subscriptions, setSubscriptions] = createStore<AuthorFollows>(EMPTY_SUBSCRIPTIONS)
   const { author, session } = useSession()
 
@@ -77,8 +79,14 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
 
   createEffect(() => {
     if (author()) {
-      console.debug('[context.following] author update detect')
-      fetchData()
+      try {
+        const { authors, followers, topics } = session().user.app_data
+        setSubscriptions({ authors, topics })
+        setFollowers(followers)
+        if(!authors) fetchData()
+      } catch(e) {
+        console.error(e)
+      }
     }
   })
 
@@ -116,6 +124,7 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     setSubscriptions,
     isOwnerSubscribed,
     setFollowing,
+    followers,
     loadSubscriptions: fetchData,
     follow,
     unfollow,
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 73659a6c..aba1ace5 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -199,6 +199,7 @@ export const SessionProvider = (props: {
   }
 
   onCleanup(() => clearTimeout(minuteLater))
+
   const authorData = async () => {
     const u = session()?.user
     return u ? (await apiClient.getAuthorId({ user: u.id.trim() })) || null : null
@@ -217,7 +218,15 @@ export const SessionProvider = (props: {
           apiClient.connect(token)
           inboxClient.connect(token)
         }
-        if (!author()) loadAuthor()
+
+        try {
+          const { profile } = session().user.app_data
+          setAuthor(profile)
+          addAuthors([profile])
+          if(!profile) loadAuthor()
+        } catch(e) {
+          console.error(e)
+        }
 
         setIsSessionLoaded(true)
       }
@@ -262,8 +271,7 @@ export const SessionProvider = (props: {
       () => props.onStateChangeCallback,
       () => {
         props.onStateChangeCallback(session())
-      },
-      { defer: true },
+      }
     ),
   )
 

From 6d12b01d561b80a02a26c8f942152d5098d8e20e Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 8 Apr 2024 15:54:01 +0300
Subject: [PATCH 08/35] author-type-fix

---
 src/components/Views/Author/Author.tsx        |  4 ++--
 .../ProfileSubscriptions.tsx                  |  6 +++---
 src/context/following.tsx                     |  6 +++---
 src/context/session.tsx                       |  6 +++---
 src/utils/getImageUrl.ts                      | 20 +++++++++----------
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index efd1bb73..e2de6c1f 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -53,10 +53,10 @@ export const AuthorView = (props: Props) => {
 
   // current author
   createEffect(() => {
-    if(props.authorSlug) {
+    if (props.authorSlug) {
       if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
         console.info('my own profile')
-        const {profile, authors, topics} = session().user.app_data
+        const { profile, authors, topics } = session().user.app_data
         setAuthor(profile)
         setFollowing([...authors, ...topics])
       }
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index 82fe575a..cab28884 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -5,7 +5,7 @@ import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
 import { apiClient } from '../../../graphql/client/core'
-import { Author, Topic } from '../../../graphql/schema/core.gen'
+import { Author as AuthorType, Topic } from '../../../graphql/schema/core.gen'
 import { SubscriptionFilter } from '../../../pages/types'
 import { dummyFilter } from '../../../utils/dummyFilter'
 // TODO: refactor styles
@@ -23,8 +23,8 @@ export const ProfileSubscriptions = () => {
   const { t, lang } = useLocalize()
   const { author, session } = useSession()
   const { subscriptions } = useFollowing()
-  const [following, setFollowing] = (createSignal < Array < Author) | (Topic >> [])
-  const [filtered, setFiltered] = (createSignal < Array < Author) | (Topic >> [])
+  const [following, setFollowing] = (createSignal < Array < AuthorType) | (Topic >> [])
+  const [filtered, setFiltered] = (createSignal < Array < AuthorType) | (Topic >> [])
   const [subscriptionFilter, setSubscriptionFilter] = createSignal < SubscriptionFilter > 'all'
   const [searchQuery, setSearchQuery] = createSignal('')
 
diff --git a/src/context/following.tsx b/src/context/following.tsx
index 6ee4621e..3371a010 100644
--- a/src/context/following.tsx
+++ b/src/context/following.tsx
@@ -2,7 +2,7 @@ import { Accessor, JSX, createContext, createEffect, createSignal, useContext }
 import { createStore } from 'solid-js/store'
 
 import { apiClient } from '../graphql/client/core'
-import { AuthorFollows, FollowingEntity, Author } from '../graphql/schema/core.gen'
+import { Author, AuthorFollows, FollowingEntity } from '../graphql/schema/core.gen'
 
 import { useSession } from './session'
 
@@ -83,8 +83,8 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
         const { authors, followers, topics } = session().user.app_data
         setSubscriptions({ authors, topics })
         setFollowers(followers)
-        if(!authors) fetchData()
-      } catch(e) {
+        if (!authors) fetchData()
+      } catch (e) {
         console.error(e)
       }
     }
diff --git a/src/context/session.tsx b/src/context/session.tsx
index aba1ace5..67bd5a93 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -223,8 +223,8 @@ export const SessionProvider = (props: {
           const { profile } = session().user.app_data
           setAuthor(profile)
           addAuthors([profile])
-          if(!profile) loadAuthor()
-        } catch(e) {
+          if (!profile) loadAuthor()
+        } catch (e) {
           console.error(e)
         }
 
@@ -271,7 +271,7 @@ export const SessionProvider = (props: {
       () => props.onStateChangeCallback,
       () => {
         props.onStateChangeCallback(session())
-      }
+      },
     ),
   )
 
diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index 7b8b56dc..bc3c9073 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -15,17 +15,17 @@ export const getImageUrl = (
   src: string,
   options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
 ) => {
-    if (!src.includes('discours.io') && src.includes('http')) {
-        return src
-    }
-    const filename = src.toLowerCase().split('/').pop()
-    const ext = filename.split('.').pop()
-    const isAudio = ext in ['wav', 'mp3', 'ogg', 'aif', 'flac']
-    const base = isAudio ? cdnUrl : `${thumborUrl}/unsafe/`
-    const suffix = isAudio || options.noSizeUrlPart ? '' : getSizeUrlPart(options)
-    const subfolder = isAudio ? 'audio' : 'image'
+  if (!src.includes('discours.io') && src.includes('http')) {
+    return src
+  }
+  const filename = src.toLowerCase().split('/').pop()
+  const ext = filename.split('.').pop()
+  const isAudio = ext in ['wav', 'mp3', 'ogg', 'aif', 'flac']
+  const base = isAudio ? cdnUrl : `${thumborUrl}/unsafe/`
+  const suffix = isAudio || options.noSizeUrlPart ? '' : getSizeUrlPart(options)
+  const subfolder = isAudio ? 'audio' : 'image'
 
-    return `${base}${suffix}production/${subfolder}/${filename}`
+  return `${base}${suffix}production/${subfolder}/${filename}`
 }
 
 export const getOpenGraphImageUrl = (

From 79961b7f47785873bedb0882979d85e28471c7df Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 8 Apr 2024 16:04:10 +0300
Subject: [PATCH 09/35] fdata-fix

---
 .../ProfileSubscriptions.tsx                  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index cab28884..f43445f7 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -31,21 +31,21 @@ export const ProfileSubscriptions = () => {
   createEffect(() => {
     if (subscriptions()) {
       const { authors, topics } = subscriptions()
-      setFollowing([...authors, ...topics])
-      setFiltered([...authors, ...topics])
+      const fdata = [...authors, ...topics]
+      if (fdata) {
+        setFollowing(fdata)
+        if (subscriptionFilter() === 'authors') {
+          setFiltered(fdata.filter((s) => 'name' in s))
+        } else if (subscriptionFilter() === 'topics') {
+          setFiltered(fdata.filter((s) => 'title' in s))
+        } else {
+          setFiltered(fdata)
+        }
+      }
     }
   })
 
   createEffect(() => {
-    if (following()) {
-      if (subscriptionFilter() === 'authors') {
-        setFiltered(following().filter((s) => 'name' in s))
-      } else if (subscriptionFilter() === 'topics') {
-        setFiltered(following().filter((s) => 'title' in s))
-      } else {
-        setFiltered(following())
-      }
-    }
     if (searchQuery()) {
       setFiltered(dummyFilter(following(), searchQuery(), lang()))
     }

From aeb42de90879a0ec6e669080bcff461a63fc85b6 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 8 Apr 2024 16:14:19 +0300
Subject: [PATCH 10/35] use-following-data

---
 .../ProfileSubscriptions.tsx                  | 22 +++++++++----------
 src/context/following.tsx                     |  4 ++--
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index f43445f7..083e7978 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -29,18 +29,16 @@ export const ProfileSubscriptions = () => {
   const [searchQuery, setSearchQuery] = createSignal('')
 
   createEffect(() => {
-    if (subscriptions()) {
-      const { authors, topics } = subscriptions()
-      const fdata = [...authors, ...topics]
-      if (fdata) {
-        setFollowing(fdata)
-        if (subscriptionFilter() === 'authors') {
-          setFiltered(fdata.filter((s) => 'name' in s))
-        } else if (subscriptionFilter() === 'topics') {
-          setFiltered(fdata.filter((s) => 'title' in s))
-        } else {
-          setFiltered(fdata)
-        }
+    const { authors, topics } = subscriptions
+    if (authors || topics) {
+      const fdata = [...(authors || []), ...(topics || [])]
+      setFollowing(fdata)
+      if (subscriptionFilter() === 'authors') {
+        setFiltered(fdata.filter((s) => 'name' in s))
+      } else if (subscriptionFilter() === 'topics') {
+        setFiltered(fdata.filter((s) => 'title' in s))
+      } else {
+        setFiltered(fdata)
       }
     }
   })
diff --git a/src/context/following.tsx b/src/context/following.tsx
index 6200c681..ad93eaaf 100644
--- a/src/context/following.tsx
+++ b/src/context/following.tsx
@@ -10,7 +10,7 @@ interface FollowingContextType {
   loading: Accessor<boolean>
   followers: Accessor<Array<Author>>
   subscriptions: AuthorFollowsResult
-  setSubscriptions: (subscriptions: AuthorFollows) => void
+  setSubscriptions: (subscriptions: AuthorFollowsResult) => void
   setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
   loadSubscriptions: () => void
   follow: (what: FollowingEntity, slug: string) => Promise<void>
@@ -33,7 +33,7 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollowsResult = {
 export const FollowingProvider = (props: { children: JSX.Element }) => {
   const [loading, setLoading] = createSignal<boolean>(false)
   const [followers, setFollowers] = createSignal<Array<Author>>([])
-  const [subscriptions, setSubscriptions] = createStore<AuthorFollows>(EMPTY_SUBSCRIPTIONS)
+  const [subscriptions, setSubscriptions] = createStore<AuthorFollowsResult>(EMPTY_SUBSCRIPTIONS)
   const { author, session } = useSession()
 
   const fetchData = async () => {

From cf0214563d94f0bc80ef0fb17eb8791463d88e74 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 8 Apr 2024 17:48:58 +0300
Subject: [PATCH 11/35] use-following-data-2

---
 package.json                                  |   2 +-
 .../Author/AuthorCard/AuthorCard.tsx          | 281 ++++++++------
 src/components/Views/Author/Author.tsx        | 354 ++++++++++++------
 .../ProfileSubscriptions.tsx                  | 141 ++++---
 4 files changed, 493 insertions(+), 285 deletions(-)

diff --git a/package.json b/package.json
index 5e79d11f..1da95480 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "hygen": "HYGEN_TMPLS=gen hygen",
     "postinstall": "npm run codegen && npx patch-package",
     "check:code": "npx @biomejs/biome check src --log-kind=compact --verbose",
-    "check:code:fix": "npx @biomejs/biome check src --log-kind=compact --verbose --apply-unsafe",
+    "check:code:fix": "npx @biomejs/biome check src --log-kind=compact",
     "lint": "npm run lint:code && stylelint **/*.{scss,css}",
     "lint:code": "npx @biomejs/biome lint src --log-kind=compact --verbose",
     "lint:code:fix": "npx @biomejs/biome lint src --apply-unsafe --log-kind=compact --verbose",
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 75f23639..b6054a58 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -1,119 +1,133 @@
-import type { Author, Community } from '../../../graphql/schema/core.gen'
+import type { Author, Community } from "../../../graphql/schema/core.gen";
 
-import { openPage, redirectPage } from '@nanostores/router'
-import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js'
+import { openPage, redirectPage } from "@nanostores/router";
+import { clsx } from "clsx";
+import {
+  For,
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  onMount,
+} from "solid-js";
 
-import { useFollowing } from '../../../context/following'
-import { useLocalize } from '../../../context/localize'
-import { useSession } from '../../../context/session'
-import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
-import { SubscriptionFilter } from '../../../pages/types'
-import { router, useRouter } from '../../../stores/router'
-import { isAuthor } from '../../../utils/isAuthor'
-import { translit } from '../../../utils/ru2en'
-import { isCyrillic } from '../../../utils/translate'
-import { SharePopup, getShareUrl } from '../../Article/SharePopup'
-import { Modal } from '../../Nav/Modal'
-import { TopicBadge } from '../../Topic/TopicBadge'
-import { Button } from '../../_shared/Button'
-import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
-import { AuthorBadge } from '../AuthorBadge'
-import { Userpic } from '../Userpic'
+import { useFollowing } from "../../../context/following";
+import { useLocalize } from "../../../context/localize";
+import { useSession } from "../../../context/session";
+import { FollowingEntity, Topic } from "../../../graphql/schema/core.gen";
+import { SubscriptionFilter } from "../../../pages/types";
+import { router, useRouter } from "../../../stores/router";
+import { isAuthor } from "../../../utils/isAuthor";
+import { translit } from "../../../utils/ru2en";
+import { isCyrillic } from "../../../utils/translate";
+import { SharePopup, getShareUrl } from "../../Article/SharePopup";
+import { Modal } from "../../Nav/Modal";
+import { TopicBadge } from "../../Topic/TopicBadge";
+import { Button } from "../../_shared/Button";
+import { ShowOnlyOnClient } from "../../_shared/ShowOnlyOnClient";
+import { AuthorBadge } from "../AuthorBadge";
+import { Userpic } from "../Userpic";
 
-import stylesButton from '../../_shared/Button/Button.module.scss'
-import styles from './AuthorCard.module.scss'
+import stylesButton from "../../_shared/Button/Button.module.scss";
+import styles from "./AuthorCard.module.scss";
 
 type Props = {
-  author: Author
-  followers?: Author[]
-  following?: Array<Author | Topic>
-}
+  author: Author;
+  followers?: Author[];
+  following?: Array<Author | Topic>;
+};
 export const AuthorCard = (props: Props) => {
-  const { t, lang } = useLocalize()
-  const { author, isSessionLoaded, requireAuthentication } = useSession()
-  const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
-  const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
-  const [isFollowed, setIsFollowed] = createSignal<boolean>()
-  const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
-  const { setFollowing, isOwnerSubscribed } = useFollowing()
+  const { t, lang } = useLocalize();
+  const { author, isSessionLoaded, requireAuthentication } = useSession();
+  const [authorSubs, setAuthorSubs] = createSignal<
+    Array<Author | Topic | Community>
+  >([]);
+  const [subscriptionFilter, setSubscriptionFilter] =
+    createSignal<SubscriptionFilter>("all");
+  const [isFollowed, setIsFollowed] = createSignal<boolean>();
+  const isProfileOwner = createMemo(() => author()?.slug === props.author.slug);
+  const { setFollowing, isOwnerSubscribed } = useFollowing();
 
   onMount(() => {
-    setAuthorSubs(props.following)
-  })
+    setAuthorSubs(props.following);
+  });
 
   createEffect(() => {
-    setIsFollowed(isOwnerSubscribed(props.author?.id))
-  })
+    setIsFollowed(isOwnerSubscribed(props.author?.id));
+  });
 
   const name = createMemo(() => {
-    if (lang() !== 'ru' && isCyrillic(props.author.name)) {
-      if (props.author.name === 'Дискурс') {
-        return 'Discours'
+    if (lang() !== "ru" && isCyrillic(props.author.name)) {
+      if (props.author.name === "Дискурс") {
+        return "Discours";
       }
-      return translit(props.author.name)
+      return translit(props.author.name);
     }
-    return props.author.name
-  })
+    return props.author.name;
+  });
 
   // TODO: reimplement AuthorCard
-  const { changeSearchParams } = useRouter()
+  const { changeSearchParams } = useRouter();
   const initChat = () => {
     // eslint-disable-next-line solid/reactivity
     requireAuthentication(() => {
-      openPage(router, 'inbox')
+      openPage(router, "inbox");
       changeSearchParams({
         initChat: props.author.id.toString(),
-      })
-    }, 'discussions')
-  }
+      });
+    }, "discussions");
+  };
 
   createEffect(() => {
     if (props.following) {
-      if (subscriptionFilter() === 'authors') {
-        setAuthorSubs(props.following.filter((s) => 'name' in s))
-      } else if (subscriptionFilter() === 'topics') {
-        setAuthorSubs(props.following.filter((s) => 'title' in s))
-      } else if (subscriptionFilter() === 'communities') {
-        setAuthorSubs(props.following.filter((s) => 'title' in s))
+      if (subscriptionFilter() === "authors") {
+        setAuthorSubs(props.following.filter((s) => "name" in s));
+      } else if (subscriptionFilter() === "topics") {
+        setAuthorSubs(props.following.filter((s) => "title" in s));
+      } else if (subscriptionFilter() === "communities") {
+        setAuthorSubs(props.following.filter((s) => "title" in s));
       } else {
-        setAuthorSubs(props.following)
+        setAuthorSubs(props.following);
       }
     }
-  })
+  });
 
   const handleFollowClick = () => {
-    const value = !isFollowed()
+    const value = !isFollowed();
     requireAuthentication(() => {
-      setIsFollowed(value)
-      setFollowing(FollowingEntity.Author, props.author.slug, value)
-    }, 'subscribe')
-  }
+      setIsFollowed(value);
+      setFollowing(FollowingEntity.Author, props.author.slug, value);
+    }, "subscribe");
+  };
 
   const followButtonText = createMemo(() => {
     if (isOwnerSubscribed(props.author?.id)) {
       return (
         <>
-          <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
-          <span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
+          <span class={stylesButton.buttonSubscribeLabel}>
+            {t("Following")}
+          </span>
+          <span class={stylesButton.buttonSubscribeLabelHovered}>
+            {t("Unfollow")}
+          </span>
         </>
-      )
+      );
     }
-    return t('Follow')
-  })
+    return t("Follow");
+  });
 
   return (
-    <div class={clsx(styles.author, 'row')}>
+    <div class={clsx(styles.author, "row")}>
       <div class="col-md-5">
         <Userpic
-          size={'XL'}
+          size={"XL"}
           name={props.author.name}
           userpic={props.author.pic}
           slug={props.author.slug}
           class={styles.circlewrap}
         />
       </div>
-      <div class={clsx('col-md-15 col-xl-13', styles.authorDetails)}>
+      <div class={clsx("col-md-15 col-xl-13", styles.authorDetails)}>
         <div class={styles.authorDetailsWrapper}>
           <div class={styles.authorName}>{name()}</div>
           <Show when={props.author.bio}>
@@ -130,11 +144,18 @@ export const AuthorCard = (props: Props) => {
                 <a href="?m=followers" class={styles.subscribers}>
                   <For each={props.followers.slice(0, 3)}>
                     {(f) => (
-                      <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
+                      <Userpic
+                        size={"XS"}
+                        name={f.name}
+                        userpic={f.pic}
+                        class={styles.subscribersItem}
+                      />
                     )}
                   </For>
                   <div class={styles.subscribersCounter}>
-                    {t('SubscriberWithCount', { count: props.followers.length ?? 0 })}
+                    {t("SubscriberWithCount", {
+                      count: props.followers.length ?? 0,
+                    })}
                   </div>
                 </a>
               </Show>
@@ -143,33 +164,35 @@ export const AuthorCard = (props: Props) => {
                 <a href="?m=following" class={styles.subscribers}>
                   <For each={props.following.slice(0, 3)}>
                     {(f) => {
-                      if ('name' in f) {
+                      if ("name" in f) {
                         return (
                           <Userpic
-                            size={'XS'}
+                            size={"XS"}
                             name={f.name}
                             userpic={f.pic}
                             class={styles.subscribersItem}
                           />
-                        )
+                        );
                       }
 
-                      if ('title' in f) {
+                      if ("title" in f) {
                         return (
                           <Userpic
-                            size={'XS'}
+                            size={"XS"}
                             name={f.title}
                             userpic={f.pic}
                             class={styles.subscribersItem}
                           />
-                        )
+                        );
                       }
 
-                      return null
+                      return null;
                     }}
                   </For>
                   <div class={styles.subscribersCounter}>
-                    {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
+                    {t("SubscriptionWithCount", {
+                      count: props?.following.length ?? 0,
+                    })}
                   </div>
                 </a>
               </Show>
@@ -184,12 +207,12 @@ export const AuthorCard = (props: Props) => {
                   {(link) => (
                     <a
                       class={styles.socialLink}
-                      href={link.startsWith('http') ? link : `https://${link}`}
+                      href={link.startsWith("http") ? link : `https://${link}`}
                       target="_blank"
                       rel="nofollow noopener noreferrer"
                     >
                       <span class={styles.authorSubscribeSocialLabel}>
-                        {link.startsWith('http') ? link : `https://${link}`}
+                        {link.startsWith("http") ? link : `https://${link}`}
                       </span>
                     </a>
                   )}
@@ -211,8 +234,8 @@ export const AuthorCard = (props: Props) => {
                     />
                   </Show>
                   <Button
-                    variant={'secondary'}
-                    value={t('Message')}
+                    variant={"secondary"}
+                    value={t("Message")}
                     onClick={initChat}
                     class={styles.buttonWriteMessage}
                   />
@@ -222,11 +245,15 @@ export const AuthorCard = (props: Props) => {
               <div class={styles.authorActions}>
                 <Button
                   variant="secondary"
-                  onClick={() => redirectPage(router, 'profileSettings')}
+                  onClick={() => redirectPage(router, "profileSettings")}
                   value={
                     <>
-                      <span class={styles.authorActionsLabel}>{t('Edit profile')}</span>
-                      <span class={styles.authorActionsLabelMobile}>{t('Edit')}</span>
+                      <span class={styles.authorActionsLabel}>
+                        {t("Edit profile")}
+                      </span>
+                      <span class={styles.authorActionsLabelMobile}>
+                        {t("Edit")}
+                      </span>
                     </>
                   }
                 />
@@ -234,17 +261,24 @@ export const AuthorCard = (props: Props) => {
                   title={props.author.name}
                   description={props.author.bio}
                   imageUrl={props.author.pic}
-                  shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
-                  trigger={<Button variant="secondary" value={t('Share')} />}
+                  shareUrl={getShareUrl({
+                    pathname: `/author/${props.author.slug}`,
+                  })}
+                  trigger={<Button variant="secondary" value={t("Share")} />}
                 />
               </div>
             </Show>
           </Show>
         </ShowOnlyOnClient>
         <Show when={props.followers}>
-          <Modal variant="medium" isResponsive={true} name="followers" maxHeight>
+          <Modal
+            variant="medium"
+            isResponsive={true}
+            name="followers"
+            maxHeight
+          >
             <>
-              <h2>{t('Followers')}</h2>
+              <h2>{t("Followers")}</h2>
               <div class={styles.listWrapper}>
                 <div class="row">
                   <div class="col-24">
@@ -266,30 +300,61 @@ export const AuthorCard = (props: Props) => {
           </Modal>
         </Show>
         <Show when={props.following}>
-          <Modal variant="medium" isResponsive={true} name="following" maxHeight>
+          <Modal
+            variant="medium"
+            isResponsive={true}
+            name="following"
+            maxHeight
+          >
             <>
-              <h2>{t('Subscriptions')}</h2>
+              <h2>{t("Subscriptions")}</h2>
               <ul class="view-switcher">
-                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
-                  <button type="button" onClick={() => setSubscriptionFilter('all')}>
-                    {t('All')}
-                  </button>
-                  <span class="view-switcher__counter">{props.following.length}</span>
-                </li>
-                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
-                  <button type="button" onClick={() => setSubscriptionFilter('authors')}>
-                    {t('Authors')}
+                <li
+                  class={clsx({
+                    "view-switcher__item--selected":
+                      subscriptionFilter() === "all",
+                  })}
+                >
+                  <button
+                    type="button"
+                    onClick={() => setSubscriptionFilter("all")}
+                  >
+                    {t("All")}
                   </button>
                   <span class="view-switcher__counter">
-                    {props.following.filter((s) => 'name' in s).length}
+                    {props.following.length}
                   </span>
                 </li>
-                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
-                  <button type="button" onClick={() => setSubscriptionFilter('topics')}>
-                    {t('Topics')}
+                <li
+                  class={clsx({
+                    "view-switcher__item--selected":
+                      subscriptionFilter() === "authors",
+                  })}
+                >
+                  <button
+                    type="button"
+                    onClick={() => setSubscriptionFilter("authors")}
+                  >
+                    {t("Authors")}
                   </button>
                   <span class="view-switcher__counter">
-                    {props.following.filter((s) => 'title' in s).length}
+                    {props.following.filter((s) => "name" in s).length}
+                  </span>
+                </li>
+                <li
+                  class={clsx({
+                    "view-switcher__item--selected":
+                      subscriptionFilter() === "topics",
+                  })}
+                >
+                  <button
+                    type="button"
+                    onClick={() => setSubscriptionFilter("topics")}
+                  >
+                    {t("Topics")}
+                  </button>
+                  <span class="view-switcher__counter">
+                    {props.following.filter((s) => "title" in s).length}
                   </span>
                 </li>
               </ul>
@@ -326,5 +391,5 @@ export const AuthorCard = (props: Props) => {
         </Show>
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 719f7b48..9a6c12fd 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,162 +1,197 @@
-import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
+import type {
+  Author,
+  Reaction,
+  Shout,
+  Topic,
+} from "../../../graphql/schema/core.gen";
 
-import { getPagePath } from '@nanostores/router'
-import { Meta, Title } from '@solidjs/meta'
-import { clsx } from 'clsx'
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
+import { getPagePath } from "@nanostores/router";
+import { Meta, Title } from "@solidjs/meta";
+import { clsx } from "clsx";
+import {
+  For,
+  Match,
+  Show,
+  Switch,
+  createEffect,
+  createMemo,
+  createSignal,
+  onMount,
+} from "solid-js";
 
-import { useFollowing } from '../../../context/following'
-import { useLocalize } from '../../../context/localize'
-import { apiClient } from '../../../graphql/client/core'
-import { router, useRouter } from '../../../stores/router'
-import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
-import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
-import { getImageUrl } from '../../../utils/getImageUrl'
-import { getDescription } from '../../../utils/meta'
-import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
-import { splitToPages } from '../../../utils/splitToPages'
-import { Comment } from '../../Article/Comment'
-import { AuthorCard } from '../../Author/AuthorCard'
-import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
-import { Row1 } from '../../Feed/Row1'
-import { Row2 } from '../../Feed/Row2'
-import { Row3 } from '../../Feed/Row3'
-import { Loading } from '../../_shared/Loading'
+import { useFollowing } from "../../../context/following";
+import { useLocalize } from "../../../context/localize";
+import { useSession } from "../../../context/session";
+import { apiClient } from "../../../graphql/client/core";
+import { router, useRouter } from "../../../stores/router";
+import { loadShouts, useArticlesStore } from "../../../stores/zine/articles";
+import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors";
+import { getImageUrl } from "../../../utils/getImageUrl";
+import { getDescription } from "../../../utils/meta";
+import {
+  restoreScrollPosition,
+  saveScrollPosition,
+} from "../../../utils/scroll";
+import { splitToPages } from "../../../utils/splitToPages";
+import { Comment } from "../../Article/Comment";
+import { AuthorCard } from "../../Author/AuthorCard";
+import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating";
+import { Row1 } from "../../Feed/Row1";
+import { Row2 } from "../../Feed/Row2";
+import { Row3 } from "../../Feed/Row3";
+import { Loading } from "../../_shared/Loading";
 
-import { MODALS, hideModal } from '../../../stores/ui'
-import { byCreated } from '../../../utils/sortby'
-import stylesArticle from '../../Article/Article.module.scss'
-import styles from './Author.module.scss'
+import { MODALS, hideModal } from "../../../stores/ui";
+import { byCreated } from "../../../utils/sortby";
+import stylesArticle from "../../Article/Article.module.scss";
+import styles from "./Author.module.scss";
 
 type Props = {
-  authorSlug: string
-}
-export const PRERENDERED_ARTICLES_COUNT = 12
-const LOAD_MORE_PAGE_SIZE = 9
+  authorSlug: string;
+  shouts?: Shout[];
+  author?: Author;
+};
+export const PRERENDERED_ARTICLES_COUNT = 12;
+const LOAD_MORE_PAGE_SIZE = 9;
 
 export const AuthorView = (props: Props) => {
-  const { t } = useLocalize()
-  const { subscriptions, followers, loadSubscriptions } = useFollowing()
-  const { session } = useSession()
-  const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
-  const { page: getPage, searchParams } = useRouter()
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-  const [isBioExpanded, setIsBioExpanded] = createSignal(false)
-  const [author, setAuthor] = createSignal<Author>()
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
-  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
-  const [commented, setCommented] = createSignal<Reaction[]>()
-  const modal = MODALS[searchParams().m]
+  const { t } = useLocalize();
+  const {
+    subscriptions,
+    followers: myFollowers,
+    loadSubscriptions,
+  } = useFollowing();
+  const { session } = useSession();
+  const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
+  const { authorEntities } = useAuthorsStore({ authors: [props.author] });
+  const { page: getPage, searchParams } = useRouter();
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] =
+    createSignal(false);
+  const [isBioExpanded, setIsBioExpanded] = createSignal(false);
+  const [author, setAuthor] = createSignal<Author>();
+  const [followers, setFollowers] = createSignal([]);
+  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult
+  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false);
+  const [commented, setCommented] = createSignal<Reaction[]>();
+  const modal = MODALS[searchParams().m];
 
   // current author
   createEffect(() => {
     if (props.authorSlug) {
       if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
-        console.info('my own profile')
-        const { profile, authors, topics } = session().user.app_data
-        setAuthor(profile)
-        setFollowing([...authors, ...topics])
+        console.info("my own profile");
+        const { profile, authors, topics } = session().user.app_data;
+        setFollowers(myFollowers);
+        setAuthor(profile);
+        setFollowing([...authors, ...topics]);
       }
     } else {
       try {
-        const a = authorEntities()[props.authorSlug]
-        setAuthor(a)
-        console.debug('[Author] expecting following data fetched')
+        const a = authorEntities()[props.authorSlug];
+        setAuthor(a);
+        // TODO: add following data retrieval
+        console.debug("[Author] expecting following data fetched");
       } catch (error) {
-        console.debug(error)
+        console.debug(error);
       }
     }
-  })
+  });
 
   createEffect(async () => {
     if (author()?.id && !author().stat) {
-      const a = await loadAuthor({ slug: '', author_id: author().id })
-      console.debug('[AuthorView] loaded author:', a)
+      const a = await loadAuthor({ slug: "", author_id: author().id });
+      console.debug("[AuthorView] loaded author:", a);
     }
-  })
+  });
 
-  const bioContainerRef: { current: HTMLDivElement } = { current: null }
-  const bioWrapperRef: { current: HTMLDivElement } = { current: null }
+  const bioContainerRef: { current: HTMLDivElement } = { current: null };
+  const bioWrapperRef: { current: HTMLDivElement } = { current: null };
 
   const fetchData = async (slug) => {
     try {
       const [subscriptionsResult, followersResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
-      ])
+      ]);
 
-      const { authors, topics } = subscriptionsResult
-      setFollowing([...(authors || []), ...(topics || [])])
-      setFollowers(followersResult || [])
+      const { authors, topics } = subscriptionsResult;
+      setFollowing([...(authors || []), ...(topics || [])]);
+      setFollowers(followersResult || []);
 
-      console.info('[components.Author] following data loaded')
+      console.info("[components.Author] following data loaded");
     } catch (error) {
-      console.error('[components.Author] fetch error', error)
+      console.error("[components.Author] fetch error", error);
     }
-  }
+  };
 
   const checkBioHeight = () => {
     if (bioContainerRef.current) {
-      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight)
+      setShowExpandBioControl(
+        bioContainerRef.current.offsetHeight >
+          bioWrapperRef.current.offsetHeight,
+      );
     }
-  }
+  };
 
   onMount(() => {
-    fetchData(props.authorSlug)
+    fetchData(props.authorSlug);
 
     if (!modal) {
-      hideModal()
+      hideModal();
     }
-  })
+  });
 
   const loadMore = async () => {
-    saveScrollPosition()
+    saveScrollPosition();
     const { hasMore } = await loadShouts({
       filters: { author: props.authorSlug },
       limit: LOAD_MORE_PAGE_SIZE,
       offset: sortedArticles().length,
-    })
-    setIsLoadMoreButtonVisible(hasMore)
-    restoreScrollPosition()
-  }
+    });
+    setIsLoadMoreButtonVisible(hasMore);
+    restoreScrollPosition();
+  };
 
   onMount(() => {
-    checkBioHeight()
+    checkBioHeight();
 
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      loadMore()
-      loadSubscriptions()
+      loadMore();
+      loadSubscriptions();
     }
-  })
+  });
 
   const pages = createMemo<Shout[][]>(() =>
-    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
-  )
+    splitToPages(
+      sortedArticles(),
+      PRERENDERED_ARTICLES_COUNT,
+      LOAD_MORE_PAGE_SIZE,
+    ),
+  );
 
   const fetchComments = async (commenter: Author) => {
     const data = await apiClient.getReactionsBy({
       by: { comment: false, created_by: commenter.id },
-    })
-    setCommented(data)
-  }
+    });
+    setCommented(data);
+  };
 
   createEffect(() => {
     if (author()) {
-      fetchComments(author())
+      fetchComments(author());
     }
-  })
+  });
 
   const ogImage = createMemo(() =>
     author()?.pic
       ? getImageUrl(author()?.pic, { width: 1200 })
-      : getImageUrl('production/image/logo_image.png'),
-  )
-  const description = createMemo(() => getDescription(author()?.bio))
+      : getImageUrl("production/image/logo_image.png"),
+  );
+  const description = createMemo(() => getDescription(author()?.bio));
   const handleDeleteComment = (id: number) => {
-    setCommented((prev) => prev.filter((comment) => comment.id !== id))
-  }
+    setCommented((prev) => prev.filter((comment) => comment.id !== id));
+  };
 
   return (
     <div class={styles.authorPage}>
@@ -176,42 +211,80 @@ export const AuthorView = (props: Props) => {
         <Show when={author()} fallback={<Loading />}>
           <>
             <div class={styles.authorHeader}>
-              <AuthorCard author={author()} followers={followers()} following={following()} />
+              <AuthorCard
+                author={author()}
+                followers={followers() || []}
+                following={following() || []}
+              />
             </div>
-            <div class={clsx(styles.groupControls, 'row')}>
+            <div class={clsx(styles.groupControls, "row")}>
               <div class="col-md-16">
                 <ul class="view-switcher">
-                  <li classList={{ 'view-switcher__item--selected': getPage().route === 'author' }}>
-                    <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
-                      {t('Publications')}
+                  <li
+                    classList={{
+                      "view-switcher__item--selected":
+                        getPage().route === "author",
+                    }}
+                  >
+                    <a
+                      href={getPagePath(router, "author", {
+                        slug: props.authorSlug,
+                      })}
+                    >
+                      {t("Publications")}
                     </a>
                     <Show when={author().stat}>
-                      <span class="view-switcher__counter">{author().stat.shouts}</span>
+                      <span class="view-switcher__counter">
+                        {author().stat.shouts}
+                      </span>
                     </Show>
                   </li>
-                  <li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
-                    <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
-                      {t('Comments')}
+                  <li
+                    classList={{
+                      "view-switcher__item--selected":
+                        getPage().route === "authorComments",
+                    }}
+                  >
+                    <a
+                      href={getPagePath(router, "authorComments", {
+                        slug: props.authorSlug,
+                      })}
+                    >
+                      {t("Comments")}
                     </a>
                     <Show when={author().stat}>
-                      <span class="view-switcher__counter">{author().stat.comments}</span>
+                      <span class="view-switcher__counter">
+                        {author().stat.comments}
+                      </span>
                     </Show>
                   </li>
-                  <li classList={{ 'view-switcher__item--selected': getPage().route === 'authorAbout' }}>
+                  <li
+                    classList={{
+                      "view-switcher__item--selected":
+                        getPage().route === "authorAbout",
+                    }}
+                  >
                     <a
                       onClick={() => checkBioHeight()}
-                      href={getPagePath(router, 'authorAbout', { slug: props.authorSlug })}
+                      href={getPagePath(router, "authorAbout", {
+                        slug: props.authorSlug,
+                      })}
                     >
-                      {t('Profile')}
+                      {t("Profile")}
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class={clsx('col-md-8', styles.additionalControls)}>
-                <Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
+              <div class={clsx("col-md-8", styles.additionalControls)}>
+                <Show
+                  when={author()?.stat?.rating || author()?.stat?.rating === 0}
+                >
                   <div class={styles.ratingContainer}>
-                    {t('All posts rating')}
-                    <AuthorShoutsRating author={author()} class={styles.ratingControl} />
+                    {t("All posts rating")}
+                    <AuthorShoutsRating
+                      author={author()}
+                      class={styles.ratingControl}
+                    />
                   </div>
                 </Show>
               </div>
@@ -221,7 +294,7 @@ export const AuthorView = (props: Props) => {
       </div>
 
       <Switch>
-        <Match when={getPage().route === 'authorAbout'}>
+        <Match when={getPage().route === "authorAbout"}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -230,22 +303,28 @@ export const AuthorView = (props: Props) => {
                   class={styles.longBio}
                   classList={{ [styles.longBioExpanded]: isBioExpanded() }}
                 >
-                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
+                  <div
+                    ref={(el) => (bioContainerRef.current = el)}
+                    innerHTML={author().about}
+                  />
                 </div>
 
                 <Show when={showExpandBioControl()}>
                   <button
-                    class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
+                    class={clsx(
+                      "button button--subscribe-topic",
+                      styles.longBioExpandedControl,
+                    )}
                     onClick={() => setIsBioExpanded(!isBioExpanded())}
                   >
-                    {t('Show more')}
+                    {t("Show more")}
                   </button>
                 </Show>
               </div>
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === 'authorComments'}>
+        <Match when={getPage().route === "authorComments"}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -265,13 +344,18 @@ export const AuthorView = (props: Props) => {
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === 'author'}>
+        <Match when={getPage().route === "author"}>
           <Show when={sortedArticles().length === 1}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
           </Show>
 
           <Show when={sortedArticles().length === 2}>
-            <Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
+            <Row2
+              articles={sortedArticles()}
+              isEqual={true}
+              noauthor={true}
+              nodate={true}
+            />
           </Show>
 
           <Show when={sortedArticles().length === 3}>
@@ -280,21 +364,45 @@ export const AuthorView = (props: Props) => {
 
           <Show when={sortedArticles().length > 3}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
-            <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noauthor={true} />
+            <Row2
+              articles={sortedArticles().slice(1, 3)}
+              isEqual={true}
+              noauthor={true}
+            />
             <Row1 article={sortedArticles()[3]} noauthor={true} nodate={true} />
-            <Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noauthor={true} />
+            <Row2
+              articles={sortedArticles().slice(4, 6)}
+              isEqual={true}
+              noauthor={true}
+            />
             <Row1 article={sortedArticles()[6]} noauthor={true} nodate={true} />
-            <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noauthor={true} />
+            <Row2
+              articles={sortedArticles().slice(7, 9)}
+              isEqual={true}
+              noauthor={true}
+            />
 
             <For each={pages()}>
               {(page) => (
                 <>
                   <Row1 article={page[0]} noauthor={true} nodate={true} />
-                  <Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
+                  <Row2
+                    articles={page.slice(1, 3)}
+                    isEqual={true}
+                    noauthor={true}
+                  />
                   <Row1 article={page[3]} noauthor={true} nodate={true} />
-                  <Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
+                  <Row2
+                    articles={page.slice(4, 6)}
+                    isEqual={true}
+                    noauthor={true}
+                  />
                   <Row1 article={page[6]} noauthor={true} nodate={true} />
-                  <Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
+                  <Row2
+                    articles={page.slice(7, 9)}
+                    isEqual={true}
+                    noauthor={true}
+                  />
                 </>
               )}
             </For>
@@ -303,12 +411,12 @@ export const AuthorView = (props: Props) => {
           <Show when={isLoadMoreButtonVisible()}>
             <p class="load-more-container">
               <button class="button" onClick={loadMore}>
-                {t('Load more')}
+                {t("Load more")}
               </button>
             </p>
           </Show>
         </Match>
       </Switch>
     </div>
-  )
-}
+  );
+};
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index 083e7978..d4db7857 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -1,59 +1,60 @@
-import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
+import { clsx } from "clsx";
+import { For, Show, createEffect, createSignal, onMount } from "solid-js";
 
-import { useFollowing } from '../../../context/following'
-import { useLocalize } from '../../../context/localize'
-import { useSession } from '../../../context/session'
-import { apiClient } from '../../../graphql/client/core'
-import { Author as AuthorType, Topic } from '../../../graphql/schema/core.gen'
-import { SubscriptionFilter } from '../../../pages/types'
-import { dummyFilter } from '../../../utils/dummyFilter'
+import { useFollowing } from "../../../context/following";
+import { useLocalize } from "../../../context/localize";
+import { useSession } from "../../../context/session";
+import { apiClient } from "../../../graphql/client/core";
+import { Author, Topic } from "../../../graphql/schema/core.gen";
+import { SubscriptionFilter } from "../../../pages/types";
+import { dummyFilter } from "../../../utils/dummyFilter";
 // TODO: refactor styles
-import { isAuthor } from '../../../utils/isAuthor'
-import { AuthorBadge } from '../../Author/AuthorBadge'
-import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
-import { TopicBadge } from '../../Topic/TopicBadge'
-import { Loading } from '../../_shared/Loading'
-import { SearchField } from '../../_shared/SearchField'
+import { isAuthor } from "../../../utils/isAuthor";
+import { AuthorBadge } from "../../Author/AuthorBadge";
+import { ProfileSettingsNavigation } from "../../Nav/ProfileSettingsNavigation";
+import { TopicBadge } from "../../Topic/TopicBadge";
+import { Loading } from "../../_shared/Loading";
+import { SearchField } from "../../_shared/SearchField";
 
-import styles from '../../../pages/profile/Settings.module.scss'
-import stylesSettings from '../../../styles/FeedSettings.module.scss'
+import styles from "../../../pages/profile/Settings.module.scss";
+import stylesSettings from "../../../styles/FeedSettings.module.scss";
 
 export const ProfileSubscriptions = () => {
-  const { t, lang } = useLocalize()
-  const { author, session } = useSession()
-  const { subscriptions } = useFollowing()
-  const [following, setFollowing] = (createSignal < Array < AuthorType) | (Topic >> [])
-  const [filtered, setFiltered] = (createSignal < Array < AuthorType) | (Topic >> [])
-  const [subscriptionFilter, setSubscriptionFilter] = createSignal < SubscriptionFilter > 'all'
-  const [searchQuery, setSearchQuery] = createSignal('')
+  const { t, lang } = useLocalize();
+  const { author, session } = useSession();
+  const { subscriptions } = useFollowing();
+  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]);
+  const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([]);
+  const [subscriptionFilter, setSubscriptionFilter] =
+    createSignal<SubscriptionFilter>("all");
+  const [searchQuery, setSearchQuery] = createSignal("");
 
   createEffect(() => {
-    const { authors, topics } = subscriptions
+    const { authors, topics } = subscriptions;
     if (authors || topics) {
-      const fdata = [...(authors || []), ...(topics || [])]
-      setFollowing(fdata)
-      if (subscriptionFilter() === 'authors') {
-        setFiltered(fdata.filter((s) => 'name' in s))
-      } else if (subscriptionFilter() === 'topics') {
-        setFiltered(fdata.filter((s) => 'title' in s))
+      const fdata = [...(authors || []), ...(topics || [])];
+      setFollowing(fdata);
+      if (subscriptionFilter() === "authors") {
+        setFiltered(fdata.filter((s) => "name" in s));
+      } else if (subscriptionFilter() === "topics") {
+        setFiltered(fdata.filter((s) => "title" in s));
       } else {
-        setFiltered(fdata)
+        setFiltered(fdata);
       }
     }
-  })
+  });
 
   createEffect(() => {
     if (searchQuery()) {
-      setFiltered(dummyFilter(following(), searchQuery(), lang()))
+      setFiltered(dummyFilter(following(), searchQuery(), lang()));
     }
-  })
+  });
 
   return (
     <div class="wide-container">
       <div class="row">
         <div class="col-md-5">
-          <div class={clsx('left-navigation', styles.leftNavigation)}>
+          <div class={clsx("left-navigation", styles.leftNavigation)}>
             <ProfileSettingsNavigation />
           </div>
         </div>
@@ -61,28 +62,54 @@ export const ProfileSubscriptions = () => {
         <div class="col-md-19">
           <div class="row">
             <div class="col-md-20 col-lg-18 col-xl-16">
-              <h1>{t('My subscriptions')}</h1>
-              <p class="description">{t('Here you can manage all your Discours subscriptions')}</p>
+              <h1>{t("My subscriptions")}</h1>
+              <p class="description">
+                {t("Here you can manage all your Discours subscriptions")}
+              </p>
               <Show when={following()} fallback={<Loading />}>
                 <ul class="view-switcher">
-                  <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
-                    <button type="button" onClick={() => setSubscriptionFilter('all')}>
-                      {t('All')}
+                  <li
+                    class={clsx({
+                      "view-switcher__item--selected":
+                        subscriptionFilter() === "all",
+                    })}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => setSubscriptionFilter("all")}
+                    >
+                      {t("All")}
                     </button>
                   </li>
-                  <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
-                    <button type="button" onClick={() => setSubscriptionFilter('authors')}>
-                      {t('Authors')}
+                  <li
+                    class={clsx({
+                      "view-switcher__item--selected":
+                        subscriptionFilter() === "authors",
+                    })}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => setSubscriptionFilter("authors")}
+                    >
+                      {t("Authors")}
                     </button>
                   </li>
-                  <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
-                    <button type="button" onClick={() => setSubscriptionFilter('topics')}>
-                      {t('Topics')}
+                  <li
+                    class={clsx({
+                      "view-switcher__item--selected":
+                        subscriptionFilter() === "topics",
+                    })}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => setSubscriptionFilter("topics")}
+                    >
+                      {t("Topics")}
                     </button>
                   </li>
                 </ul>
 
-                <div class={clsx('pretty-form__item', styles.searchContainer)}>
+                <div class={clsx("pretty-form__item", styles.searchContainer)}>
                   <SearchField
                     onChange={(value) => setSearchQuery(value)}
                     class={styles.searchField}
@@ -90,14 +117,22 @@ export const ProfileSubscriptions = () => {
                   />
                 </div>
 
-                <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
+                <div
+                  class={clsx(stylesSettings.settingsList, styles.topicsList)}
+                >
                   <For each={filtered()}>
                     {(followingItem) => (
                       <div>
                         {isAuthor(followingItem) ? (
-                          <AuthorBadge minimizeSubscribeButton={true} author={followingItem} />
+                          <AuthorBadge
+                            minimizeSubscribeButton={true}
+                            author={followingItem}
+                          />
                         ) : (
-                          <TopicBadge minimizeSubscribeButton={true} topic={followingItem} />
+                          <TopicBadge
+                            minimizeSubscribeButton={true}
+                            topic={followingItem}
+                          />
                         )}
                       </div>
                     )}
@@ -109,5 +144,5 @@ export const ProfileSubscriptions = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};

From 455006f6277be3a4e67c05ebfdf4a1e7dec663a0 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 8 Apr 2024 18:19:43 +0300
Subject: [PATCH 12/35] fmt

---
 .../Author/AuthorCard/AuthorCard.tsx          | 269 ++++++--------
 src/components/Views/Author/Author.tsx        | 336 +++++++-----------
 .../ProfileSubscriptions.tsx                  | 129 +++----
 3 files changed, 292 insertions(+), 442 deletions(-)

diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index b6054a58..5fedd3e5 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -1,133 +1,119 @@
-import type { Author, Community } from "../../../graphql/schema/core.gen";
+import type { Author, Community } from '../../../graphql/schema/core.gen'
 
-import { openPage, redirectPage } from "@nanostores/router";
-import { clsx } from "clsx";
-import {
-  For,
-  Show,
-  createEffect,
-  createMemo,
-  createSignal,
-  onMount,
-} from "solid-js";
+import { openPage, redirectPage } from '@nanostores/router'
+import { clsx } from 'clsx'
+import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js'
 
-import { useFollowing } from "../../../context/following";
-import { useLocalize } from "../../../context/localize";
-import { useSession } from "../../../context/session";
-import { FollowingEntity, Topic } from "../../../graphql/schema/core.gen";
-import { SubscriptionFilter } from "../../../pages/types";
-import { router, useRouter } from "../../../stores/router";
-import { isAuthor } from "../../../utils/isAuthor";
-import { translit } from "../../../utils/ru2en";
-import { isCyrillic } from "../../../utils/translate";
-import { SharePopup, getShareUrl } from "../../Article/SharePopup";
-import { Modal } from "../../Nav/Modal";
-import { TopicBadge } from "../../Topic/TopicBadge";
-import { Button } from "../../_shared/Button";
-import { ShowOnlyOnClient } from "../../_shared/ShowOnlyOnClient";
-import { AuthorBadge } from "../AuthorBadge";
-import { Userpic } from "../Userpic";
+import { useFollowing } from '../../../context/following'
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
+import { SubscriptionFilter } from '../../../pages/types'
+import { router, useRouter } from '../../../stores/router'
+import { isAuthor } from '../../../utils/isAuthor'
+import { translit } from '../../../utils/ru2en'
+import { isCyrillic } from '../../../utils/translate'
+import { SharePopup, getShareUrl } from '../../Article/SharePopup'
+import { Modal } from '../../Nav/Modal'
+import { TopicBadge } from '../../Topic/TopicBadge'
+import { Button } from '../../_shared/Button'
+import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
+import { AuthorBadge } from '../AuthorBadge'
+import { Userpic } from '../Userpic'
 
-import stylesButton from "../../_shared/Button/Button.module.scss";
-import styles from "./AuthorCard.module.scss";
+import stylesButton from '../../_shared/Button/Button.module.scss'
+import styles from './AuthorCard.module.scss'
 
 type Props = {
-  author: Author;
-  followers?: Author[];
-  following?: Array<Author | Topic>;
-};
+  author: Author
+  followers?: Author[]
+  following?: Array<Author | Topic>
+}
 export const AuthorCard = (props: Props) => {
-  const { t, lang } = useLocalize();
-  const { author, isSessionLoaded, requireAuthentication } = useSession();
-  const [authorSubs, setAuthorSubs] = createSignal<
-    Array<Author | Topic | Community>
-  >([]);
-  const [subscriptionFilter, setSubscriptionFilter] =
-    createSignal<SubscriptionFilter>("all");
-  const [isFollowed, setIsFollowed] = createSignal<boolean>();
-  const isProfileOwner = createMemo(() => author()?.slug === props.author.slug);
-  const { setFollowing, isOwnerSubscribed } = useFollowing();
+  const { t, lang } = useLocalize()
+  const { author, isSessionLoaded, requireAuthentication } = useSession()
+  const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
+  const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
+  const [isFollowed, setIsFollowed] = createSignal<boolean>()
+  const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
+  const { setFollowing, isOwnerSubscribed } = useFollowing()
 
   onMount(() => {
-    setAuthorSubs(props.following);
-  });
+    setAuthorSubs(props.following)
+  })
 
   createEffect(() => {
-    setIsFollowed(isOwnerSubscribed(props.author?.id));
-  });
+    setIsFollowed(isOwnerSubscribed(props.author?.id))
+  })
 
   const name = createMemo(() => {
-    if (lang() !== "ru" && isCyrillic(props.author.name)) {
-      if (props.author.name === "Дискурс") {
-        return "Discours";
+    if (lang() !== 'ru' && isCyrillic(props.author.name)) {
+      if (props.author.name === 'Дискурс') {
+        return 'Discours'
       }
-      return translit(props.author.name);
+      return translit(props.author.name)
     }
-    return props.author.name;
-  });
+    return props.author.name
+  })
 
   // TODO: reimplement AuthorCard
-  const { changeSearchParams } = useRouter();
+  const { changeSearchParams } = useRouter()
   const initChat = () => {
     // eslint-disable-next-line solid/reactivity
     requireAuthentication(() => {
-      openPage(router, "inbox");
+      openPage(router, 'inbox')
       changeSearchParams({
         initChat: props.author.id.toString(),
-      });
-    }, "discussions");
-  };
+      })
+    }, 'discussions')
+  }
 
   createEffect(() => {
     if (props.following) {
-      if (subscriptionFilter() === "authors") {
-        setAuthorSubs(props.following.filter((s) => "name" in s));
-      } else if (subscriptionFilter() === "topics") {
-        setAuthorSubs(props.following.filter((s) => "title" in s));
-      } else if (subscriptionFilter() === "communities") {
-        setAuthorSubs(props.following.filter((s) => "title" in s));
+      if (subscriptionFilter() === 'authors') {
+        setAuthorSubs(props.following.filter((s) => 'name' in s))
+      } else if (subscriptionFilter() === 'topics') {
+        setAuthorSubs(props.following.filter((s) => 'title' in s))
+      } else if (subscriptionFilter() === 'communities') {
+        setAuthorSubs(props.following.filter((s) => 'title' in s))
       } else {
-        setAuthorSubs(props.following);
+        setAuthorSubs(props.following)
       }
     }
-  });
+  })
 
   const handleFollowClick = () => {
-    const value = !isFollowed();
+    const value = !isFollowed()
     requireAuthentication(() => {
-      setIsFollowed(value);
-      setFollowing(FollowingEntity.Author, props.author.slug, value);
-    }, "subscribe");
-  };
+      setIsFollowed(value)
+      setFollowing(FollowingEntity.Author, props.author.slug, value)
+    }, 'subscribe')
+  }
 
   const followButtonText = createMemo(() => {
     if (isOwnerSubscribed(props.author?.id)) {
       return (
         <>
-          <span class={stylesButton.buttonSubscribeLabel}>
-            {t("Following")}
-          </span>
-          <span class={stylesButton.buttonSubscribeLabelHovered}>
-            {t("Unfollow")}
-          </span>
+          <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
+          <span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
         </>
-      );
+      )
     }
-    return t("Follow");
-  });
+    return t('Follow')
+  })
 
   return (
-    <div class={clsx(styles.author, "row")}>
+    <div class={clsx(styles.author, 'row')}>
       <div class="col-md-5">
         <Userpic
-          size={"XL"}
+          size={'XL'}
           name={props.author.name}
           userpic={props.author.pic}
           slug={props.author.slug}
           class={styles.circlewrap}
         />
       </div>
-      <div class={clsx("col-md-15 col-xl-13", styles.authorDetails)}>
+      <div class={clsx('col-md-15 col-xl-13', styles.authorDetails)}>
         <div class={styles.authorDetailsWrapper}>
           <div class={styles.authorName}>{name()}</div>
           <Show when={props.author.bio}>
@@ -144,16 +130,11 @@ export const AuthorCard = (props: Props) => {
                 <a href="?m=followers" class={styles.subscribers}>
                   <For each={props.followers.slice(0, 3)}>
                     {(f) => (
-                      <Userpic
-                        size={"XS"}
-                        name={f.name}
-                        userpic={f.pic}
-                        class={styles.subscribersItem}
-                      />
+                      <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
                     )}
                   </For>
                   <div class={styles.subscribersCounter}>
-                    {t("SubscriberWithCount", {
+                    {t('SubscriberWithCount', {
                       count: props.followers.length ?? 0,
                     })}
                   </div>
@@ -164,33 +145,33 @@ export const AuthorCard = (props: Props) => {
                 <a href="?m=following" class={styles.subscribers}>
                   <For each={props.following.slice(0, 3)}>
                     {(f) => {
-                      if ("name" in f) {
+                      if ('name' in f) {
                         return (
                           <Userpic
-                            size={"XS"}
+                            size={'XS'}
                             name={f.name}
                             userpic={f.pic}
                             class={styles.subscribersItem}
                           />
-                        );
+                        )
                       }
 
-                      if ("title" in f) {
+                      if ('title' in f) {
                         return (
                           <Userpic
-                            size={"XS"}
+                            size={'XS'}
                             name={f.title}
                             userpic={f.pic}
                             class={styles.subscribersItem}
                           />
-                        );
+                        )
                       }
 
-                      return null;
+                      return null
                     }}
                   </For>
                   <div class={styles.subscribersCounter}>
-                    {t("SubscriptionWithCount", {
+                    {t('SubscriptionWithCount', {
                       count: props?.following.length ?? 0,
                     })}
                   </div>
@@ -207,12 +188,12 @@ export const AuthorCard = (props: Props) => {
                   {(link) => (
                     <a
                       class={styles.socialLink}
-                      href={link.startsWith("http") ? link : `https://${link}`}
+                      href={link.startsWith('http') ? link : `https://${link}`}
                       target="_blank"
                       rel="nofollow noopener noreferrer"
                     >
                       <span class={styles.authorSubscribeSocialLabel}>
-                        {link.startsWith("http") ? link : `https://${link}`}
+                        {link.startsWith('http') ? link : `https://${link}`}
                       </span>
                     </a>
                   )}
@@ -234,8 +215,8 @@ export const AuthorCard = (props: Props) => {
                     />
                   </Show>
                   <Button
-                    variant={"secondary"}
-                    value={t("Message")}
+                    variant={'secondary'}
+                    value={t('Message')}
                     onClick={initChat}
                     class={styles.buttonWriteMessage}
                   />
@@ -245,15 +226,11 @@ export const AuthorCard = (props: Props) => {
               <div class={styles.authorActions}>
                 <Button
                   variant="secondary"
-                  onClick={() => redirectPage(router, "profileSettings")}
+                  onClick={() => redirectPage(router, 'profileSettings')}
                   value={
                     <>
-                      <span class={styles.authorActionsLabel}>
-                        {t("Edit profile")}
-                      </span>
-                      <span class={styles.authorActionsLabelMobile}>
-                        {t("Edit")}
-                      </span>
+                      <span class={styles.authorActionsLabel}>{t('Edit profile')}</span>
+                      <span class={styles.authorActionsLabelMobile}>{t('Edit')}</span>
                     </>
                   }
                 />
@@ -264,21 +241,16 @@ export const AuthorCard = (props: Props) => {
                   shareUrl={getShareUrl({
                     pathname: `/author/${props.author.slug}`,
                   })}
-                  trigger={<Button variant="secondary" value={t("Share")} />}
+                  trigger={<Button variant="secondary" value={t('Share')} />}
                 />
               </div>
             </Show>
           </Show>
         </ShowOnlyOnClient>
         <Show when={props.followers}>
-          <Modal
-            variant="medium"
-            isResponsive={true}
-            name="followers"
-            maxHeight
-          >
+          <Modal variant="medium" isResponsive={true} name="followers" maxHeight>
             <>
-              <h2>{t("Followers")}</h2>
+              <h2>{t('Followers')}</h2>
               <div class={styles.listWrapper}>
                 <div class="row">
                   <div class="col-24">
@@ -300,61 +272,42 @@ export const AuthorCard = (props: Props) => {
           </Modal>
         </Show>
         <Show when={props.following}>
-          <Modal
-            variant="medium"
-            isResponsive={true}
-            name="following"
-            maxHeight
-          >
+          <Modal variant="medium" isResponsive={true} name="following" maxHeight>
             <>
-              <h2>{t("Subscriptions")}</h2>
+              <h2>{t('Subscriptions')}</h2>
               <ul class="view-switcher">
                 <li
                   class={clsx({
-                    "view-switcher__item--selected":
-                      subscriptionFilter() === "all",
+                    'view-switcher__item--selected': subscriptionFilter() === 'all',
                   })}
                 >
-                  <button
-                    type="button"
-                    onClick={() => setSubscriptionFilter("all")}
-                  >
-                    {t("All")}
+                  <button type="button" onClick={() => setSubscriptionFilter('all')}>
+                    {t('All')}
+                  </button>
+                  <span class="view-switcher__counter">{props.following.length}</span>
+                </li>
+                <li
+                  class={clsx({
+                    'view-switcher__item--selected': subscriptionFilter() === 'authors',
+                  })}
+                >
+                  <button type="button" onClick={() => setSubscriptionFilter('authors')}>
+                    {t('Authors')}
                   </button>
                   <span class="view-switcher__counter">
-                    {props.following.length}
+                    {props.following.filter((s) => 'name' in s).length}
                   </span>
                 </li>
                 <li
                   class={clsx({
-                    "view-switcher__item--selected":
-                      subscriptionFilter() === "authors",
+                    'view-switcher__item--selected': subscriptionFilter() === 'topics',
                   })}
                 >
-                  <button
-                    type="button"
-                    onClick={() => setSubscriptionFilter("authors")}
-                  >
-                    {t("Authors")}
+                  <button type="button" onClick={() => setSubscriptionFilter('topics')}>
+                    {t('Topics')}
                   </button>
                   <span class="view-switcher__counter">
-                    {props.following.filter((s) => "name" in s).length}
-                  </span>
-                </li>
-                <li
-                  class={clsx({
-                    "view-switcher__item--selected":
-                      subscriptionFilter() === "topics",
-                  })}
-                >
-                  <button
-                    type="button"
-                    onClick={() => setSubscriptionFilter("topics")}
-                  >
-                    {t("Topics")}
-                  </button>
-                  <span class="view-switcher__counter">
-                    {props.following.filter((s) => "title" in s).length}
+                    {props.following.filter((s) => 'title' in s).length}
                   </span>
                 </li>
               </ul>
@@ -391,5 +344,5 @@ export const AuthorCard = (props: Props) => {
         </Show>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 9a6c12fd..0c6a958a 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,197 +1,168 @@
-import type {
-  Author,
-  Reaction,
-  Shout,
-  Topic,
-} from "../../../graphql/schema/core.gen";
+import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
 
-import { getPagePath } from "@nanostores/router";
-import { Meta, Title } from "@solidjs/meta";
-import { clsx } from "clsx";
-import {
-  For,
-  Match,
-  Show,
-  Switch,
-  createEffect,
-  createMemo,
-  createSignal,
-  onMount,
-} from "solid-js";
+import { getPagePath } from '@nanostores/router'
+import { Meta, Title } from '@solidjs/meta'
+import { clsx } from 'clsx'
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
 
-import { useFollowing } from "../../../context/following";
-import { useLocalize } from "../../../context/localize";
-import { useSession } from "../../../context/session";
-import { apiClient } from "../../../graphql/client/core";
-import { router, useRouter } from "../../../stores/router";
-import { loadShouts, useArticlesStore } from "../../../stores/zine/articles";
-import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors";
-import { getImageUrl } from "../../../utils/getImageUrl";
-import { getDescription } from "../../../utils/meta";
-import {
-  restoreScrollPosition,
-  saveScrollPosition,
-} from "../../../utils/scroll";
-import { splitToPages } from "../../../utils/splitToPages";
-import { Comment } from "../../Article/Comment";
-import { AuthorCard } from "../../Author/AuthorCard";
-import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating";
-import { Row1 } from "../../Feed/Row1";
-import { Row2 } from "../../Feed/Row2";
-import { Row3 } from "../../Feed/Row3";
-import { Loading } from "../../_shared/Loading";
+import { useFollowing } from '../../../context/following'
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { apiClient } from '../../../graphql/client/core'
+import { router, useRouter } from '../../../stores/router'
+import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
+import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
+import { getImageUrl } from '../../../utils/getImageUrl'
+import { getDescription } from '../../../utils/meta'
+import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
+import { splitToPages } from '../../../utils/splitToPages'
+import { Comment } from '../../Article/Comment'
+import { AuthorCard } from '../../Author/AuthorCard'
+import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
+import { Row1 } from '../../Feed/Row1'
+import { Row2 } from '../../Feed/Row2'
+import { Row3 } from '../../Feed/Row3'
+import { Loading } from '../../_shared/Loading'
 
-import { MODALS, hideModal } from "../../../stores/ui";
-import { byCreated } from "../../../utils/sortby";
-import stylesArticle from "../../Article/Article.module.scss";
-import styles from "./Author.module.scss";
+import { MODALS, hideModal } from '../../../stores/ui'
+import { byCreated } from '../../../utils/sortby'
+import stylesArticle from '../../Article/Article.module.scss'
+import styles from './Author.module.scss'
 
 type Props = {
-  authorSlug: string;
-  shouts?: Shout[];
-  author?: Author;
-};
-export const PRERENDERED_ARTICLES_COUNT = 12;
-const LOAD_MORE_PAGE_SIZE = 9;
+  authorSlug: string
+  shouts?: Shout[]
+  author?: Author
+}
+export const PRERENDERED_ARTICLES_COUNT = 12
+const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
-  const { t } = useLocalize();
-  const {
-    subscriptions,
-    followers: myFollowers,
-    loadSubscriptions,
-  } = useFollowing();
-  const { session } = useSession();
-  const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] });
-  const { page: getPage, searchParams } = useRouter();
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] =
-    createSignal(false);
-  const [isBioExpanded, setIsBioExpanded] = createSignal(false);
-  const [author, setAuthor] = createSignal<Author>();
-  const [followers, setFollowers] = createSignal([]);
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult
-  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false);
-  const [commented, setCommented] = createSignal<Reaction[]>();
-  const modal = MODALS[searchParams().m];
+  const { t } = useLocalize()
+  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
+  const { session } = useSession()
+  const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
+  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
+  const { page: getPage, searchParams } = useRouter()
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+  const [isBioExpanded, setIsBioExpanded] = createSignal(false)
+  const [author, setAuthor] = createSignal<Author>()
+  const [followers, setFollowers] = createSignal([])
+  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) // flat AuthorFollowsResult
+  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
+  const [commented, setCommented] = createSignal<Reaction[]>()
+  const modal = MODALS[searchParams().m]
 
   // current author
   createEffect(() => {
     if (props.authorSlug) {
       if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
-        console.info("my own profile");
-        const { profile, authors, topics } = session().user.app_data;
-        setFollowers(myFollowers);
-        setAuthor(profile);
-        setFollowing([...authors, ...topics]);
+        console.info('my own profile')
+        const { profile, authors, topics } = session().user.app_data
+        setFollowers(myFollowers)
+        setAuthor(profile)
+        setFollowing([...authors, ...topics])
       }
     } else {
       try {
-        const a = authorEntities()[props.authorSlug];
-        setAuthor(a);
+        const a = authorEntities()[props.authorSlug]
+        setAuthor(a)
         // TODO: add following data retrieval
-        console.debug("[Author] expecting following data fetched");
+        console.debug('[Author] expecting following data fetched')
       } catch (error) {
-        console.debug(error);
+        console.debug(error)
       }
     }
-  });
+  })
 
   createEffect(async () => {
     if (author()?.id && !author().stat) {
-      const a = await loadAuthor({ slug: "", author_id: author().id });
-      console.debug("[AuthorView] loaded author:", a);
+      const a = await loadAuthor({ slug: '', author_id: author().id })
+      console.debug('[AuthorView] loaded author:', a)
     }
-  });
+  })
 
-  const bioContainerRef: { current: HTMLDivElement } = { current: null };
-  const bioWrapperRef: { current: HTMLDivElement } = { current: null };
+  const bioContainerRef: { current: HTMLDivElement } = { current: null }
+  const bioWrapperRef: { current: HTMLDivElement } = { current: null }
 
   const fetchData = async (slug) => {
     try {
       const [subscriptionsResult, followersResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
-      ]);
+      ])
 
-      const { authors, topics } = subscriptionsResult;
-      setFollowing([...(authors || []), ...(topics || [])]);
-      setFollowers(followersResult || []);
+      const { authors, topics } = subscriptionsResult
+      setFollowing([...(authors || []), ...(topics || [])])
+      setFollowers(followersResult || [])
 
-      console.info("[components.Author] following data loaded");
+      console.info('[components.Author] following data loaded')
     } catch (error) {
-      console.error("[components.Author] fetch error", error);
+      console.error('[components.Author] fetch error', error)
     }
-  };
+  }
 
   const checkBioHeight = () => {
     if (bioContainerRef.current) {
-      setShowExpandBioControl(
-        bioContainerRef.current.offsetHeight >
-          bioWrapperRef.current.offsetHeight,
-      );
+      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight)
     }
-  };
+  }
 
   onMount(() => {
-    fetchData(props.authorSlug);
+    fetchData(props.authorSlug)
 
     if (!modal) {
-      hideModal();
+      hideModal()
     }
-  });
+  })
 
   const loadMore = async () => {
-    saveScrollPosition();
+    saveScrollPosition()
     const { hasMore } = await loadShouts({
       filters: { author: props.authorSlug },
       limit: LOAD_MORE_PAGE_SIZE,
       offset: sortedArticles().length,
-    });
-    setIsLoadMoreButtonVisible(hasMore);
-    restoreScrollPosition();
-  };
+    })
+    setIsLoadMoreButtonVisible(hasMore)
+    restoreScrollPosition()
+  }
 
   onMount(() => {
-    checkBioHeight();
+    checkBioHeight()
 
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      loadMore();
-      loadSubscriptions();
+      loadMore()
+      loadSubscriptions()
     }
-  });
+  })
 
   const pages = createMemo<Shout[][]>(() =>
-    splitToPages(
-      sortedArticles(),
-      PRERENDERED_ARTICLES_COUNT,
-      LOAD_MORE_PAGE_SIZE,
-    ),
-  );
+    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
+  )
 
   const fetchComments = async (commenter: Author) => {
     const data = await apiClient.getReactionsBy({
       by: { comment: false, created_by: commenter.id },
-    });
-    setCommented(data);
-  };
+    })
+    setCommented(data)
+  }
 
   createEffect(() => {
     if (author()) {
-      fetchComments(author());
+      fetchComments(author())
     }
-  });
+  })
 
   const ogImage = createMemo(() =>
     author()?.pic
       ? getImageUrl(author()?.pic, { width: 1200 })
-      : getImageUrl("production/image/logo_image.png"),
-  );
-  const description = createMemo(() => getDescription(author()?.bio));
+      : getImageUrl('production/image/logo_image.png'),
+  )
+  const description = createMemo(() => getDescription(author()?.bio))
   const handleDeleteComment = (id: number) => {
-    setCommented((prev) => prev.filter((comment) => comment.id !== id));
-  };
+    setCommented((prev) => prev.filter((comment) => comment.id !== id))
+  }
 
   return (
     <div class={styles.authorPage}>
@@ -211,80 +182,64 @@ export const AuthorView = (props: Props) => {
         <Show when={author()} fallback={<Loading />}>
           <>
             <div class={styles.authorHeader}>
-              <AuthorCard
-                author={author()}
-                followers={followers() || []}
-                following={following() || []}
-              />
+              <AuthorCard author={author()} followers={followers() || []} following={following() || []} />
             </div>
-            <div class={clsx(styles.groupControls, "row")}>
+            <div class={clsx(styles.groupControls, 'row')}>
               <div class="col-md-16">
                 <ul class="view-switcher">
                   <li
                     classList={{
-                      "view-switcher__item--selected":
-                        getPage().route === "author",
+                      'view-switcher__item--selected': getPage().route === 'author',
                     }}
                   >
                     <a
-                      href={getPagePath(router, "author", {
+                      href={getPagePath(router, 'author', {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t("Publications")}
+                      {t('Publications')}
                     </a>
                     <Show when={author().stat}>
-                      <span class="view-switcher__counter">
-                        {author().stat.shouts}
-                      </span>
+                      <span class="view-switcher__counter">{author().stat.shouts}</span>
                     </Show>
                   </li>
                   <li
                     classList={{
-                      "view-switcher__item--selected":
-                        getPage().route === "authorComments",
+                      'view-switcher__item--selected': getPage().route === 'authorComments',
                     }}
                   >
                     <a
-                      href={getPagePath(router, "authorComments", {
+                      href={getPagePath(router, 'authorComments', {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t("Comments")}
+                      {t('Comments')}
                     </a>
                     <Show when={author().stat}>
-                      <span class="view-switcher__counter">
-                        {author().stat.comments}
-                      </span>
+                      <span class="view-switcher__counter">{author().stat.comments}</span>
                     </Show>
                   </li>
                   <li
                     classList={{
-                      "view-switcher__item--selected":
-                        getPage().route === "authorAbout",
+                      'view-switcher__item--selected': getPage().route === 'authorAbout',
                     }}
                   >
                     <a
                       onClick={() => checkBioHeight()}
-                      href={getPagePath(router, "authorAbout", {
+                      href={getPagePath(router, 'authorAbout', {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t("Profile")}
+                      {t('Profile')}
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class={clsx("col-md-8", styles.additionalControls)}>
-                <Show
-                  when={author()?.stat?.rating || author()?.stat?.rating === 0}
-                >
+              <div class={clsx('col-md-8', styles.additionalControls)}>
+                <Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
                   <div class={styles.ratingContainer}>
-                    {t("All posts rating")}
-                    <AuthorShoutsRating
-                      author={author()}
-                      class={styles.ratingControl}
-                    />
+                    {t('All posts rating')}
+                    <AuthorShoutsRating author={author()} class={styles.ratingControl} />
                   </div>
                 </Show>
               </div>
@@ -294,7 +249,7 @@ export const AuthorView = (props: Props) => {
       </div>
 
       <Switch>
-        <Match when={getPage().route === "authorAbout"}>
+        <Match when={getPage().route === 'authorAbout'}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -303,28 +258,22 @@ export const AuthorView = (props: Props) => {
                   class={styles.longBio}
                   classList={{ [styles.longBioExpanded]: isBioExpanded() }}
                 >
-                  <div
-                    ref={(el) => (bioContainerRef.current = el)}
-                    innerHTML={author().about}
-                  />
+                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
                 </div>
 
                 <Show when={showExpandBioControl()}>
                   <button
-                    class={clsx(
-                      "button button--subscribe-topic",
-                      styles.longBioExpandedControl,
-                    )}
+                    class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
                     onClick={() => setIsBioExpanded(!isBioExpanded())}
                   >
-                    {t("Show more")}
+                    {t('Show more')}
                   </button>
                 </Show>
               </div>
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === "authorComments"}>
+        <Match when={getPage().route === 'authorComments'}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -344,18 +293,13 @@ export const AuthorView = (props: Props) => {
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === "author"}>
+        <Match when={getPage().route === 'author'}>
           <Show when={sortedArticles().length === 1}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
           </Show>
 
           <Show when={sortedArticles().length === 2}>
-            <Row2
-              articles={sortedArticles()}
-              isEqual={true}
-              noauthor={true}
-              nodate={true}
-            />
+            <Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
           </Show>
 
           <Show when={sortedArticles().length === 3}>
@@ -364,45 +308,21 @@ export const AuthorView = (props: Props) => {
 
           <Show when={sortedArticles().length > 3}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
-            <Row2
-              articles={sortedArticles().slice(1, 3)}
-              isEqual={true}
-              noauthor={true}
-            />
+            <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noauthor={true} />
             <Row1 article={sortedArticles()[3]} noauthor={true} nodate={true} />
-            <Row2
-              articles={sortedArticles().slice(4, 6)}
-              isEqual={true}
-              noauthor={true}
-            />
+            <Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noauthor={true} />
             <Row1 article={sortedArticles()[6]} noauthor={true} nodate={true} />
-            <Row2
-              articles={sortedArticles().slice(7, 9)}
-              isEqual={true}
-              noauthor={true}
-            />
+            <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noauthor={true} />
 
             <For each={pages()}>
               {(page) => (
                 <>
                   <Row1 article={page[0]} noauthor={true} nodate={true} />
-                  <Row2
-                    articles={page.slice(1, 3)}
-                    isEqual={true}
-                    noauthor={true}
-                  />
+                  <Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
                   <Row1 article={page[3]} noauthor={true} nodate={true} />
-                  <Row2
-                    articles={page.slice(4, 6)}
-                    isEqual={true}
-                    noauthor={true}
-                  />
+                  <Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
                   <Row1 article={page[6]} noauthor={true} nodate={true} />
-                  <Row2
-                    articles={page.slice(7, 9)}
-                    isEqual={true}
-                    noauthor={true}
-                  />
+                  <Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
                 </>
               )}
             </For>
@@ -411,12 +331,12 @@ export const AuthorView = (props: Props) => {
           <Show when={isLoadMoreButtonVisible()}>
             <p class="load-more-container">
               <button class="button" onClick={loadMore}>
-                {t("Load more")}
+                {t('Load more')}
               </button>
             </p>
           </Show>
         </Match>
       </Switch>
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index d4db7857..51f27325 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -1,60 +1,59 @@
-import { clsx } from "clsx";
-import { For, Show, createEffect, createSignal, onMount } from "solid-js";
+import { clsx } from 'clsx'
+import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
 
-import { useFollowing } from "../../../context/following";
-import { useLocalize } from "../../../context/localize";
-import { useSession } from "../../../context/session";
-import { apiClient } from "../../../graphql/client/core";
-import { Author, Topic } from "../../../graphql/schema/core.gen";
-import { SubscriptionFilter } from "../../../pages/types";
-import { dummyFilter } from "../../../utils/dummyFilter";
+import { useFollowing } from '../../../context/following'
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { apiClient } from '../../../graphql/client/core'
+import { Author, Topic } from '../../../graphql/schema/core.gen'
+import { SubscriptionFilter } from '../../../pages/types'
+import { dummyFilter } from '../../../utils/dummyFilter'
 // TODO: refactor styles
-import { isAuthor } from "../../../utils/isAuthor";
-import { AuthorBadge } from "../../Author/AuthorBadge";
-import { ProfileSettingsNavigation } from "../../Nav/ProfileSettingsNavigation";
-import { TopicBadge } from "../../Topic/TopicBadge";
-import { Loading } from "../../_shared/Loading";
-import { SearchField } from "../../_shared/SearchField";
+import { isAuthor } from '../../../utils/isAuthor'
+import { AuthorBadge } from '../../Author/AuthorBadge'
+import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
+import { TopicBadge } from '../../Topic/TopicBadge'
+import { Loading } from '../../_shared/Loading'
+import { SearchField } from '../../_shared/SearchField'
 
-import styles from "../../../pages/profile/Settings.module.scss";
-import stylesSettings from "../../../styles/FeedSettings.module.scss";
+import styles from '../../../pages/profile/Settings.module.scss'
+import stylesSettings from '../../../styles/FeedSettings.module.scss'
 
 export const ProfileSubscriptions = () => {
-  const { t, lang } = useLocalize();
-  const { author, session } = useSession();
-  const { subscriptions } = useFollowing();
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]);
-  const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([]);
-  const [subscriptionFilter, setSubscriptionFilter] =
-    createSignal<SubscriptionFilter>("all");
-  const [searchQuery, setSearchQuery] = createSignal("");
+  const { t, lang } = useLocalize()
+  const { author, session } = useSession()
+  const { subscriptions } = useFollowing()
+  const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
+  const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([])
+  const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
+  const [searchQuery, setSearchQuery] = createSignal('')
 
   createEffect(() => {
-    const { authors, topics } = subscriptions;
+    const { authors, topics } = subscriptions
     if (authors || topics) {
-      const fdata = [...(authors || []), ...(topics || [])];
-      setFollowing(fdata);
-      if (subscriptionFilter() === "authors") {
-        setFiltered(fdata.filter((s) => "name" in s));
-      } else if (subscriptionFilter() === "topics") {
-        setFiltered(fdata.filter((s) => "title" in s));
+      const fdata = [...(authors || []), ...(topics || [])]
+      setFollowing(fdata)
+      if (subscriptionFilter() === 'authors') {
+        setFiltered(fdata.filter((s) => 'name' in s))
+      } else if (subscriptionFilter() === 'topics') {
+        setFiltered(fdata.filter((s) => 'title' in s))
       } else {
-        setFiltered(fdata);
+        setFiltered(fdata)
       }
     }
-  });
+  })
 
   createEffect(() => {
     if (searchQuery()) {
-      setFiltered(dummyFilter(following(), searchQuery(), lang()));
+      setFiltered(dummyFilter(following(), searchQuery(), lang()))
     }
-  });
+  })
 
   return (
     <div class="wide-container">
       <div class="row">
         <div class="col-md-5">
-          <div class={clsx("left-navigation", styles.leftNavigation)}>
+          <div class={clsx('left-navigation', styles.leftNavigation)}>
             <ProfileSettingsNavigation />
           </div>
         </div>
@@ -62,54 +61,40 @@ export const ProfileSubscriptions = () => {
         <div class="col-md-19">
           <div class="row">
             <div class="col-md-20 col-lg-18 col-xl-16">
-              <h1>{t("My subscriptions")}</h1>
-              <p class="description">
-                {t("Here you can manage all your Discours subscriptions")}
-              </p>
+              <h1>{t('My subscriptions')}</h1>
+              <p class="description">{t('Here you can manage all your Discours subscriptions')}</p>
               <Show when={following()} fallback={<Loading />}>
                 <ul class="view-switcher">
                   <li
                     class={clsx({
-                      "view-switcher__item--selected":
-                        subscriptionFilter() === "all",
+                      'view-switcher__item--selected': subscriptionFilter() === 'all',
                     })}
                   >
-                    <button
-                      type="button"
-                      onClick={() => setSubscriptionFilter("all")}
-                    >
-                      {t("All")}
+                    <button type="button" onClick={() => setSubscriptionFilter('all')}>
+                      {t('All')}
                     </button>
                   </li>
                   <li
                     class={clsx({
-                      "view-switcher__item--selected":
-                        subscriptionFilter() === "authors",
+                      'view-switcher__item--selected': subscriptionFilter() === 'authors',
                     })}
                   >
-                    <button
-                      type="button"
-                      onClick={() => setSubscriptionFilter("authors")}
-                    >
-                      {t("Authors")}
+                    <button type="button" onClick={() => setSubscriptionFilter('authors')}>
+                      {t('Authors')}
                     </button>
                   </li>
                   <li
                     class={clsx({
-                      "view-switcher__item--selected":
-                        subscriptionFilter() === "topics",
+                      'view-switcher__item--selected': subscriptionFilter() === 'topics',
                     })}
                   >
-                    <button
-                      type="button"
-                      onClick={() => setSubscriptionFilter("topics")}
-                    >
-                      {t("Topics")}
+                    <button type="button" onClick={() => setSubscriptionFilter('topics')}>
+                      {t('Topics')}
                     </button>
                   </li>
                 </ul>
 
-                <div class={clsx("pretty-form__item", styles.searchContainer)}>
+                <div class={clsx('pretty-form__item', styles.searchContainer)}>
                   <SearchField
                     onChange={(value) => setSearchQuery(value)}
                     class={styles.searchField}
@@ -117,22 +102,14 @@ export const ProfileSubscriptions = () => {
                   />
                 </div>
 
-                <div
-                  class={clsx(stylesSettings.settingsList, styles.topicsList)}
-                >
+                <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
                   <For each={filtered()}>
                     {(followingItem) => (
                       <div>
                         {isAuthor(followingItem) ? (
-                          <AuthorBadge
-                            minimizeSubscribeButton={true}
-                            author={followingItem}
-                          />
+                          <AuthorBadge minimizeSubscribeButton={true} author={followingItem} />
                         ) : (
-                          <TopicBadge
-                            minimizeSubscribeButton={true}
-                            topic={followingItem}
-                          />
+                          <TopicBadge minimizeSubscribeButton={true} topic={followingItem} />
                         )}
                       </div>
                     )}
@@ -144,5 +121,5 @@ export const ProfileSubscriptions = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}

From 499341baeaf17f857a1aae082a9f7675a9a0bbb9 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 8 Apr 2024 18:28:08 +0300
Subject: [PATCH 13/35] fix syule types

---
 src/components/Nav/Header/Header.module.scss | 2 +-
 src/components/Nav/HeaderAuth.tsx            | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 660a2245..010a8164 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -8,7 +8,7 @@
   z-index: 10003;
 
   .wide-container {
-    background: #fff;
+    background: var(--background-color);
 
     @include media-breakpoint-down(lg) {
       padding: 0 divide($container-padding-x, 2);
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 2b6b1ea3..8ddff9df 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -14,12 +14,9 @@ import { Icon } from '../_shared/Icon'
 import { Popover } from '../_shared/Popover'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 
-import { ProfilePopup } from './ProfilePopup'
-
-import { useSnackbar } from '../../context/snackbar'
 import { Popup } from '../_shared/Popup'
-import { VotersList } from '../_shared/VotersList'
 import styles from './Header/Header.module.scss'
+import { ProfilePopup } from './ProfilePopup'
 
 type Props = {
   setIsProfilePopupVisible: (value: boolean) => void

From 78cde31943c801e2971e2a3b0bc65f93aa5be8ec Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 15 Apr 2024 07:43:48 +0300
Subject: [PATCH 14/35] Swiper (init with promise)

---
 src/components/_shared/SolidSwiper/ImageSwiper.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index 1de1fe65..d018632c 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -49,12 +49,17 @@ export const ImageSwiper = (props: Props) => {
   )
 
   onMount(async () => {
+    console.log("!!! onMount:");
     const { register } = await import('swiper/element/bundle')
     register()
     SwiperCore.use([Pagination, Navigation, Manipulation])
-    mainSwipeRef.current?.swiper?.on('slideChange', handleSlideChange)
+    while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) {
+      await new Promise(resolve => setTimeout(resolve, 10));  // wait 10 ms
+    }
+    mainSwipeRef.current.swiper.on('slideChange', handleSlideChange);
   })
 
+
   onMount(() => {
     const updateDirection = () => {
       const width = window.innerWidth

From e3a2aaf73a6f6ff9a3f474193da619de430e26b2 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 15 Apr 2024 15:39:34 +0300
Subject: [PATCH 15/35] Load user profile

---
 src/components/Views/Author/Author.tsx        | 237 +++++++++---------
 .../_shared/SolidSwiper/ImageSwiper.tsx       |   1 -
 src/stores/zine/authors.ts                    |   2 +-
 3 files changed, 120 insertions(+), 120 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 0c6a958a..651ee47d 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,168 +1,169 @@
-import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
+import type { Author, Reaction, Shout, Topic } from "../../../graphql/schema/core.gen";
 
-import { getPagePath } from '@nanostores/router'
-import { Meta, Title } from '@solidjs/meta'
-import { clsx } from 'clsx'
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
+import { getPagePath } from "@nanostores/router";
+import { Meta, Title } from "@solidjs/meta";
+import { clsx } from "clsx";
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from "solid-js";
 
-import { useFollowing } from '../../../context/following'
-import { useLocalize } from '../../../context/localize'
-import { useSession } from '../../../context/session'
-import { apiClient } from '../../../graphql/client/core'
-import { router, useRouter } from '../../../stores/router'
-import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
-import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
-import { getImageUrl } from '../../../utils/getImageUrl'
-import { getDescription } from '../../../utils/meta'
-import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
-import { splitToPages } from '../../../utils/splitToPages'
-import { Comment } from '../../Article/Comment'
-import { AuthorCard } from '../../Author/AuthorCard'
-import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
-import { Row1 } from '../../Feed/Row1'
-import { Row2 } from '../../Feed/Row2'
-import { Row3 } from '../../Feed/Row3'
-import { Loading } from '../../_shared/Loading'
+import { useFollowing } from "../../../context/following";
+import { useLocalize } from "../../../context/localize";
+import { useSession } from "../../../context/session";
+import { apiClient } from "../../../graphql/client/core";
+import { router, useRouter } from "../../../stores/router";
+import { loadShouts, useArticlesStore } from "../../../stores/zine/articles";
+import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors";
+import { getImageUrl } from "../../../utils/getImageUrl";
+import { getDescription } from "../../../utils/meta";
+import { restoreScrollPosition, saveScrollPosition } from "../../../utils/scroll";
+import { splitToPages } from "../../../utils/splitToPages";
+import { Comment } from "../../Article/Comment";
+import { AuthorCard } from "../../Author/AuthorCard";
+import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating";
+import { Row1 } from "../../Feed/Row1";
+import { Row2 } from "../../Feed/Row2";
+import { Row3 } from "../../Feed/Row3";
+import { Loading } from "../../_shared/Loading";
 
-import { MODALS, hideModal } from '../../../stores/ui'
-import { byCreated } from '../../../utils/sortby'
-import stylesArticle from '../../Article/Article.module.scss'
-import styles from './Author.module.scss'
+import { MODALS, hideModal } from "../../../stores/ui";
+import { byCreated } from "../../../utils/sortby";
+import stylesArticle from "../../Article/Article.module.scss";
+import styles from "./Author.module.scss";
 
 type Props = {
-  authorSlug: string
-  shouts?: Shout[]
-  author?: Author
-}
-export const PRERENDERED_ARTICLES_COUNT = 12
-const LOAD_MORE_PAGE_SIZE = 9
+  authorSlug: string;
+  shouts?: Shout[];
+  author?: Author;
+};
+export const PRERENDERED_ARTICLES_COUNT = 12;
+const LOAD_MORE_PAGE_SIZE = 9;
 
 export const AuthorView = (props: Props) => {
-  const { t } = useLocalize()
-  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
-  const { session } = useSession()
-  const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
-  const { page: getPage, searchParams } = useRouter()
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-  const [isBioExpanded, setIsBioExpanded] = createSignal(false)
-  const [author, setAuthor] = createSignal<Author>()
-  const [followers, setFollowers] = createSignal([])
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) // flat AuthorFollowsResult
-  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
-  const [commented, setCommented] = createSignal<Reaction[]>()
-  const modal = MODALS[searchParams().m]
+  const { t } = useLocalize();
+  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing();
+  const { session } = useSession();
+  const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
+  const { authorEntities } = useAuthorsStore({ authors: [props.author] });
+  const { page: getPage, searchParams } = useRouter();
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false);
+  const [isBioExpanded, setIsBioExpanded] = createSignal(false);
+  const [author, setAuthor] = createSignal<Author>();
+  const [followers, setFollowers] = createSignal([]);
+  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult
+  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false);
+  const [commented, setCommented] = createSignal<Reaction[]>();
+  const modal = MODALS[searchParams().m];
 
   // current author
-  createEffect(() => {
-    if (props.authorSlug) {
-      if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
-        console.info('my own profile')
-        const { profile, authors, topics } = session().user.app_data
-        setFollowers(myFollowers)
-        setAuthor(profile)
-        setFollowing([...authors, ...topics])
-      }
+  createEffect(async () => {
+    await loadAuthor({ slug: props.authorSlug });
+  })
+  createEffect( () => {
+    if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
+      console.info("my own profile");
+      const { profile, authors, topics } = session().user.app_data;
+      setFollowers(myFollowers);
+      setAuthor(profile);
+      setFollowing([...authors, ...topics]);
     } else {
       try {
-        const a = authorEntities()[props.authorSlug]
-        setAuthor(a)
+        const a = authorEntities()[props.authorSlug];
+        setAuthor(a);
         // TODO: add following data retrieval
-        console.debug('[Author] expecting following data fetched')
+        console.debug("[Author] expecting following data fetched");
       } catch (error) {
-        console.debug(error)
+        console.debug(error);
       }
     }
-  })
+  });
 
   createEffect(async () => {
     if (author()?.id && !author().stat) {
-      const a = await loadAuthor({ slug: '', author_id: author().id })
-      console.debug('[AuthorView] loaded author:', a)
+      const a = await loadAuthor({ slug: "", author_id: author().id });
+      console.debug("[AuthorView] loaded author:", a);
     }
-  })
+  });
 
-  const bioContainerRef: { current: HTMLDivElement } = { current: null }
-  const bioWrapperRef: { current: HTMLDivElement } = { current: null }
+  const bioContainerRef: { current: HTMLDivElement } = { current: null };
+  const bioWrapperRef: { current: HTMLDivElement } = { current: null };
 
   const fetchData = async (slug) => {
     try {
       const [subscriptionsResult, followersResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
-      ])
+      ]);
 
-      const { authors, topics } = subscriptionsResult
-      setFollowing([...(authors || []), ...(topics || [])])
-      setFollowers(followersResult || [])
+      const { authors, topics } = subscriptionsResult;
+      setFollowing([...(authors || []), ...(topics || [])]);
+      setFollowers(followersResult || []);
 
-      console.info('[components.Author] following data loaded')
+      console.info("[components.Author] following data loaded");
     } catch (error) {
-      console.error('[components.Author] fetch error', error)
+      console.error("[components.Author] fetch error", error);
     }
-  }
+  };
 
   const checkBioHeight = () => {
     if (bioContainerRef.current) {
-      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight)
+      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight);
     }
-  }
+  };
 
   onMount(() => {
-    fetchData(props.authorSlug)
+    fetchData(props.authorSlug);
 
     if (!modal) {
-      hideModal()
+      hideModal();
     }
-  })
+  });
 
   const loadMore = async () => {
-    saveScrollPosition()
+    saveScrollPosition();
     const { hasMore } = await loadShouts({
       filters: { author: props.authorSlug },
       limit: LOAD_MORE_PAGE_SIZE,
       offset: sortedArticles().length,
-    })
-    setIsLoadMoreButtonVisible(hasMore)
-    restoreScrollPosition()
-  }
+    });
+    setIsLoadMoreButtonVisible(hasMore);
+    restoreScrollPosition();
+  };
 
   onMount(() => {
-    checkBioHeight()
+    checkBioHeight();
 
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      loadMore()
-      loadSubscriptions()
+      loadMore();
+      loadSubscriptions();
     }
-  })
+  });
 
   const pages = createMemo<Shout[][]>(() =>
     splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
-  )
+  );
 
   const fetchComments = async (commenter: Author) => {
     const data = await apiClient.getReactionsBy({
       by: { comment: false, created_by: commenter.id },
-    })
-    setCommented(data)
-  }
+    });
+    setCommented(data);
+  };
 
   createEffect(() => {
     if (author()) {
-      fetchComments(author())
+      fetchComments(author());
     }
-  })
+  });
 
   const ogImage = createMemo(() =>
     author()?.pic
       ? getImageUrl(author()?.pic, { width: 1200 })
-      : getImageUrl('production/image/logo_image.png'),
-  )
-  const description = createMemo(() => getDescription(author()?.bio))
+      : getImageUrl("production/image/logo_image.png"),
+  );
+  const description = createMemo(() => getDescription(author()?.bio));
   const handleDeleteComment = (id: number) => {
-    setCommented((prev) => prev.filter((comment) => comment.id !== id))
-  }
+    setCommented((prev) => prev.filter((comment) => comment.id !== id));
+  };
 
   return (
     <div class={styles.authorPage}>
@@ -184,20 +185,20 @@ export const AuthorView = (props: Props) => {
             <div class={styles.authorHeader}>
               <AuthorCard author={author()} followers={followers() || []} following={following() || []} />
             </div>
-            <div class={clsx(styles.groupControls, 'row')}>
+            <div class={clsx(styles.groupControls, "row")}>
               <div class="col-md-16">
                 <ul class="view-switcher">
                   <li
                     classList={{
-                      'view-switcher__item--selected': getPage().route === 'author',
+                      "view-switcher__item--selected": getPage().route === "author",
                     }}
                   >
                     <a
-                      href={getPagePath(router, 'author', {
+                      href={getPagePath(router, "author", {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t('Publications')}
+                      {t("Publications")}
                     </a>
                     <Show when={author().stat}>
                       <span class="view-switcher__counter">{author().stat.shouts}</span>
@@ -205,15 +206,15 @@ export const AuthorView = (props: Props) => {
                   </li>
                   <li
                     classList={{
-                      'view-switcher__item--selected': getPage().route === 'authorComments',
+                      "view-switcher__item--selected": getPage().route === "authorComments",
                     }}
                   >
                     <a
-                      href={getPagePath(router, 'authorComments', {
+                      href={getPagePath(router, "authorComments", {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t('Comments')}
+                      {t("Comments")}
                     </a>
                     <Show when={author().stat}>
                       <span class="view-switcher__counter">{author().stat.comments}</span>
@@ -221,24 +222,24 @@ export const AuthorView = (props: Props) => {
                   </li>
                   <li
                     classList={{
-                      'view-switcher__item--selected': getPage().route === 'authorAbout',
+                      "view-switcher__item--selected": getPage().route === "authorAbout",
                     }}
                   >
                     <a
                       onClick={() => checkBioHeight()}
-                      href={getPagePath(router, 'authorAbout', {
+                      href={getPagePath(router, "authorAbout", {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t('Profile')}
+                      {t("Profile")}
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class={clsx('col-md-8', styles.additionalControls)}>
+              <div class={clsx("col-md-8", styles.additionalControls)}>
                 <Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
                   <div class={styles.ratingContainer}>
-                    {t('All posts rating')}
+                    {t("All posts rating")}
                     <AuthorShoutsRating author={author()} class={styles.ratingControl} />
                   </div>
                 </Show>
@@ -249,7 +250,7 @@ export const AuthorView = (props: Props) => {
       </div>
 
       <Switch>
-        <Match when={getPage().route === 'authorAbout'}>
+        <Match when={getPage().route === "authorAbout"}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -263,17 +264,17 @@ export const AuthorView = (props: Props) => {
 
                 <Show when={showExpandBioControl()}>
                   <button
-                    class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
+                    class={clsx("button button--subscribe-topic", styles.longBioExpandedControl)}
                     onClick={() => setIsBioExpanded(!isBioExpanded())}
                   >
-                    {t('Show more')}
+                    {t("Show more")}
                   </button>
                 </Show>
               </div>
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === 'authorComments'}>
+        <Match when={getPage().route === "authorComments"}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -293,7 +294,7 @@ export const AuthorView = (props: Props) => {
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === 'author'}>
+        <Match when={getPage().route === "author"}>
           <Show when={sortedArticles().length === 1}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
           </Show>
@@ -331,12 +332,12 @@ export const AuthorView = (props: Props) => {
           <Show when={isLoadMoreButtonVisible()}>
             <p class="load-more-container">
               <button class="button" onClick={loadMore}>
-                {t('Load more')}
+                {t("Load more")}
               </button>
             </p>
           </Show>
         </Match>
       </Switch>
     </div>
-  )
-}
+  );
+};
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index d018632c..9653b449 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -49,7 +49,6 @@ export const ImageSwiper = (props: Props) => {
   )
 
   onMount(async () => {
-    console.log("!!! onMount:");
     const { register } = await import('swiper/element/bundle')
     register()
     SwiperCore.use([Pagination, Navigation, Manipulation])
diff --git a/src/stores/zine/authors.ts b/src/stores/zine/authors.ts
index 131b70c6..33861246 100644
--- a/src/stores/zine/authors.ts
+++ b/src/stores/zine/authors.ts
@@ -1,5 +1,5 @@
 import { createLazyMemo } from '@solid-primitives/memo'
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from "solid-js";
 
 import { apiClient } from '../../graphql/client/core'
 import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'

From 6e48e644972fab5b2ae762178f40f8c59975fbd3 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 15 Apr 2024 21:01:00 +0300
Subject: [PATCH 16/35] -npm-run-format

---
 .github/workflows/node-ci.yml                 |   2 +-
 src/components/Views/Author/Author.tsx        | 232 +++++++++---------
 .../_shared/SolidSwiper/ImageSwiper.tsx       |   5 +-
 src/stores/zine/authors.ts                    |   2 +-
 4 files changed, 120 insertions(+), 121 deletions(-)

diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
index 2d2d4bc8..1220b122 100644
--- a/.github/workflows/node-ci.yml
+++ b/.github/workflows/node-ci.yml
@@ -16,7 +16,7 @@ jobs:
         run: npm run typecheck
 
       - name: Lint with Biome
-        run: npx biome ci .
+        run: npm run check:code
 
       - name: Lint styles
         run: npm run lint:styles
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 651ee47d..870d4e5c 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,169 +1,169 @@
-import type { Author, Reaction, Shout, Topic } from "../../../graphql/schema/core.gen";
+import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
 
-import { getPagePath } from "@nanostores/router";
-import { Meta, Title } from "@solidjs/meta";
-import { clsx } from "clsx";
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from "solid-js";
+import { getPagePath } from '@nanostores/router'
+import { Meta, Title } from '@solidjs/meta'
+import { clsx } from 'clsx'
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
 
-import { useFollowing } from "../../../context/following";
-import { useLocalize } from "../../../context/localize";
-import { useSession } from "../../../context/session";
-import { apiClient } from "../../../graphql/client/core";
-import { router, useRouter } from "../../../stores/router";
-import { loadShouts, useArticlesStore } from "../../../stores/zine/articles";
-import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors";
-import { getImageUrl } from "../../../utils/getImageUrl";
-import { getDescription } from "../../../utils/meta";
-import { restoreScrollPosition, saveScrollPosition } from "../../../utils/scroll";
-import { splitToPages } from "../../../utils/splitToPages";
-import { Comment } from "../../Article/Comment";
-import { AuthorCard } from "../../Author/AuthorCard";
-import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating";
-import { Row1 } from "../../Feed/Row1";
-import { Row2 } from "../../Feed/Row2";
-import { Row3 } from "../../Feed/Row3";
-import { Loading } from "../../_shared/Loading";
+import { useFollowing } from '../../../context/following'
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { apiClient } from '../../../graphql/client/core'
+import { router, useRouter } from '../../../stores/router'
+import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
+import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
+import { getImageUrl } from '../../../utils/getImageUrl'
+import { getDescription } from '../../../utils/meta'
+import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
+import { splitToPages } from '../../../utils/splitToPages'
+import { Comment } from '../../Article/Comment'
+import { AuthorCard } from '../../Author/AuthorCard'
+import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
+import { Row1 } from '../../Feed/Row1'
+import { Row2 } from '../../Feed/Row2'
+import { Row3 } from '../../Feed/Row3'
+import { Loading } from '../../_shared/Loading'
 
-import { MODALS, hideModal } from "../../../stores/ui";
-import { byCreated } from "../../../utils/sortby";
-import stylesArticle from "../../Article/Article.module.scss";
-import styles from "./Author.module.scss";
+import { MODALS, hideModal } from '../../../stores/ui'
+import { byCreated } from '../../../utils/sortby'
+import stylesArticle from '../../Article/Article.module.scss'
+import styles from './Author.module.scss'
 
 type Props = {
-  authorSlug: string;
-  shouts?: Shout[];
-  author?: Author;
-};
-export const PRERENDERED_ARTICLES_COUNT = 12;
-const LOAD_MORE_PAGE_SIZE = 9;
+  authorSlug: string
+  shouts?: Shout[]
+  author?: Author
+}
+export const PRERENDERED_ARTICLES_COUNT = 12
+const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
-  const { t } = useLocalize();
-  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing();
-  const { session } = useSession();
-  const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] });
-  const { page: getPage, searchParams } = useRouter();
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false);
-  const [isBioExpanded, setIsBioExpanded] = createSignal(false);
-  const [author, setAuthor] = createSignal<Author>();
-  const [followers, setFollowers] = createSignal([]);
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult
-  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false);
-  const [commented, setCommented] = createSignal<Reaction[]>();
-  const modal = MODALS[searchParams().m];
+  const { t } = useLocalize()
+  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
+  const { session } = useSession()
+  const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
+  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
+  const { page: getPage, searchParams } = useRouter()
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+  const [isBioExpanded, setIsBioExpanded] = createSignal(false)
+  const [author, setAuthor] = createSignal<Author>()
+  const [followers, setFollowers] = createSignal([])
+  const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) // flat AuthorFollowsResult
+  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
+  const [commented, setCommented] = createSignal<Reaction[]>()
+  const modal = MODALS[searchParams().m]
 
   // current author
   createEffect(async () => {
-    await loadAuthor({ slug: props.authorSlug });
+    await loadAuthor({ slug: props.authorSlug })
   })
-  createEffect( () => {
+  createEffect(() => {
     if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
-      console.info("my own profile");
-      const { profile, authors, topics } = session().user.app_data;
-      setFollowers(myFollowers);
-      setAuthor(profile);
-      setFollowing([...authors, ...topics]);
+      console.info('my own profile')
+      const { profile, authors, topics } = session().user.app_data
+      setFollowers(myFollowers)
+      setAuthor(profile)
+      setFollowing([...authors, ...topics])
     } else {
       try {
-        const a = authorEntities()[props.authorSlug];
-        setAuthor(a);
+        const a = authorEntities()[props.authorSlug]
+        setAuthor(a)
         // TODO: add following data retrieval
-        console.debug("[Author] expecting following data fetched");
+        console.debug('[Author] expecting following data fetched')
       } catch (error) {
-        console.debug(error);
+        console.debug(error)
       }
     }
-  });
+  })
 
   createEffect(async () => {
     if (author()?.id && !author().stat) {
-      const a = await loadAuthor({ slug: "", author_id: author().id });
-      console.debug("[AuthorView] loaded author:", a);
+      const a = await loadAuthor({ slug: '', author_id: author().id })
+      console.debug('[AuthorView] loaded author:', a)
     }
-  });
+  })
 
-  const bioContainerRef: { current: HTMLDivElement } = { current: null };
-  const bioWrapperRef: { current: HTMLDivElement } = { current: null };
+  const bioContainerRef: { current: HTMLDivElement } = { current: null }
+  const bioWrapperRef: { current: HTMLDivElement } = { current: null }
 
   const fetchData = async (slug) => {
     try {
       const [subscriptionsResult, followersResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
-      ]);
+      ])
 
-      const { authors, topics } = subscriptionsResult;
-      setFollowing([...(authors || []), ...(topics || [])]);
-      setFollowers(followersResult || []);
+      const { authors, topics } = subscriptionsResult
+      setFollowing([...(authors || []), ...(topics || [])])
+      setFollowers(followersResult || [])
 
-      console.info("[components.Author] following data loaded");
+      console.info('[components.Author] following data loaded')
     } catch (error) {
-      console.error("[components.Author] fetch error", error);
+      console.error('[components.Author] fetch error', error)
     }
-  };
+  }
 
   const checkBioHeight = () => {
     if (bioContainerRef.current) {
-      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight);
+      setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight)
     }
-  };
+  }
 
   onMount(() => {
-    fetchData(props.authorSlug);
+    fetchData(props.authorSlug)
 
     if (!modal) {
-      hideModal();
+      hideModal()
     }
-  });
+  })
 
   const loadMore = async () => {
-    saveScrollPosition();
+    saveScrollPosition()
     const { hasMore } = await loadShouts({
       filters: { author: props.authorSlug },
       limit: LOAD_MORE_PAGE_SIZE,
       offset: sortedArticles().length,
-    });
-    setIsLoadMoreButtonVisible(hasMore);
-    restoreScrollPosition();
-  };
+    })
+    setIsLoadMoreButtonVisible(hasMore)
+    restoreScrollPosition()
+  }
 
   onMount(() => {
-    checkBioHeight();
+    checkBioHeight()
 
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      loadMore();
-      loadSubscriptions();
+      loadMore()
+      loadSubscriptions()
     }
-  });
+  })
 
   const pages = createMemo<Shout[][]>(() =>
     splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
-  );
+  )
 
   const fetchComments = async (commenter: Author) => {
     const data = await apiClient.getReactionsBy({
       by: { comment: false, created_by: commenter.id },
-    });
-    setCommented(data);
-  };
+    })
+    setCommented(data)
+  }
 
   createEffect(() => {
     if (author()) {
-      fetchComments(author());
+      fetchComments(author())
     }
-  });
+  })
 
   const ogImage = createMemo(() =>
     author()?.pic
       ? getImageUrl(author()?.pic, { width: 1200 })
-      : getImageUrl("production/image/logo_image.png"),
-  );
-  const description = createMemo(() => getDescription(author()?.bio));
+      : getImageUrl('production/image/logo_image.png'),
+  )
+  const description = createMemo(() => getDescription(author()?.bio))
   const handleDeleteComment = (id: number) => {
-    setCommented((prev) => prev.filter((comment) => comment.id !== id));
-  };
+    setCommented((prev) => prev.filter((comment) => comment.id !== id))
+  }
 
   return (
     <div class={styles.authorPage}>
@@ -185,20 +185,20 @@ export const AuthorView = (props: Props) => {
             <div class={styles.authorHeader}>
               <AuthorCard author={author()} followers={followers() || []} following={following() || []} />
             </div>
-            <div class={clsx(styles.groupControls, "row")}>
+            <div class={clsx(styles.groupControls, 'row')}>
               <div class="col-md-16">
                 <ul class="view-switcher">
                   <li
                     classList={{
-                      "view-switcher__item--selected": getPage().route === "author",
+                      'view-switcher__item--selected': getPage().route === 'author',
                     }}
                   >
                     <a
-                      href={getPagePath(router, "author", {
+                      href={getPagePath(router, 'author', {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t("Publications")}
+                      {t('Publications')}
                     </a>
                     <Show when={author().stat}>
                       <span class="view-switcher__counter">{author().stat.shouts}</span>
@@ -206,15 +206,15 @@ export const AuthorView = (props: Props) => {
                   </li>
                   <li
                     classList={{
-                      "view-switcher__item--selected": getPage().route === "authorComments",
+                      'view-switcher__item--selected': getPage().route === 'authorComments',
                     }}
                   >
                     <a
-                      href={getPagePath(router, "authorComments", {
+                      href={getPagePath(router, 'authorComments', {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t("Comments")}
+                      {t('Comments')}
                     </a>
                     <Show when={author().stat}>
                       <span class="view-switcher__counter">{author().stat.comments}</span>
@@ -222,24 +222,24 @@ export const AuthorView = (props: Props) => {
                   </li>
                   <li
                     classList={{
-                      "view-switcher__item--selected": getPage().route === "authorAbout",
+                      'view-switcher__item--selected': getPage().route === 'authorAbout',
                     }}
                   >
                     <a
                       onClick={() => checkBioHeight()}
-                      href={getPagePath(router, "authorAbout", {
+                      href={getPagePath(router, 'authorAbout', {
                         slug: props.authorSlug,
                       })}
                     >
-                      {t("Profile")}
+                      {t('Profile')}
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class={clsx("col-md-8", styles.additionalControls)}>
+              <div class={clsx('col-md-8', styles.additionalControls)}>
                 <Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
                   <div class={styles.ratingContainer}>
-                    {t("All posts rating")}
+                    {t('All posts rating')}
                     <AuthorShoutsRating author={author()} class={styles.ratingControl} />
                   </div>
                 </Show>
@@ -250,7 +250,7 @@ export const AuthorView = (props: Props) => {
       </div>
 
       <Switch>
-        <Match when={getPage().route === "authorAbout"}>
+        <Match when={getPage().route === 'authorAbout'}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -264,17 +264,17 @@ export const AuthorView = (props: Props) => {
 
                 <Show when={showExpandBioControl()}>
                   <button
-                    class={clsx("button button--subscribe-topic", styles.longBioExpandedControl)}
+                    class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
                     onClick={() => setIsBioExpanded(!isBioExpanded())}
                   >
-                    {t("Show more")}
+                    {t('Show more')}
                   </button>
                 </Show>
               </div>
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === "authorComments"}>
+        <Match when={getPage().route === 'authorComments'}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 col-lg-18">
@@ -294,7 +294,7 @@ export const AuthorView = (props: Props) => {
             </div>
           </div>
         </Match>
-        <Match when={getPage().route === "author"}>
+        <Match when={getPage().route === 'author'}>
           <Show when={sortedArticles().length === 1}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
           </Show>
@@ -332,12 +332,12 @@ export const AuthorView = (props: Props) => {
           <Show when={isLoadMoreButtonVisible()}>
             <p class="load-more-container">
               <button class="button" onClick={loadMore}>
-                {t("Load more")}
+                {t('Load more')}
               </button>
             </p>
           </Show>
         </Match>
       </Switch>
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index 9653b449..888a23c3 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -53,12 +53,11 @@ export const ImageSwiper = (props: Props) => {
     register()
     SwiperCore.use([Pagination, Navigation, Manipulation])
     while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) {
-      await new Promise(resolve => setTimeout(resolve, 10));  // wait 10 ms
+      await new Promise((resolve) => setTimeout(resolve, 10)) // wait 10 ms
     }
-    mainSwipeRef.current.swiper.on('slideChange', handleSlideChange);
+    mainSwipeRef.current.swiper.on('slideChange', handleSlideChange)
   })
 
-
   onMount(() => {
     const updateDirection = () => {
       const width = window.innerWidth
diff --git a/src/stores/zine/authors.ts b/src/stores/zine/authors.ts
index 33861246..2253b84e 100644
--- a/src/stores/zine/authors.ts
+++ b/src/stores/zine/authors.ts
@@ -1,5 +1,5 @@
 import { createLazyMemo } from '@solid-primitives/memo'
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createSignal } from 'solid-js'
 
 import { apiClient } from '../../graphql/client/core'
 import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'

From 5ddbb0dd1b8dfe1267c2cd21cfe7a46b89a75411 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 15 Apr 2024 21:02:58 +0300
Subject: [PATCH 17/35] biome-ignore

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

diff --git a/biome.json b/biome.json
index ba7464a5..ca4262bb 100644
--- a/biome.json
+++ b/biome.json
@@ -2,7 +2,7 @@
   "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
   "files": {
     "include": ["*.tsx", "*.ts", "*.js", "*.json"],
-    "ignore": ["./dist", "./node_modules", ".husky", "docs", "gen", "*.d.ts"]
+    "ignore": ["./dist", "./node_modules", ".husky", "docs", "gen", "*.gen.ts", "*.d.ts"]
   },
   "vcs": {
     "defaultBranch": "dev",

From bd4fedc6c727806c72feb1cc469bff4f18b5d2d3 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 16 Apr 2024 07:01:18 +0300
Subject: [PATCH 18/35] preloaded-author-fix

---
 src/components/Views/Author/Author.tsx | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 870d4e5c..22fdf134 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -53,32 +53,26 @@ export const AuthorView = (props: Props) => {
   const [commented, setCommented] = createSignal<Reaction[]>()
   const modal = MODALS[searchParams().m]
 
-  // current author
   createEffect(async () => {
-    await loadAuthor({ slug: props.authorSlug })
-  })
-  createEffect(() => {
     if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
-      console.info('my own profile')
+      console.info('preloaded my own profile')
       const { profile, authors, topics } = session().user.app_data
       setFollowers(myFollowers)
       setAuthor(profile)
       setFollowing([...authors, ...topics])
-    } else {
-      try {
-        const a = authorEntities()[props.authorSlug]
-        setAuthor(a)
-        // TODO: add following data retrieval
-        console.debug('[Author] expecting following data fetched')
-      } catch (error) {
-        console.debug(error)
-      }
     }
   })
 
   createEffect(async () => {
-    if (author()?.id && !author().stat) {
-      const a = await loadAuthor({ slug: '', author_id: author().id })
+    if(Object.keys(authorEntities()).includes(props.authorSlug) && !author()?.id) {
+      // use preloaded author
+      const a = authorEntities()[props.authorSlug]
+      setAuthor(a)
+      console.debug('[AuthorView] preloaded author:', a)
+    } else if(props.authorSlug || (author()?.id && !author().stat)) {
+      // load author
+      const a = await loadAuthor({ slug: props.authorSlug, author_id: author()?.id })
+      setAuthor(a)
       console.debug('[AuthorView] loaded author:', a)
     }
   })

From f7c33c167a8cd9020ba0062b8d736d6e09332f1e Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 16 Apr 2024 07:03:05 +0300
Subject: [PATCH 19/35] fmt

---
 src/components/Views/Author/Author.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 22fdf134..b59c3da1 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -64,12 +64,12 @@ export const AuthorView = (props: Props) => {
   })
 
   createEffect(async () => {
-    if(Object.keys(authorEntities()).includes(props.authorSlug) && !author()?.id) {
+    if (Object.keys(authorEntities()).includes(props.authorSlug) && !author()?.id) {
       // use preloaded author
       const a = authorEntities()[props.authorSlug]
       setAuthor(a)
       console.debug('[AuthorView] preloaded author:', a)
-    } else if(props.authorSlug || (author()?.id && !author().stat)) {
+    } else if (props.authorSlug || (author()?.id && !author().stat)) {
       // load author
       const a = await loadAuthor({ slug: props.authorSlug, author_id: author()?.id })
       setAuthor(a)

From f2012bca18b09034b0bb952b9ce821df7f2cae00 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 16 Apr 2024 07:07:36 +0300
Subject: [PATCH 20/35] load-fix

---
 src/components/Views/Author/Author.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index b59c3da1..78bcd4ac 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -69,7 +69,7 @@ export const AuthorView = (props: Props) => {
       const a = authorEntities()[props.authorSlug]
       setAuthor(a)
       console.debug('[AuthorView] preloaded author:', a)
-    } else if (props.authorSlug || (author()?.id && !author().stat)) {
+    } else if (props.authorSlug && !author().stat) {
       // load author
       const a = await loadAuthor({ slug: props.authorSlug, author_id: author()?.id })
       setAuthor(a)

From 6fbe9603feaa4b3176e81dff4083c8611f5cc2e9 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 16 Apr 2024 07:08:20 +0300
Subject: [PATCH 21/35] conditional

---
 src/components/Views/Author/Author.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 78bcd4ac..4784197a 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -69,7 +69,7 @@ export const AuthorView = (props: Props) => {
       const a = authorEntities()[props.authorSlug]
       setAuthor(a)
       console.debug('[AuthorView] preloaded author:', a)
-    } else if (props.authorSlug && !author().stat) {
+    } else if (props.authorSlug && !author()?.stat) {
       // load author
       const a = await loadAuthor({ slug: props.authorSlug, author_id: author()?.id })
       setAuthor(a)

From 69fc0ffd0704571706411c3ddd160e67dc5fed0b Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Wed, 17 Apr 2024 16:44:53 +0300
Subject: [PATCH 22/35] less-code

---
 src/components/Views/Author/Author.tsx | 37 +++++++-------------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 4784197a..ed0645d5 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -53,8 +53,10 @@ export const AuthorView = (props: Props) => {
   const [commented, setCommented] = createSignal<Reaction[]>()
   const modal = MODALS[searchParams().m]
 
-  createEffect(async () => {
-    if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
+  const [sessionChecked, setSessionChecked] = createSignal(false)
+  createEffect(() => {
+    if (!sessionChecked() && props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
+      setSessionChecked(true)
       console.info('preloaded my own profile')
       const { profile, authors, topics } = session().user.app_data
       setFollowers(myFollowers)
@@ -63,35 +65,22 @@ export const AuthorView = (props: Props) => {
     }
   })
 
-  createEffect(async () => {
-    if (Object.keys(authorEntities()).includes(props.authorSlug) && !author()?.id) {
-      // use preloaded author
-      const a = authorEntities()[props.authorSlug]
-      setAuthor(a)
-      console.debug('[AuthorView] preloaded author:', a)
-    } else if (props.authorSlug && !author()?.stat) {
-      // load author
-      const a = await loadAuthor({ slug: props.authorSlug, author_id: author()?.id })
-      setAuthor(a)
-      console.debug('[AuthorView] loaded author:', a)
-    }
-  })
-
   const bioContainerRef: { current: HTMLDivElement } = { current: null }
   const bioWrapperRef: { current: HTMLDivElement } = { current: null }
 
   const fetchData = async (slug) => {
     try {
-      const [subscriptionsResult, followersResult] = await Promise.all([
+      const [subscriptionsResult, followersResult, authorResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
+        loadAuthor({ slug })
       ])
-
       const { authors, topics } = subscriptionsResult
+      setAuthor(authorResult)
       setFollowing([...(authors || []), ...(topics || [])])
       setFollowers(followersResult || [])
 
-      console.info('[components.Author] following data loaded')
+      console.info('[components.Author] data loaded')
     } catch (error) {
       console.error('[components.Author] fetch error', error)
     }
@@ -103,14 +92,6 @@ export const AuthorView = (props: Props) => {
     }
   }
 
-  onMount(() => {
-    fetchData(props.authorSlug)
-
-    if (!modal) {
-      hideModal()
-    }
-  })
-
   const loadMore = async () => {
     saveScrollPosition()
     const { hasMore } = await loadShouts({
@@ -123,7 +104,9 @@ export const AuthorView = (props: Props) => {
   }
 
   onMount(() => {
+    if (!modal) hideModal()
     checkBioHeight()
+    fetchData(props.authorSlug)
 
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {

From 0f28fe891a41212a619c93a41e1c4ed5f18a6a59 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Wed, 17 Apr 2024 18:47:24 +0300
Subject: [PATCH 23/35] post-oauth-fix

---
 src/components/Views/Author/Author.tsx | 21 ++++++++++++++-------
 src/context/following.tsx              | 11 +++++++----
 src/context/session.tsx                | 11 +++++++----
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index ed0645d5..0a351f0c 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -55,13 +55,20 @@ export const AuthorView = (props: Props) => {
 
   const [sessionChecked, setSessionChecked] = createSignal(false)
   createEffect(() => {
-    if (!sessionChecked() && props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
+    if (
+      !sessionChecked() &&
+      props.authorSlug &&
+      session()?.user?.app_data?.profile?.slug === props.authorSlug
+    ) {
       setSessionChecked(true)
-      console.info('preloaded my own profile')
-      const { profile, authors, topics } = session().user.app_data
-      setFollowers(myFollowers)
-      setAuthor(profile)
-      setFollowing([...authors, ...topics])
+      const appdata = session()?.user.app_data
+      if (appdata) {
+        console.info('preloaded my own profile')
+        const { authors, followers, topics } = appdata
+        setFollowers(myFollowers)
+        setAuthor(profile)
+        setFollowing([...authors, ...topics])
+      }
     }
   })
 
@@ -73,7 +80,7 @@ export const AuthorView = (props: Props) => {
       const [subscriptionsResult, followersResult, authorResult] = await Promise.all([
         apiClient.getAuthorFollows({ slug }),
         apiClient.getAuthorFollowers({ slug }),
-        loadAuthor({ slug })
+        loadAuthor({ slug }),
       ])
       const { authors, topics } = subscriptionsResult
       setAuthor(authorResult)
diff --git a/src/context/following.tsx b/src/context/following.tsx
index ad93eaaf..fc92565e 100644
--- a/src/context/following.tsx
+++ b/src/context/following.tsx
@@ -80,10 +80,13 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
   createEffect(() => {
     if (author()) {
       try {
-        const { authors, followers, topics } = session().user.app_data
-        setSubscriptions({ authors, topics })
-        setFollowers(followers)
-        if (!authors) fetchData()
+        const appdata = session()?.user.app_data
+        if (appdata) {
+          const { authors, followers, topics } = appdata
+          setSubscriptions({ authors, topics })
+          setFollowers(followers)
+          if (!authors) fetchData()
+        }
       } catch (e) {
         console.error(e)
       }
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 67bd5a93..fa068bc8 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -220,10 +220,13 @@ export const SessionProvider = (props: {
         }
 
         try {
-          const { profile } = session().user.app_data
-          setAuthor(profile)
-          addAuthors([profile])
-          if (!profile) loadAuthor()
+          const appdata = session()?.user.app_data
+          if (appdata) {
+            const { profile } = appdata
+            setAuthor(profile)
+            addAuthors([profile])
+            if (!profile) loadAuthor()
+          }
         } catch (e) {
           console.error(e)
         }

From 36970c03c4fa9845601a0edca707cba3e5fe4134 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Wed, 17 Apr 2024 19:26:26 +0300
Subject: [PATCH 24/35] profile-fix

---
 src/components/Views/Author/Author.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 0a351f0c..ad3840d9 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -64,7 +64,7 @@ export const AuthorView = (props: Props) => {
       const appdata = session()?.user.app_data
       if (appdata) {
         console.info('preloaded my own profile')
-        const { authors, followers, topics } = appdata
+        const { authors, profile, topics } = appdata
         setFollowers(myFollowers)
         setAuthor(profile)
         setFollowing([...authors, ...topics])

From 16e3e753813f8497b4ee085dbade0e84130c23dd Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:34:07 +0300
Subject: [PATCH 25/35] Add hash navigation in slider (#440)

 Sliders with search params
---
 src/components/Article/FullArticle.tsx        |  1 +
 .../_shared/SolidSwiper/ImageSwiper.tsx       | 26 +++++++++++++++----
 .../_shared/SolidSwiper/Swiper.module.scss    |  6 ++++-
 src/stores/router.ts                          |  4 +--
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index f855f170..6d9a670f 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -54,6 +54,7 @@ type IframeSize = {
 export type ArticlePageSearchParams = {
   scrollTo: 'comments'
   commentId: string
+  slide?: string
 }
 
 const scrollTo = (el: HTMLElement) => {
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index 888a23c3..674ac701 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -1,7 +1,7 @@
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
 import SwiperCore from 'swiper'
-import { Manipulation, Navigation, Pagination } from 'swiper/modules'
+import { HashNavigation, Manipulation, Navigation, Pagination } from 'swiper/modules'
 import { throttle } from 'throttle-debounce'
 
 import { MediaItem } from '../../../pages/types'
@@ -12,6 +12,8 @@ import { Lightbox } from '../Lightbox'
 
 import { SwiperRef } from './swiper'
 
+import { useRouter } from '../../../stores/router'
+import { ArticlePageSearchParams } from '../../Article/FullArticle'
 import styles from './Swiper.module.scss'
 
 type Props = {
@@ -31,10 +33,13 @@ export const ImageSwiper = (props: Props) => {
   const [slideIndex, setSlideIndex] = createSignal(0)
   const [isMobileView, setIsMobileView] = createSignal(false)
   const [selectedImage, setSelectedImage] = createSignal('')
+  const { searchParams, changeSearchParams } = useRouter<ArticlePageSearchParams>()
 
   const handleSlideChange = () => {
-    thumbSwipeRef.current.swiper.slideTo(mainSwipeRef.current.swiper.activeIndex)
-    setSlideIndex(mainSwipeRef.current.swiper.activeIndex)
+    const activeIndex = mainSwipeRef.current.swiper.activeIndex
+    thumbSwipeRef.current.swiper.slideTo(activeIndex)
+    setSlideIndex(activeIndex)
+    changeSearchParams({ slide: `${activeIndex + 1}` })
   }
 
   createEffect(
@@ -51,11 +56,19 @@ export const ImageSwiper = (props: Props) => {
   onMount(async () => {
     const { register } = await import('swiper/element/bundle')
     register()
-    SwiperCore.use([Pagination, Navigation, Manipulation])
+    SwiperCore.use([Pagination, Navigation, Manipulation, HashNavigation])
     while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) {
       await new Promise((resolve) => setTimeout(resolve, 10)) // wait 10 ms
     }
     mainSwipeRef.current.swiper.on('slideChange', handleSlideChange)
+    const initialSlide = parseInt(searchParams().slide) - 1
+    if (initialSlide && !Number.isNaN(initialSlide) && initialSlide < props.images.length) {
+      mainSwipeRef.current.swiper.slideTo(initialSlide, 0)
+    } else {
+      changeSearchParams({ slide: '1' })
+    }
+
+    mainSwipeRef.current.swiper.init()
   })
 
   onMount(() => {
@@ -106,6 +119,9 @@ export const ImageSwiper = (props: Props) => {
                 watch-slides-visibility={true}
                 direction={'horizontal'}
                 slides-per-group-auto={true}
+                hash-navigation={{
+                  watchState: true,
+                }}
               >
                 <For each={props.images}>
                   {(slide, index) => (
@@ -152,7 +168,7 @@ export const ImageSwiper = (props: Props) => {
                 {(slide, index) => (
                   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                   // @ts-ignore
-                  <swiper-slide lazy="true" virtual-index={index()}>
+                  <swiper-slide lazy="true" virtual-index={index()} data-hash={index() + 1}>
                     <div class={styles.image} onClick={handleImageClick}>
                       <Image src={slide.url} alt={slide.title} width={800} />
                     </div>
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss
index b8e5b990..f3f182e8 100644
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@@ -135,9 +135,13 @@
     .counter {
       @include font-size(1.2rem);
 
+      @include media-breakpoint-up(sm) {
+        top: 477px;
+      }
+
       position: absolute;
       z-index: 2;
-      top: 477px;
+      top: 276px;
       right: 0;
       font-weight: 600;
       padding: 0.2rem 0.8rem;
diff --git a/src/stores/router.ts b/src/stores/router.ts
index be197bd1..8be3b78c 100644
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@@ -114,8 +114,8 @@ const handleClientRouteLinkClick = async (event) => {
   }
 
   if (url.hash) {
-    scrollToHash(url.hash)
-    return
+    // scrollToHash(url.hash)
+    // return
   }
 
   window.scrollTo({

From cca858dadf8358147026b14d632d868ab5121261 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 22 Apr 2024 16:37:47 +0300
Subject: [PATCH 26/35] fix image width

---
 src/styles/app.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 7afcb070..0bb124a4 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -588,6 +588,7 @@ figure {
     display: block;
     max-height: 90vh;
     margin: auto;
+    width: 100%;
   }
 }
 

From 36fff73af6d93054f3c6f9b7efb6ac0ccaf157b5 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 22 Apr 2024 16:47:37 +0300
Subject: [PATCH 27/35] Hotfix/remove state params after login (#443)

* hide autofill in profilr settings

* fix Image width

* Remove state search params after login

* fix biome
---
 src/components/Article/Article.module.scss       |  1 +
 src/components/Nav/HeaderAuth.tsx                | 16 +++++++++-------
 .../ProfileSettings/ProfileSettings.tsx          |  2 ++
 src/context/session.tsx                          |  7 ++++---
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss
index ad85c0a3..55b8dd95 100644
--- a/src/components/Article/Article.module.scss
+++ b/src/components/Article/Article.module.scss
@@ -22,6 +22,7 @@ img {
 .articleContent {
   img:not([data-disable-lightbox='true']) {
     cursor: zoom-in;
+    width: 100%;
   }
 }
 
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 8ddff9df..7f439b94 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -227,13 +227,15 @@ export const HeaderAuth = (props: Props) => {
             <Show
               when={isAuthenticatedControlsVisible()}
               fallback={
-                <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
-                  <a href="?m=auth&mode=login">
-                    <span class={styles.textLabel}>{t('Enter')}</span>
-                    <Icon name="key" class={styles.icon} />
-                    {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
-                  </a>
-                </div>
+                <Show when={!isAuthenticated()}>
+                  <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
+                    <a href="?m=auth&mode=login">
+                      <span class={styles.textLabel}>{t('Enter')}</span>
+                      <Icon name="key" class={styles.icon} />
+                      {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
+                    </a>
+                  </div>
+                </Show>
               }
             >
               <Show when={!isSaveButtonVisible()}>
diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx
index 90a23b33..2e393710 100644
--- a/src/components/ProfileSettings/ProfileSettings.tsx
+++ b/src/components/ProfileSettings/ProfileSettings.tsx
@@ -264,6 +264,7 @@ export const ProfileSettings = () => {
                         type="text"
                         name="username"
                         id="username"
+                        autocomplete="one-time-code"
                         placeholder={t('Name')}
                         onInput={(event) => updateFormField('name', event.currentTarget.value)}
                         value={form.name}
@@ -289,6 +290,7 @@ export const ProfileSettings = () => {
                             type="text"
                             name="user-address"
                             id="user-address"
+                            autocomplete="one-time-code2"
                             onInput={(event) => updateFormField('slug', event.currentTarget.value)}
                             value={form.slug}
                             ref={(el) => (slugInputRef.current = el)}
diff --git a/src/context/session.tsx b/src/context/session.tsx
index fa068bc8..3a189cc1 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -1,5 +1,5 @@
 import type { Accessor, JSX, Resource } from 'solid-js'
-import type { AuthModalSource } from '../components/Nav/AuthModal/types'
+import type { AuthModalSearchParams, AuthModalSource } from '../components/Nav/AuthModal/types'
 import type { Author } from '../graphql/schema/core.gen'
 
 import {
@@ -29,7 +29,6 @@ import {
 
 import { inboxClient } from '../graphql/client/chat'
 import { apiClient } from '../graphql/client/core'
-import { notifierClient } from '../graphql/client/notifier'
 import { useRouter } from '../stores/router'
 import { showModal } from '../stores/ui'
 import { addAuthors } from '../stores/zine/authors'
@@ -136,6 +135,7 @@ export const SessionProvider = (props: {
 
   const [isSessionLoaded, setIsSessionLoaded] = createSignal(false)
   const [authError, setAuthError] = createSignal('')
+  const { clearSearchParams } = useRouter<AuthModalSearchParams>()
 
   // Function to load session data
   const sessionData = async () => {
@@ -143,7 +143,7 @@ export const SessionProvider = (props: {
       const s: ApiResponse<AuthToken> = await authorizer().getSession()
       if (s?.data) {
         console.info('[context.session] loading session', s)
-
+        clearSearchParams()
         // Set session expiration time in local storage
         const expires_at = new Date(Date.now() + s.data.expires_in * 1000)
         localStorage.setItem('expires_at', `${expires_at.getTime()}`)
@@ -379,6 +379,7 @@ export const SessionProvider = (props: {
   }
 
   const isAuthenticated = createMemo(() => Boolean(author()))
+
   const actions = {
     loadSession,
     requireAuthentication,

From c9f494d2c19e60e802c6402d8ad124f504067541 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 22 Apr 2024 16:59:39 +0300
Subject: [PATCH 28/35] Hide autofill in profile settings (#442)

* hide autofill in profile settings
---
 src/components/ProfileSettings/ProfileSettings.tsx | 10 ++++++----
 src/pages/profile/Settings.module.scss             | 11 +++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx
index 2e393710..9d405a9b 100644
--- a/src/components/ProfileSettings/ProfileSettings.tsx
+++ b/src/components/ProfileSettings/ProfileSettings.tsx
@@ -195,7 +195,7 @@ export const ProfileSettings = () => {
                 <div class="col-md-20 col-lg-18 col-xl-16">
                   <h1>{t('Profile settings')}</h1>
                   <p class="description">{t('Here you can customize your profile the way you want.')}</p>
-                  <form enctype="multipart/form-data">
+                  <form enctype="multipart/form-data" autocomplete="off">
                     <h4>{t('Userpic')}</h4>
                     <div class="pretty-form__item">
                       <div
@@ -262,15 +262,16 @@ export const ProfileSettings = () => {
                     <div class="pretty-form__item">
                       <input
                         type="text"
-                        name="username"
-                        id="username"
+                        name="nameOfUser"
+                        id="nameOfUser"
+                        data-lpignore="true"
                         autocomplete="one-time-code"
                         placeholder={t('Name')}
                         onInput={(event) => updateFormField('name', event.currentTarget.value)}
                         value={form.name}
                         ref={(el) => (nameInputRef.current = el)}
                       />
-                      <label for="username">{t('Name')}</label>
+                      <label for="nameOfUser">{t('Name')}</label>
                       <Show when={nameError()}>
                         <div
                           style={{ position: 'absolute', 'margin-top': '-4px' }}
@@ -290,6 +291,7 @@ export const ProfileSettings = () => {
                             type="text"
                             name="user-address"
                             id="user-address"
+                            data-lpignore="true"
                             autocomplete="one-time-code2"
                             onInput={(event) => updateFormField('slug', event.currentTarget.value)}
                             value={form.slug}
diff --git a/src/pages/profile/Settings.module.scss b/src/pages/profile/Settings.module.scss
index 898b2496..9bd4906c 100644
--- a/src/pages/profile/Settings.module.scss
+++ b/src/pages/profile/Settings.module.scss
@@ -320,3 +320,14 @@ h5 {
     margin-bottom: 0;
   }
 }
+
+// disable last pass extention
+
+div[data-lastpass-icon-root="true"] {
+  opacity: 0 !important;
+}
+
+div[data-lastpass-infield="true"] {
+  opacity: 0 !important;
+}
+

From 437e666b3c4ea83627f1658014ac83e4adeac088 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 24 Apr 2024 09:40:37 +0300
Subject: [PATCH 29/35] getImageUrl.ts refactoring

---
 src/utils/getImageUrl.ts | 53 +++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index bc3c9073..e4bd09f6 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -1,31 +1,41 @@
 import { cdnUrl, thumborUrl } from './config'
 
-const getSizeUrlPart = (options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {}) => {
-  const widthString = options.width ? options.width.toString() : ''
-  const heightString = options.height ? options.height.toString() : ''
+const URL_CONFIG = {
+  cdnUrl: cdnUrl,
+  thumborUrl: thumborUrl,
+  audioSubfolder: 'audio',
+  imageSubfolder: 'image',
+  productionFolder: 'production/',
+}
 
-  if (!(widthString || heightString) || options.noSizeUrlPart) {
-    return ''
-  }
+const AUDIO_EXTENSIONS = new Set(['wav', 'mp3', 'ogg', 'aif', 'flac'])
 
-  return `${widthString}x${heightString}/`
+const isAudioFile = (filename: string): boolean => {
+  const extension = filename.split('.').pop()?.toLowerCase()
+  return AUDIO_EXTENSIONS.has(extension ?? '')
+}
+const getLastSegment = (url: string): string => url.toLowerCase().split('/').pop() || ''
+
+const buildSizePart = (width?: number, height?: number, includeSize = true): string => {
+  if (!includeSize) return ''
+  const widthPart = width ? width.toString() : ''
+  const heightPart = height ? height.toString() : ''
+  return widthPart || heightPart ? `${widthPart}x${heightPart}/` : ''
 }
 
 export const getImageUrl = (
   src: string,
   options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
-) => {
+): string => {
   if (!src.includes('discours.io') && src.includes('http')) {
     return src
   }
-  const filename = src.toLowerCase().split('/').pop()
-  const ext = filename.split('.').pop()
-  const isAudio = ext in ['wav', 'mp3', 'ogg', 'aif', 'flac']
-  const base = isAudio ? cdnUrl : `${thumborUrl}/unsafe/`
-  const suffix = isAudio || options.noSizeUrlPart ? '' : getSizeUrlPart(options)
-  const subfolder = isAudio ? 'audio' : 'image'
+  const filename = getLastSegment(src)
+  const base = isAudioFile(filename) ? URL_CONFIG.cdnUrl : URL_CONFIG.thumborUrl
+  const suffix = options.noSizeUrlPart ? '' : buildSizePart(options.width, options.height)
+  const subfolder = isAudioFile(filename) ? URL_CONFIG.audioSubfolder : URL_CONFIG.imageSubfolder
 
-  return `${base}${suffix}production/${subfolder}/${filename}`
+  return `${base}${suffix}${URL_CONFIG.productionFolder}${subfolder}/${filename}`
 }
 
 export const getOpenGraphImageUrl = (
@@ -37,17 +47,16 @@ export const getOpenGraphImageUrl = (
     width?: number
     height?: number
   },
-) => {
-  const sizeUrlPart = getSizeUrlPart(options)
-
+): string => {
+  const sizeUrlPart = buildSizePart(options.width, options.height)
   const filtersPart = `filters:discourstext('${encodeURIComponent(options.topic)}','${encodeURIComponent(
     options.author,
   )}','${encodeURIComponent(options.title)}')/`
 
-  if (src.startsWith(thumborUrl)) {
-    const thumborKey = src.replace(`${thumborUrl}/unsafe`, '')
-    return `${thumborUrl}/unsafe/${sizeUrlPart}${filtersPart}${thumborKey}`
+  if (src.startsWith(URL_CONFIG.thumborUrl)) {
+    const thumborKey = src.replace(URL_CONFIG.thumborUrl, '')
+    return `${URL_CONFIG.thumborUrl}${sizeUrlPart}${filtersPart}${thumborKey}`
   }
 
-  return `${thumborUrl}/unsafe/${sizeUrlPart}${filtersPart}${src}`
+  return `${URL_CONFIG.thumborUrl}${sizeUrlPart}${filtersPart}${src}`
 }

From 59561ec26b9b631873b317fa80b9d8dfa828f442 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 24 Apr 2024 10:22:05 +0300
Subject: [PATCH 30/35] add unsafe

---
 src/utils/getImageUrl.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index e4bd09f6..d820bfae 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -2,11 +2,11 @@ import { cdnUrl, thumborUrl } from './config'
 
 const URL_CONFIG = {
   cdnUrl: cdnUrl,
-  thumborUrl: thumborUrl,
-  audioSubfolder: 'audio',
-  imageSubfolder: 'image',
-  productionFolder: 'production/',
-}
+  thumborUrl: `${thumborUrl}/unsafe/`,
+  audioSubfolder: "audio",
+  imageSubfolder: "image",
+  productionFolder: "production/",
+};
 
 const AUDIO_EXTENSIONS = new Set(['wav', 'mp3', 'ogg', 'aif', 'flac'])
 

From fc056f14b853900bad49c8190d4a74047cf621cb Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 24 Apr 2024 10:23:42 +0300
Subject: [PATCH 31/35] fix biome

---
 src/utils/getImageUrl.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index d820bfae..e13872cc 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -3,10 +3,10 @@ import { cdnUrl, thumborUrl } from './config'
 const URL_CONFIG = {
   cdnUrl: cdnUrl,
   thumborUrl: `${thumborUrl}/unsafe/`,
-  audioSubfolder: "audio",
-  imageSubfolder: "image",
-  productionFolder: "production/",
-};
+  audioSubfolder: 'audio',
+  imageSubfolder: 'image',
+  productionFolder: 'production/',
+}
 
 const AUDIO_EXTENSIONS = new Set(['wav', 'mp3', 'ogg', 'aif', 'flac'])
 

From 4a7a052d67683f7c215577c02b7800bcfaea1efa Mon Sep 17 00:00:00 2001
From: Arkadzi Rakouski <arkadyrakovsky@gmail.com>
Date: Wed, 24 Apr 2024 11:07:07 +0300
Subject: [PATCH 32/35] fix falsy active header (#444)

 fix falsy active header
---
 src/components/TableOfContents/TableOfContents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
index f7000e20..322aa925 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents/TableOfContents.tsx
@@ -17,7 +17,7 @@ interface Props {
 
 const isInViewport = (el: Element): boolean => {
   const rect = el.getBoundingClientRect()
-  return rect.top <= DEFAULT_HEADER_OFFSET
+  return rect.top <= DEFAULT_HEADER_OFFSET + 24 // default offset + 1.5em (default header margin-top)
 }
 const scrollToHeader = (element) => {
   window.scrollTo({

From c1d1f05edf8fc6f268fde48337849b8facd86b60 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 24 Apr 2024 11:08:00 +0300
Subject: [PATCH 33/35] Hotfix/author comments render (#446)

Fix comments fetching
---
 src/components/Views/Author/Author.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index ad3840d9..4ddb5649 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -128,7 +128,7 @@ export const AuthorView = (props: Props) => {
 
   const fetchComments = async (commenter: Author) => {
     const data = await apiClient.getReactionsBy({
-      by: { comment: false, created_by: commenter.id },
+      by: { comment: true, created_by: commenter.id },
     })
     setCommented(data)
   }

From 9028618067db28d552b392ccf5b4d38cfb4f5c57 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 24 Apr 2024 12:30:17 +0300
Subject: [PATCH 34/35] Add gallery description (#434)

Add gallery description
---
 src/components/Article/FullArticle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 6d9a670f..bc7fd403 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -330,7 +330,7 @@ export const FullArticle = (props: Props) => {
     width: 1200,
   })
 
-  const description = getDescription(props.article.description || body())
+  const description = getDescription(props.article.description || body() || media()[0]?.body)
   const ogTitle = props.article.title
   const keywords = getKeywords(props.article)
   const shareUrl = getShareUrl({ pathname: `/${props.article.slug}` })

From 5334291878f34995d5f6b1b06f11502f28aa6b7a Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 24 Apr 2024 15:48:19 +0300
Subject: [PATCH 35/35] fix feed dropdown

---
 src/components/Views/Feed/Feed.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx
index aeee25b9..e457cafc 100644
--- a/src/components/Views/Feed/Feed.tsx
+++ b/src/components/Views/Feed/Feed.tsx
@@ -54,6 +54,13 @@ type FeedSearchParams = {
   visibility: VisibilityMode
 }
 
+type Props = {
+  loadShouts: (options: LoadShoutsOptions) => Promise<{
+    hasMore: boolean
+    newShouts: Shout[]
+  }>
+}
+
 const getFromDate = (period: FeedPeriod): number => {
   const now = new Date()
   let d: Date = now
@@ -74,18 +81,10 @@ const getFromDate = (period: FeedPeriod): number => {
   return Math.floor(d.getTime() / 1000)
 }
 
-type Props = {
-  loadShouts: (options: LoadShoutsOptions) => Promise<{
-    hasMore: boolean
-    newShouts: Shout[]
-  }>
-}
-
 export const FeedView = (props: Props) => {
   const { t } = useLocalize()
 
   const monthPeriod: PeriodItem = { value: 'month', title: t('This month') }
-  const visibilityAll = { value: 'featured', title: t('All') }
 
   const periods: PeriodItem[] = [
     { value: 'week', title: t('This week') },
@@ -121,7 +120,7 @@ export const FeedView = (props: Props) => {
   const currentVisibility = createMemo(() => {
     const visibility = visibilities.find((v) => v.value === searchParams().visibility)
     if (!visibility) {
-      return visibilityAll
+      return visibilities[0]
     }
     return visibility
   })
@@ -172,6 +171,7 @@ export const FeedView = (props: Props) => {
     }
 
     const visibilityMode = searchParams().visibility
+
     if (visibilityMode === 'all') {
       options.filters = { ...options.filters }
     } else if (visibilityMode) {
@@ -185,6 +185,7 @@ export const FeedView = (props: Props) => {
       const period = searchParams().period || 'month'
       options.filters = { after: getFromDate(period) }
     }
+
     return props.loadShouts(options)
   }