diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 19c2c453..7dfc69c2 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,41 +1,41 @@
 module.exports = {
-  plugins: ['@typescript-eslint', 'import', 'sonarjs', 'unicorn', 'promise', 'solid', 'jest'],
+  plugins: ["@typescript-eslint", "import", "sonarjs", "unicorn", "promise", "solid", "jest"],
   extends: [
-    'eslint:recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'prettier',
-    'plugin:sonarjs/recommended',
-    'plugin:unicorn/recommended',
-    'plugin:promise/recommended',
-    'plugin:solid/recommended',
-    'plugin:jest/recommended'
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier",
+    "plugin:sonarjs/recommended",
+    "plugin:unicorn/recommended",
+    "plugin:promise/recommended",
+    "plugin:solid/recommended",
+    "plugin:jest/recommended"
   ],
   overrides: [
     {
-      files: ['**/*.ts', '**/*.tsx'],
-      parser: '@typescript-eslint/parser',
+      files: ["**/*.ts", "**/*.tsx"],
+      parser: "@typescript-eslint/parser",
       parserOptions: {
         ecmaVersion: 2021,
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-        project: './tsconfig.json'
+        sourceType: "module",
+        project: "./tsconfig.json"
       },
       extends: [
-        'plugin:@typescript-eslint/recommended'
+        "plugin:@typescript-eslint/recommended"
         // Maybe one day...
         // 'plugin:@typescript-eslint/recommended-requiring-type-checking'
       ],
       rules: {
-        '@typescript-eslint/no-unused-vars': [
-          'warn',
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
           {
-            argsIgnorePattern: '^_'
+            argsIgnorePattern: "^_"
           }
         ],
-        '@typescript-eslint/no-non-null-assertion': 'error',
+        "@typescript-eslint/no-non-null-assertion": "error",
         // TODO: Remove any usage and enable
-        '@typescript-eslint/no-explicit-any': 'off'
+        "@typescript-eslint/no-explicit-any": "off"
       }
     }
   ],
@@ -47,42 +47,60 @@ module.exports = {
   globals: {},
   rules: {
     // Solid
-    'solid/reactivity': 'off', // FIXME
-    'solid/no-innerhtml': 'off',
+    "solid/reactivity": "off", // FIXME
+    "solid/no-innerhtml": "off",
 
     /** Unicorn **/
-    'unicorn/no-null': 'off',
-    'unicorn/filename-case': 'off',
-    'unicorn/no-array-for-each': 'off',
-    'unicorn/no-array-reduce': 'off',
-    'unicorn/prefer-string-replace-all': 'warn',
-    'unicorn/prevent-abbreviations': 'off',
-    'unicorn/prefer-module': 'off',
-    'unicorn/import-style': 'off',
-    'unicorn/numeric-separators-style': 'off',
-    'unicorn/prefer-node-protocol': 'off',
-    'unicorn/prefer-dom-node-append': 'off', // FIXME
-    'unicorn/prefer-top-level-await': 'warn',
-    'unicorn/consistent-function-scoping': 'warn',
-    'unicorn/no-array-callback-reference': 'warn',
-    'unicorn/no-array-method-this-argument': 'warn',
-    'unicorn/no-for-loop': 'off',
+    "unicorn/no-null": "off",
+    "unicorn/filename-case": "off",
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-array-reduce": "off",
+    "unicorn/prefer-string-replace-all": "warn",
+    "unicorn/prevent-abbreviations": "off",
+    "unicorn/prefer-module": "off",
+    "unicorn/import-style": "off",
+    "unicorn/numeric-separators-style": "off",
+    "unicorn/prefer-node-protocol": "off",
+    "unicorn/prefer-dom-node-append": "off", // FIXME
+    "unicorn/prefer-top-level-await": "warn",
+    "unicorn/consistent-function-scoping": "warn",
+    "unicorn/no-array-callback-reference": "warn",
+    "unicorn/no-array-method-this-argument": "warn",
+    "unicorn/no-for-loop": "off",
 
-    'sonarjs/no-duplicate-string': ['warn', { threshold: 5 }],
+    "sonarjs/no-duplicate-string": ["warn", { threshold: 5 }],
 
     // Promise
     // 'promise/catch-or-return': 'off',  // Should be enabled
-    'promise/always-return': 'off',
+    "promise/always-return": "off",
 
-    eqeqeq: 'error',
-    'no-param-reassign': 'error',
-    'no-nested-ternary': 'error',
-    'no-shadow': 'error'
+    eqeqeq: "error",
+    "no-param-reassign": "error",
+    "no-nested-ternary": "error",
+    "no-shadow": "error",
+
+    "import/order": ["warn", {
+      groups: ["type", "builtin", "external", "internal", "parent", "sibling", "index"],
+      distinctGroup: false,
+      pathGroups: [
+        {
+          pattern: "*.scss",
+          patternOptions: { matchBase: true },
+          group: "index",
+          position: "after"
+        }
+      ],
+      "newlines-between": "always",
+      alphabetize: {
+        order: "asc",
+        caseInsensitive: true
+      }
+    }]
   },
   settings: {
-    'import/resolver': {
+    "import/resolver": {
       typescript: true,
       node: true
     }
   }
-}
+};
diff --git a/.prettierrc.json b/.prettierrc.json
index 0126822f..91956d70 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -4,7 +4,6 @@
   "singleQuote": true,
   "proseWrap": "always",
   "printWidth": 108,
-  "trailingComma": "none",
   "plugins": [],
   "overrides": [
     {
diff --git a/api/edge-ssr.js b/api/edge-ssr.js
index c810ed9b..113dd20a 100644
--- a/api/edge-ssr.js
+++ b/api/edge-ssr.js
@@ -1,7 +1,7 @@
 import { renderPage } from 'vike/server'
 
 export const config = {
-  runtime: 'edge'
+  runtime: 'edge',
 }
 export default async function handler(request) {
   const { url, cookies } = request
diff --git a/api/feedback.js b/api/feedback.js
index 51f1d0fa..592ebdfa 100644
--- a/api/feedback.js
+++ b/api/feedback.js
@@ -15,7 +15,7 @@ export default async function handler(req, res) {
     from: 'Discours Feedback Robot <robot@discours.io>',
     to: 'welcome@discours.io',
     subject,
-    text
+    text,
   }
 
   try {
diff --git a/api/newsletter.js b/api/newsletter.js
index 49d99440..b8db4cb3 100644
--- a/api/newsletter.js
+++ b/api/newsletter.js
@@ -13,18 +13,18 @@ export default async (req, res) => {
     const response = await mg.lists.members.createMember('newsletter@discours.io', {
       address: email,
       subscribed: true,
-      upsert: 'yes'
+      upsert: 'yes',
     })
 
     return res.status(200).json({
       success: true,
       message: 'Email was added to newsletter list',
-      response: JSON.stringify(response)
+      response: JSON.stringify(response),
     })
   } catch (error) {
     return res.status(400).json({
       success: false,
-      message: error.message
+      message: error.message,
     })
   }
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 2ad01f87..6cbfdb64 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,18 +1,15 @@
-import { hideModal, MODALS, showModal } from '../stores/ui'
+import type { PageProps, RootSearchParams } from '../pages/types'
+
+import { Meta, MetaProvider } from '@solidjs/meta'
 import { Component, createEffect, createMemo } from 'solid-js'
-import { ROUTES, useRouter } from '../stores/router'
 import { Dynamic } from 'solid-js/web'
 
-import type { PageProps, RootSearchParams } from '../pages/types'
-import { HomePage } from '../pages/index.page'
-import { AllTopicsPage } from '../pages/allTopics.page'
-import { TopicPage } from '../pages/topic.page'
-import { AllAuthorsPage } from '../pages/allAuthors.page'
-import { AuthorPage } from '../pages/author.page'
-import { FeedPage } from '../pages/feed.page'
-import { ArticlePage } from '../pages/article.page'
-import { SearchPage } from '../pages/search.page'
-import { FourOuFourPage } from '../pages/fourOuFour.page'
+import { ConfirmProvider } from '../context/confirm'
+import { EditorProvider } from '../context/editor'
+import { LocalizeProvider } from '../context/localize'
+import { NotificationsProvider } from '../context/notifications'
+import { SessionProvider } from '../context/session'
+import { SnackbarProvider } from '../context/snackbar'
 import { DiscussionRulesPage } from '../pages/about/discussionRules.page'
 import { DogmaPage } from '../pages/about/dogma.page'
 import { GuidePage } from '../pages/about/guide.page'
@@ -23,22 +20,26 @@ import { PrinciplesPage } from '../pages/about/principles.page'
 import { ProjectsPage } from '../pages/about/projects.page'
 import { TermsOfUsePage } from '../pages/about/termsOfUse.page'
 import { ThanksPage } from '../pages/about/thanks.page'
-import { CreatePage } from '../pages/create.page'
-import { EditPage } from '../pages/edit.page'
+import { AllAuthorsPage } from '../pages/allAuthors.page'
+import { AllTopicsPage } from '../pages/allTopics.page'
+import { ArticlePage } from '../pages/article.page'
+import { AuthorPage } from '../pages/author.page'
 import { ConnectPage } from '../pages/connect.page'
-import { InboxPage } from '../pages/inbox.page'
-import { ExpoPage } from '../pages/expo/expo.page'
-import { SessionProvider } from '../context/session'
-import { ProfileSettingsPage } from '../pages/profile/profileSettings.page'
-import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page'
-import { ProfileSubscriptionsPage } from '../pages/profile/profileSubscriptions.page'
+import { CreatePage } from '../pages/create.page'
 import { DraftsPage } from '../pages/drafts.page'
-import { SnackbarProvider } from '../context/snackbar'
-import { LocalizeProvider } from '../context/localize'
-import { ConfirmProvider } from '../context/confirm'
-import { EditorProvider } from '../context/editor'
-import { NotificationsProvider } from '../context/notifications'
-import { Meta, MetaProvider } from '@solidjs/meta'
+import { EditPage } from '../pages/edit.page'
+import { ExpoPage } from '../pages/expo/expo.page'
+import { FeedPage } from '../pages/feed.page'
+import { FourOuFourPage } from '../pages/fourOuFour.page'
+import { InboxPage } from '../pages/inbox.page'
+import { HomePage } from '../pages/index.page'
+import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page'
+import { ProfileSettingsPage } from '../pages/profile/profileSettings.page'
+import { ProfileSubscriptionsPage } from '../pages/profile/profileSubscriptions.page'
+import { SearchPage } from '../pages/search.page'
+import { TopicPage } from '../pages/topic.page'
+import { ROUTES, useRouter } from '../stores/router'
+import { hideModal, MODALS, showModal } from '../stores/ui'
 
 // TODO: lazy load
 // const SomePage = lazy(() => import('./Pages/SomePage'))
@@ -80,7 +81,7 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
   profileSettings: ProfileSettingsPage,
   profileSecurity: ProfileSecurityPage,
   profileSubscriptions: ProfileSubscriptionsPage,
-  fourOuFour: FourOuFourPage
+  fourOuFour: FourOuFourPage,
 }
 
 export const App = (props: PageProps) => {
diff --git a/src/components/Article/AudioHeader/AudioHeader.tsx b/src/components/Article/AudioHeader/AudioHeader.tsx
index ac8f38d4..af1541a0 100644
--- a/src/components/Article/AudioHeader/AudioHeader.tsx
+++ b/src/components/Article/AudioHeader/AudioHeader.tsx
@@ -1,11 +1,13 @@
 import { clsx } from 'clsx'
-import styles from './AudioHeader.module.scss'
-import { MediaItem } from '../../../pages/types'
 import { createSignal, Show } from 'solid-js'
-import { Icon } from '../../_shared/Icon'
+
 import { Topic } from '../../../graphql/types.gen'
-import { CardTopic } from '../../Feed/CardTopic'
+import { MediaItem } from '../../../pages/types'
+import { Icon } from '../../_shared/Icon'
 import { Image } from '../../_shared/Image'
+import { CardTopic } from '../../Feed/CardTopic'
+
+import styles from './AudioHeader.module.scss'
 
 type Props = {
   title: string
diff --git a/src/components/Article/AudioPlayer/AudioPlayer.tsx b/src/components/Article/AudioPlayer/AudioPlayer.tsx
index eb5b5c2c..93ec8c52 100644
--- a/src/components/Article/AudioPlayer/AudioPlayer.tsx
+++ b/src/components/Article/AudioPlayer/AudioPlayer.tsx
@@ -1,8 +1,11 @@
 import { createEffect, createMemo, createSignal, on, onMount, Show } from 'solid-js'
+
+import { MediaItem } from '../../../pages/types'
+
 import { PlayerHeader } from './PlayerHeader'
 import { PlayerPlaylist } from './PlayerPlaylist'
+
 import styles from './AudioPlayer.module.scss'
-import { MediaItem } from '../../../pages/types'
 
 type Props = {
   media: MediaItem[]
@@ -35,8 +38,8 @@ export const AudioPlayer = (props: Props) => {
       () => {
         setCurrentTrackDuration(0)
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
 
   const handlePlayMedia = async (trackIndex: number) => {
@@ -131,7 +134,7 @@ export const AudioPlayer = (props: Props) => {
             <div
               class={styles.progressFilled}
               style={{
-                width: `${(currentTime() / currentTrackDuration()) * 100 || 0}%`
+                width: `${(currentTime() / currentTrackDuration()) * 100 || 0}%`,
               }}
             />
           </div>
diff --git a/src/components/Article/AudioPlayer/PlayerHeader.tsx b/src/components/Article/AudioPlayer/PlayerHeader.tsx
index ff5019ed..eb5f7502 100644
--- a/src/components/Article/AudioPlayer/PlayerHeader.tsx
+++ b/src/components/Article/AudioPlayer/PlayerHeader.tsx
@@ -1,11 +1,11 @@
-import { createSignal, Show } from 'solid-js'
 import { clsx } from 'clsx'
+import { createSignal, Show } from 'solid-js'
 
-import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
-
-import { Icon } from '../../_shared/Icon'
-import styles from './AudioPlayer.module.scss'
 import { MediaItem } from '../../../pages/types'
+import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
+import { Icon } from '../../_shared/Icon'
+
+import styles from './AudioPlayer.module.scss'
 
 type Props = {
   onPlayMedia: () => void
@@ -18,7 +18,7 @@ type Props = {
 
 export const PlayerHeader = (props: Props) => {
   const volumeContainerRef: { current: HTMLDivElement } = {
-    current: null
+    current: null,
   }
 
   const [isVolumeBarOpened, setIsVolumeBarOpened] = createSignal(false)
@@ -30,7 +30,7 @@ export const PlayerHeader = (props: Props) => {
   useOutsideClickHandler({
     containerRef: volumeContainerRef,
     predicate: () => isVolumeBarOpened(),
-    handler: () => toggleVolumeBar()
+    handler: () => toggleVolumeBar(),
   })
 
   return (
@@ -42,7 +42,7 @@ export const PlayerHeader = (props: Props) => {
           onClick={props.onPlayMedia}
           class={clsx(
             styles.playButton,
-            props.isPlaying ? styles.playButtonInvertPause : styles.playButtonInvertPlay
+            props.isPlaying ? styles.playButtonInvertPause : styles.playButtonInvertPlay,
           )}
           aria-label="Play"
           data-playing="false"
diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index 7f456f8b..1af16c7e 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -1,13 +1,15 @@
 import { createSignal, For, Show } from 'solid-js'
-import { SharePopup, getShareUrl } from '../SharePopup'
-import { getDescription } from '../../../utils/meta'
+
 import { useLocalize } from '../../../context/localize'
-import { Popover } from '../../_shared/Popover'
-import { Icon } from '../../_shared/Icon'
-import styles from './AudioPlayer.module.scss'
-import { GrowingTextarea } from '../../_shared/GrowingTextarea'
 import { MediaItem } from '../../../pages/types'
+import { getDescription } from '../../../utils/meta'
+import { GrowingTextarea } from '../../_shared/GrowingTextarea'
+import { Icon } from '../../_shared/Icon'
+import { Popover } from '../../_shared/Popover'
 import SimplifiedEditor from '../../Editor/SimplifiedEditor'
+import { SharePopup, getShareUrl } from '../SharePopup'
+
+import styles from './AudioPlayer.module.scss'
 
 type Props = {
   media: MediaItem[]
diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx
index 4bb7bc2f..2a8f6f7c 100644
--- a/src/components/Article/Comment/Comment.tsx
+++ b/src/components/Article/Comment/Comment.tsx
@@ -1,24 +1,22 @@
-import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
-import { clsx } from 'clsx'
 import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
+import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
 
-import { Userpic } from '../../Author/Userpic'
-import { CommentRatingControl } from '../CommentRatingControl'
-import { CommentDate } from '../CommentDate'
-import { ShowIfAuthenticated } from '../../_shared/ShowIfAuthenticated'
-import { Icon } from '../../_shared/Icon'
-
-import { useSession } from '../../../context/session'
+import { useConfirm } from '../../../context/confirm'
 import { useLocalize } from '../../../context/localize'
 import { useReactions } from '../../../context/reactions'
+import { useSession } from '../../../context/session'
 import { useSnackbar } from '../../../context/snackbar'
-import { useConfirm } from '../../../context/confirm'
-
 import { Author, Reaction, ReactionKind } from '../../../graphql/types.gen'
 import { router } from '../../../stores/router'
+import { Icon } from '../../_shared/Icon'
+import { ShowIfAuthenticated } from '../../_shared/ShowIfAuthenticated'
+import { AuthorLink } from '../../Author/AhtorLink'
+import { Userpic } from '../../Author/Userpic'
+import { CommentDate } from '../CommentDate'
+import { CommentRatingControl } from '../CommentRatingControl'
 
 import styles from './Comment.module.scss'
-import { AuthorLink } from '../../Author/AhtorLink'
 
 const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
 
@@ -43,15 +41,15 @@ export const Comment = (props: Props) => {
   const { session } = useSession()
 
   const {
-    actions: { createReaction, deleteReaction, updateReaction }
+    actions: { createReaction, deleteReaction, updateReaction },
   } = useReactions()
 
   const {
-    actions: { showConfirm }
+    actions: { showConfirm },
   } = useConfirm()
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const isCommentAuthor = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug)
@@ -65,7 +63,7 @@ export const Comment = (props: Props) => {
           confirmBody: t('Are you sure you want to delete this comment?'),
           confirmButtonLabel: t('Delete'),
           confirmButtonVariant: 'danger',
-          declineButtonVariant: 'primary'
+          declineButtonVariant: 'primary',
         })
 
         if (isConfirmed) {
@@ -86,7 +84,7 @@ export const Comment = (props: Props) => {
         kind: ReactionKind.Comment,
         replyTo: props.comment.id,
         body: value,
-        shout: props.comment.shout.id
+        shout: props.comment.shout.id,
       })
       setClearEditor(true)
       setIsReplyVisible(false)
@@ -107,7 +105,7 @@ export const Comment = (props: Props) => {
       await updateReaction(props.comment.id, {
         kind: ReactionKind.Comment,
         body: value,
-        shout: props.comment.shout.id
+        shout: props.comment.shout.id,
       })
       setEditMode(false)
       setLoading(false)
@@ -122,7 +120,7 @@ export const Comment = (props: Props) => {
     <li
       id={`comment_${comment().id}`}
       class={clsx(styles.comment, props.class, {
-        [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen
+        [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen,
       })}
     >
       <Show when={!!body()}>
@@ -135,7 +133,7 @@ export const Comment = (props: Props) => {
                   name={comment().createdBy.name}
                   userpic={comment().createdBy.userpic}
                   class={clsx({
-                    [styles.compactUserpic]: props.compact
+                    [styles.compactUserpic]: props.compact,
                   })}
                 />
                 <small>
diff --git a/src/components/Article/CommentDate/CommentDate.tsx b/src/components/Article/CommentDate/CommentDate.tsx
index 7a31c5b3..3cca2d0e 100644
--- a/src/components/Article/CommentDate/CommentDate.tsx
+++ b/src/components/Article/CommentDate/CommentDate.tsx
@@ -1,8 +1,11 @@
-import { Show } from 'solid-js'
-import { Icon } from '../../_shared/Icon'
 import type { Reaction } from '../../../graphql/types.gen'
-import { useLocalize } from '../../../context/localize'
+
 import { clsx } from 'clsx'
+import { Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { Icon } from '../../_shared/Icon'
+
 import styles from './CommentDate.module.scss'
 
 type Props = {
@@ -27,7 +30,7 @@ export const CommentDate = (props: Props) => {
     <div
       class={clsx(styles.commentDates, {
         [styles.commentDatesLastInRow]: props.isLastInRow,
-        [styles.showOnHover]: props.showOnHover
+        [styles.showOnHover]: props.showOnHover,
       })}
     >
       <time class={styles.date}>{formattedDate(props.comment.createdAt)}</time>
diff --git a/src/components/Article/CommentRatingControl.tsx b/src/components/Article/CommentRatingControl.tsx
index a7a5895b..4f3d52f8 100644
--- a/src/components/Article/CommentRatingControl.tsx
+++ b/src/components/Article/CommentRatingControl.tsx
@@ -1,16 +1,19 @@
-import { clsx } from 'clsx'
-import styles from './CommentRatingControl.module.scss'
 import type { Reaction } from '../../graphql/types.gen'
-import { ReactionKind } from '../../graphql/types.gen'
-import { useSession } from '../../context/session'
-import { useReactions } from '../../context/reactions'
+
+import { clsx } from 'clsx'
 import { createMemo } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
+import { useReactions } from '../../context/reactions'
+import { useSession } from '../../context/session'
+import { useSnackbar } from '../../context/snackbar'
+import { ReactionKind } from '../../graphql/types.gen'
 import { loadShout } from '../../stores/zine/articles'
 import { Popup } from '../_shared/Popup'
-import { useLocalize } from '../../context/localize'
-import { useSnackbar } from '../../context/snackbar'
 import { VotersList } from '../_shared/VotersList'
 
+import styles from './CommentRatingControl.module.scss'
+
 type Props = {
   comment: Reaction
 }
@@ -19,11 +22,11 @@ export const CommentRatingControl = (props: Props) => {
   const { t } = useLocalize()
   const { user } = useSession()
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
   const {
     reactionEntities,
-    actions: { createReaction, deleteReaction, loadReactionsBy }
+    actions: { createReaction, deleteReaction, loadReactionsBy },
   } = useReactions()
 
   const checkReaction = (reactionKind: ReactionKind) =>
@@ -32,7 +35,7 @@ export const CommentRatingControl = (props: Props) => {
         r.kind === reactionKind &&
         r.createdBy.slug === user()?.slug &&
         r.shout.id === props.comment.shout.id &&
-        r.replyTo === props.comment.id
+        r.replyTo === props.comment.id,
     )
   const isUpvoted = createMemo(() => checkReaction(ReactionKind.Like))
   const isDownvoted = createMemo(() => checkReaction(ReactionKind.Dislike))
@@ -43,8 +46,8 @@ export const CommentRatingControl = (props: Props) => {
       (r) =>
         [ReactionKind.Like, ReactionKind.Dislike].includes(r.kind) &&
         r.shout.id === props.comment.shout.id &&
-        r.replyTo === props.comment.id
-    )
+        r.replyTo === props.comment.id,
+    ),
   )
 
   const deleteCommentReaction = async (reactionKind: ReactionKind) => {
@@ -53,7 +56,7 @@ export const CommentRatingControl = (props: Props) => {
         r.kind === reactionKind &&
         r.createdBy.slug === user()?.slug &&
         r.shout.id === props.comment.shout.id &&
-        r.replyTo === props.comment.id
+        r.replyTo === props.comment.id,
     )
     return deleteReaction(reactionToDelete.id)
   }
@@ -68,7 +71,7 @@ export const CommentRatingControl = (props: Props) => {
         await createReaction({
           kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike,
           shout: props.comment.shout.id,
-          replyTo: props.comment.id
+          replyTo: props.comment.id,
         })
       }
     } catch {
@@ -77,7 +80,7 @@ export const CommentRatingControl = (props: Props) => {
 
     await loadShout(props.comment.shout.slug)
     await loadReactionsBy({
-      by: { shout: props.comment.shout.slug }
+      by: { shout: props.comment.shout.slug },
     })
   }
 
@@ -88,7 +91,7 @@ export const CommentRatingControl = (props: Props) => {
         disabled={!canVote() || !user()}
         onClick={() => handleRatingChange(true)}
         class={clsx(styles.commentRatingControl, styles.commentRatingControlUp, {
-          [styles.voted]: isUpvoted()
+          [styles.voted]: isUpvoted(),
         })}
       />
       <Popup
@@ -96,7 +99,7 @@ export const CommentRatingControl = (props: Props) => {
           <div
             class={clsx(styles.commentRatingValue, {
               [styles.commentRatingPositive]: props.comment.stat.rating > 0,
-              [styles.commentRatingNegative]: props.comment.stat.rating < 0
+              [styles.commentRatingNegative]: props.comment.stat.rating < 0,
             })}
           >
             {props.comment.stat.rating || 0}
@@ -114,7 +117,7 @@ export const CommentRatingControl = (props: Props) => {
         disabled={!canVote() || !user()}
         onClick={() => handleRatingChange(false)}
         class={clsx(styles.commentRatingControl, styles.commentRatingControlDown, {
-          [styles.voted]: isDownvoted()
+          [styles.voted]: isDownvoted(),
         })}
       />
     </div>
diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx
index f17f1f74..649993f3 100644
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@@ -1,16 +1,19 @@
-import { Show, createMemo, createSignal, onMount, For } from 'solid-js'
-import { Comment } from './Comment'
-import styles from './Article.module.scss'
 import { clsx } from 'clsx'
-import { Author, Reaction, ReactionKind } from '../../graphql/types.gen'
-import { useSession } from '../../context/session'
-import { Button } from '../_shared/Button'
-import { useReactions } from '../../context/reactions'
-import { byCreated } from '../../utils/sortby'
-import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
+import { Show, createMemo, createSignal, onMount, For } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
+import { useReactions } from '../../context/reactions'
+import { useSession } from '../../context/session'
+import { Author, Reaction, ReactionKind } from '../../graphql/types.gen'
+import { byCreated } from '../../utils/sortby'
+import { Button } from '../_shared/Button'
+import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 import SimplifiedEditor from '../Editor/SimplifiedEditor'
 
+import { Comment } from './Comment'
+
+import styles from './Article.module.scss'
+
 type CommentsOrder = 'createdAt' | 'rating' | 'newOnly'
 
 const sortCommentsByRating = (a: Reaction, b: Reaction): -1 | 0 | 1 => {
@@ -48,11 +51,11 @@ export const CommentsTree = (props: Props) => {
 
   const {
     reactionEntities,
-    actions: { createReaction }
+    actions: { createReaction },
   } = useReactions()
 
   const comments = createMemo(() =>
-    Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT')
+    Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT'),
   )
 
   const sortedComments = createMemo(() => {
@@ -96,7 +99,7 @@ export const CommentsTree = (props: Props) => {
       await createReaction({
         kind: ReactionKind.Comment,
         body: value,
-        shout: props.shoutId
+        shout: props.shoutId,
       })
       setClearEditor(true)
     } catch (error) {
@@ -154,7 +157,7 @@ export const CommentsTree = (props: Props) => {
             <Comment
               sortedComments={sortedComments()}
               isArticleAuthor={Boolean(
-                props.articleAuthors.some((a) => a.slug === reaction.createdBy.slug)
+                props.articleAuthors.some((a) => a.slug === reaction.createdBy.slug),
               )}
               comment={reaction}
               clickedReply={(id) => setClickedReplyId(id)}
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index a4758800..88bef8be 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -1,34 +1,36 @@
+import type { Author, Shout } from '../../graphql/types.gen'
+
+import { getPagePath } from '@nanostores/router'
+import { createPopper } from '@popperjs/core'
+import { clsx } from 'clsx'
 import { createEffect, For, createMemo, onMount, Show, createSignal, onCleanup } from 'solid-js'
 
-import { clsx } from 'clsx'
-import { getPagePath } from '@nanostores/router'
-import type { Author, Shout } from '../../graphql/types.gen'
-import { useSession } from '../../context/session'
 import { useLocalize } from '../../context/localize'
 import { useReactions } from '../../context/reactions'
+import { useSession } from '../../context/session'
 import { MediaItem } from '../../pages/types'
 import { DEFAULT_HEADER_OFFSET, router, useRouter } from '../../stores/router'
+import { getImageUrl } from '../../utils/getImageUrl'
 import { getDescription } from '../../utils/meta'
+import { Icon } from '../_shared/Icon'
+import { Image } from '../_shared/Image'
+import { Lightbox } from '../_shared/Lightbox'
+import { Popover } from '../_shared/Popover'
+import { ImageSwiper } from '../_shared/SolidSwiper'
+import { VideoPlayer } from '../_shared/VideoPlayer'
+import { AuthorBadge } from '../Author/AuthorBadge'
+import { CardTopic } from '../Feed/CardTopic'
+import { FeedArticlePopup } from '../Feed/FeedArticlePopup'
 import { TableOfContents } from '../TableOfContents'
+
+import { AudioHeader } from './AudioHeader'
 import { AudioPlayer } from './AudioPlayer'
+import { CommentsTree } from './CommentsTree'
 import { getShareUrl, SharePopup } from './SharePopup'
 import { ShoutRatingControl } from './ShoutRatingControl'
-import { CommentsTree } from './CommentsTree'
-import stylesHeader from '../Nav/Header/Header.module.scss'
-import { AudioHeader } from './AudioHeader'
-import { Popover } from '../_shared/Popover'
-import { VideoPlayer } from '../_shared/VideoPlayer'
-import { Icon } from '../_shared/Icon'
-import { ImageSwiper } from '../_shared/SolidSwiper'
+
 import styles from './Article.module.scss'
-import { CardTopic } from '../Feed/CardTopic'
-import { createPopper } from '@popperjs/core'
-import { AuthorBadge } from '../Author/AuthorBadge'
-import { getImageUrl } from '../../utils/getImageUrl'
-import { FeedArticlePopup } from '../Feed/FeedArticlePopup'
-import { Lightbox } from '../_shared/Lightbox'
-import { Image } from '../_shared/Image'
-import article from '../Editor/extensions/Article'
+import stylesHeader from '../Nav/Header/Header.module.scss'
 
 type Props = {
   article: Shout
@@ -46,7 +48,7 @@ const scrollTo = (el: HTMLElement) => {
   window.scrollTo({
     top: top + window.scrollY - DEFAULT_HEADER_OFFSET,
     left: 0,
-    behavior: 'smooth'
+    behavior: 'smooth',
   })
 }
 
@@ -57,7 +59,7 @@ export const FullArticle = (props: Props) => {
   const {
     user,
     isAuthenticated,
-    actions: { requireAuthentication }
+    actions: { requireAuthentication },
   } = useSession()
 
   const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false)
@@ -67,7 +69,7 @@ export const FullArticle = (props: Props) => {
   const mainTopic = createMemo(
     () =>
       props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic) ||
-      props.article.topics[0]
+      props.article.topics[0],
   )
 
   const canEdit = () => props.article.authors?.some((a) => a.slug === user()?.slug)
@@ -121,7 +123,7 @@ export const FullArticle = (props: Props) => {
     if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
       scrollToComments()
       changeSearchParam({
-        scrollTo: null
+        scrollTo: null,
       })
     }
   })
@@ -129,7 +131,7 @@ export const FullArticle = (props: Props) => {
   createEffect(() => {
     if (searchParams().commentId && isReactionsLoaded()) {
       const commentElement = document.querySelector<HTMLElement>(
-        `[id='comment_${searchParams().commentId}']`
+        `[id='comment_${searchParams().commentId}']`,
       )
 
       changeSearchParam({ commentId: null })
@@ -141,12 +143,12 @@ export const FullArticle = (props: Props) => {
   })
 
   const {
-    actions: { loadReactionsBy }
+    actions: { loadReactionsBy },
   } = useReactions()
 
   onMount(async () => {
     await loadReactionsBy({
-      by: { shout: props.article.slug }
+      by: { shout: props.article.slug },
     })
 
     setIsReactionsLoaded(true)
@@ -165,7 +167,7 @@ export const FullArticle = (props: Props) => {
     }
 
     const tooltipElements: NodeListOf<HTMLElement> = document.querySelectorAll(
-      '[data-toggle="tooltip"], footnote'
+      '[data-toggle="tooltip"], footnote',
     )
     if (!tooltipElements) {
       return
@@ -190,19 +192,19 @@ export const FullArticle = (props: Props) => {
         modifiers: [
           {
             name: 'eventListeners',
-            options: { scroll: false }
+            options: { scroll: false },
           },
           {
             name: 'offset',
             options: {
-              offset: [0, 8]
-            }
+              offset: [0, 8],
+            },
           },
           {
             name: 'flip',
-            options: { fallbackPlacements: ['top'] }
-          }
-        ]
+            options: { fallbackPlacements: ['top'] },
+          },
+        ],
       })
 
       tooltip.style.visibility = 'hidden'
diff --git a/src/components/Article/SharePopup.tsx b/src/components/Article/SharePopup.tsx
index d4da06e5..1393b176 100644
--- a/src/components/Article/SharePopup.tsx
+++ b/src/components/Article/SharePopup.tsx
@@ -1,12 +1,14 @@
-import { Icon } from '../_shared/Icon'
+import type { PopupProps } from '../_shared/Popup'
 
 import { createSocialShare, TWITTER, VK, FACEBOOK, TELEGRAM } from '@solid-primitives/share'
-import styles from '../_shared/Popup/Popup.module.scss'
-import type { PopupProps } from '../_shared/Popup'
-import { Popup } from '../_shared/Popup'
-import { useLocalize } from '../../context/localize'
 import { createEffect, createSignal } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
 import { useSnackbar } from '../../context/snackbar'
+import { Icon } from '../_shared/Icon'
+import { Popup } from '../_shared/Popup'
+
+import styles from '../_shared/Popup/Popup.module.scss'
 
 type SharePopupProps = {
   title: string
@@ -26,7 +28,7 @@ export const SharePopup = (props: SharePopupProps) => {
   const { t } = useLocalize()
   const [isVisible, setIsVisible] = createSignal(false)
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   createEffect(() => {
@@ -38,7 +40,7 @@ export const SharePopup = (props: SharePopupProps) => {
   const [share] = createSocialShare(() => ({
     title: props.title,
     url: props.shareUrl,
-    description: props.description
+    description: props.description,
   }))
 
   const copyLink = async () => {
diff --git a/src/components/Article/ShoutRatingControl.tsx b/src/components/Article/ShoutRatingControl.tsx
index c7b4c6f9..0f592c2b 100644
--- a/src/components/Article/ShoutRatingControl.tsx
+++ b/src/components/Article/ShoutRatingControl.tsx
@@ -1,13 +1,15 @@
 import { clsx } from 'clsx'
 import { createMemo, Show } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
+import { useReactions } from '../../context/reactions'
+import { useSession } from '../../context/session'
 import { ReactionKind, Shout } from '../../graphql/types.gen'
 import { loadShout } from '../../stores/zine/articles'
-import { useSession } from '../../context/session'
-import { useReactions } from '../../context/reactions'
+import { Icon } from '../_shared/Icon'
 import { Popup } from '../_shared/Popup'
 import { VotersList } from '../_shared/VotersList'
-import { useLocalize } from '../../context/localize'
-import { Icon } from '../_shared/Icon'
+
 import styles from './ShoutRatingControl.module.scss'
 
 interface ShoutRatingControlProps {
@@ -19,12 +21,12 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
   const { t } = useLocalize()
   const {
     user,
-    actions: { requireAuthentication }
+    actions: { requireAuthentication },
   } = useSession()
 
   const {
     reactionEntities,
-    actions: { createReaction, deleteReaction, loadReactionsBy }
+    actions: { createReaction, deleteReaction, loadReactionsBy },
   } = useReactions()
 
   const checkReaction = (reactionKind: ReactionKind) =>
@@ -33,7 +35,7 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
         r.kind === reactionKind &&
         r.createdBy.slug === user()?.slug &&
         r.shout.id === props.shout.id &&
-        !r.replyTo
+        !r.replyTo,
     )
 
   const isUpvoted = createMemo(() => checkReaction(ReactionKind.Like))
@@ -45,8 +47,8 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
       (r) =>
         [ReactionKind.Like, ReactionKind.Dislike].includes(r.kind) &&
         r.shout.id === props.shout.id &&
-        !r.replyTo
-    )
+        !r.replyTo,
+    ),
   )
 
   const deleteShoutReaction = async (reactionKind: ReactionKind) => {
@@ -55,7 +57,7 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
         r.kind === reactionKind &&
         r.createdBy.slug === user()?.slug &&
         r.shout.id === props.shout.id &&
-        !r.replyTo
+        !r.replyTo,
     )
     return deleteReaction(reactionToDelete.id)
   }
@@ -69,13 +71,13 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
       } else {
         await createReaction({
           kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike,
-          shout: props.shout.id
+          shout: props.shout.id,
         })
       }
 
       loadShout(props.shout.slug)
       loadReactionsBy({
-        by: { shout: props.shout.slug }
+        by: { shout: props.shout.slug },
       })
     }, 'vote')
   }
diff --git a/src/components/AuthGuard/AuthGuard.tsx b/src/components/AuthGuard/AuthGuard.tsx
index c9d50c20..c7b0c442 100644
--- a/src/components/AuthGuard/AuthGuard.tsx
+++ b/src/components/AuthGuard/AuthGuard.tsx
@@ -1,8 +1,9 @@
 import { createEffect, JSX, Show } from 'solid-js'
+
 import { useSession } from '../../context/session'
-import { hideModal } from '../../stores/ui'
-import { useRouter } from '../../stores/router'
 import { RootSearchParams } from '../../pages/types'
+import { useRouter } from '../../stores/router'
+import { hideModal } from '../../stores/ui'
 import { AuthModalSearchParams } from '../Nav/AuthModal/types'
 
 type Props = {
@@ -25,9 +26,9 @@ export const AuthGuard = (props: Props) => {
         changeSearchParam(
           {
             source: 'authguard',
-            modal: 'auth'
+            modal: 'auth',
           },
-          true
+          true,
         )
       }
     }
diff --git a/src/components/Author/AhtorLink/AuthorLink.tsx b/src/components/Author/AhtorLink/AuthorLink.tsx
index ddc10cf4..9c6009de 100644
--- a/src/components/Author/AhtorLink/AuthorLink.tsx
+++ b/src/components/Author/AhtorLink/AuthorLink.tsx
@@ -1,8 +1,10 @@
 import { clsx } from 'clsx'
-import styles from './AhtorLink.module.scss'
+
 import { Author } from '../../../graphql/types.gen'
 import { Userpic } from '../Userpic'
 
+import styles from './AhtorLink.module.scss'
+
 type Props = {
   author: Author
   size?: 'XS' | 'M' | 'L'
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index 910d2a68..9ab3f66b 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -1,17 +1,19 @@
+import { openPage } from '@nanostores/router'
 import { clsx } from 'clsx'
+import { createMemo, createSignal, Match, Show, Switch } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { Author, FollowingEntity } from '../../../graphql/types.gen'
+import { router, useRouter } from '../../../stores/router'
+import { follow, unfollow } from '../../../stores/zine/common'
+import { Button } from '../../_shared/Button'
+import { CheckButton } from '../../_shared/CheckButton'
+import { Icon } from '../../_shared/Icon'
+import { Userpic } from '../Userpic'
+
 import styles from './AuthorBadge.module.scss'
 import stylesButton from '../../_shared/Button/Button.module.scss'
-import { Userpic } from '../Userpic'
-import { Author, FollowingEntity } from '../../../graphql/types.gen'
-import { createMemo, createSignal, Match, Show, Switch } from 'solid-js'
-import { useLocalize } from '../../../context/localize'
-import { Button } from '../../_shared/Button'
-import { useSession } from '../../../context/session'
-import { follow, unfollow } from '../../../stores/zine/common'
-import { CheckButton } from '../../_shared/CheckButton'
-import { openPage } from '@nanostores/router'
-import { router, useRouter } from '../../../stores/router'
-import { Icon } from '../../_shared/Icon'
 
 type Props = {
   author: Author
@@ -25,12 +27,12 @@ export const AuthorBadge = (props: Props) => {
   const {
     session,
     subscriptions,
-    actions: { loadSubscriptions, requireAuthentication }
+    actions: { loadSubscriptions, requireAuthentication },
   } = useSession()
   const { changeSearchParam } = useRouter()
   const { t, formatDate } = useLocalize()
   const subscribed = createMemo(() =>
-    subscriptions().authors.some((author) => author.slug === props.author.slug)
+    subscriptions().authors.some((author) => author.slug === props.author.slug),
   )
 
   const subscribe = async (really = true) => {
@@ -53,7 +55,7 @@ export const AuthorBadge = (props: Props) => {
     requireAuthentication(() => {
       openPage(router, `inbox`)
       changeSearchParam({
-        initChat: props.author.id.toString()
+        initChat: props.author.id.toString(),
       })
     }, 'discussions')
   }
@@ -126,7 +128,7 @@ export const AuthorBadge = (props: Props) => {
                   isSubscribeButton={true}
                   class={clsx(styles.actionButton, {
                     [styles.iconed]: props.iconButtons,
-                    [stylesButton.subscribed]: subscribed()
+                    [stylesButton.subscribed]: subscribed(),
                   })}
                 />
               }
@@ -151,7 +153,7 @@ export const AuthorBadge = (props: Props) => {
                 isSubscribeButton={true}
                 class={clsx(styles.actionButton, {
                   [styles.iconed]: props.iconButtons,
-                  [stylesButton.subscribed]: subscribed()
+                  [stylesButton.subscribed]: subscribed(),
                 })}
               />
             </Show>
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 62c7856b..e38ef986 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -1,22 +1,25 @@
 import type { Author } from '../../../graphql/types.gen'
-import { Userpic } from '../Userpic'
-import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
-import { translit } from '../../../utils/ru2en'
-import { follow, unfollow } from '../../../stores/zine/common'
-import { clsx } from 'clsx'
-import { useSession } from '../../../context/session'
-import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
-import { FollowingEntity, Topic } from '../../../graphql/types.gen'
-import { router, useRouter } from '../../../stores/router'
+
 import { openPage, redirectPage } from '@nanostores/router'
+import { clsx } from 'clsx'
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
-import { Modal } from '../../Nav/Modal'
+import { useSession } from '../../../context/session'
+import { FollowingEntity, Topic } from '../../../graphql/types.gen'
 import { SubscriptionFilter } from '../../../pages/types'
+import { router, useRouter } from '../../../stores/router'
+import { follow, unfollow } from '../../../stores/zine/common'
 import { isAuthor } from '../../../utils/isAuthor'
-import { AuthorBadge } from '../AuthorBadge'
-import { TopicBadge } from '../../Topic/TopicBadge'
+import { translit } from '../../../utils/ru2en'
 import { Button } from '../../_shared/Button'
+import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
 import { getShareUrl, SharePopup } from '../../Article/SharePopup'
+import { Modal } from '../../Nav/Modal'
+import { TopicBadge } from '../../Topic/TopicBadge'
+import { AuthorBadge } from '../AuthorBadge'
+import { Userpic } from '../Userpic'
+
 import styles from './AuthorCard.module.scss'
 import stylesButton from '../../_shared/Button/Button.module.scss'
 
@@ -32,7 +35,7 @@ export const AuthorCard = (props: Props) => {
     session,
     subscriptions,
     isSessionLoaded,
-    actions: { loadSubscriptions, requireAuthentication }
+    actions: { loadSubscriptions, requireAuthentication },
   } = useSession()
 
   const [isSubscribing, setIsSubscribing] = createSignal(false)
@@ -40,7 +43,7 @@ export const AuthorCard = (props: Props) => {
   const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
 
   const subscribed = createMemo<boolean>(() =>
-    subscriptions().authors.some((author) => author.slug === props.author.slug)
+    subscriptions().authors.some((author) => author.slug === props.author.slug),
   )
 
   const subscribe = async (really = true) => {
@@ -74,7 +77,7 @@ export const AuthorCard = (props: Props) => {
     requireAuthentication(() => {
       openPage(router, `inbox`)
       changeSearchParam({
-        initChat: props.author.id.toString()
+        initChat: props.author.id.toString(),
       })
     }, 'discussions')
   }
@@ -218,7 +221,7 @@ export const AuthorCard = (props: Props) => {
                     value={followButtonText()}
                     isSubscribeButton={true}
                     class={clsx({
-                      [stylesButton.subscribed]: subscribed()
+                      [stylesButton.subscribed]: subscribed(),
                     })}
                   />
                   <Button
diff --git a/src/components/Author/AuthorRatingControl.tsx b/src/components/Author/AuthorRatingControl.tsx
index c664c1be..2f4387c1 100644
--- a/src/components/Author/AuthorRatingControl.tsx
+++ b/src/components/Author/AuthorRatingControl.tsx
@@ -1,7 +1,9 @@
-import styles from './AuthorRatingControl.module.scss'
-import { clsx } from 'clsx'
 import type { Author } from '../../graphql/types.gen'
 
+import { clsx } from 'clsx'
+
+import styles from './AuthorRatingControl.module.scss'
+
 interface AuthorRatingControlProps {
   author: Author
   class?: string
@@ -20,7 +22,7 @@ export const AuthorRatingControl = (props: AuthorRatingControlProps) => {
     <div
       class={clsx(styles.rating, props.class, {
         [styles.isUpvoted]: isUpvoted,
-        [styles.isDownvoted]: isDownvoted
+        [styles.isDownvoted]: isDownvoted,
       })}
     >
       <button
diff --git a/src/components/Author/Userpic/Userpic.tsx b/src/components/Author/Userpic/Userpic.tsx
index c9ccfea2..d4f60340 100644
--- a/src/components/Author/Userpic/Userpic.tsx
+++ b/src/components/Author/Userpic/Userpic.tsx
@@ -1,9 +1,11 @@
-import { createMemo, Show } from 'solid-js'
-import styles from './Userpic.module.scss'
 import { clsx } from 'clsx'
+import { createMemo, Show } from 'solid-js'
+
 import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
-import { Loading } from '../../_shared/Loading'
 import { Image } from '../../_shared/Image'
+import { Loading } from '../../_shared/Loading'
+
+import styles from './Userpic.module.scss'
 
 type Props = {
   name: string
@@ -46,7 +48,7 @@ export const Userpic = (props: Props) => {
   return (
     <div
       class={clsx(styles.Userpic, props.class, styles[props.size ?? 'M'], {
-        ['cursorPointer']: props.onClick
+        ['cursorPointer']: props.onClick,
       })}
       onClick={props.onClick}
     >
diff --git a/src/components/Discours/Banner.tsx b/src/components/Discours/Banner.tsx
index f13bc3cc..9559707b 100644
--- a/src/components/Discours/Banner.tsx
+++ b/src/components/Discours/Banner.tsx
@@ -1,8 +1,9 @@
-import styles from './Banner.module.scss'
-
-import { showModal } from '../../stores/ui'
 import { clsx } from 'clsx'
+
 import { useLocalize } from '../../context/localize'
+import { showModal } from '../../stores/ui'
+
+import styles from './Banner.module.scss'
 
 export default () => {
   const { t } = useLocalize()
diff --git a/src/components/Discours/Donate.tsx b/src/components/Discours/Donate.tsx
index 08b92b14..71ab5dd7 100644
--- a/src/components/Discours/Donate.tsx
+++ b/src/components/Discours/Donate.tsx
@@ -1,8 +1,9 @@
 import '../../styles/help.scss'
 import { createSignal, onMount } from 'solid-js'
-import { showModal } from '../../stores/ui'
+
 import { useLocalize } from '../../context/localize'
 import { useSnackbar } from '../../context/snackbar'
+import { showModal } from '../../stores/ui'
 
 export const Donate = () => {
   const { t } = useLocalize()
@@ -11,7 +12,7 @@ export const Donate = () => {
   const cpOptions = {
     publicId: 'pk_0a37bab30ffc6b77b2f93d65f2aed',
     description: t('Help discours to grow'),
-    currency: 'RUB'
+    currency: 'RUB',
   }
 
   let amountSwitchElement: HTMLDivElement | undefined
@@ -22,13 +23,13 @@ export const Donate = () => {
   const [period, setPeriod] = createSignal(monthly)
   const [amount, setAmount] = createSignal(0)
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const initiated = () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const {
-      cp: { CloudPayments }
+      cp: { CloudPayments },
     } = window as any // Checkout(cpOptions)
     setWidget(new CloudPayments())
     console.log('[donate] payments initiated')
@@ -42,8 +43,8 @@ export const Donate = () => {
           amount: amount() || 0, //сумма
           vat: 20, //ставка НДС
           method: 0, // тег-1214 признак способа расчета - признак способа расчета
-          object: 0 // тег-1212 признак предмета расчета - признак предмета товара, работы, услуги, платежа, выплаты, иного предмета расчета
-        }
+          object: 0, // тег-1212 признак предмета расчета - признак предмета товара, работы, услуги, платежа, выплаты, иного предмета расчета
+        },
       ],
       // taxationSystem: 0, //система налогообложения; необязательный, если у вас одна система налогообложения
       // email: 'user@example.com', //e-mail покупателя, если нужно отправить письмо с чеком
@@ -53,8 +54,8 @@ export const Donate = () => {
         electronic: amount(), // Сумма оплаты электронными деньгами
         advancePayment: 0, // Сумма из предоплаты (зачетом аванса) (2 знака после запятой)
         credit: 0, // Сумма постоплатой(в кредит) (2 знака после запятой)
-        provision: 0 // Сумма оплаты встречным предоставлением (сертификаты, др. мат.ценности) (2 знака после запятой)
-      }
+        provision: 0, // Сумма оплаты встречным предоставлением (сертификаты, др. мат.ценности) (2 знака после запятой)
+      },
     })
   }
 
@@ -93,10 +94,10 @@ export const Donate = () => {
             recurrent: {
               interval: period(), // local solid's signal
               period: 1, // internal widget's
-              CustomerReciept: customerReciept() // чек для регулярных платежей
-            }
-          }
-        }
+              CustomerReciept: customerReciept(), // чек для регулярных платежей
+            },
+          },
+        },
       },
       (opts) => {
         // success
@@ -111,9 +112,9 @@ export const Donate = () => {
 
         showSnackbar({
           type: 'error',
-          body: reason
+          body: reason,
         })
-      }
+      },
     )
   }
 
diff --git a/src/components/Discours/Feedback.tsx b/src/components/Discours/Feedback.tsx
index 809bfd9f..243b645c 100644
--- a/src/components/Discours/Feedback.tsx
+++ b/src/components/Discours/Feedback.tsx
@@ -1,5 +1,5 @@
-import { hideModal } from '../../stores/ui'
 import { useLocalize } from '../../context/localize'
+import { hideModal } from '../../stores/ui'
 import { Button } from '../_shared/Button'
 
 export const Feedback = () => {
@@ -14,9 +14,9 @@ export const Feedback = () => {
       method,
       headers: {
         accept: 'application/json',
-        'content-type': 'application/json; charset=utf-8'
+        'content-type': 'application/json; charset=utf-8',
       },
-      body: JSON.stringify({ contact: contactElement?.value, message: msgElement?.textContent })
+      body: JSON.stringify({ contact: contactElement?.value, message: msgElement?.textContent }),
     })
     hideModal()
   }
diff --git a/src/components/Discours/Footer.tsx b/src/components/Discours/Footer.tsx
index 08328ff5..035e650a 100644
--- a/src/components/Discours/Footer.tsx
+++ b/src/components/Discours/Footer.tsx
@@ -1,10 +1,11 @@
+import { clsx } from 'clsx'
 import { createMemo, For } from 'solid-js'
-import styles from './Footer.module.scss'
+
+import { useLocalize } from '../../context/localize'
 import { Icon } from '../_shared/Icon'
 import { Subscribe } from '../_shared/Subscribe'
 
-import { clsx } from 'clsx'
-import { useLocalize } from '../../context/localize'
+import styles from './Footer.module.scss'
 
 export const Footer = () => {
   const { t, lang } = useLocalize()
@@ -17,25 +18,25 @@ export const Footer = () => {
       items: [
         {
           title: 'Manifest',
-          slug: '/about/manifest'
+          slug: '/about/manifest',
         },
         {
           title: 'How it works',
-          slug: '/about/guide'
+          slug: '/about/guide',
         },
         {
           title: 'Dogma',
-          slug: '/about/dogma'
+          slug: '/about/dogma',
         },
         {
           title: 'Principles',
-          slug: '/about/principles'
+          slug: '/about/principles',
         },
         {
           title: 'How to write an article',
-          slug: '/how-to-write-a-good-article'
-        }
-      ]
+          slug: '/how-to-write-a-good-article',
+        },
+      ],
     },
 
     {
@@ -43,25 +44,25 @@ export const Footer = () => {
       items: [
         {
           title: 'Suggest an idea',
-          slug: '/connect'
+          slug: '/connect',
         },
         {
           title: 'Become an author',
-          slug: '/create'
+          slug: '/create',
         },
         {
           title: 'Support us',
-          slug: '/about/help'
+          slug: '/about/help',
         },
         {
           title: 'Feedback',
-          slug: '/#feedback'
+          slug: '/#feedback',
         },
         {
           title: 'Work with us',
-          slug: 'https://docs.google.com/forms/d/e/1FAIpQLSeNNvIzKlXElJtkPkYiXl-jQjlvsL9u4-kpnoRjz1O8Wo40xQ/viewform'
-        }
-      ]
+          slug: 'https://docs.google.com/forms/d/e/1FAIpQLSeNNvIzKlXElJtkPkYiXl-jQjlvsL9u4-kpnoRjz1O8Wo40xQ/viewform',
+        },
+      ],
     },
 
     {
@@ -69,46 +70,46 @@ export const Footer = () => {
       items: [
         {
           title: 'Authors',
-          slug: '/authors'
+          slug: '/authors',
         },
         {
           title: 'Communities',
-          slug: '/community'
+          slug: '/community',
         },
         {
           title: 'Partners',
-          slug: '/about/partners'
+          slug: '/about/partners',
         },
         {
           title: 'Special projects',
-          slug: '/about/projects'
+          slug: '/about/projects',
         },
         {
           title: changeLangTitle(),
           slug: changeLangLink(),
-          rel: 'external'
-        }
-      ]
-    }
+          rel: 'external',
+        },
+      ],
+    },
   ])
 
   const SOCIAL = [
     {
       name: 'facebook',
-      href: 'https://facebook.com/discoursio'
+      href: 'https://facebook.com/discoursio',
     },
     {
       name: 'vk',
-      href: 'https://vk.com/discoursio'
+      href: 'https://vk.com/discoursio',
     },
     {
       name: 'twitter',
-      href: 'https://twitter.com/discours_io'
+      href: 'https://twitter.com/discours_io',
     },
     {
       name: 'telegram',
-      href: 'https://t.me/discoursio'
-    }
+      href: 'https://t.me/discoursio',
+    },
   ]
   return (
     <footer class={styles.discoursFooter}>
@@ -143,7 +144,7 @@ export const Footer = () => {
         <div class={clsx(styles.footerCopyright, 'row')}>
           <div class="col-md-18 col-lg-20">
             {t(
-              'Independant magazine with an open horizontal cooperation about culture, science and society'
+              'Independant magazine with an open horizontal cooperation about culture, science and society',
             )}
             . {t('Discours')} &copy; 2015&ndash;{new Date().getFullYear()}{' '}
             <a href="/about/terms-of-use">{t('Terms of use')}</a>
diff --git a/src/components/Discours/Hero.tsx b/src/components/Discours/Hero.tsx
index 9a1425af..27be6cc3 100644
--- a/src/components/Discours/Hero.tsx
+++ b/src/components/Discours/Hero.tsx
@@ -1,10 +1,10 @@
-import styles from './Hero.module.scss'
-
-import { showModal } from '../../stores/ui'
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
+import { showModal } from '../../stores/ui'
 import { AuthModalSearchParams } from '../Nav/AuthModal/types'
 
+import styles from './Hero.module.scss'
+
 export default () => {
   const { t } = useLocalize()
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
@@ -17,7 +17,7 @@ export default () => {
             <h4 innerHTML={t('Horizontal collaborative journalistic platform')} />
             <p
               innerHTML={t(
-                'Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects'
+                'Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects',
               )}
             />
             <div class={styles.aboutDiscoursActions}>
@@ -29,7 +29,7 @@ export default () => {
                 onClick={() => {
                   showModal('auth')
                   changeSearchParam({
-                    mode: 'register'
+                    mode: 'register',
                   })
                 }}
               >
diff --git a/src/components/Draft/Draft.tsx b/src/components/Draft/Draft.tsx
index 32d6edcb..a4c843a9 100644
--- a/src/components/Draft/Draft.tsx
+++ b/src/components/Draft/Draft.tsx
@@ -1,12 +1,15 @@
-import { clsx } from 'clsx'
-import styles from './Draft.module.scss'
 import type { Shout } from '../../graphql/types.gen'
-import { Icon } from '../_shared/Icon'
-import { useLocalize } from '../../context/localize'
-import { useConfirm } from '../../context/confirm'
-import { useSnackbar } from '../../context/snackbar'
+
 import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
+
+import { useConfirm } from '../../context/confirm'
+import { useLocalize } from '../../context/localize'
+import { useSnackbar } from '../../context/snackbar'
 import { router } from '../../stores/router'
+import { Icon } from '../_shared/Icon'
+
+import styles from './Draft.module.scss'
 
 type Props = {
   class?: string
@@ -18,11 +21,11 @@ type Props = {
 export const Draft = (props: Props) => {
   const { t, formatDate } = useLocalize()
   const {
-    actions: { showConfirm }
+    actions: { showConfirm },
   } = useConfirm()
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const handlePublishLinkClick = (e) => {
@@ -37,7 +40,7 @@ export const Draft = (props: Props) => {
       confirmBody: t('Are you sure you want to delete this draft?'),
       confirmButtonLabel: t('Delete'),
       confirmButtonVariant: 'danger',
-      declineButtonVariant: 'primary'
+      declineButtonVariant: 'primary',
     })
     if (isConfirmed) {
       props.onDelete(props.shout)
diff --git a/src/components/Editor/AudioUploader/AudioUploader.tsx b/src/components/Editor/AudioUploader/AudioUploader.tsx
index b7a136c0..ef8fced2 100644
--- a/src/components/Editor/AudioUploader/AudioUploader.tsx
+++ b/src/components/Editor/AudioUploader/AudioUploader.tsx
@@ -1,12 +1,15 @@
+import { Buffer } from 'buffer'
+
 import { clsx } from 'clsx'
-import styles from './AudioUploader.module.scss'
-import { DropArea } from '../../_shared/DropArea'
-import { useLocalize } from '../../../context/localize'
 import { Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
 import { MediaItem } from '../../../pages/types'
 import { composeMediaItems } from '../../../utils/composeMediaItems'
+import { DropArea } from '../../_shared/DropArea'
 import { AudioPlayer } from '../../Article/AudioPlayer'
-import { Buffer } from 'buffer'
+
+import styles from './AudioUploader.module.scss'
 
 window.Buffer = Buffer
 
diff --git a/src/components/Editor/AutoSaveNotice/AutoSaveNotice.tsx b/src/components/Editor/AutoSaveNotice/AutoSaveNotice.tsx
index 35669e97..956d5735 100644
--- a/src/components/Editor/AutoSaveNotice/AutoSaveNotice.tsx
+++ b/src/components/Editor/AutoSaveNotice/AutoSaveNotice.tsx
@@ -1,7 +1,9 @@
 import { clsx } from 'clsx'
-import styles from './AutoSaveNotice.module.scss'
-import { Loading } from '../../_shared/Loading'
+
 import { useLocalize } from '../../../context/localize'
+import { Loading } from '../../_shared/Loading'
+
+import styles from './AutoSaveNotice.module.scss'
 
 type Props = {
   active: boolean
diff --git a/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx b/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx
index d1cbf278..a8e9e3a3 100644
--- a/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx
+++ b/src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx
@@ -1,9 +1,11 @@
 import type { Editor } from '@tiptap/core'
-import styles from './BubbleMenu.module.scss'
-import { Icon } from '../../_shared/Icon'
+
 import { useLocalize } from '../../../context/localize'
+import { Icon } from '../../_shared/Icon'
 import { Popover } from '../../_shared/Popover'
 
+import styles from './BubbleMenu.module.scss'
+
 type Props = {
   editor: Editor
   ref: (el: HTMLElement) => void
diff --git a/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx b/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx
index 70a48ee3..d8b3e69d 100644
--- a/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx
+++ b/src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx
@@ -1,12 +1,14 @@
 import type { Editor } from '@tiptap/core'
-import styles from './BubbleMenu.module.scss'
-import { Icon } from '../../_shared/Icon'
+
 import { useLocalize } from '../../../context/localize'
-import { Popover } from '../../_shared/Popover'
-import { UploadModalContent } from '../UploadModalContent'
-import { Modal } from '../../Nav/Modal'
 import { UploadedFile } from '../../../pages/types'
 import { renderUploadedImage } from '../../../utils/renderUploadedImage'
+import { Icon } from '../../_shared/Icon'
+import { Popover } from '../../_shared/Popover'
+import { Modal } from '../../Nav/Modal'
+import { UploadModalContent } from '../UploadModalContent'
+
+import styles from './BubbleMenu.module.scss'
 
 type Props = {
   editor: Editor
diff --git a/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx b/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx
index 6cb7550f..78feb15d 100644
--- a/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx
+++ b/src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx
@@ -1,9 +1,12 @@
-import { createSignal, Show, For } from 'solid-js'
 import type { Editor } from '@tiptap/core'
-import styles from './BubbleMenu.module.scss'
+
 import { clsx } from 'clsx'
-import { Icon } from '../../_shared/Icon'
+import { createSignal, Show, For } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
+import { Icon } from '../../_shared/Icon'
+
+import styles from './BubbleMenu.module.scss'
 
 type Props = {
   editor: Editor
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 08688273..5720c807 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -1,52 +1,56 @@
-import { createEffect, createSignal, onCleanup } from 'solid-js'
-import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
-import uniqolor from 'uniqolor'
-import * as Y from 'yjs'
 import type { Doc } from 'yjs/dist/src/utils/Doc'
+
+import { HocuspocusProvider } from '@hocuspocus/provider'
+import { isTextSelection } from '@tiptap/core'
 import { Bold } from '@tiptap/extension-bold'
 import { BubbleMenu } from '@tiptap/extension-bubble-menu'
-import { Dropcursor } from '@tiptap/extension-dropcursor'
-import { Italic } from '@tiptap/extension-italic'
-import { Strike } from '@tiptap/extension-strike'
-import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
-import { Underline } from '@tiptap/extension-underline'
-import { FloatingMenu } from '@tiptap/extension-floating-menu'
 import { BulletList } from '@tiptap/extension-bullet-list'
-import { OrderedList } from '@tiptap/extension-ordered-list'
-import { ListItem } from '@tiptap/extension-list-item'
 import { CharacterCount } from '@tiptap/extension-character-count'
-import { Placeholder } from '@tiptap/extension-placeholder'
+import { Collaboration } from '@tiptap/extension-collaboration'
+import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
+import { Document } from '@tiptap/extension-document'
+import { Dropcursor } from '@tiptap/extension-dropcursor'
+import { FloatingMenu } from '@tiptap/extension-floating-menu'
+import Focus from '@tiptap/extension-focus'
 import { Gapcursor } from '@tiptap/extension-gapcursor'
 import { HardBreak } from '@tiptap/extension-hard-break'
 import { Heading } from '@tiptap/extension-heading'
 import { Highlight } from '@tiptap/extension-highlight'
-import { Link } from '@tiptap/extension-link'
-import { Document } from '@tiptap/extension-document'
-import { Text } from '@tiptap/extension-text'
-import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
-import { isTextSelection } from '@tiptap/core'
-import { Paragraph } from '@tiptap/extension-paragraph'
-import Focus from '@tiptap/extension-focus'
-import { Collaboration } from '@tiptap/extension-collaboration'
-import { HocuspocusProvider } from '@hocuspocus/provider'
-import { CustomBlockquote } from './extensions/CustomBlockquote'
-import { Figure } from './extensions/Figure'
-import { Figcaption } from './extensions/Figcaption'
-import { Embed } from './extensions/Embed'
-import { useSession } from '../../context/session'
-import { useLocalize } from '../../context/localize'
-import { useEditorContext } from '../../context/editor'
-import { TrailingNode } from './extensions/TrailingNode'
-import Article from './extensions/Article'
-import { TextBubbleMenu } from './TextBubbleMenu'
-import { FigureBubbleMenu, BlockquoteBubbleMenu, IncutBubbleMenu } from './BubbleMenu'
-import { EditorFloatingMenu } from './EditorFloatingMenu'
-import './Prosemirror.scss'
+import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { Image } from '@tiptap/extension-image'
-import { Footnote } from './extensions/Footnote'
+import { Italic } from '@tiptap/extension-italic'
+import { Link } from '@tiptap/extension-link'
+import { ListItem } from '@tiptap/extension-list-item'
+import { OrderedList } from '@tiptap/extension-ordered-list'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { Strike } from '@tiptap/extension-strike'
+import { Text } from '@tiptap/extension-text'
+import { Underline } from '@tiptap/extension-underline'
+import { createEffect, createSignal, onCleanup } from 'solid-js'
+import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
+import uniqolor from 'uniqolor'
+import * as Y from 'yjs'
+
+import { useEditorContext } from '../../context/editor'
+import { useLocalize } from '../../context/localize'
+import { useSession } from '../../context/session'
 import { useSnackbar } from '../../context/snackbar'
 import { handleImageUpload } from '../../utils/handleImageUpload'
 
+import { FigureBubbleMenu, BlockquoteBubbleMenu, IncutBubbleMenu } from './BubbleMenu'
+import { EditorFloatingMenu } from './EditorFloatingMenu'
+import Article from './extensions/Article'
+import { CustomBlockquote } from './extensions/CustomBlockquote'
+import { Embed } from './extensions/Embed'
+import { Figcaption } from './extensions/Figcaption'
+import { Figure } from './extensions/Figure'
+import { Footnote } from './extensions/Footnote'
+import { TrailingNode } from './extensions/TrailingNode'
+import { TextBubbleMenu } from './TextBubbleMenu'
+
+import './Prosemirror.scss'
+
 type Props = {
   shoutId: number
   initialContent?: string
@@ -61,7 +65,7 @@ const allowedImageTypes = new Set([
   'image/png',
   'image/tiff',
   'image/webp',
-  'image/x-icon'
+  'image/x-icon',
 ])
 
 const yDocs: Record<string, Doc> = {}
@@ -75,7 +79,7 @@ export const Editor = (props: Props) => {
   const [shouldShowTextBubbleMenu, setShouldShowTextBubbleMenu] = createSignal(false)
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const docName = `shout-${props.shoutId}`
@@ -88,47 +92,47 @@ export const Editor = (props: Props) => {
     providers[docName] = new HocuspocusProvider({
       url: 'wss://hocuspocus.discours.io',
       name: docName,
-      document: yDocs[docName]
+      document: yDocs[docName],
     })
   }
 
   const editorElRef: {
     current: HTMLDivElement
   } = {
-    current: null
+    current: null,
   }
 
   const textBubbleMenuRef: {
     current: HTMLDivElement
   } = {
-    current: null
+    current: null,
   }
 
   const incutBubbleMenuRef: {
     current: HTMLElement
   } = {
-    current: null
+    current: null,
   }
   const figureBubbleMenuRef: {
     current: HTMLElement
   } = {
-    current: null
+    current: null,
   }
   const blockquoteBubbleMenuRef: {
     current: HTMLElement
   } = {
-    current: null
+    current: null,
   }
 
   const floatingMenuRef: {
     current: HTMLDivElement
   } = {
-    current: null
+    current: null,
   }
 
   const ImageFigure = Figure.extend({
     name: 'capturedImage',
-    content: 'figcaption image'
+    content: 'figcaption image',
   })
 
   const handleClipboardPaste = async () => {
@@ -149,7 +153,7 @@ export const Editor = (props: Props) => {
         source: blob.toString(),
         name: file.name,
         size: file.size,
-        file
+        file,
       }
 
       showSnackbar({ body: t('Uploading image') })
@@ -166,17 +170,17 @@ export const Editor = (props: Props) => {
               content: [
                 {
                   type: 'text',
-                  text: result.originalFilename
-                }
-              ]
+                  text: result.originalFilename,
+                },
+              ],
             },
             {
               type: 'image',
               attrs: {
-                src: result.url
-              }
-            }
-          ]
+                src: result.url,
+              },
+            },
+          ],
         })
         .run()
     } catch (error) {
@@ -190,7 +194,7 @@ export const Editor = (props: Props) => {
     element: editorElRef.current,
     editorProps: {
       attributes: {
-        class: 'articleEditor'
+        class: 'articleEditor',
       },
       transformPastedHTML(html) {
         return html.replaceAll(/<img.*?>/g, '')
@@ -198,7 +202,7 @@ export const Editor = (props: Props) => {
       handlePaste: () => {
         handleClipboardPaste()
         return false
-      }
+      },
     },
     extensions: [
       Document,
@@ -211,31 +215,31 @@ export const Editor = (props: Props) => {
       Strike,
       HorizontalRule.configure({
         HTMLAttributes: {
-          class: 'horizontalRule'
-        }
+          class: 'horizontalRule',
+        },
       }),
       Underline,
       Link.configure({
-        openOnClick: false
+        openOnClick: false,
       }),
       Heading.configure({
-        levels: [2, 3, 4]
+        levels: [2, 3, 4],
       }),
       BulletList,
       OrderedList,
       ListItem,
       Collaboration.configure({
-        document: yDocs[docName]
+        document: yDocs[docName],
       }),
       CollaborationCursor.configure({
         provider: providers[docName],
         user: {
           name: user().name,
-          color: uniqolor(user().slug).color
-        }
+          color: uniqolor(user().slug).color,
+        },
       }),
       Placeholder.configure({
-        placeholder: t('Add a link or click plus to embed media')
+        placeholder: t('Add a link or click plus to embed media'),
       }),
       Focus,
       Gapcursor,
@@ -243,8 +247,8 @@ export const Editor = (props: Props) => {
       Highlight.configure({
         multicolor: true,
         HTMLAttributes: {
-          class: 'highlight'
-        }
+          class: 'highlight',
+        },
       }),
       ImageFigure,
       Image,
@@ -267,8 +271,8 @@ export const Editor = (props: Props) => {
           return result
         },
         tippyOptions: {
-          sticky: true
-        }
+          sticky: true,
+        },
       }),
       BubbleMenu.configure({
         pluginKey: 'blockquoteBubbleMenu',
@@ -286,8 +290,8 @@ export const Editor = (props: Props) => {
             if (selectedElement) {
               return selectedElement.getBoundingClientRect()
             }
-          }
-        }
+          },
+        },
       }),
       BubbleMenu.configure({
         pluginKey: 'incutBubbleMenu',
@@ -305,31 +309,31 @@ export const Editor = (props: Props) => {
             if (selectedElement) {
               return selectedElement.getBoundingClientRect()
             }
-          }
-        }
+          },
+        },
       }),
       BubbleMenu.configure({
         pluginKey: 'imageBubbleMenu',
         element: figureBubbleMenuRef.current,
         shouldShow: ({ editor: e, view }) => {
           return view.hasFocus() && e.isActive('image')
-        }
+        },
       }),
       FloatingMenu.configure({
         tippyOptions: {
-          placement: 'left'
+          placement: 'left',
         },
-        element: floatingMenuRef.current
+        element: floatingMenuRef.current,
       }),
       TrailingNode,
-      Article
+      Article,
     ],
     enablePasteRules: [Link],
-    content: initialContent ?? null
+    content: initialContent ?? null,
   }))
 
   const {
-    actions: { countWords, setEditor }
+    actions: { countWords, setEditor },
   } = useEditorContext()
 
   setEditor(editor)
@@ -341,7 +345,7 @@ export const Editor = (props: Props) => {
     if (html()) {
       countWords({
         characters: editor().storage.characterCount.characters(),
-        words: editor().storage.characterCount.words()
+        words: editor().storage.characterCount.words(),
       })
     }
   })
diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
index eca9335a..de7a2e65 100644
--- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
+++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
@@ -1,17 +1,21 @@
-import { createEffect, createSignal, Show } from 'solid-js'
-import type { Editor } from '@tiptap/core'
-import { Icon } from '../../_shared/Icon'
-import { InlineForm } from '../InlineForm'
-import styles from './EditorFloatingMenu.module.scss'
-import { useLocalize } from '../../../context/localize'
-import { Modal } from '../../Nav/Modal'
-import { Menu } from './Menu'
 import type { MenuItem } from './Menu/Menu'
-import { showModal } from '../../../stores/ui'
-import { UploadModalContent } from '../UploadModalContent'
-import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
+import type { Editor } from '@tiptap/core'
+
+import { createEffect, createSignal, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
 import { UploadedFile } from '../../../pages/types'
+import { showModal } from '../../../stores/ui'
 import { renderUploadedImage } from '../../../utils/renderUploadedImage'
+import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
+import { Icon } from '../../_shared/Icon'
+import { Modal } from '../../Nav/Modal'
+import { InlineForm } from '../InlineForm'
+import { UploadModalContent } from '../UploadModalContent'
+
+import { Menu } from './Menu'
+
+import styles from './EditorFloatingMenu.module.scss'
 
 type FloatingMenuProps = {
   editor: Editor
@@ -80,7 +84,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
       if (menuOpen()) {
         setMenuOpen(false)
       }
-    }
+    },
   })
 
   const handleUpload = (image: UploadedFile) => {
diff --git a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
index f21d4048..004aad2a 100644
--- a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
+++ b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
@@ -1,7 +1,8 @@
-import styles from './Menu.module.scss'
+import { useLocalize } from '../../../../context/localize'
 import { Icon } from '../../../_shared/Icon'
 import { Popover } from '../../../_shared/Popover'
-import { useLocalize } from '../../../../context/localize'
+
+import styles from './Menu.module.scss'
 
 export type MenuItem = 'image' | 'embed' | 'horizontal-rule'
 
diff --git a/src/components/Editor/InlineForm/InlineForm.module.scss b/src/components/Editor/InlineForm/InlineForm.module.scss
index 0c24a99e..b2a458be 100644
--- a/src/components/Editor/InlineForm/InlineForm.module.scss
+++ b/src/components/Editor/InlineForm/InlineForm.module.scss
@@ -39,7 +39,9 @@
     border: 1px solid #e9e9ee;
     border-radius: 2px;
     opacity: 0;
-    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    transition:
+      height 0.3s ease-in-out,
+      opacity 0.3s ease-in-out;
 
     &.visible {
       height: 32px;
diff --git a/src/components/Editor/InlineForm/InlineForm.tsx b/src/components/Editor/InlineForm/InlineForm.tsx
index b2f59003..61c43f12 100644
--- a/src/components/Editor/InlineForm/InlineForm.tsx
+++ b/src/components/Editor/InlineForm/InlineForm.tsx
@@ -1,9 +1,11 @@
-import styles from './InlineForm.module.scss'
-import { Icon } from '../../_shared/Icon'
-import { createSignal, onMount } from 'solid-js'
 import { clsx } from 'clsx'
-import { Popover } from '../../_shared/Popover'
+import { createSignal, onMount } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
+import { Icon } from '../../_shared/Icon'
+import { Popover } from '../../_shared/Popover'
+
+import styles from './InlineForm.module.scss'
 
 type Props = {
   onClose: () => void
diff --git a/src/components/Editor/InsertLinkForm/InsertLinkForm.tsx b/src/components/Editor/InsertLinkForm/InsertLinkForm.tsx
index 957b7442..d8d259b1 100644
--- a/src/components/Editor/InsertLinkForm/InsertLinkForm.tsx
+++ b/src/components/Editor/InsertLinkForm/InsertLinkForm.tsx
@@ -1,8 +1,9 @@
 import { Editor } from '@tiptap/core'
+import { createEditorTransaction } from 'solid-tiptap'
+
+import { useLocalize } from '../../../context/localize'
 import { validateUrl } from '../../../utils/validateUrl'
 import { InlineForm } from '../InlineForm'
-import { useLocalize } from '../../../context/localize'
-import { createEditorTransaction } from 'solid-tiptap'
 
 type Props = {
   editor: Editor
@@ -24,7 +25,7 @@ export const InsertLinkForm = (props: Props) => {
     () => props.editor,
     (ed) => {
       return (ed && ed.getAttributes('link').href) || ''
-    }
+    },
   )
   const handleClearLinkForm = () => {
     if (currentUrl()) {
diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx
index 515f0019..29ea82b3 100644
--- a/src/components/Editor/Panel/Panel.tsx
+++ b/src/components/Editor/Panel/Panel.tsx
@@ -1,17 +1,19 @@
-import { clsx } from 'clsx'
-import { Button } from '../../_shared/Button'
-import { Icon } from '../../_shared/Icon'
-import { useLocalize } from '../../../context/localize'
-import styles from './Panel.module.scss'
-import { useEditorContext } from '../../../context/editor'
-import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
-import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
 import { getPagePath } from '@nanostores/router'
-import { router } from '../../../stores/router'
+import { clsx } from 'clsx'
+import { createSignal, Show } from 'solid-js'
 import { useEditorHTML } from 'solid-tiptap'
 import Typograf from 'typograf'
-import { createSignal, Show } from 'solid-js'
+
+import { useEditorContext } from '../../../context/editor'
+import { useLocalize } from '../../../context/localize'
+import { router } from '../../../stores/router'
+import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
+import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
+import { Button } from '../../_shared/Button'
 import { DarkModeToggle } from '../../_shared/DarkModeToggle'
+import { Icon } from '../../_shared/Icon'
+
+import styles from './Panel.module.scss'
 
 const typograf = new Typograf({ locale: ['ru', 'en-US'] })
 
@@ -26,11 +28,11 @@ export const Panel = (props: Props) => {
     wordCounter,
     editorRef,
     form,
-    actions: { toggleEditorPanel, saveShout, publishShout }
+    actions: { toggleEditorPanel, saveShout, publishShout },
   } = useEditorContext()
 
   const containerRef: { current: HTMLElement } = {
-    current: null
+    current: null,
   }
 
   const [isShortcutsVisible, setIsShortcutsVisible] = createSignal(false)
@@ -39,7 +41,7 @@ export const Panel = (props: Props) => {
   useOutsideClickHandler({
     containerRef,
     predicate: () => isEditorPanelVisible(),
-    handler: () => toggleEditorPanel()
+    handler: () => toggleEditorPanel(),
   })
 
   useEscKeyDownHandler(() => {
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index 2e29f7d4..c2a5c988 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -1,3 +1,15 @@
+import { Blockquote } from '@tiptap/extension-blockquote'
+import { Bold } from '@tiptap/extension-bold'
+import { BubbleMenu } from '@tiptap/extension-bubble-menu'
+import { CharacterCount } from '@tiptap/extension-character-count'
+import { Document } from '@tiptap/extension-document'
+import { Image } from '@tiptap/extension-image'
+import { Italic } from '@tiptap/extension-italic'
+import { Link } from '@tiptap/extension-link'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { Text } from '@tiptap/extension-text'
+import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import {
@@ -5,34 +17,25 @@ import {
   createTiptapEditor,
   useEditorHTML,
   useEditorIsEmpty,
-  useEditorIsFocused
+  useEditorIsFocused,
 } from 'solid-tiptap'
+
 import { useEditorContext } from '../../context/editor'
-import { Document } from '@tiptap/extension-document'
-import { Text } from '@tiptap/extension-text'
-import { Paragraph } from '@tiptap/extension-paragraph'
-import { Bold } from '@tiptap/extension-bold'
-import { Button } from '../_shared/Button'
 import { useLocalize } from '../../context/localize'
+import { UploadedFile } from '../../pages/types'
+import { hideModal, showModal } from '../../stores/ui'
+import { Button } from '../_shared/Button'
 import { Icon } from '../_shared/Icon'
 import { Popover } from '../_shared/Popover'
-import { Italic } from '@tiptap/extension-italic'
 import { Modal } from '../Nav/Modal'
-import { hideModal, showModal } from '../../stores/ui'
-import { Blockquote } from '@tiptap/extension-blockquote'
-import { UploadModalContent } from './UploadModalContent'
-import { clsx } from 'clsx'
-import styles from './SimplifiedEditor.module.scss'
-import { Placeholder } from '@tiptap/extension-placeholder'
-import { InsertLinkForm } from './InsertLinkForm'
-import { Link } from '@tiptap/extension-link'
-import { UploadedFile } from '../../pages/types'
-import { Figure } from './extensions/Figure'
-import { Image } from '@tiptap/extension-image'
+
 import { Figcaption } from './extensions/Figcaption'
+import { Figure } from './extensions/Figure'
+import { InsertLinkForm } from './InsertLinkForm'
 import { TextBubbleMenu } from './TextBubbleMenu'
-import { BubbleMenu } from '@tiptap/extension-bubble-menu'
-import { CharacterCount } from '@tiptap/extension-character-count'
+import { UploadModalContent } from './UploadModalContent'
+
+import styles from './SimplifiedEditor.module.scss'
 
 type Props = {
   placeholder: string
@@ -66,28 +69,28 @@ const SimplifiedEditor = (props: Props) => {
   const wrapperEditorElRef: {
     current: HTMLElement
   } = {
-    current: null
+    current: null,
   }
 
   const editorElRef: {
     current: HTMLElement
   } = {
-    current: null
+    current: null,
   }
 
   const textBubbleMenuRef: {
     current: HTMLDivElement
   } = {
-    current: null
+    current: null,
   }
 
   const {
-    actions: { setEditor }
+    actions: { setEditor },
   } = useEditorContext()
 
   const ImageFigure = Figure.extend({
     name: 'capturedImage',
-    content: 'figcaption image'
+    content: 'figcaption image',
   })
 
   const content = props.initialContent
@@ -95,8 +98,8 @@ const SimplifiedEditor = (props: Props) => {
     element: editorElRef.current,
     editorProps: {
       attributes: {
-        class: styles.simplifiedEditorField
-      }
+        class: styles.simplifiedEditorField,
+      },
     },
     extensions: [
       Document,
@@ -105,16 +108,16 @@ const SimplifiedEditor = (props: Props) => {
       Bold,
       Italic,
       Link.configure({
-        openOnClick: false
+        openOnClick: false,
       }),
 
       CharacterCount.configure({
-        limit: MAX_DESCRIPTION_LIMIT
+        limit: MAX_DESCRIPTION_LIMIT,
       }),
       Blockquote.configure({
         HTMLAttributes: {
-          class: styles.blockQuote
-        }
+          class: styles.blockQuote,
+        },
       }),
       BubbleMenu.configure({
         pluginKey: 'textBubbleMenu',
@@ -124,18 +127,18 @@ const SimplifiedEditor = (props: Props) => {
           const { selection } = state
           const { empty } = selection
           return view.hasFocus() && !empty
-        }
+        },
       }),
       ImageFigure,
       Image,
       Figcaption,
       Placeholder.configure({
         emptyNodeClass: styles.emptyNode,
-        placeholder: props.placeholder
-      })
+        placeholder: props.placeholder,
+      }),
     ],
     autofocus: props.autoFocus,
-    content: content ?? null
+    content: content ?? null,
   }))
 
   setEditor(editor)
@@ -147,7 +150,7 @@ const SimplifiedEditor = (props: Props) => {
       () => editor(),
       (ed) => {
         return ed && ed.isActive(name)
-      }
+      },
     )
 
   const html = useEditorHTML(() => editor())
@@ -168,17 +171,17 @@ const SimplifiedEditor = (props: Props) => {
             content: [
               {
                 type: 'text',
-                text: image.originalFilename
-              }
-            ]
+                text: image.originalFilename,
+              },
+            ],
           },
           {
             type: 'image',
             attrs: {
-              src: image.url
-            }
-          }
-        ]
+              src: image.url,
+            },
+          },
+        ],
       })
       .run()
     hideModal()
@@ -238,7 +241,7 @@ const SimplifiedEditor = (props: Props) => {
 
   const maxHeightStyle = {
     overflow: 'auto',
-    'max-height': `${props.maxHeight}px`
+    'max-height': `${props.maxHeight}px`,
   }
 
   return (
@@ -249,7 +252,7 @@ const SimplifiedEditor = (props: Props) => {
         [styles.minimal]: props.variant === 'minimal',
         [styles.bordered]: props.variant === 'bordered',
         [styles.isFocused]: isFocused() || !isEmpty(),
-        [styles.labelVisible]: props.label && counter() > 0
+        [styles.labelVisible]: props.label && counter() > 0,
       })}
     >
       <Show when={props.maxLength && editor()}>
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
index 821f1897..246bc944 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
+++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
@@ -1,14 +1,17 @@
-import { Switch, Match, createSignal, Show, onMount, onCleanup, createEffect } from 'solid-js'
 import type { Editor } from '@tiptap/core'
-import styles from './TextBubbleMenu.module.scss'
-import { Icon } from '../../_shared/Icon'
+
 import { clsx } from 'clsx'
+import { Switch, Match, createSignal, Show, onMount, onCleanup, createEffect } from 'solid-js'
 import { createEditorTransaction } from 'solid-tiptap'
+
 import { useLocalize } from '../../../context/localize'
+import { Icon } from '../../_shared/Icon'
 import { Popover } from '../../_shared/Popover'
 import { InsertLinkForm } from '../InsertLinkForm'
 import SimplifiedEditor from '../SimplifiedEditor'
 
+import styles from './TextBubbleMenu.module.scss'
+
 type BubbleMenuProps = {
   editor: Editor
   isCommonMarkup: boolean
@@ -22,7 +25,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
   const isActive = (name: string, attributes?: unknown) =>
     createEditorTransaction(
       () => props.editor,
-      (editor) => editor && editor.isActive(name, attributes)
+      (editor) => editor && editor.isActive(name, attributes),
     )
 
   const [textSizeBubbleOpen, setTextSizeBubbleOpen] = createSignal(false)
@@ -79,7 +82,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
       }
       const value = ed.getAttributes('footnote').value
       setFootNote(value)
-    }
+    },
   )
 
   const handleAddFootnote = (footnote) => {
@@ -148,7 +151,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   <button
                     type="button"
                     class={clsx(styles.bubbleMenuButton, {
-                      [styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
+                      [styles.bubbleMenuButtonActive]: textSizeBubbleOpen(),
                     })}
                     onClick={toggleTextSizePopup}
                   >
@@ -165,7 +168,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isH1()
+                                [styles.bubbleMenuButtonActive]: isH1(),
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleHeading({ level: 2 }).run()
@@ -182,7 +185,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isH2()
+                                [styles.bubbleMenuButtonActive]: isH2(),
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleHeading({ level: 3 }).run()
@@ -199,7 +202,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isH3()
+                                [styles.bubbleMenuButtonActive]: isH3(),
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleHeading({ level: 4 }).run()
@@ -219,7 +222,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isQuote()
+                                [styles.bubbleMenuButtonActive]: isQuote(),
                               })}
                               onClick={handleSetPunchline}
                             >
@@ -233,7 +236,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isPunchLine()
+                                [styles.bubbleMenuButtonActive]: isPunchLine(),
                               })}
                               onClick={handleSetQuote}
                             >
@@ -250,7 +253,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isIncut()
+                                [styles.bubbleMenuButtonActive]: isIncut(),
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleArticle().run()
@@ -274,7 +277,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   ref={triggerRef}
                   type="button"
                   class={clsx(styles.bubbleMenuButton, {
-                    [styles.bubbleMenuButtonActive]: isBold()
+                    [styles.bubbleMenuButtonActive]: isBold(),
                   })}
                   onClick={() => props.editor.chain().focus().toggleBold().run()}
                 >
@@ -288,7 +291,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   ref={triggerRef}
                   type="button"
                   class={clsx(styles.bubbleMenuButton, {
-                    [styles.bubbleMenuButtonActive]: isItalic()
+                    [styles.bubbleMenuButtonActive]: isItalic(),
                   })}
                   onClick={() => props.editor.chain().focus().toggleItalic().run()}
                 >
@@ -304,7 +307,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                     ref={triggerRef}
                     type="button"
                     class={clsx(styles.bubbleMenuButton, {
-                      [styles.bubbleMenuButtonActive]: isHighlight()
+                      [styles.bubbleMenuButtonActive]: isHighlight(),
                     })}
                     onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#f6e3a1' }).run()}
                   >
@@ -321,7 +324,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   type="button"
                   onClick={() => setLinkEditorOpen(true)}
                   class={clsx(styles.bubbleMenuButton, {
-                    [styles.bubbleMenuButtonActive]: isLink()
+                    [styles.bubbleMenuButtonActive]: isLink(),
                   })}
                 >
                   <Icon name="editor-link" />
@@ -336,7 +339,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                       ref={triggerRef}
                       type="button"
                       class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isFootnote()
+                        [styles.bubbleMenuButtonActive]: isFootnote(),
                       })}
                       onClick={handleOpenFootnoteEditor}
                     >
@@ -349,7 +352,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   <button
                     type="button"
                     class={clsx(styles.bubbleMenuButton, {
-                      [styles.bubbleMenuButtonActive]: listBubbleOpen()
+                      [styles.bubbleMenuButtonActive]: listBubbleOpen(),
                     })}
                     onClick={toggleListPopup}
                   >
@@ -366,7 +369,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isBulletList()
+                                [styles.bubbleMenuButtonActive]: isBulletList(),
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleBulletList().run()
@@ -383,7 +386,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isOrderedList()
+                                [styles.bubbleMenuButtonActive]: isOrderedList(),
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleOrderedList().run()
diff --git a/src/components/Editor/TopicSelect/TopicSelect.tsx b/src/components/Editor/TopicSelect/TopicSelect.tsx
index 2642dffb..28da6883 100644
--- a/src/components/Editor/TopicSelect/TopicSelect.tsx
+++ b/src/components/Editor/TopicSelect/TopicSelect.tsx
@@ -1,13 +1,17 @@
 import type { Topic } from '../../../graphql/types.gen'
+
 import { createOptions, Select } from '@thisbeyond/solid-select'
-import { useLocalize } from '../../../context/localize'
-import '@thisbeyond/solid-select/style.css'
-import './TopicSelect.scss'
-import styles from './TopicSelect.module.scss'
 import { clsx } from 'clsx'
 import { createSignal } from 'solid-js'
-import { slugify } from '../../../utils/slugify'
+
+import { useLocalize } from '../../../context/localize'
 import { clone } from '../../../utils/clone'
+import { slugify } from '../../../utils/slugify'
+
+import '@thisbeyond/solid-select/style.css'
+import './TopicSelect.scss'
+
+import styles from './TopicSelect.module.scss'
 
 type TopicSelectProps = {
   topics: Topic[]
@@ -33,7 +37,7 @@ export const TopicSelect = (props: TopicSelectProps) => {
     disable: (topic) => {
       return props.selectedTopics.some((selectedTopic) => selectedTopic.slug === topic.slug)
     },
-    createable: createValue
+    createable: createValue,
   })
 
   const handleChange = (selectedTopics: Topic[]) => {
@@ -57,7 +61,7 @@ export const TopicSelect = (props: TopicSelectProps) => {
     return (
       <div
         class={clsx(styles.selectedItem, {
-          [styles.mainTopic]: isMainTopic
+          [styles.mainTopic]: isMainTopic,
         })}
         onClick={() => handleSelectedItemClick(item)}
       >
diff --git a/src/components/Editor/UploadModalContent/UploadModalContent.tsx b/src/components/Editor/UploadModalContent/UploadModalContent.tsx
index 48ef1602..bd2284e8 100644
--- a/src/components/Editor/UploadModalContent/UploadModalContent.tsx
+++ b/src/components/Editor/UploadModalContent/UploadModalContent.tsx
@@ -1,16 +1,18 @@
-import styles from './UploadModalContent.module.scss'
-import { clsx } from 'clsx'
-import { Icon } from '../../_shared/Icon'
-import { Button } from '../../_shared/Button'
-import { createSignal, Show } from 'solid-js'
-import { InlineForm } from '../InlineForm'
-import { hideModal } from '../../../stores/ui'
 import { createDropzone, createFileUploader, UploadFile } from '@solid-primitives/upload'
+import { clsx } from 'clsx'
+import { createSignal, Show } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
-import { Loading } from '../../_shared/Loading'
-import { verifyImg } from '../../../utils/verifyImg'
 import { UploadedFile } from '../../../pages/types'
+import { hideModal } from '../../../stores/ui'
 import { handleImageUpload } from '../../../utils/handleImageUpload'
+import { verifyImg } from '../../../utils/verifyImg'
+import { Button } from '../../_shared/Button'
+import { Icon } from '../../_shared/Icon'
+import { Loading } from '../../_shared/Loading'
+import { InlineForm } from '../InlineForm'
+
+import styles from './UploadModalContent.module.scss'
 
 type Props = {
   onClose: (image?: UploadedFile) => void
@@ -46,7 +48,7 @@ export const UploadModalContent = (props: Props) => {
         source: blob.toString(),
         name: file.name,
         size: file.size,
-        file: file
+        file: file,
       }
       await runUpload(fileToUpload)
     } catch (error) {
@@ -70,7 +72,7 @@ export const UploadModalContent = (props: Props) => {
       } else {
         setDragError(t('Image format not supported'))
       }
-    }
+    },
   })
   const handleDrag = (event: MouseEvent) => {
     if (event.type === 'dragenter' || event.type === 'dragover') {
diff --git a/src/components/Editor/VideoUploader/VideoUploader.tsx b/src/components/Editor/VideoUploader/VideoUploader.tsx
index 6e571c13..2f21639a 100644
--- a/src/components/Editor/VideoUploader/VideoUploader.tsx
+++ b/src/components/Editor/VideoUploader/VideoUploader.tsx
@@ -1,14 +1,17 @@
-import { clsx } from 'clsx'
-import styles from './VideoUploader.module.scss'
-import { useLocalize } from '../../../context/localize'
-import { createDropzone } from '@solid-primitives/upload'
-import { createSignal, For, Show } from 'solid-js'
-import { useSnackbar } from '../../../context/snackbar'
-import { validateUrl } from '../../../utils/validateUrl'
 import type { MediaItem } from '../../../pages/types'
+
+import { createDropzone } from '@solid-primitives/upload'
+import { clsx } from 'clsx'
+import { createSignal, For, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { useSnackbar } from '../../../context/snackbar'
 import { composeMediaItems } from '../../../utils/composeMediaItems'
+import { validateUrl } from '../../../utils/validateUrl'
 import { VideoPlayer } from '../../_shared/VideoPlayer'
 
+import styles from './VideoUploader.module.scss'
+
 type Props = {
   video: MediaItem[]
   onVideoAdd: (value: MediaItem[]) => void
@@ -22,13 +25,13 @@ export const VideoUploader = (props: Props) => {
   const [incorrectUrl, setIncorrectUrl] = createSignal<boolean>(false)
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const urlInput: {
     current: HTMLInputElement
   } = {
-    current: null
+    current: null,
   }
 
   const { setRef: dropzoneRef, files: droppedFiles } = createDropzone({
@@ -39,13 +42,13 @@ export const VideoUploader = (props: Props) => {
       } else if (droppedFiles()[0].file.type.startsWith('video/')) {
         await showSnackbar({
           body: t(
-            'This functionality is currently not available, we would like to work on this issue. Use the download link.'
-          )
+            'This functionality is currently not available, we would like to work on this issue. Use the download link.',
+          ),
         })
       } else {
         setError(t('Video format not supported'))
       }
-    }
+    },
   })
   const handleDrag = (event) => {
     if (event.type === 'dragenter' || event.type === 'dragover') {
@@ -84,8 +87,8 @@ export const VideoUploader = (props: Props) => {
           onClick={() =>
             showSnackbar({
               body: t(
-                'This functionality is currently not available, we would like to work on this issue. Use the download link.'
-              )
+                'This functionality is currently not available, we would like to work on this issue. Use the download link.',
+              ),
             })
           }
           ref={dropzoneRef}
diff --git a/src/components/Editor/extensions/Article.ts b/src/components/Editor/extensions/Article.ts
index 0f5b1ba0..e5ff3769 100644
--- a/src/components/Editor/extensions/Article.ts
+++ b/src/components/Editor/extensions/Article.ts
@@ -14,8 +14,8 @@ export default Node.create({
   name: 'article',
   defaultOptions: {
     HTMLAttributes: {
-      'data-type': 'incut'
-    }
+      'data-type': 'incut',
+    },
   },
   group: 'block',
   content: 'block+',
@@ -23,8 +23,8 @@ export default Node.create({
   parseHTML() {
     return [
       {
-        tag: 'article'
-      }
+        tag: 'article',
+      },
     ]
   },
 
@@ -35,11 +35,11 @@ export default Node.create({
   addAttributes() {
     return {
       'data-float': {
-        default: null
+        default: null,
       },
       'data-bg': {
-        default: null
-      }
+        default: null,
+      },
     }
   },
 
@@ -60,7 +60,7 @@ export default Node.create({
         (value) =>
         ({ commands }) => {
           return commands.updateAttributes(this.name, { 'data-bg': value })
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/CustomBlockquote.ts b/src/components/Editor/extensions/CustomBlockquote.ts
index 8f436e4b..3a403b36 100644
--- a/src/components/Editor/extensions/CustomBlockquote.ts
+++ b/src/components/Editor/extensions/CustomBlockquote.ts
@@ -14,18 +14,18 @@ declare module '@tiptap/core' {
 export const CustomBlockquote = Blockquote.extend({
   name: 'blockquote',
   defaultOptions: {
-    HTMLAttributes: {}
+    HTMLAttributes: {},
   },
   group: 'block',
   content: 'block+',
   addAttributes() {
     return {
       'data-float': {
-        default: null
+        default: null,
       },
       'data-type': {
-        default: null
-      }
+        default: null,
+      },
     }
   },
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -41,7 +41,7 @@ export const CustomBlockquote = Blockquote.extend({
         (value) =>
         ({ commands }) => {
           return commands.updateAttributes(this.name, { 'data-float': value })
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/CustomImage.ts b/src/components/Editor/extensions/CustomImage.ts
index 7829e94a..ecef3efe 100644
--- a/src/components/Editor/extensions/CustomImage.ts
+++ b/src/components/Editor/extensions/CustomImage.ts
@@ -16,20 +16,20 @@ export const CustomImage = Image.extend({
   addAttributes() {
     return {
       src: {
-        default: null
+        default: null,
       },
       alt: {
-        default: null
+        default: null,
       },
       width: {
-        default: null
+        default: null,
       },
       height: {
-        default: null
+        default: null,
       },
       'data-float': {
-        default: null
-      }
+        default: null,
+      },
     }
   },
   addCommands() {
@@ -39,14 +39,14 @@ export const CustomImage = Image.extend({
         ({ commands }) => {
           return commands.insertContent({
             type: this.name,
-            attrs: options
+            attrs: options,
           })
         },
       setImageFloat:
         (value) =>
         ({ commands }) => {
           return commands.updateAttributes(this.name, { 'data-float': value })
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/Embed.ts b/src/components/Editor/extensions/Embed.ts
index 64851c43..ce842a26 100644
--- a/src/components/Editor/extensions/Embed.ts
+++ b/src/components/Editor/extensions/Embed.ts
@@ -25,14 +25,14 @@ export const Embed = Node.create<IframeOptions>({
     return {
       src: { default: null },
       width: { default: null },
-      height: { default: null }
+      height: { default: null },
     }
   },
   parseHTML() {
     return [
       {
-        tag: 'iframe'
-      }
+        tag: 'iframe',
+      },
     ]
   },
   renderHTML({ HTMLAttributes }) {
@@ -49,7 +49,7 @@ export const Embed = Node.create<IframeOptions>({
       iframe.src = node.attrs.src
       div.append(iframe)
       return {
-        dom: div
+        dom: div,
       }
     }
   },
@@ -64,7 +64,7 @@ export const Embed = Node.create<IframeOptions>({
             tr.replaceRangeWith(selection.from, selection.to, node)
           }
           return true
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/Figcaption.ts b/src/components/Editor/extensions/Figcaption.ts
index 592f2430..b26e522b 100644
--- a/src/components/Editor/extensions/Figcaption.ts
+++ b/src/components/Editor/extensions/Figcaption.ts
@@ -12,7 +12,7 @@ export const Figcaption = Node.create({
 
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
     }
   },
 
@@ -25,8 +25,8 @@ export const Figcaption = Node.create({
   parseHTML() {
     return [
       {
-        tag: 'figcaption'
-      }
+        tag: 'figcaption',
+      },
     ]
   },
 
@@ -39,7 +39,7 @@ export const Figcaption = Node.create({
         (value) =>
         ({ commands }) => {
           return commands.focus(value)
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/Figure.ts b/src/components/Editor/extensions/Figure.ts
index d90d0997..1a252b18 100644
--- a/src/components/Editor/extensions/Figure.ts
+++ b/src/components/Editor/extensions/Figure.ts
@@ -12,7 +12,7 @@ export const Figure = Node.create({
   name: 'figure',
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
     }
   },
   group: 'block',
@@ -22,15 +22,15 @@ export const Figure = Node.create({
 
   addAttributes() {
     return {
-      'data-float': null
+      'data-float': null,
     }
   },
 
   parseHTML() {
     return [
       {
-        tag: `figure[data-type="${this.name}"]`
-      }
+        tag: `figure[data-type="${this.name}"]`,
+      },
     ]
   },
 
@@ -54,10 +54,10 @@ export const Figure = Node.create({
                 event.preventDefault()
               }
               return false
-            }
-          }
-        }
-      })
+            },
+          },
+        },
+      }),
     ]
   },
 
@@ -67,7 +67,7 @@ export const Figure = Node.create({
         (value) =>
         ({ commands }) => {
           return commands.updateAttributes(this.name, { 'data-float': value })
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/Footnote.ts b/src/components/Editor/extensions/Footnote.ts
index 22cf65c5..4bad4fc0 100644
--- a/src/components/Editor/extensions/Footnote.ts
+++ b/src/components/Editor/extensions/Footnote.ts
@@ -14,7 +14,7 @@ export const Footnote = Node.create({
   name: 'footnote',
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
     }
   },
   group: 'inline',
@@ -29,18 +29,18 @@ export const Footnote = Node.create({
         parseHTML: (element) => element.dataset.value || null,
         renderHTML: (attributes) => {
           return {
-            'data-value': attributes.value
+            'data-value': attributes.value,
           }
-        }
-      }
+        },
+      },
     }
   },
 
   parseHTML() {
     return [
       {
-        tag: 'footnote'
-      }
+        tag: 'footnote',
+      },
     ]
   },
 
@@ -92,7 +92,7 @@ export const Footnote = Node.create({
           }
 
           return false
-        }
+        },
     }
-  }
+  },
 })
diff --git a/src/components/Editor/extensions/TrailingNode.ts b/src/components/Editor/extensions/TrailingNode.ts
index fa399c79..94d39f99 100644
--- a/src/components/Editor/extensions/TrailingNode.ts
+++ b/src/components/Editor/extensions/TrailingNode.ts
@@ -22,7 +22,7 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
   addOptions() {
     return {
       node: 'paragraph',
-      notAfter: ['paragraph']
+      notAfter: ['paragraph'],
     }
   },
 
@@ -61,9 +61,9 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
             const lastNode = tr.doc.lastChild
 
             return !nodeEqualsType({ node: lastNode, types: disabledNodes })
-          }
-        }
-      })
+          },
+        },
+      }),
     ]
-  }
+  },
 })
diff --git a/src/components/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx
index 496751bf..1c3be9ff 100644
--- a/src/components/Feed/ArticleCard/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard/ArticleCard.tsx
@@ -1,22 +1,25 @@
-import { createMemo, createSignal, For, Show } from 'solid-js'
 import type { Shout } from '../../../graphql/types.gen'
-import { capitalize } from '../../../utils/capitalize'
-import { Icon } from '../../_shared/Icon'
-import { clsx } from 'clsx'
-import { CardTopic } from '../CardTopic'
-import { ShoutRatingControl } from '../../Article/ShoutRatingControl'
-import { getShareUrl, SharePopup } from '../../Article/SharePopup'
-import { getDescription } from '../../../utils/meta'
-import { FeedArticlePopup } from '../FeedArticlePopup'
-import { useLocalize } from '../../../context/localize'
+
 import { getPagePath, openPage } from '@nanostores/router'
-import { router, useRouter } from '../../../stores/router'
-import { Popover } from '../../_shared/Popover'
-import { Image } from '../../_shared/Image'
+import { clsx } from 'clsx'
+import { createMemo, createSignal, For, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
+import { router, useRouter } from '../../../stores/router'
+import { capitalize } from '../../../utils/capitalize'
+import { getDescription } from '../../../utils/meta'
+import { Icon } from '../../_shared/Icon'
+import { Image } from '../../_shared/Image'
+import { Popover } from '../../_shared/Popover'
+import { getShareUrl, SharePopup } from '../../Article/SharePopup'
+import { ShoutRatingControl } from '../../Article/ShoutRatingControl'
 import { AuthorLink } from '../../Author/AhtorLink'
-import stylesHeader from '../../Nav/Header/Header.module.scss'
+import { CardTopic } from '../CardTopic'
+import { FeedArticlePopup } from '../FeedArticlePopup'
+
 import styles from './ArticleCard.module.scss'
+import stylesHeader from '../../Nav/Header/Header.module.scss'
 
 interface ArticleCardProps {
   settings?: {
@@ -45,7 +48,7 @@ interface ArticleCardProps {
 }
 
 const getTitleAndSubtitle = (
-  article: Shout
+  article: Shout,
 ): {
   title: string
   subtitle: string
@@ -90,7 +93,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
     event.preventDefault()
     openPage(router, 'article', { slug: props.article.slug })
     changeSearchParam({
-      scrollTo: 'comments'
+      scrollTo: 'comments',
     })
   }
 
@@ -111,7 +114,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [styles.shoutCardCompact]: props.settings?.isCompact,
         [styles.shoutCardSingle]: props.settings?.isSingle,
         [styles.shoutCardBeside]: props.settings?.isBeside,
-        [styles.shoutCardNoImage]: !props.article.cover
+        [styles.shoutCardNoImage]: !props.article.cover,
       }}
     >
       <Show when={!props.settings?.noimage && !props.settings?.isFeedMode}>
@@ -155,7 +158,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
         <div
           class={clsx(styles.shoutCardTitlesContainer, {
-            [styles.shoutCardTitlesContainerFeedMode]: props.settings?.isFeedMode
+            [styles.shoutCardTitlesContainerFeedMode]: props.settings?.isFeedMode,
           })}
         >
           <a href={getPagePath(router, 'article', { slug: props.article.slug })}>
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index d309a7cb..0c2fea53 100644
--- a/src/components/Feed/Beside.tsx
+++ b/src/components/Feed/Beside.tsx
@@ -1,14 +1,18 @@
 // TODO: additional entities list column + article
 
-import { For, Show } from 'solid-js'
-import { ArticleCard } from './ArticleCard'
-import { TopicCard } from '../Topic/Card'
-import styles from './Beside.module.scss'
 import type { Author, Shout, Topic, User } from '../../graphql/types.gen'
-import { Icon } from '../_shared/Icon'
+
 import { clsx } from 'clsx'
+import { For, Show } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
+import { Icon } from '../_shared/Icon'
 import { AuthorBadge } from '../Author/AuthorBadge'
+import { TopicCard } from '../Topic/Card'
+
+import { ArticleCard } from './ArticleCard'
+
+import styles from './Beside.module.scss'
 
 type Props = {
   title?: string
@@ -36,7 +40,7 @@ export const Beside = (props: Props) => {
                   'col-lg-8',
                   styles[
                     `besideRatingColumn${props.wrapper.charAt(0).toUpperCase() + props.wrapper.slice(1)}`
-                  ]
+                  ],
                 )}
               >
                 <Show when={!!props.title}>
diff --git a/src/components/Feed/CardTopic.tsx b/src/components/Feed/CardTopic.tsx
index 3d0a63fc..b4087258 100644
--- a/src/components/Feed/CardTopic.tsx
+++ b/src/components/Feed/CardTopic.tsx
@@ -1,6 +1,8 @@
-import { clsx } from 'clsx'
 import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
+
 import { router } from '../../stores/router'
+
 import styles from './CardTopic.module.scss'
 
 type CardTopicProps = {
@@ -16,7 +18,7 @@ export const CardTopic = (props: CardTopicProps) => {
     <div
       class={clsx(styles.shoutTopic, props.class, {
         [styles.shoutTopicFloorImportant]: props.isFloorImportant,
-        [styles.shoutTopicFeedMode]: props.isFeedMode
+        [styles.shoutTopicFeedMode]: props.isFeedMode,
       })}
     >
       <a href={getPagePath(router, 'topic', { slug: props.slug })}>{props.title}</a>
diff --git a/src/components/Feed/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup.tsx
index 9041b504..59725cd0 100644
--- a/src/components/Feed/FeedArticlePopup.tsx
+++ b/src/components/Feed/FeedArticlePopup.tsx
@@ -1,9 +1,12 @@
-import styles from './FeedArticlePopup.module.scss'
 import type { PopupProps } from '../_shared/Popup'
-import { Popup } from '../_shared/Popup'
-import { useLocalize } from '../../context/localize'
+
 import { createEffect, createSignal, Show } from 'solid-js'
 
+import { useLocalize } from '../../context/localize'
+import { Popup } from '../_shared/Popup'
+
+import styles from './FeedArticlePopup.module.scss'
+
 type FeedArticlePopupProps = {
   title: string
   shareUrl?: string
diff --git a/src/components/Feed/Group.tsx b/src/components/Feed/Group.tsx
index 3067d510..6f67cfa4 100644
--- a/src/components/Feed/Group.tsx
+++ b/src/components/Feed/Group.tsx
@@ -1,6 +1,8 @@
-import type { JSX } from 'solid-js/jsx-runtime'
-import { For, Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+import { For, Show } from 'solid-js'
+
 import { ArticleCard } from './ArticleCard'
 import './Group.scss'
 
@@ -26,7 +28,7 @@ export default (props: GroupProps) => {
                   noicon: true,
                   isFloorImportant: true,
                   isBigTitle: true,
-                  nodate: true
+                  nodate: true,
                 }}
               />
             </div>
@@ -59,7 +61,7 @@ export default (props: GroupProps) => {
                             isBigTitle: true,
                             isCompact: true,
                             isFloorImportant: true,
-                            nodate: true
+                            nodate: true,
                           }}
                         />
                       )}
@@ -76,7 +78,7 @@ export default (props: GroupProps) => {
                             isBigTitle: true,
                             isCompact: true,
                             isFloorImportant: true,
-                            nodate: true
+                            nodate: true,
                           }}
                         />
                       )}
diff --git a/src/components/Feed/Row1.tsx b/src/components/Feed/Row1.tsx
index fa184f4f..e57031bf 100644
--- a/src/components/Feed/Row1.tsx
+++ b/src/components/Feed/Row1.tsx
@@ -1,5 +1,7 @@
-import { Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
+
+import { Show } from 'solid-js'
+
 import { ArticleCard } from './ArticleCard'
 
 export const Row1 = (props: {
@@ -19,7 +21,7 @@ export const Row1 = (props: {
                 isSingle: true,
                 nodate: props.nodate,
                 noAuthorLink: props.noAuthorLink,
-                noauthor: props.noauthor
+                noauthor: props.noauthor,
               }}
             />
           </div>
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index 207e9f70..68120cba 100644
--- a/src/components/Feed/Row2.tsx
+++ b/src/components/Feed/Row2.tsx
@@ -1,11 +1,13 @@
-import { createComputed, createSignal, Show, For } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
+
+import { createComputed, createSignal, Show, For } from 'solid-js'
+
 import { ArticleCard } from './ArticleCard'
 
 const x = [
   ['12', '12'],
   ['8', '16'],
-  ['16', '8']
+  ['16', '8'],
 ]
 
 export const Row2 = (props: {
@@ -35,7 +37,7 @@ export const Row2 = (props: {
                           isWithCover: props.isEqual || x[y()][i()] === '16',
                           nodate: props.isEqual || props.nodate,
                           noAuthorLink: props.noAuthorLink,
-                          noauthor: props.noauthor
+                          noauthor: props.noauthor,
                         }}
                       />
                     </div>
diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx
index b5520a17..6accc8b5 100644
--- a/src/components/Feed/Row3.tsx
+++ b/src/components/Feed/Row3.tsx
@@ -1,6 +1,8 @@
-import type { JSX } from 'solid-js/jsx-runtime'
-import { For, Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+import { For, Show } from 'solid-js'
+
 import { ArticleCard } from './ArticleCard'
 
 export const Row3 = (props: {
@@ -24,7 +26,7 @@ export const Row3 = (props: {
                     settings={{
                       nodate: props.nodate,
                       noAuthorLink: props.noAuthorLink,
-                      noauthor: props.noauthor
+                      noauthor: props.noauthor,
                     }}
                   />
                 </div>
diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx
index b3d07c52..eb564fc5 100644
--- a/src/components/Feed/Row5.tsx
+++ b/src/components/Feed/Row5.tsx
@@ -1,4 +1,5 @@
 import type { Shout } from '../../graphql/types.gen'
+
 import { ArticleCard } from './ArticleCard'
 
 export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
diff --git a/src/components/Feed/RowShort.tsx b/src/components/Feed/RowShort.tsx
index 1dc5fda2..2fb773e2 100644
--- a/src/components/Feed/RowShort.tsx
+++ b/src/components/Feed/RowShort.tsx
@@ -1,5 +1,7 @@
-import { For } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
+
+import { For } from 'solid-js'
+
 import { ArticleCard } from './ArticleCard'
 
 export default (props: { articles: Shout[] }) => (
@@ -16,7 +18,7 @@ export default (props: { articles: Shout[] }) => (
                   isWithCover: true,
                   isBigTitle: true,
                   isVertical: true,
-                  nodate: true
+                  nodate: true,
                 }}
               />
             </div>
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index a62441b1..04374e0b 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -1,14 +1,16 @@
+import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
 import { createSignal, For, Show } from 'solid-js'
-import { Icon } from '../../_shared/Icon'
+
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { router, useRouter } from '../../../stores/router'
 import { useArticlesStore } from '../../../stores/zine/articles'
 import { useSeenStore } from '../../../stores/zine/seen'
-import { useSession } from '../../../context/session'
-import { useLocalize } from '../../../context/localize'
-import styles from './Sidebar.module.scss'
-import { clsx } from 'clsx'
+import { Icon } from '../../_shared/Icon'
 import { Userpic } from '../../Author/Userpic'
-import { getPagePath } from '@nanostores/router'
-import { router, useRouter } from '../../../stores/router'
+
+import styles from './Sidebar.module.scss'
 
 export const Sidebar = () => {
   const { t } = useLocalize()
@@ -33,7 +35,7 @@ export const Sidebar = () => {
           <a
             href={getPagePath(router, 'feed')}
             class={clsx({
-              [styles.selected]: page().route === 'feed'
+              [styles.selected]: page().route === 'feed',
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -46,7 +48,7 @@ export const Sidebar = () => {
           <a
             href={getPagePath(router, 'feedMy')}
             class={clsx({
-              [styles.selected]: page().route === 'feedMy'
+              [styles.selected]: page().route === 'feedMy',
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -59,7 +61,7 @@ export const Sidebar = () => {
           <a
             href={getPagePath(router, 'feedCollaborations')}
             class={clsx({
-              [styles.selected]: page().route === 'feedCollaborations'
+              [styles.selected]: page().route === 'feedCollaborations',
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -72,7 +74,7 @@ export const Sidebar = () => {
           <a
             href={getPagePath(router, 'feedDiscussions')}
             class={clsx({
-              [styles.selected]: page().route === 'feedDiscussions'
+              [styles.selected]: page().route === 'feedDiscussions',
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -85,7 +87,7 @@ export const Sidebar = () => {
           <a
             href={getPagePath(router, 'feedBookmarks')}
             class={clsx({
-              [styles.selected]: page().route === 'feedBookmarks'
+              [styles.selected]: page().route === 'feedBookmarks',
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -98,7 +100,7 @@ export const Sidebar = () => {
           <a
             href={getPagePath(router, 'feedNotifications')}
             class={clsx({
-              [styles.selected]: page().route === 'feedNotifications'
+              [styles.selected]: page().route === 'feedNotifications',
             })}
           >
             <span class={styles.sidebarItemName}>
diff --git a/src/components/Inbox/CreateModalContent.tsx b/src/components/Inbox/CreateModalContent.tsx
index 07efd2e2..1a860da7 100644
--- a/src/components/Inbox/CreateModalContent.tsx
+++ b/src/components/Inbox/CreateModalContent.tsx
@@ -1,11 +1,14 @@
-import { createSignal, For, createEffect } from 'solid-js'
-import styles from './CreateModalContent.module.scss'
-
-import InviteUser from './InviteUser'
 import type { Author } from '../../graphql/types.gen'
-import { hideModal } from '../../stores/ui'
+
+import { createSignal, For, createEffect } from 'solid-js'
+
 import { useInbox } from '../../context/inbox'
 import { useLocalize } from '../../context/localize'
+import { hideModal } from '../../stores/ui'
+
+import InviteUser from './InviteUser'
+
+import styles from './CreateModalContent.module.scss'
 
 type inviteUser = Author & { selected: boolean }
 type Props = {
@@ -46,7 +49,7 @@ const CreateModalContent = (props: Props) => {
   const handleClick = (user) => {
     setCollectionToInvite((userCollection) => {
       return userCollection.map((clickedUser) =>
-        user.id === clickedUser.id ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser
+        user.id === clickedUser.id ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser,
       )
     })
   }
diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx
index bb3382dc..875cdc98 100644
--- a/src/components/Inbox/DialogAvatar.tsx
+++ b/src/components/Inbox/DialogAvatar.tsx
@@ -1,8 +1,10 @@
-import { Show, createMemo } from 'solid-js'
-import './DialogCard.module.scss'
-import styles from './DialogAvatar.module.scss'
 import { clsx } from 'clsx'
+import { Show, createMemo } from 'solid-js'
+
 import { getImageUrl } from '../../utils/getImageUrl'
+import './DialogCard.module.scss'
+
+import styles from './DialogAvatar.module.scss'
 
 type Props = {
   name: string
@@ -25,7 +27,7 @@ const colors = [
   '#668cff',
   '#c34cfe',
   '#e699ff',
-  '#6633ff'
+  '#6633ff',
 ]
 
 const getById = (letter: string) =>
@@ -42,7 +44,7 @@ const DialogAvatar = (props: Props) => {
       class={clsx(styles.DialogAvatar, props.class, {
         [styles.online]: props.online,
         [styles.bordered]: props.bordered,
-        [styles.small]: props.size === 'small'
+        [styles.small]: props.size === 'small',
       })}
       style={{ 'background-color': `${randomBg()}` }}
     >
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index 52465089..a3e0c4a4 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/src/components/Inbox/DialogCard.tsx
@@ -1,12 +1,16 @@
-import { Show, Switch, Match, createMemo } from 'solid-js'
-import DialogAvatar from './DialogAvatar'
 import type { ChatMember } from '../../graphql/types.gen'
-import GroupDialogAvatar from './GroupDialogAvatar'
+
 import { clsx } from 'clsx'
-import styles from './DialogCard.module.scss'
+import { Show, Switch, Match, createMemo } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
 import { AuthorBadge } from '../Author/AuthorBadge'
 
+import DialogAvatar from './DialogAvatar'
+import GroupDialogAvatar from './GroupDialogAvatar'
+
+import styles from './DialogCard.module.scss'
+
 type DialogProps = {
   online?: boolean
   message?: string
@@ -22,14 +26,14 @@ type DialogProps = {
 const DialogCard = (props: DialogProps) => {
   const { t, formatTime } = useLocalize()
   const companions = createMemo(
-    () => props.members && props.members.filter((member) => member.id !== props.ownId)
+    () => props.members && props.members.filter((member) => member.id !== props.ownId),
   )
 
   const names = createMemo(
     () =>
       companions()
         ?.map((companion) => companion.name)
-        .join(', ')
+        .join(', '),
   )
 
   return (
@@ -37,7 +41,7 @@ const DialogCard = (props: DialogProps) => {
       <div
         class={clsx(styles.DialogCard, {
           [styles.opened]: props.isOpened,
-          [styles.hovered]: !props.isChatHeader
+          [styles.hovered]: !props.isChatHeader,
         })}
         onClick={props.onClick}
       >
diff --git a/src/components/Inbox/DialogHeader.tsx b/src/components/Inbox/DialogHeader.tsx
index 166b61a7..303c04ac 100644
--- a/src/components/Inbox/DialogHeader.tsx
+++ b/src/components/Inbox/DialogHeader.tsx
@@ -1,7 +1,9 @@
 import type { Chat } from '../../graphql/types.gen'
-import styles from './DialogHeader.module.scss'
+
 import DialogCard from './DialogCard'
 
+import styles from './DialogHeader.module.scss'
+
 type DialogHeader = {
   chat: Chat
   ownId: number
diff --git a/src/components/Inbox/GroupDialogAvatar.tsx b/src/components/Inbox/GroupDialogAvatar.tsx
index 49df5ffe..dcd6dce9 100644
--- a/src/components/Inbox/GroupDialogAvatar.tsx
+++ b/src/components/Inbox/GroupDialogAvatar.tsx
@@ -1,10 +1,14 @@
-import { For } from 'solid-js'
-import './DialogCard.module.scss'
-import styles from './GroupDialogAvatar.module.scss'
-import { clsx } from 'clsx'
 import type { ChatMember } from '../../graphql/types.gen'
+
+import { clsx } from 'clsx'
+import { For } from 'solid-js'
+
 import DialogAvatar from './DialogAvatar'
 
+import './DialogCard.module.scss'
+
+import styles from './GroupDialogAvatar.module.scss'
+
 type Props = {
   users: ChatMember[]
 }
diff --git a/src/components/Inbox/InviteUser.tsx b/src/components/Inbox/InviteUser.tsx
index 4fe85ed8..72d6b28c 100644
--- a/src/components/Inbox/InviteUser.tsx
+++ b/src/components/Inbox/InviteUser.tsx
@@ -1,8 +1,11 @@
-import styles from './InviteUser.module.scss'
-import DialogAvatar from './DialogAvatar'
 import type { Author } from '../../graphql/types.gen'
+
 import { Icon } from '../_shared/Icon'
 
+import DialogAvatar from './DialogAvatar'
+
+import styles from './InviteUser.module.scss'
+
 type DialogProps = {
   author: Author
   selected: boolean
diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx
index c9a9df00..07bd66f0 100644
--- a/src/components/Inbox/Message.tsx
+++ b/src/components/Inbox/Message.tsx
@@ -1,12 +1,16 @@
-import { createSignal, Show } from 'solid-js'
-import { clsx } from 'clsx'
-import styles from './Message.module.scss'
-import DialogAvatar from './DialogAvatar'
 import type { Message as MessageType, ChatMember } from '../../graphql/types.gen'
+
+import { clsx } from 'clsx'
+import { createSignal, Show } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
 import { Icon } from '../_shared/Icon'
+
+import DialogAvatar from './DialogAvatar'
 import { MessageActionsPopup } from './MessageActionsPopup'
 import QuotedMessage from './QuotedMessage'
-import { useLocalize } from '../../context/localize'
+
+import styles from './Message.module.scss'
 
 type Props = {
   content: MessageType
diff --git a/src/components/Inbox/MessageActionsPopup.tsx b/src/components/Inbox/MessageActionsPopup.tsx
index 9e0019bb..512f71cd 100644
--- a/src/components/Inbox/MessageActionsPopup.tsx
+++ b/src/components/Inbox/MessageActionsPopup.tsx
@@ -1,7 +1,9 @@
-import { createEffect, createSignal, For } from 'solid-js'
 import type { PopupProps } from '../_shared/Popup'
-import { Popup } from '../_shared/Popup'
+
+import { createEffect, createSignal, For } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
+import { Popup } from '../_shared/Popup'
 
 export type MessageActionType = 'reply' | 'copy' | 'pin' | 'forward' | 'select' | 'delete'
 
@@ -18,7 +20,7 @@ export const MessageActionsPopup = (props: MessageActionsPopupProps) => {
     { name: t('Pin'), action: 'pin' },
     { name: t('Forward'), action: 'forward' },
     { name: t('Select'), action: 'select' },
-    { name: t('Delete'), action: 'delete' }
+    { name: t('Delete'), action: 'delete' },
   ]
   createEffect(() => {
     if (props.actionSelect) props.actionSelect(selectedAction())
diff --git a/src/components/Inbox/MessagesFallback.tsx b/src/components/Inbox/MessagesFallback.tsx
index e077f645..cbd29af2 100644
--- a/src/components/Inbox/MessagesFallback.tsx
+++ b/src/components/Inbox/MessagesFallback.tsx
@@ -1,4 +1,5 @@
 import { Show } from 'solid-js'
+
 import styles from './MessagesFallback.module.scss'
 
 type MessagesFallback = {
diff --git a/src/components/Inbox/QuotedMessage.tsx b/src/components/Inbox/QuotedMessage.tsx
index 605bff21..22c497cc 100644
--- a/src/components/Inbox/QuotedMessage.tsx
+++ b/src/components/Inbox/QuotedMessage.tsx
@@ -1,7 +1,9 @@
-import { Show } from 'solid-js'
-import styles from './QuotedMessage.module.scss'
-import { Icon } from '../_shared/Icon'
 import { clsx } from 'clsx'
+import { Show } from 'solid-js'
+
+import { Icon } from '../_shared/Icon'
+
+import styles from './QuotedMessage.module.scss'
 
 type QuotedMessage = {
   body: string
@@ -17,7 +19,7 @@ const QuotedMessage = (props: QuotedMessage) => {
       class={clsx(styles.QuotedMessage, {
         [styles.reply]: props.variant === 'reply',
         [styles.inline]: props.variant === 'inline',
-        [styles.own]: props.isOwn
+        [styles.own]: props.isOwn,
       })}
     >
       <Show when={props.variant === 'reply'}>
diff --git a/src/components/Inbox/Search.tsx b/src/components/Inbox/Search.tsx
index 90ce7423..62bb4350 100644
--- a/src/components/Inbox/Search.tsx
+++ b/src/components/Inbox/Search.tsx
@@ -1,7 +1,9 @@
-import styles from './Search.module.scss'
 import { createSignal } from 'solid-js'
+
 import { Icon } from '../_shared/Icon'
 
+import styles from './Search.module.scss'
+
 type Props = {
   placeholder: string
   onChange: (value: () => string) => void
diff --git a/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx b/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx
index 5aeff24a..80ad5330 100644
--- a/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx
+++ b/src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx
@@ -1,9 +1,11 @@
-import styles from './AuthModalHeader.module.scss'
 import { Show } from 'solid-js'
+
 import { useLocalize } from '../../../../context/localize'
 import { useRouter } from '../../../../stores/router'
 import { AuthModalSearchParams } from '../types'
 
+import styles from './AuthModalHeader.module.scss'
+
 type Props = {
   modalType: 'login' | 'register'
 }
@@ -14,7 +16,7 @@ export const AuthModalHeader = (props: Props) => {
   const { source } = searchParams()
 
   const generateModalTextsFromSource = (
-    modalType: 'login' | 'register'
+    modalType: 'login' | 'register',
   ): { title: string; description: string } => {
     const title = modalType === 'login' ? 'Welcome to Discours' : 'Create account'
 
@@ -22,53 +24,53 @@ export const AuthModalHeader = (props: Props) => {
       case 'create': {
         return {
           title: t(`${title} to publish articles`),
-          description: ''
+          description: '',
         }
       }
       case 'bookmark': {
         return {
           title: t(`${title} to add to your bookmarks`),
           description: t(
-            'In&nbsp;bookmarks, you can save favorite discussions and&nbsp;materials that you want to return to'
-          )
+            'In&nbsp;bookmarks, you can save favorite discussions and&nbsp;materials that you want to return to',
+          ),
         }
       }
       case 'discussions': {
         return {
           title: t(`${title} to participate in discussions`),
           description: t(
-            "You&nbsp;ll be able to participate in&nbsp;discussions, rate others' comments and&nbsp;learn about&nbsp;new responses"
-          )
+            "You&nbsp;ll be able to participate in&nbsp;discussions, rate others' comments and&nbsp;learn about&nbsp;new responses",
+          ),
         }
       }
       case 'follow': {
         return {
           title: t(`${title} to subscribe`),
           description: t(
-            'This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed'
-          )
+            'This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed',
+          ),
         }
       }
       case 'subscribe': {
         return {
           title: t(`${title} to subscribe to new publications`),
           description: t(
-            'This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed'
-          )
+            'This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed',
+          ),
         }
       }
       case 'vote': {
         return {
           title: t(`${title} to vote`),
           description: t(
-            'This way we&nbsp;ll realize that you&nbsp;re a real person and&nbsp;ll take your vote into account. And&nbsp;you&nbsp;ll see how others voted'
-          )
+            'This way we&nbsp;ll realize that you&nbsp;re a real person and&nbsp;ll take your vote into account. And&nbsp;you&nbsp;ll see how others voted',
+          ),
         }
       }
       default: {
         return {
           title: t(title),
-          description: ''
+          description: '',
         }
       }
     }
diff --git a/src/components/Nav/AuthModal/EmailConfirm.tsx b/src/components/Nav/AuthModal/EmailConfirm.tsx
index d9bf9828..fa57007c 100644
--- a/src/components/Nav/AuthModal/EmailConfirm.tsx
+++ b/src/components/Nav/AuthModal/EmailConfirm.tsx
@@ -1,18 +1,21 @@
-import styles from './AuthModal.module.scss'
-import { clsx } from 'clsx'
-import { hideModal } from '../../../stores/ui'
-import { createMemo, createSignal, onMount, Show } from 'solid-js'
-import { useRouter } from '../../../stores/router'
 import type { ConfirmEmailSearchParams } from './types'
-import { ApiError } from '../../../utils/apiClient'
-import { useSession } from '../../../context/session'
+
+import { clsx } from 'clsx'
+import { createMemo, createSignal, onMount, Show } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { useRouter } from '../../../stores/router'
+import { hideModal } from '../../../stores/ui'
+import { ApiError } from '../../../utils/apiClient'
+
+import styles from './AuthModal.module.scss'
 
 export const EmailConfirm = () => {
   const { t } = useLocalize()
   const {
     session,
-    actions: { confirmEmail }
+    actions: { confirmEmail },
   } = useSession()
 
   const [isTokenExpired, setIsTokenExpired] = createSignal(false)
diff --git a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
index 4d28d027..31c59da7 100644
--- a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
+++ b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
@@ -1,14 +1,18 @@
-import styles from './AuthModal.module.scss'
+import type { AuthModalSearchParams } from './types'
+
 import { clsx } from 'clsx'
 import { createSignal, JSX, Show } from 'solid-js'
-import { useRouter } from '../../../stores/router'
-import { email, setEmail } from './sharedLogic'
-import type { AuthModalSearchParams } from './types'
-import { ApiError } from '../../../utils/apiClient'
-import { signSendLink } from '../../../stores/auth'
+
 import { useLocalize } from '../../../context/localize'
+import { signSendLink } from '../../../stores/auth'
+import { useRouter } from '../../../stores/router'
+import { ApiError } from '../../../utils/apiClient'
 import { validateEmail } from '../../../utils/validateEmail'
 
+import { email, setEmail } from './sharedLogic'
+
+import styles from './AuthModal.module.scss'
+
 type FormFields = {
   email: string
 }
@@ -83,7 +87,7 @@ export const ForgotPasswordForm = () => {
 
         <div
           class={clsx('pretty-form__item', {
-            'pretty-form__item--error': validationErrors().email
+            'pretty-form__item--error': validationErrors().email,
           })}
         >
           <input
@@ -116,7 +120,7 @@ export const ForgotPasswordForm = () => {
               onClick={(event) => {
                 event.preventDefault()
                 changeSearchParam({
-                  mode: 'register'
+                  mode: 'register',
                 })
               }}
             >
@@ -138,7 +142,7 @@ export const ForgotPasswordForm = () => {
             class={styles.authLink}
             onClick={() =>
               changeSearchParam({
-                mode: 'login'
+                mode: 'login',
               })
             }
           >
diff --git a/src/components/Nav/AuthModal/LoginForm.tsx b/src/components/Nav/AuthModal/LoginForm.tsx
index f468d230..25f45594 100644
--- a/src/components/Nav/AuthModal/LoginForm.tsx
+++ b/src/components/Nav/AuthModal/LoginForm.tsx
@@ -1,19 +1,23 @@
-import styles from './AuthModal.module.scss'
-import { clsx } from 'clsx'
-import { SocialProviders } from './SocialProviders'
-import { ApiError } from '../../../utils/apiClient'
-import { createSignal, Show } from 'solid-js'
-import { email, setEmail } from './sharedLogic'
-import { useRouter } from '../../../stores/router'
 import type { AuthModalSearchParams } from './types'
-import { hideModal } from '../../../stores/ui'
-import { useSession } from '../../../context/session'
-import { signSendLink } from '../../../stores/auth'
-import { validateEmail } from '../../../utils/validateEmail'
-import { useSnackbar } from '../../../context/snackbar'
+
+import { clsx } from 'clsx'
+import { createSignal, Show } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { useSnackbar } from '../../../context/snackbar'
+import { signSendLink } from '../../../stores/auth'
+import { useRouter } from '../../../stores/router'
+import { hideModal } from '../../../stores/ui'
+import { ApiError } from '../../../utils/apiClient'
+import { validateEmail } from '../../../utils/validateEmail'
 import { Icon } from '../../_shared/Icon'
+
 import { AuthModalHeader } from './AuthModalHeader'
+import { email, setEmail } from './sharedLogic'
+import { SocialProviders } from './SocialProviders'
+
+import styles from './AuthModal.module.scss'
 
 type FormFields = {
   email: string
@@ -36,11 +40,11 @@ export const LoginForm = () => {
   const authFormRef: { current: HTMLFormElement } = { current: null }
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const {
-    actions: { signIn }
+    actions: { signIn },
   } = useSession()
 
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
@@ -144,7 +148,7 @@ export const LoginForm = () => {
         </Show>
         <div
           class={clsx('pretty-form__item', {
-            'pretty-form__item--error': validationErrors().email
+            'pretty-form__item--error': validationErrors().email,
           })}
         >
           <input
@@ -164,7 +168,7 @@ export const LoginForm = () => {
 
         <div
           class={clsx('pretty-form__item', {
-            'pretty-form__item--error': validationErrors().password
+            'pretty-form__item--error': validationErrors().password,
           })}
         >
           <input
@@ -198,7 +202,7 @@ export const LoginForm = () => {
             class="link"
             onClick={() =>
               changeSearchParam({
-                mode: 'forgot-password'
+                mode: 'forgot-password',
               })
             }
           >
@@ -215,7 +219,7 @@ export const LoginForm = () => {
             class={styles.authLink}
             onClick={() =>
               changeSearchParam({
-                mode: 'register'
+                mode: 'register',
               })
             }
           >
diff --git a/src/components/Nav/AuthModal/RegisterForm.tsx b/src/components/Nav/AuthModal/RegisterForm.tsx
index 152c0ad5..d2f9c9f2 100644
--- a/src/components/Nav/AuthModal/RegisterForm.tsx
+++ b/src/components/Nav/AuthModal/RegisterForm.tsx
@@ -1,20 +1,24 @@
-import { Show, createSignal } from 'solid-js'
-import type { JSX } from 'solid-js'
-import styles from './AuthModal.module.scss'
-import { clsx } from 'clsx'
-import { SocialProviders } from './SocialProviders'
-import { ApiError } from '../../../utils/apiClient'
-import { email, setEmail } from './sharedLogic'
-import { useRouter } from '../../../stores/router'
 import type { AuthModalSearchParams } from './types'
-import { hideModal } from '../../../stores/ui'
-import { checkEmail, useEmailChecks } from '../../../stores/emailChecks'
-import { register } from '../../../stores/auth'
+import type { JSX } from 'solid-js'
+
+import { clsx } from 'clsx'
+import { Show, createSignal } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
+import { register } from '../../../stores/auth'
+import { checkEmail, useEmailChecks } from '../../../stores/emailChecks'
+import { useRouter } from '../../../stores/router'
+import { hideModal } from '../../../stores/ui'
+import { ApiError } from '../../../utils/apiClient'
 import { validateEmail } from '../../../utils/validateEmail'
-import { AuthModalHeader } from './AuthModalHeader'
 import { Icon } from '../../_shared/Icon'
 
+import { AuthModalHeader } from './AuthModalHeader'
+import { email, setEmail } from './sharedLogic'
+import { SocialProviders } from './SocialProviders'
+
+import styles from './AuthModal.module.scss'
+
 type FormFields = {
   fullName: string
   email: string
@@ -126,7 +130,7 @@ export const RegisterForm = () => {
       await register({
         name: cleanName,
         email: cleanEmail,
-        password: password()
+        password: password(),
       })
 
       setIsSuccess(true)
@@ -156,7 +160,7 @@ export const RegisterForm = () => {
             </Show>
             <div
               class={clsx('pretty-form__item', {
-                'pretty-form__item--error': validationErrors().fullName
+                'pretty-form__item--error': validationErrors().fullName,
               })}
             >
               <input
@@ -174,7 +178,7 @@ export const RegisterForm = () => {
 
             <div
               class={clsx('pretty-form__item', {
-                'pretty-form__item--error': validationErrors().email
+                'pretty-form__item--error': validationErrors().email,
               })}
             >
               <input
@@ -199,7 +203,7 @@ export const RegisterForm = () => {
                     onClick={(event) => {
                       event.preventDefault()
                       changeSearchParam({
-                        mode: 'login'
+                        mode: 'login',
                       })
                     }}
                   >
@@ -211,7 +215,7 @@ export const RegisterForm = () => {
 
             <div
               class={clsx('pretty-form__item', {
-                'pretty-form__item--error': validationErrors().password
+                'pretty-form__item--error': validationErrors().password,
               })}
             >
               <input
@@ -252,7 +256,7 @@ export const RegisterForm = () => {
                 class={styles.authLink}
                 onClick={() =>
                   changeSearchParam({
-                    mode: 'login'
+                    mode: 'login',
                   })
                 }
               >
diff --git a/src/components/Nav/AuthModal/SocialProviders.tsx b/src/components/Nav/AuthModal/SocialProviders.tsx
index e23f9dfa..f80f593c 100644
--- a/src/components/Nav/AuthModal/SocialProviders.tsx
+++ b/src/components/Nav/AuthModal/SocialProviders.tsx
@@ -1,9 +1,9 @@
-import { Icon } from '../../_shared/Icon'
+import { useLocalize } from '../../../context/localize'
 import { hideModal } from '../../../stores/ui'
+import { apiBaseUrl } from '../../../utils/config'
+import { Icon } from '../../_shared/Icon'
 
 import styles from './SocialProviders.module.scss'
-import { apiBaseUrl } from '../../../utils/config'
-import { useLocalize } from '../../../context/localize'
 
 type Provider = 'facebook' | 'google' | 'vk' | 'github'
 
diff --git a/src/components/Nav/AuthModal/index.tsx b/src/components/Nav/AuthModal/index.tsx
index 7a2a8e27..0823d5b3 100644
--- a/src/components/Nav/AuthModal/index.tsx
+++ b/src/components/Nav/AuthModal/index.tsx
@@ -1,22 +1,26 @@
-import { Dynamic } from 'solid-js/web'
-import { Show, Component, createEffect, createMemo } from 'solid-js'
-import { hideModal } from '../../../stores/ui'
-import { useRouter } from '../../../stores/router'
-import { clsx } from 'clsx'
-import styles from './AuthModal.module.scss'
-import { LoginForm } from './LoginForm'
-import { isMobile } from '../../../utils/media-query'
-import { RegisterForm } from './RegisterForm'
-import { ForgotPasswordForm } from './ForgotPasswordForm'
-import { EmailConfirm } from './EmailConfirm'
 import type { AuthModalMode, AuthModalSearchParams } from './types'
+
+import { clsx } from 'clsx'
+import { Show, Component, createEffect, createMemo } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
 import { useLocalize } from '../../../context/localize'
+import { useRouter } from '../../../stores/router'
+import { hideModal } from '../../../stores/ui'
+import { isMobile } from '../../../utils/media-query'
+
+import { EmailConfirm } from './EmailConfirm'
+import { ForgotPasswordForm } from './ForgotPasswordForm'
+import { LoginForm } from './LoginForm'
+import { RegisterForm } from './RegisterForm'
+
+import styles from './AuthModal.module.scss'
 
 const AUTH_MODAL_MODES: Record<AuthModalMode, Component> = {
   login: LoginForm,
   register: RegisterForm,
   'forgot-password': ForgotPasswordForm,
-  'confirm-email': EmailConfirm
+  'confirm-email': EmailConfirm,
 }
 
 export const AuthModal = () => {
@@ -40,7 +44,7 @@ export const AuthModal = () => {
     <div
       ref={rootRef}
       class={clsx(styles.view, {
-        row: !source
+        row: !source,
       })}
       classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }}
     >
@@ -54,7 +58,7 @@ export const AuthModal = () => {
               <h4>{t(`Join the global community of authors!`)}</h4>
               <p class={styles.authBenefits}>
                 {t(
-                  'Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine'
+                  'Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine',
                 )}
                 .&nbsp;
                 {t('New stories every day and even more!')}
@@ -77,7 +81,7 @@ export const AuthModal = () => {
       </Show>
       <div
         class={clsx(styles.auth, {
-          'col-md-12': !source
+          'col-md-12': !source,
         })}
       >
         <Dynamic component={AUTH_MODAL_MODES[mode()]} />
diff --git a/src/components/Nav/ConfirmModal/ConfirmModal.tsx b/src/components/Nav/ConfirmModal/ConfirmModal.tsx
index 63f6a767..767eb535 100644
--- a/src/components/Nav/ConfirmModal/ConfirmModal.tsx
+++ b/src/components/Nav/ConfirmModal/ConfirmModal.tsx
@@ -1,6 +1,7 @@
 import { useConfirm } from '../../../context/confirm'
 import { useLocalize } from '../../../context/localize'
 import { Button } from '../../_shared/Button'
+
 import styles from './ConfirmModal.module.scss'
 
 export const ConfirmModal = () => {
@@ -8,7 +9,7 @@ export const ConfirmModal = () => {
 
   const {
     confirmMessage,
-    actions: { resolveConfirm }
+    actions: { resolveConfirm },
   } = useConfirm()
 
   return (
diff --git a/src/components/Nav/Confirmed.tsx b/src/components/Nav/Confirmed.tsx
index 09adf3c2..fe615284 100644
--- a/src/components/Nav/Confirmed.tsx
+++ b/src/components/Nav/Confirmed.tsx
@@ -1,5 +1,6 @@
 import './Confirmed.scss'
 import { onMount } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
 
 export const Confirmed = (props: { token?: string }) => {
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 7dbe5026..0c1a8087 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -1,29 +1,28 @@
-import { Show, createSignal, createEffect, onMount, onCleanup, For } from 'solid-js'
-import { getPagePath, redirectPage } from '@nanostores/router'
-import { clsx } from 'clsx'
-
-import { Modal } from '../Modal'
-import { AuthModal } from '../AuthModal'
-import { HeaderAuth } from '../HeaderAuth'
-import { ConfirmModal } from '../ConfirmModal'
-import { getShareUrl, SharePopup } from '../../Article/SharePopup'
-import { Snackbar } from '../Snackbar'
-import { Icon } from '../../_shared/Icon'
 import type { Topic } from '../../../graphql/types.gen'
 
-import { useModalStore } from '../../../stores/ui'
-import { router, ROUTES, useRouter } from '../../../stores/router'
-
-import { getDescription } from '../../../utils/meta'
+import { getPagePath, redirectPage } from '@nanostores/router'
+import { clsx } from 'clsx'
+import { Show, createSignal, createEffect, onMount, onCleanup, For } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
+import { router, ROUTES, useRouter } from '../../../stores/router'
+import { useModalStore } from '../../../stores/ui'
+import { apiClient } from '../../../utils/apiClient'
+import { getDescription } from '../../../utils/meta'
+import { Icon } from '../../_shared/Icon'
+import { Subscribe } from '../../_shared/Subscribe'
+import { getShareUrl, SharePopup } from '../../Article/SharePopup'
+import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
+import { AuthModal } from '../AuthModal'
+import { ConfirmModal } from '../ConfirmModal'
+import { HeaderAuth } from '../HeaderAuth'
+import { Modal } from '../Modal'
+import { Snackbar } from '../Snackbar'
+
+import { Link } from './Link'
 
 import styles from './Header.module.scss'
-import { apiClient } from '../../../utils/apiClient'
-import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
-import { Link } from './Link'
-import { Subscribe } from '../../_shared/Subscribe'
 
 type Props = {
   title?: string
@@ -47,7 +46,7 @@ export const Header = (props: Props) => {
   const { modal } = useModalStore()
   const { page } = useRouter()
   const {
-    actions: { requireAuthentication }
+    actions: { requireAuthentication },
   } = useSession()
 
   const { searchParams } = useRouter<HeaderSearchParams>()
@@ -167,7 +166,7 @@ export const Header = (props: Props) => {
         [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
         [styles.headerScrolledBottom]:
           (getIsScrollingBottom() && getIsScrolled() && !isProfilePopupVisible()) || isSharePopupVisible(),
-        [styles.headerWithTitle]: Boolean(props.title)
+        [styles.headerWithTitle]: Boolean(props.title),
       }}
     >
       <Modal
@@ -318,7 +317,7 @@ export const Header = (props: Props) => {
                 <p
                   class={styles.mobileDescription}
                   innerHTML={t(
-                    'Independant magazine with an open horizontal cooperation about culture, science and society'
+                    'Independant magazine with an open horizontal cooperation about culture, science and society',
                   )}
                 />
                 <div class={styles.mobileCopyright}>
diff --git a/src/components/Nav/Header/Link.tsx b/src/components/Nav/Header/Link.tsx
index bbad79b9..67cf5318 100644
--- a/src/components/Nav/Header/Link.tsx
+++ b/src/components/Nav/Header/Link.tsx
@@ -1,8 +1,10 @@
-import styles from './Header.module.scss'
-import { router, ROUTES, useRouter } from '../../../stores/router'
-import { clsx } from 'clsx'
-import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
 import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
+
+import { router, ROUTES, useRouter } from '../../../stores/router'
+import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
+
+import styles from './Header.module.scss'
 
 type Props = {
   onMouseOver: (event?: MouseEvent, time?: number) => void
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 1ca47d3b..f1784d9a 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -1,19 +1,22 @@
-import styles from './Header/Header.module.scss'
-import { clsx } from 'clsx'
-import { router, useRouter } from '../../stores/router'
-import { Icon } from '../_shared/Icon'
-import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { ProfilePopup } from './ProfilePopup'
-import { Userpic } from '../Author/Userpic'
-import { showModal } from '../../stores/ui'
-import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
-import { useSession } from '../../context/session'
-import { useLocalize } from '../../context/localize'
 import { getPagePath } from '@nanostores/router'
-import { Button } from '../_shared/Button'
+import { clsx } from 'clsx'
+import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
+
 import { useEditorContext } from '../../context/editor'
-import { Popover } from '../_shared/Popover'
+import { useLocalize } from '../../context/localize'
 import { useNotifications } from '../../context/notifications'
+import { useSession } from '../../context/session'
+import { router, useRouter } from '../../stores/router'
+import { showModal } from '../../stores/ui'
+import { Button } from '../_shared/Button'
+import { Icon } from '../_shared/Icon'
+import { Popover } from '../_shared/Popover'
+import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
+import { Userpic } from '../Author/Userpic'
+
+import { ProfilePopup } from './ProfilePopup'
+
+import styles from './Header/Header.module.scss'
 
 type Props = {
   setIsProfilePopupVisible: (value: boolean) => void
@@ -32,12 +35,12 @@ export const HeaderAuth = (props: Props) => {
   const { session, isSessionLoaded, isAuthenticated } = useSession()
   const {
     unreadNotificationsCount,
-    actions: { showNotificationsPanel }
+    actions: { showNotificationsPanel },
   } = useNotifications()
 
   const {
     form,
-    actions: { toggleEditorPanel, saveShout, publishShout }
+    actions: { toggleEditorPanel, saveShout, publishShout },
   } = useEditorContext()
 
   const handleBellIconClick = (event: Event) => {
@@ -158,7 +161,7 @@ export const HeaderAuth = (props: Props) => {
                 {renderIconedButton({
                   value: t('Save'),
                   icon: 'save',
-                  action: handleSaveButtonClick
+                  action: handleSaveButtonClick,
                 })}
               </div>
 
@@ -166,7 +169,7 @@ export const HeaderAuth = (props: Props) => {
                 {renderIconedButton({
                   value: t('Publish'),
                   icon: 'publish',
-                  action: handlePublishButtonClick
+                  action: handlePublishButtonClick,
                 })}
               </div>
 
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index 0b6e1415..a1fe5380 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -1,13 +1,15 @@
-import { createEffect, createMemo, createSignal, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
+
+import { redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
+import { createEffect, createMemo, createSignal, Show } from 'solid-js'
+
+import { router } from '../../../stores/router'
 import { hideModal, useModalStore } from '../../../stores/ui'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
+import { Icon } from '../../_shared/Icon'
 
 import styles from './Modal.module.scss'
-import { redirectPage } from '@nanostores/router'
-import { router } from '../../../stores/router'
-import { Icon } from '../../_shared/Icon'
 
 interface Props {
   name: string
@@ -50,7 +52,7 @@ export const Modal = (props: Props) => {
               [styles.narrow]: props.variant === 'narrow',
               ['col-auto col-md-20 offset-md-2 col-lg-14 offset-lg-5']: props.variant === 'medium',
               [styles.noPadding]: props.noPadding,
-              [styles.maxHeight]: props.maxHeight
+              [styles.maxHeight]: props.maxHeight,
             })}
             onClick={(event) => event.stopPropagation()}
           >
diff --git a/src/components/Nav/Modal/Opener.tsx b/src/components/Nav/Modal/Opener.tsx
index b13e0007..a56d7f69 100644
--- a/src/components/Nav/Modal/Opener.tsx
+++ b/src/components/Nav/Modal/Opener.tsx
@@ -1,5 +1,6 @@
-import type { JSX } from 'solid-js/jsx-runtime'
 import type { ModalType } from '../../../stores/ui'
+import type { JSX } from 'solid-js/jsx-runtime'
+
 import { showModal } from '../../../stores/ui'
 
 export default (props: { name: ModalType; children: JSX.Element }) => {
diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx
index 6e6efba5..3427fd52 100644
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@@ -1,17 +1,20 @@
-import { useSession } from '../../context/session'
 import type { PopupProps } from '../_shared/Popup'
-import { Popup } from '../_shared/Popup'
-import styles from '../_shared/Popup/Popup.module.scss'
+
 import { getPagePath } from '@nanostores/router'
-import { router } from '../../stores/router'
+
 import { useLocalize } from '../../context/localize'
+import { useSession } from '../../context/session'
+import { router } from '../../stores/router'
+import { Popup } from '../_shared/Popup'
+
+import styles from '../_shared/Popup/Popup.module.scss'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
 export const ProfilePopup = (props: ProfilePopupProps) => {
   const {
     user,
-    actions: { signOut }
+    actions: { signOut },
   } = useSession()
 
   const { t } = useLocalize()
diff --git a/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.tsx b/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.tsx
index 76e96c85..228f0b0a 100644
--- a/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.tsx
+++ b/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.tsx
@@ -1,8 +1,10 @@
-import styles from './ProfileSettingsNavigation.module.scss'
 import { clsx } from 'clsx'
+
 import { useLocalize } from '../../../context/localize'
 import { useRouter } from '../../../stores/router'
 
+import styles from './ProfileSettingsNavigation.module.scss'
+
 export const ProfileSettingsNavigation = () => {
   const { t } = useLocalize()
   const { page } = useRouter()
diff --git a/src/components/Nav/Snackbar.tsx b/src/components/Nav/Snackbar.tsx
index ac9b1091..59bbc634 100644
--- a/src/components/Nav/Snackbar.tsx
+++ b/src/components/Nav/Snackbar.tsx
@@ -1,11 +1,13 @@
-import { Show } from 'solid-js'
-import { useSnackbar } from '../../context/snackbar'
-import styles from './Snackbar.module.scss'
-import { Transition } from 'solid-transition-group'
 import { clsx } from 'clsx'
+import { Show } from 'solid-js'
+import { Transition } from 'solid-transition-group'
+
+import { useSnackbar } from '../../context/snackbar'
 import { Icon } from '../_shared/Icon'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 
+import styles from './Snackbar.module.scss'
+
 export const Snackbar = () => {
   const { snackbarMessage } = useSnackbar()
 
@@ -13,7 +15,7 @@ export const Snackbar = () => {
     <div
       class={clsx(styles.snackbar, {
         [styles.error]: snackbarMessage()?.type === 'error',
-        [styles.success]: snackbarMessage()?.type === 'success'
+        [styles.success]: snackbarMessage()?.type === 'success',
       })}
     >
       <ShowOnlyOnClient>
diff --git a/src/components/Nav/Topics/Topics.tsx b/src/components/Nav/Topics/Topics.tsx
index 11662329..2248a639 100644
--- a/src/components/Nav/Topics/Topics.tsx
+++ b/src/components/Nav/Topics/Topics.tsx
@@ -1,9 +1,11 @@
-import { Icon } from '../../_shared/Icon'
-import { useLocalize } from '../../../context/localize'
-import styles from './Topics.module.scss'
-import { clsx } from 'clsx'
-import { router, useRouter } from '../../../stores/router'
 import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
+
+import { useLocalize } from '../../../context/localize'
+import { router, useRouter } from '../../../stores/router'
+import { Icon } from '../../_shared/Icon'
+
+import styles from './Topics.module.scss'
 
 export const Topics = () => {
   const { t } = useLocalize()
diff --git a/src/components/NotificationsPanel/EmptyMessage/EmptyMessage.tsx b/src/components/NotificationsPanel/EmptyMessage/EmptyMessage.tsx
index 855009ff..39e0e597 100644
--- a/src/components/NotificationsPanel/EmptyMessage/EmptyMessage.tsx
+++ b/src/components/NotificationsPanel/EmptyMessage/EmptyMessage.tsx
@@ -1,7 +1,9 @@
 import { clsx } from 'clsx'
-import styles from './EmptyMessage.module.scss'
+
 import { useLocalize } from '../../../context/localize'
 
+import styles from './EmptyMessage.module.scss'
+
 export const EmptyMessage = () => {
   const { t } = useLocalize()
 
diff --git a/src/components/NotificationsPanel/NotificationView/NotificationView.tsx b/src/components/NotificationsPanel/NotificationView/NotificationView.tsx
index ae5b1dd9..5751884b 100644
--- a/src/components/NotificationsPanel/NotificationView/NotificationView.tsx
+++ b/src/components/NotificationsPanel/NotificationView/NotificationView.tsx
@@ -1,15 +1,18 @@
-import { clsx } from 'clsx'
 import type { Notification } from '../../../graphql/types.gen'
-import { createMemo, createSignal, onMount, Show } from 'solid-js'
-import { NotificationType } from '../../../graphql/types.gen'
-import { getPagePath, openPage } from '@nanostores/router'
-import { router, useRouter } from '../../../stores/router'
-import { useNotifications } from '../../../context/notifications'
-import { useLocalize } from '../../../context/localize'
 import type { ArticlePageSearchParams } from '../../Article/FullArticle'
-import { TimeAgo } from '../../_shared/TimeAgo'
-import styles from './NotificationView.module.scss'
+
+import { getPagePath, openPage } from '@nanostores/router'
+import { clsx } from 'clsx'
+import { createMemo, createSignal, onMount, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { useNotifications } from '../../../context/notifications'
+import { NotificationType } from '../../../graphql/types.gen'
+import { router, useRouter } from '../../../stores/router'
 import { GroupAvatar } from '../../_shared/GroupAvatar'
+import { TimeAgo } from '../../_shared/TimeAgo'
+
+import styles from './NotificationView.module.scss'
 
 type Props = {
   notification: Notification
@@ -36,7 +39,7 @@ type NotificationData = {
 
 export const NotificationView = (props: Props) => {
   const {
-    actions: { markNotificationAsRead, hideNotificationsPanel }
+    actions: { markNotificationAsRead, hideNotificationsPanel },
   } = useNotifications()
 
   const { changeSearchParam } = useRouter<ArticlePageSearchParams>()
@@ -89,7 +92,7 @@ export const NotificationView = (props: Props) => {
         return (
           <>
             {t('NotificationNewCommentText1', {
-              commentsCount: props.notification.occurrences
+              commentsCount: props.notification.occurrences,
             })}{' '}
             <a href={getPagePath(router, 'article', { slug: data().shout.slug })} onClick={handleLinkClick}>
               {shoutTitle}
@@ -99,7 +102,7 @@ export const NotificationView = (props: Props) => {
               {lastUser().name}
             </a>{' '}
             {t('NotificationNewCommentText3', {
-              restUsersCount: data().users.length - 1
+              restUsersCount: data().users.length - 1,
             })}
           </>
         )
@@ -108,7 +111,7 @@ export const NotificationView = (props: Props) => {
         return (
           <>
             {t('NotificationNewReplyText1', {
-              commentsCount: props.notification.occurrences
+              commentsCount: props.notification.occurrences,
             })}{' '}
             <a href={getPagePath(router, 'article', { slug: data().shout.slug })} onClick={handleLinkClick}>
               {shoutTitle}
@@ -118,7 +121,7 @@ export const NotificationView = (props: Props) => {
               {lastUser().name}
             </a>{' '}
             {t('NotificationNewReplyText3', {
-              restUsersCount: data().users.length - 1
+              restUsersCount: data().users.length - 1,
             })}
           </>
         )
@@ -158,7 +161,7 @@ export const NotificationView = (props: Props) => {
     <Show when={data()}>
       <div
         class={clsx(styles.NotificationView, props.class, {
-          [styles.seen]: props.notification.seen
+          [styles.seen]: props.notification.seen,
         })}
         onClick={handleClick}
       >
diff --git a/src/components/NotificationsPanel/NotificationsPanel.tsx b/src/components/NotificationsPanel/NotificationsPanel.tsx
index 30619e70..72ed3780 100644
--- a/src/components/NotificationsPanel/NotificationsPanel.tsx
+++ b/src/components/NotificationsPanel/NotificationsPanel.tsx
@@ -1,16 +1,19 @@
 import { clsx } from 'clsx'
-import styles from './NotificationsPanel.module.scss'
+import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from 'solid-js'
+import { throttle } from 'throttle-debounce'
+
+import { useLocalize } from '../../context/localize'
+import { PAGE_SIZE, useNotifications } from '../../context/notifications'
+import { useSession } from '../../context/session'
 import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
 import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
-import { useLocalize } from '../../context/localize'
-import { Icon } from '../_shared/Icon'
-import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from 'solid-js'
-import { PAGE_SIZE, useNotifications } from '../../context/notifications'
-import { NotificationView } from './NotificationView'
-import { EmptyMessage } from './EmptyMessage'
 import { Button } from '../_shared/Button'
-import { throttle } from 'throttle-debounce'
-import { useSession } from '../../context/session'
+import { Icon } from '../_shared/Icon'
+
+import { EmptyMessage } from './EmptyMessage'
+import { NotificationView } from './NotificationView'
+
+import styles from './NotificationsPanel.module.scss'
 
 type Props = {
   isOpen: boolean
@@ -51,20 +54,20 @@ export const NotificationsPanel = (props: Props) => {
     unreadNotificationsCount,
     loadedNotificationsCount,
     totalNotificationsCount,
-    actions: { loadNotifications, markAllNotificationsAsRead }
+    actions: { loadNotifications, markAllNotificationsAsRead },
   } = useNotifications()
   const handleHide = () => {
     props.onClose()
   }
 
   const panelRef: { current: HTMLDivElement } = {
-    current: null
+    current: null,
   }
 
   useOutsideClickHandler({
     containerRef: panelRef,
     predicate: () => props.isOpen,
-    handler: () => handleHide()
+    handler: () => handleHide(),
   })
 
   let windowScrollTop = 0
@@ -150,14 +153,14 @@ export const NotificationsPanel = (props: Props) => {
           await loadNextPage()
           setIsLoading(false)
         }
-      }
-    )
+      },
+    ),
   )
 
   return (
     <div
       class={clsx(styles.container, {
-        [styles.isOpened]: props.isOpen
+        [styles.isOpened]: props.isOpen,
       })}
     >
       <div ref={(el) => (panelRef.current = el)} class={styles.panel}>
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
index d35601e9..23632214 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents/TableOfContents.tsx
@@ -1,12 +1,14 @@
-import { For, Show, createSignal, createEffect, on, onMount, onCleanup } from 'solid-js'
 import { clsx } from 'clsx'
-import { DEFAULT_HEADER_OFFSET } from '../../stores/router'
-import { useLocalize } from '../../context/localize'
-import { Icon } from '../_shared/Icon'
-import styles from './TableOfContents.module.scss'
-import { isDesktop } from '../../utils/media-query'
+import { For, Show, createSignal, createEffect, on, onMount, onCleanup } from 'solid-js'
 import { throttle, debounce } from 'throttle-debounce'
 
+import { useLocalize } from '../../context/localize'
+import { DEFAULT_HEADER_OFFSET } from '../../stores/router'
+import { isDesktop } from '../../utils/media-query'
+import { Icon } from '../_shared/Icon'
+
+import styles from './TableOfContents.module.scss'
+
 interface Props {
   variant: 'article' | 'editor'
   parentSelector: string
@@ -23,7 +25,7 @@ const scrollToHeader = (element) => {
     top:
       element.getBoundingClientRect().top -
       document.body.getBoundingClientRect().top -
-      DEFAULT_HEADER_OFFSET
+      DEFAULT_HEADER_OFFSET,
   })
 }
 
@@ -43,7 +45,7 @@ export const TableOfContents = (props: Props) => {
   const updateHeadings = () => {
     setHeadings(
       // eslint-disable-next-line unicorn/prefer-spread
-      Array.from(document.querySelector(props.parentSelector).querySelectorAll<HTMLElement>('h2, h3, h4'))
+      Array.from(document.querySelector(props.parentSelector).querySelectorAll<HTMLElement>('h2, h3, h4')),
     )
     setAreHeadingsLoaded(true)
   }
@@ -58,8 +60,8 @@ export const TableOfContents = (props: Props) => {
   createEffect(
     on(
       () => props.body,
-      () => debouncedUpdateHeadings()
-    )
+      () => debouncedUpdateHeadings(),
+    ),
   )
 
   onMount(() => {
@@ -75,7 +77,7 @@ export const TableOfContents = (props: Props) => {
     >
       <div
         class={clsx(styles.TableOfContentsFixedWrapper, {
-          [styles.TableOfContentsFixedWrapperLefted]: props.variant === 'editor'
+          [styles.TableOfContentsFixedWrapperLefted]: props.variant === 'editor',
         })}
       >
         <div class={styles.TableOfContentsContainer}>
@@ -92,7 +94,7 @@ export const TableOfContents = (props: Props) => {
                         class={clsx(styles.TableOfContentsHeadingsItem, {
                           [styles.TableOfContentsHeadingsItemH3]: h.nodeName === 'H3',
                           [styles.TableOfContentsHeadingsItemH4]: h.nodeName === 'H4',
-                          [styles.active]: index() === activeHeaderIndex()
+                          [styles.active]: index() === activeHeaderIndex(),
                         })}
                         innerHTML={h.textContent}
                         onClick={(e) => {
@@ -111,9 +113,9 @@ export const TableOfContents = (props: Props) => {
             class={clsx(
               styles.TableOfContentsPrimaryButton,
               {
-                [styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible()
+                [styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible(),
               },
-              'd-none d-xl-block'
+              'd-none d-xl-block',
             )}
             onClick={(e) => {
               e.preventDefault()
@@ -149,9 +151,9 @@ export const TableOfContents = (props: Props) => {
             class={clsx(
               styles.TableOfContentsPrimaryButton,
               {
-                [styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible()
+                [styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible(),
               },
-              'd-xl-none'
+              'd-xl-none',
             )}
             onClick={(e) => {
               e.preventDefault()
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 7dab0cf0..584aaed5 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -1,19 +1,20 @@
-import { createMemo, createSignal, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
-import { FollowingEntity } from '../../graphql/types.gen'
 
-import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
-import { useSession } from '../../context/session'
-import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
-import { Icon } from '../_shared/Icon'
+import { createMemo, createSignal, Show } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
-import { CardTopic } from '../Feed/CardTopic'
-import { CheckButton } from '../_shared/CheckButton'
+import { useSession } from '../../context/session'
+import { FollowingEntity } from '../../graphql/types.gen'
+import { follow, unfollow } from '../../stores/zine/common'
 import { capitalize } from '../../utils/capitalize'
+import { Button } from '../_shared/Button'
+import { CheckButton } from '../_shared/CheckButton'
+import { Icon } from '../_shared/Icon'
+import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
+import { CardTopic } from '../Feed/CardTopic'
 
 import styles from './Card.module.scss'
-import { Button } from '../_shared/Button'
 import stylesButton from '../_shared/Button/Button.module.scss'
 
 interface TopicProps {
@@ -38,7 +39,7 @@ export const TopicCard = (props: TopicProps) => {
   const {
     subscriptions,
     isSessionLoaded,
-    actions: { loadSubscriptions, requireAuthentication }
+    actions: { loadSubscriptions, requireAuthentication },
   } = useSession()
 
   const [isSubscribing, setIsSubscribing] = createSignal(false)
@@ -89,7 +90,7 @@ export const TopicCard = (props: TopicProps) => {
         classList={{
           row: !props.subscribeButtonBottom,
           [styles.topicCompact]: props.compact,
-          [styles.topicInRow]: props.isTopicInRow
+          [styles.topicInRow]: props.isTopicInRow,
         }}
       >
         <div
@@ -97,7 +98,7 @@ export const TopicCard = (props: TopicProps) => {
             [clsx('col-sm-18 col-md-24 col-lg-14 col-xl-15', styles.topicDetails)]: props.isNarrow,
             [clsx('col-24 col-sm-17 col-md-18', styles.topicDetails)]: props.compact,
             [clsx('col-sm-17 col-md-18', styles.topicDetails)]:
-              !props.subscribeButtonBottom && !props.isNarrow && !props.compact
+              !props.subscribeButtonBottom && !props.isNarrow && !props.compact,
           }}
         >
           <Show when={props.topic.title && !props.isCardMode}>
@@ -132,7 +133,7 @@ export const TopicCard = (props: TopicProps) => {
           classList={{
             'col-sm-6 col-md-24 col-lg-10 col-xl-9': props.isNarrow,
             'col-24 col-sm-7 col-md-6': props.compact,
-            'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact
+            'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact,
           }}
         >
           <ShowOnlyOnClient>
@@ -151,7 +152,7 @@ export const TopicCard = (props: TopicProps) => {
                   isSubscribeButton={true}
                   class={clsx(styles.actionButton, {
                     [styles.isSubscribing]: isSubscribing(),
-                    [stylesButton.subscribed]: subscribed()
+                    [stylesButton.subscribed]: subscribed(),
                   })}
                   disabled={isSubscribing()}
                 />
diff --git a/src/components/Topic/FloorHeader.tsx b/src/components/Topic/FloorHeader.tsx
index 6f8557de..84977c26 100644
--- a/src/components/Topic/FloorHeader.tsx
+++ b/src/components/Topic/FloorHeader.tsx
@@ -1,7 +1,9 @@
 import type { Topic } from '../../graphql/types.gen'
-import { Icon } from '../_shared/Icon'
-import './FloorHeader.scss'
+
 import { useLocalize } from '../../context/localize'
+import { Icon } from '../_shared/Icon'
+
+import './FloorHeader.scss'
 
 export default (props: { topic: Topic; color: string }) => {
   const { t } = useLocalize()
diff --git a/src/components/Topic/Full.tsx b/src/components/Topic/Full.tsx
index 9ce2a389..0109b464 100644
--- a/src/components/Topic/Full.tsx
+++ b/src/components/Topic/Full.tsx
@@ -1,14 +1,16 @@
-import { createMemo, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
-import { FollowingEntity } from '../../graphql/types.gen'
-import styles from './Full.module.scss'
-import { follow, unfollow } from '../../stores/zine/common'
 
 import { clsx } from 'clsx'
-import { useSession } from '../../context/session'
+import { createMemo, Show } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
+import { useSession } from '../../context/session'
+import { FollowingEntity } from '../../graphql/types.gen'
+import { follow, unfollow } from '../../stores/zine/common'
 import { Button } from '../_shared/Button'
 
+import styles from './Full.module.scss'
+
 type Props = {
   topic: Topic
 }
@@ -16,13 +18,13 @@ type Props = {
 export const FullTopic = (props: Props) => {
   const {
     subscriptions,
-    actions: { requireAuthentication, loadSubscriptions }
+    actions: { requireAuthentication, loadSubscriptions },
   } = useSession()
 
   const { t } = useLocalize()
 
   const subscribed = createMemo(() =>
-    subscriptions().topics.some((topic) => topic.slug === props.topic?.slug)
+    subscriptions().topics.some((topic) => topic.slug === props.topic?.slug),
   )
 
   const handleSubscribe = (really: boolean) => {
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index 3387a2e8..9ad6da66 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -1,13 +1,15 @@
 import { clsx } from 'clsx'
-import styles from './TopicBadge.module.scss'
-import { FollowingEntity, Topic } from '../../../graphql/types.gen'
 import { createMemo, createSignal, Show } from 'solid-js'
-import { Button } from '../../_shared/Button'
-import { useSession } from '../../../context/session'
+
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { FollowingEntity, Topic } from '../../../graphql/types.gen'
 import { follow, unfollow } from '../../../stores/zine/common'
-import { CheckButton } from '../../_shared/CheckButton'
 import { getImageUrl } from '../../../utils/getImageUrl'
+import { Button } from '../../_shared/Button'
+import { CheckButton } from '../../_shared/CheckButton'
+
+import styles from './TopicBadge.module.scss'
 
 type Props = {
   topic: Topic
@@ -20,11 +22,11 @@ export const TopicBadge = (props: Props) => {
   const {
     isAuthenticated,
     subscriptions,
-    actions: { loadSubscriptions }
+    actions: { loadSubscriptions },
   } = useSession()
 
   const subscribed = createMemo(() =>
-    subscriptions().topics.some((topic) => topic.slug === props.topic.slug)
+    subscriptions().topics.some((topic) => topic.slug === props.topic.slug),
   )
 
   const subscribe = async (really = true) => {
@@ -45,7 +47,7 @@ export const TopicBadge = (props: Props) => {
         class={clsx(styles.picture, { [styles.withImage]: props.topic.pic })}
         style={
           props.topic.pic && {
-            'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`
+            'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
           }
         }
       />
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 4bd74962..6d01a23f 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -1,12 +1,14 @@
-import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
-import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors'
-import { useRouter } from '../../stores/router'
+
 import { clsx } from 'clsx'
-import { SearchField } from '../_shared/SearchField'
-import { scrollHandler } from '../../utils/scroll'
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
+import { useRouter } from '../../stores/router'
+import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors'
 import { dummyFilter } from '../../utils/dummyFilter'
+import { scrollHandler } from '../../utils/scroll'
+import { SearchField } from '../_shared/SearchField'
 import { AuthorBadge } from '../Author/AuthorBadge'
 
 import styles from './AllAuthors.module.scss'
@@ -28,7 +30,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
   const { searchParams, changeSearchParam } = useRouter<AllAuthorsPageSearchParams>()
   const { sortedAuthors } = useAuthorsStore({
     authors: props.authors,
-    sortBy: searchParams().by || 'shouts'
+    sortBy: searchParams().by || 'shouts',
   })
 
   const [searchQuery, setSearchQuery] = createSignal('')
@@ -36,7 +38,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
   createEffect(() => {
     if (!searchParams().by) {
       changeSearchParam({
-        by: 'shouts'
+        by: 'shouts',
       })
     }
   })
@@ -64,7 +66,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
         acc[letter].push(author)
         return acc
       },
-      {} as { [letter: string]: Author[] }
+      {} as { [letter: string]: Author[] },
     )
   })
 
@@ -88,7 +90,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
         <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
           <li
             classList={{
-              'view-switcher__item--selected': !searchParams().by || searchParams().by === 'shouts'
+              'view-switcher__item--selected': !searchParams().by || searchParams().by === 'shouts',
             }}
           >
             <a href="/authors?by=shouts">{t('By shouts')}</a>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index decf7abe..c440f4f5 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -1,15 +1,16 @@
-import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 
-import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'
-import { useRouter } from '../../stores/router'
-import { TopicCard } from '../Topic/Card'
 import { clsx } from 'clsx'
-import { useSession } from '../../context/session'
-import { SearchField } from '../_shared/SearchField'
-import { scrollHandler } from '../../utils/scroll'
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
+
 import { useLocalize } from '../../context/localize'
+import { useSession } from '../../context/session'
+import { useRouter } from '../../stores/router'
+import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'
 import { dummyFilter } from '../../utils/dummyFilter'
+import { scrollHandler } from '../../utils/scroll'
+import { SearchField } from '../_shared/SearchField'
+import { TopicCard } from '../Topic/Card'
 
 import styles from './AllTopics.module.scss'
 
@@ -31,7 +32,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
 
   const { sortedTopics } = useTopicsStore({
     topics: props.topics,
-    sortBy: searchParams().by || 'shouts'
+    sortBy: searchParams().by || 'shouts',
   })
 
   const { subscriptions } = useSession()
@@ -39,7 +40,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   createEffect(() => {
     if (!searchParams().by) {
       changeSearchParam({
-        by: 'shouts'
+        by: 'shouts',
       })
     }
   })
@@ -57,7 +58,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
         acc[letter].push(topic)
         return acc
       },
-      {} as { [letter: string]: Topic[] }
+      {} as { [letter: string]: Topic[] },
     )
   })
 
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index d5123465..a0463ffc 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,23 +1,26 @@
-import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffect } from 'solid-js'
 import type { Author, Shout, Topic } from '../../../graphql/types.gen'
+
+import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
+import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffect } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { router, useRouter } from '../../../stores/router'
+import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
+import { useAuthorsStore } from '../../../stores/zine/authors'
+import { apiClient } from '../../../utils/apiClient'
+import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
+import { splitToPages } from '../../../utils/splitToPages'
+import { Loading } from '../../_shared/Loading'
+import { Comment } from '../../Article/Comment'
+import { AuthorCard } from '../../Author/AuthorCard'
+import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
 import { Row1 } from '../../Feed/Row1'
 import { Row2 } from '../../Feed/Row2'
 import { Row3 } from '../../Feed/Row3'
-import { useAuthorsStore } from '../../../stores/zine/authors'
-import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
-import { router, useRouter } from '../../../stores/router'
-import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
-import { splitToPages } from '../../../utils/splitToPages'
+
 import styles from './Author.module.scss'
 import stylesArticle from '../../Article/Article.module.scss'
-import { clsx } from 'clsx'
-import { AuthorCard } from '../../Author/AuthorCard'
-import { apiClient } from '../../../utils/apiClient'
-import { Comment } from '../../Article/Comment'
-import { useLocalize } from '../../../context/localize'
-import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
-import { getPagePath } from '@nanostores/router'
-import { Loading } from '../../_shared/Loading'
 
 type Props = {
   shouts: Shout[]
@@ -47,7 +50,7 @@ export const AuthorView = (props: Props) => {
     try {
       const [getAuthors, getTopics] = await Promise.all([
         apiClient.getAuthorFollowingUsers({ slug: props.authorSlug }),
-        apiClient.getAuthorFollowingTopics({ slug: props.authorSlug })
+        apiClient.getAuthorFollowingTopics({ slug: props.authorSlug }),
       ])
       const authors = getAuthors
       const topics = getTopics
@@ -90,7 +93,7 @@ export const AuthorView = (props: Props) => {
     const { hasMore } = await loadShouts({
       filters: { author: props.authorSlug },
       limit: LOAD_MORE_PAGE_SIZE,
-      offset: sortedArticles().length
+      offset: sortedArticles().length,
     })
     setIsLoadMoreButtonVisible(hasMore)
     restoreScrollPosition()
@@ -106,7 +109,7 @@ export const AuthorView = (props: Props) => {
   // })
 
   const pages = createMemo<Shout[][]>(() =>
-    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
+    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
   )
 
   const [commented, setCommented] = createSignal([])
@@ -115,7 +118,7 @@ export const AuthorView = (props: Props) => {
     if (getPage().route === 'authorComments') {
       try {
         const data = await apiClient.getReactionsBy({
-          by: { comment: true, createdBy: props.authorSlug }
+          by: { comment: true, createdBy: props.authorSlug },
         })
         setCommented(data)
       } catch (error) {
diff --git a/src/components/Views/DraftsView/DraftsView.tsx b/src/components/Views/DraftsView/DraftsView.tsx
index d98efe08..7eda20d1 100644
--- a/src/components/Views/DraftsView/DraftsView.tsx
+++ b/src/components/Views/DraftsView/DraftsView.tsx
@@ -1,13 +1,15 @@
+import { openPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import styles from './DraftsView.module.scss'
 import { createSignal, For, onMount, Show } from 'solid-js'
-import { Draft } from '../../Draft'
+
+import { useEditorContext } from '../../../context/editor'
 import { useSession } from '../../../context/session'
 import { Shout } from '../../../graphql/types.gen'
-import { apiClient } from '../../../utils/apiClient'
-import { useEditorContext } from '../../../context/editor'
-import { openPage } from '@nanostores/router'
 import { router } from '../../../stores/router'
+import { apiClient } from '../../../utils/apiClient'
+import { Draft } from '../../Draft'
+
+import styles from './DraftsView.module.scss'
 
 export const DraftsView = () => {
   const { isAuthenticated, isSessionLoaded } = useSession()
@@ -24,7 +26,7 @@ export const DraftsView = () => {
   })
 
   const {
-    actions: { publishShoutById, deleteShout }
+    actions: { publishShoutById, deleteShout },
   } = useEditorContext()
 
   const handleDraftDelete = (shout: Shout) => {
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index c7168333..501c5c06 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -1,30 +1,33 @@
-import { Accessor, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { useLocalize } from '../../context/localize'
-import { clsx } from 'clsx'
-
 import type { Shout, Topic } from '../../graphql/types.gen'
-import { useRouter } from '../../stores/router'
-import { ShoutForm, useEditorContext } from '../../context/editor'
-import { Editor, Panel } from '../Editor'
-import { Icon } from '../_shared/Icon'
-import styles from './Edit.module.scss'
-import { GrowingTextarea } from '../_shared/GrowingTextarea'
-import { VideoUploader } from '../Editor/VideoUploader'
-import { AudioUploader } from '../Editor/AudioUploader'
-import { slugify } from '../../utils/slugify'
-import { ImageSwiper } from '../_shared/SolidSwiper'
-import { DropArea } from '../_shared/DropArea'
-import { LayoutType, MediaItem } from '../../pages/types'
-import { clone } from '../../utils/clone'
+
+import { clsx } from 'clsx'
 import deepEqual from 'fast-deep-equal'
-import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
-import { PublishSettings } from './PublishSettings'
+import { Accessor, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { createStore } from 'solid-js/store'
-import SimplifiedEditor from '../Editor/SimplifiedEditor'
-import { isDesktop } from '../../utils/media-query'
-import { TableOfContents } from '../TableOfContents'
+
+import { ShoutForm, useEditorContext } from '../../context/editor'
+import { useLocalize } from '../../context/localize'
+import { LayoutType, MediaItem } from '../../pages/types'
+import { useRouter } from '../../stores/router'
+import { clone } from '../../utils/clone'
 import { getImageUrl } from '../../utils/getImageUrl'
+import { isDesktop } from '../../utils/media-query'
+import { slugify } from '../../utils/slugify'
+import { DropArea } from '../_shared/DropArea'
+import { GrowingTextarea } from '../_shared/GrowingTextarea'
+import { Icon } from '../_shared/Icon'
 import { Popover } from '../_shared/Popover'
+import { ImageSwiper } from '../_shared/SolidSwiper'
+import { Editor, Panel } from '../Editor'
+import { AudioUploader } from '../Editor/AudioUploader'
+import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
+import SimplifiedEditor from '../Editor/SimplifiedEditor'
+import { VideoUploader } from '../Editor/VideoUploader'
+import { TableOfContents } from '../TableOfContents'
+
+import { PublishSettings } from './PublishSettings'
+
+import styles from './Edit.module.scss'
 
 type Props = {
   shout: Shout
@@ -33,7 +36,7 @@ type Props = {
 export const MAX_HEADER_LIMIT = 100
 export const EMPTY_TOPIC: Topic = {
   id: -1,
-  slug: ''
+  slug: '',
 }
 
 const AUTO_SAVE_INTERVAL = 5000
@@ -41,7 +44,7 @@ const handleScrollTopButtonClick = (e) => {
   e.preventDefault()
   window.scrollTo({
     top: 0,
-    behavior: 'smooth'
+    behavior: 'smooth',
   })
 }
 
@@ -54,7 +57,7 @@ export const EditView = (props: Props) => {
   const {
     form,
     formErrors,
-    actions: { setForm, setFormErrors, saveDraft, saveDraftToLocalStorage, getDraftFromLocalStorage }
+    actions: { setForm, setFormErrors, saveDraft, saveDraftToLocalStorage, getDraftFromLocalStorage },
   } = useEditorContext()
 
   const shoutTopics = props.shout.topics || []
@@ -75,7 +78,7 @@ export const EditView = (props: Props) => {
       body: props.shout.body,
       coverImageUrl: props.shout.cover,
       media: props.shout.media,
-      layout: props.shout.layout
+      layout: props.shout.layout,
     })
   }
 
@@ -106,7 +109,7 @@ export const EditView = (props: Props) => {
     const handleBeforeUnload = (event) => {
       if (!deepEqual(prevForm, form)) {
         event.returnValue = t(
-          `There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?`
+          `There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?`,
         )
       }
     }
@@ -145,7 +148,7 @@ export const EditView = (props: Props) => {
   const [baseAudioFields, setBaseAudioFields] = createSignal({
     artist: '',
     date: '',
-    genre: ''
+    genre: '',
   })
 
   const handleBaseFieldsChange = (key, value) => {
@@ -219,7 +222,7 @@ export const EditView = (props: Props) => {
           <div class="wide-container">
             <button
               class={clsx(styles.scrollTopButton, {
-                [styles.visible]: isScrolled()
+                [styles.visible]: isScrolled(),
               })}
               onClick={handleScrollTopButtonClick}
             >
@@ -343,7 +346,9 @@ export const EditView = (props: Props) => {
                           <div
                             class={styles.cover}
                             style={{
-                              'background-image': `url(${getImageUrl(form.coverImageUrl, { width: 1600 })})`
+                              'background-image': `url(${getImageUrl(form.coverImageUrl, {
+                                width: 1600,
+                              })})`,
                             }}
                           >
                             <Popover content={t('Delete cover')}>
diff --git a/src/components/Views/Expo/Expo.tsx b/src/components/Views/Expo/Expo.tsx
index 1deab51e..e230f611 100644
--- a/src/components/Views/Expo/Expo.tsx
+++ b/src/components/Views/Expo/Expo.tsx
@@ -1,18 +1,20 @@
-import styles from './Expo.module.scss'
-import { LoadShoutsOptions, Shout } from '../../../graphql/types.gen'
+import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from 'solid-js'
-import { ArticleCard } from '../../Feed/ArticleCard'
-import { Loading } from '../../_shared/Loading'
-import { Button } from '../../_shared/Button'
+
 import { useLocalize } from '../../../context/localize'
-import { router, useRouter } from '../../../stores/router'
+import { LoadShoutsOptions, Shout } from '../../../graphql/types.gen'
 import { LayoutType } from '../../../pages/types'
+import { router, useRouter } from '../../../stores/router'
 import { loadShouts, resetSortedArticles, useArticlesStore } from '../../../stores/zine/articles'
 import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
 import { splitToPages } from '../../../utils/splitToPages'
-import { clsx } from 'clsx'
-import { getPagePath } from '@nanostores/router'
+import { Button } from '../../_shared/Button'
 import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
+import { Loading } from '../../_shared/Loading'
+import { ArticleCard } from '../../Feed/ArticleCard'
+
+import styles from './Expo.module.scss'
 
 type Props = {
   shouts: Shout[]
@@ -27,14 +29,14 @@ export const Expo = (props: Props) => {
   const { page: getPage } = useRouter()
   const getLayout = createMemo<LayoutType>(() => getPage().params['layout'] as LayoutType)
   const { sortedArticles } = useArticlesStore({
-    shouts: isLoaded() ? props.shouts : []
+    shouts: isLoaded() ? props.shouts : [],
   })
 
   const loadMore = async (count) => {
     saveScrollPosition()
     const options: LoadShoutsOptions = {
       limit: count,
-      offset: sortedArticles().length
+      offset: sortedArticles().length,
     }
 
     options.filters = getLayout() ? { layout: getLayout() } : { excludeLayout: 'article' }
@@ -45,7 +47,7 @@ export const Expo = (props: Props) => {
   }
 
   const pages = createMemo<Shout[][]>(() =>
-    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
+    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
   )
 
   onMount(() => {
@@ -70,8 +72,8 @@ export const Expo = (props: Props) => {
         resetSortedArticles()
         loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
 
   onCleanup(() => {
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 458d86ad..e554c743 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -1,23 +1,26 @@
+import type { Author, LoadShoutsOptions, Reaction, Shout } from '../../graphql/types.gen'
+
+import { getPagePath } from '@nanostores/router'
+import { clsx } from 'clsx'
 import { createEffect, createSignal, For, on, onMount, Show } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
+import { useReactions } from '../../context/reactions'
+import { router, useRouter } from '../../stores/router'
+import { useArticlesStore, resetSortedArticles } from '../../stores/zine/articles'
+import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
+import { useTopicsStore } from '../../stores/zine/topics'
 import { Icon } from '../_shared/Icon'
+import { Loading } from '../_shared/Loading'
+import { CommentDate } from '../Article/CommentDate'
+import { AuthorLink } from '../Author/AhtorLink'
+import { AuthorBadge } from '../Author/AuthorBadge'
 import { ArticleCard } from '../Feed/ArticleCard'
 import { Sidebar } from '../Feed/Sidebar'
-import { useArticlesStore, resetSortedArticles } from '../../stores/zine/articles'
-import { useTopicsStore } from '../../stores/zine/topics'
-import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
-import { clsx } from 'clsx'
-import { useReactions } from '../../context/reactions'
-import type { Author, LoadShoutsOptions, Reaction, Shout } from '../../graphql/types.gen'
-import { getPagePath } from '@nanostores/router'
-import { router, useRouter } from '../../stores/router'
-import { useLocalize } from '../../context/localize'
+
 import styles from './Feed.module.scss'
-import stylesTopic from '../Feed/CardTopic.module.scss'
 import stylesBeside from '../../components/Feed/Beside.module.scss'
-import { CommentDate } from '../Article/CommentDate'
-import { Loading } from '../_shared/Loading'
-import { AuthorBadge } from '../Author/AuthorBadge'
-import { AuthorLink } from '../Author/AhtorLink'
+import stylesTopic from '../Feed/CardTopic.module.scss'
 
 export const FEED_PAGE_SIZE = 20
 
@@ -54,7 +57,7 @@ export const FeedView = (props: Props) => {
   const [topComments, setTopComments] = createSignal<Reaction[]>([])
 
   const {
-    actions: { loadReactionsBy }
+    actions: { loadReactionsBy },
   } = useReactions()
 
   onMount(() => {
@@ -68,13 +71,13 @@ export const FeedView = (props: Props) => {
         resetSortedArticles()
         loadMore()
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
   const loadFeedShouts = () => {
     const options: LoadShoutsOptions = {
       limit: FEED_PAGE_SIZE,
-      offset: sortedArticles().length
+      offset: sortedArticles().length,
     }
 
     const orderBy = getOrderBy(searchParams().by)
@@ -94,8 +97,8 @@ export const FeedView = (props: Props) => {
 
     loadReactionsBy({
       by: {
-        shouts: newShouts.map((s) => s.slug)
-      }
+        shouts: newShouts.map((s) => s.slug),
+      },
     })
 
     setIsLoadMoreButtonVisible(hasMore)
@@ -118,7 +121,7 @@ export const FeedView = (props: Props) => {
           <ul class={clsx(styles.feedFilter, 'view-switcher')}>
             <li
               class={clsx({
-                'view-switcher__item--selected': searchParams().by === 'publish_date' || !searchParams().by
+                'view-switcher__item--selected': searchParams().by === 'publish_date' || !searchParams().by,
               })}
             >
               <a href={getPagePath(router, page().route)}>{t('Recent')}</a>
@@ -128,14 +131,14 @@ export const FeedView = (props: Props) => {
             {/*</li>*/}
             <li
               class={clsx({
-                'view-switcher__item--selected': searchParams().by === 'rating'
+                'view-switcher__item--selected': searchParams().by === 'rating',
               })}
             >
               <a href={`${getPagePath(router, page().route)}?by=rating`}>{t('Top rated')}</a>
             </li>
             <li
               class={clsx({
-                'view-switcher__item--selected': searchParams().by === 'last_comment'
+                'view-switcher__item--selected': searchParams().by === 'last_comment',
               })}
             >
               <a href={`${getPagePath(router, page().route)}?by=last_comment`}>{t('Most commented')}</a>
@@ -193,7 +196,7 @@ export const FeedView = (props: Props) => {
                     <div class={clsx('text-truncate', styles.commentBody)}>
                       <a
                         href={`${getPagePath(router, 'article', {
-                          slug: comment.shout.slug
+                          slug: comment.shout.slug,
                         })}?commentId=${comment.id}`}
                         innerHTML={comment.body}
                       />
diff --git a/src/components/Views/FeedSettings.tsx b/src/components/Views/FeedSettings.tsx
index 21f333d5..681f6020 100644
--- a/src/components/Views/FeedSettings.tsx
+++ b/src/components/Views/FeedSettings.tsx
@@ -1,6 +1,7 @@
-import styles from '../../styles/FeedSettings.module.scss'
 import { useLocalize } from '../../context/localize'
 
+import styles from '../../styles/FeedSettings.module.scss'
+
 // type FeedSettingsSearchParams = {
 //   by: '' | 'topics' | 'authors' | 'reacted'
 // }
diff --git a/src/components/Views/FourOuFour.tsx b/src/components/Views/FourOuFour.tsx
index 0f362fe1..44015b8b 100644
--- a/src/components/Views/FourOuFour.tsx
+++ b/src/components/Views/FourOuFour.tsx
@@ -1,7 +1,9 @@
-import { Icon } from '../_shared/Icon'
-import styles from '../../styles/FourOuFour.module.scss'
 import { clsx } from 'clsx'
+
 import { useLocalize } from '../../context/localize'
+import { Icon } from '../_shared/Icon'
+
+import styles from '../../styles/FourOuFour.module.scss'
 
 export const FourOuFourView = (_props) => {
   const { t } = useLocalize()
diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx
index 5d53b60f..93765fdc 100644
--- a/src/components/Views/Home.tsx
+++ b/src/components/Views/Home.tsx
@@ -1,27 +1,29 @@
-import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
-import Banner from '../Discours/Banner'
-import { Topics } from '../Nav/Topics'
-import { Row5 } from '../Feed/Row5'
-import { Row3 } from '../Feed/Row3'
-import { Row2 } from '../Feed/Row2'
-import { Row1 } from '../Feed/Row1'
-import Hero from '../Discours/Hero'
-import { Beside } from '../Feed/Beside'
-import RowShort from '../Feed/RowShort'
-import Group from '../Feed/Group'
 import type { Shout } from '../../graphql/types.gen'
-import { useTopicsStore } from '../../stores/zine/topics'
+
+import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
 import {
   loadShouts,
   loadTopArticles,
   loadTopMonthArticles,
-  useArticlesStore
+  useArticlesStore,
 } from '../../stores/zine/articles'
 import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
+import { useTopicsStore } from '../../stores/zine/topics'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
-import { useLocalize } from '../../context/localize'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
+import Banner from '../Discours/Banner'
+import Hero from '../Discours/Hero'
+import { Beside } from '../Feed/Beside'
+import Group from '../Feed/Group'
+import { Row1 } from '../Feed/Row1'
+import { Row2 } from '../Feed/Row2'
+import { Row3 } from '../Feed/Row3'
+import { Row5 } from '../Feed/Row5'
+import RowShort from '../Feed/RowShort'
+import { Topics } from '../Nav/Topics'
 
 type Props = {
   shouts: Shout[]
@@ -39,9 +41,9 @@ export const HomeView = (props: Props) => {
     topArticles,
     topCommentedArticles,
     topMonthArticles,
-    topViewedArticles
+    topViewedArticles,
   } = useArticlesStore({
-    shouts: props.shouts
+    shouts: props.shouts,
   })
 
   const { topTopics } = useTopicsStore()
@@ -56,7 +58,7 @@ export const HomeView = (props: Props) => {
       const { hasMore } = await loadShouts({
         filters: { visibility: 'public' },
         limit: CLIENT_LOAD_ARTICLES_COUNT,
-        offset: sortedArticles().length
+        offset: sortedArticles().length,
       })
 
       setIsLoadMoreButtonVisible(hasMore)
@@ -66,7 +68,7 @@ export const HomeView = (props: Props) => {
   const randomLayout = createMemo(() => {
     const filledLayouts = Object.keys(articlesByLayout()).filter(
       // FIXME: is 7 ok? or more complex logic needed?
-      (layout) => articlesByLayout()[layout].length > 7
+      (layout) => articlesByLayout()[layout].length > 7,
     )
 
     const selectedRandomLayout =
@@ -85,7 +87,7 @@ export const HomeView = (props: Props) => {
     const { hasMore } = await loadShouts({
       filters: { visibility: 'public' },
       limit: LOAD_MORE_PAGE_SIZE,
-      offset: sortedArticles().length
+      offset: sortedArticles().length,
     })
     setIsLoadMoreButtonVisible(hasMore)
 
@@ -96,8 +98,8 @@ export const HomeView = (props: Props) => {
     splitToPages(
       sortedArticles(),
       PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT,
-      LOAD_MORE_PAGE_SIZE
-    )
+      LOAD_MORE_PAGE_SIZE,
+    ),
   )
 
   return (
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index fa34387c..9ea435e0 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -1,24 +1,26 @@
-import { For, createSignal, Show, onMount, createEffect, createMemo } from 'solid-js'
 import type { Author, Chat, Message as MessageType } from '../../graphql/types.gen'
-import DialogCard from '../Inbox/DialogCard'
-import Search from '../Inbox/Search'
-import { Message } from '../Inbox/Message'
-import CreateModalContent from '../Inbox/CreateModalContent'
-import DialogHeader from '../Inbox/DialogHeader'
-import MessagesFallback from '../Inbox/MessagesFallback'
-import QuotedMessage from '../Inbox/QuotedMessage'
-import { Icon } from '../_shared/Icon'
+
+import { clsx } from 'clsx'
+import { For, createSignal, Show, onMount, createEffect, createMemo } from 'solid-js'
+
+import { useInbox } from '../../context/inbox'
+import { useLocalize } from '../../context/localize'
 import { useSession } from '../../context/session'
 import { loadRecipients } from '../../stores/inbox'
-
-import { Modal } from '../Nav/Modal'
-import { showModal } from '../../stores/ui'
-import { useInbox } from '../../context/inbox'
 import { useRouter } from '../../stores/router'
-import { clsx } from 'clsx'
-import styles from '../../styles/Inbox.module.scss'
-import { useLocalize } from '../../context/localize'
+import { showModal } from '../../stores/ui'
+import { Icon } from '../_shared/Icon'
 import SimplifiedEditor from '../Editor/SimplifiedEditor'
+import CreateModalContent from '../Inbox/CreateModalContent'
+import DialogCard from '../Inbox/DialogCard'
+import DialogHeader from '../Inbox/DialogHeader'
+import { Message } from '../Inbox/Message'
+import MessagesFallback from '../Inbox/MessagesFallback'
+import QuotedMessage from '../Inbox/QuotedMessage'
+import Search from '../Inbox/Search'
+import { Modal } from '../Nav/Modal'
+
+import styles from '../../styles/Inbox.module.scss'
 
 type InboxSearchParams = {
   initChat: string
@@ -38,7 +40,7 @@ export const InboxView = () => {
   const {
     chats,
     messages,
-    actions: { loadChats, getMessages, sendMessage, createChat }
+    actions: { loadChats, getMessages, sendMessage, createChat },
   } = useInbox()
 
   const [recipients, setRecipients] = createSignal<Author[]>([])
@@ -65,7 +67,7 @@ export const InboxView = () => {
   const handleOpenChat = async (chat: Chat) => {
     setCurrentDialog(chat)
     changeSearchParam({
-      chat: chat.id
+      chat: chat.id,
     })
     try {
       await getMessages(chat.id)
@@ -104,7 +106,7 @@ export const InboxView = () => {
     await sendMessage({
       body: message,
       chat: currentDialog().id.toString(),
-      replyTo: messageToReply()?.id
+      replyTo: messageToReply()?.id,
     })
     setClear(true)
     setMessageToReply(null)
@@ -125,7 +127,7 @@ export const InboxView = () => {
         await loadChats()
         changeSearchParam({
           initChat: null,
-          chat: newChat.chat.id
+          chat: newChat.chat.id,
         })
         const chatToOpen = chats().find((chat) => chat.id === newChat.chat.id)
         await handleOpenChat(chatToOpen)
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index 10afd39a..f3d7ab51 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -1,9 +1,6 @@
 import { clsx } from 'clsx'
-import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
 import { createEffect, createSignal, For, onMount, Show } from 'solid-js'
-import { Loading } from '../../_shared/Loading'
-import { SearchField } from '../../_shared/SearchField'
-import { isAuthor } from '../../../utils/isAuthor'
+
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
 import { Author, Topic } from '../../../graphql/types.gen'
@@ -11,10 +8,15 @@ import { SubscriptionFilter } from '../../../pages/types'
 import { apiClient } from '../../../utils/apiClient'
 import { dummyFilter } from '../../../utils/dummyFilter'
 // TODO: refactor styles
+import { isAuthor } from '../../../utils/isAuthor'
+import { Loading } from '../../_shared/Loading'
+import { SearchField } from '../../_shared/SearchField'
+import { AuthorBadge } from '../../Author/AuthorBadge'
+import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
+import { TopicBadge } from '../../Topic/TopicBadge'
+
 import styles from '../../../pages/profile/Settings.module.scss'
 import stylesSettings from '../../../styles/FeedSettings.module.scss'
-import { AuthorBadge } from '../../Author/AuthorBadge'
-import { TopicBadge } from '../../Topic/TopicBadge'
 
 export const ProfileSubscriptions = () => {
   const { t, lang } = useLocalize()
@@ -28,7 +30,7 @@ export const ProfileSubscriptions = () => {
     try {
       const [getAuthors, getTopics] = await Promise.all([
         apiClient.getAuthorFollowingUsers({ slug: user().slug }),
-        apiClient.getAuthorFollowingTopics({ slug: user().slug })
+        apiClient.getAuthorFollowingTopics({ slug: user().slug }),
       ])
       setFollowing([...getAuthors, ...getTopics])
       setFiltered([...getAuthors, ...getTopics])
diff --git a/src/components/Views/PublishSettings/PublishSettings.tsx b/src/components/Views/PublishSettings/PublishSettings.tsx
index de277609..44ed23c1 100644
--- a/src/components/Views/PublishSettings/PublishSettings.tsx
+++ b/src/components/Views/PublishSettings/PublishSettings.tsx
@@ -1,25 +1,27 @@
+import { redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import styles from './PublishSettings.module.scss'
 import { createSignal, onMount, Show } from 'solid-js'
-import { TopicSelect, UploadModalContent } from '../../Editor'
-import { Button } from '../../_shared/Button'
-import { hideModal, showModal } from '../../../stores/ui'
+import { createStore } from 'solid-js/store'
+
 import { ShoutForm, useEditorContext } from '../../../context/editor'
 import { useLocalize } from '../../../context/localize'
-import { Modal } from '../../Nav/Modal'
-import { Topic } from '../../../graphql/types.gen'
-import { apiClient } from '../../../utils/apiClient'
-import { EMPTY_TOPIC } from '../Edit'
 import { useSession } from '../../../context/session'
-import { Icon } from '../../_shared/Icon'
-import stylesBeside from '../../Feed/Beside.module.scss'
-import { redirectPage } from '@nanostores/router'
-import { router } from '../../../stores/router'
-import { GrowingTextarea } from '../../_shared/GrowingTextarea'
-import { createStore } from 'solid-js/store'
+import { Topic } from '../../../graphql/types.gen'
 import { UploadedFile } from '../../../pages/types'
-import SimplifiedEditor, { MAX_DESCRIPTION_LIMIT } from '../../Editor/SimplifiedEditor'
+import { router } from '../../../stores/router'
+import { hideModal, showModal } from '../../../stores/ui'
+import { apiClient } from '../../../utils/apiClient'
+import { Button } from '../../_shared/Button'
+import { GrowingTextarea } from '../../_shared/GrowingTextarea'
+import { Icon } from '../../_shared/Icon'
 import { Image } from '../../_shared/Image'
+import { TopicSelect, UploadModalContent } from '../../Editor'
+import SimplifiedEditor, { MAX_DESCRIPTION_LIMIT } from '../../Editor/SimplifiedEditor'
+import { Modal } from '../../Nav/Modal'
+import { EMPTY_TOPIC } from '../Edit'
+
+import styles from './PublishSettings.module.scss'
+import stylesBeside from '../../Feed/Beside.module.scss'
 
 type Props = {
   shoutId: number
@@ -51,12 +53,12 @@ export const PublishSettings = (props: Props) => {
     slug: props.form.slug,
     title: props.form.title,
     subtitle: props.form.subtitle,
-    description: composeDescription()
+    description: composeDescription(),
   }
 
   const {
     formErrors,
-    actions: { setForm, setFormErrors, saveShout, publishShout }
+    actions: { setForm, setFormErrors, saveShout, publishShout },
   } = useEditorContext()
 
   const [settingsForm, setSettingsForm] = createStore(initialData)
@@ -78,7 +80,7 @@ export const PublishSettings = (props: Props) => {
       setSettingsForm((prev) => {
         return {
           ...prev,
-          mainTopic: newSelectedTopics[0]
+          mainTopic: newSelectedTopics[0],
         }
       })
     }
@@ -96,7 +98,7 @@ export const PublishSettings = (props: Props) => {
 
   const handleBackClick = () => {
     redirectPage(router, 'edit', {
-      shoutId: props.shoutId.toString()
+      shoutId: props.shoutId.toString(),
     })
   }
   const handleCancelClick = () => {
@@ -136,7 +138,7 @@ export const PublishSettings = (props: Props) => {
               </div>
               <div
                 class={clsx(styles.shoutCardCoverContainer, {
-                  [styles.hasImage]: settingsForm.coverImageUrl
+                  [styles.hasImage]: settingsForm.coverImageUrl,
                 })}
               >
                 <Show when={settingsForm.coverImageUrl ?? initialData.coverImageUrl}>
@@ -156,7 +158,7 @@ export const PublishSettings = (props: Props) => {
             </div>
             <p class="description">
               {t(
-                'Choose a title image for the article. You can immediately see how the publication card will look like.'
+                'Choose a title image for the article. You can immediately see how the publication card will look like.',
               )}
             </p>
 
@@ -202,7 +204,7 @@ export const PublishSettings = (props: Props) => {
             <h4>{t('Topics')}</h4>
             <p class="description">
               {t(
-                'Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title'
+                'Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title',
               )}
             </p>
             <div class={styles.inputContainer}>
diff --git a/src/components/Views/Search.tsx b/src/components/Views/Search.tsx
index 181c8135..7422ab35 100644
--- a/src/components/Views/Search.tsx
+++ b/src/components/Views/Search.tsx
@@ -1,12 +1,13 @@
-import { Show, For, createSignal } from 'solid-js'
-import '../../styles/Search.scss'
 import type { Shout } from '../../graphql/types.gen'
-import { ArticleCard } from '../Feed/ArticleCard'
 
+import { Show, For, createSignal } from 'solid-js'
+
+import '../../styles/Search.scss'
+import { useLocalize } from '../../context/localize'
+import { useRouter } from '../../stores/router'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
-import { useRouter } from '../../stores/router'
-import { useLocalize } from '../../context/localize'
+import { ArticleCard } from '../Feed/ArticleCard'
 
 type SearchPageSearchParams = {
   by: '' | 'relevance' | 'rating'
@@ -37,10 +38,10 @@ export const SearchView = (props: Props) => {
     const { hasMore } = await loadShouts({
       filters: {
         title: query(),
-        body: query()
+        body: query(),
       },
       offset: offset(),
-      limit: LOAD_MORE_PAGE_SIZE
+      limit: LOAD_MORE_PAGE_SIZE,
     })
     setIsLoadMoreButtonVisible(hasMore)
     setOffset(offset() + LOAD_MORE_PAGE_SIZE)
@@ -69,14 +70,14 @@ export const SearchView = (props: Props) => {
       <ul class="view-switcher">
         <li
           classList={{
-            'view-switcher__item--selected': searchParams().by === 'relevance'
+            'view-switcher__item--selected': searchParams().by === 'relevance',
           }}
         >
           <a href="?by=relevance">{t('By relevance')}</a>
         </li>
         <li
           classList={{
-            'view-switcher__item--selected': searchParams().by === 'rating'
+            'view-switcher__item--selected': searchParams().by === 'rating',
           }}
         >
           <a href="?by=rating">{t('Top rated')}</a>
diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index aab7bb8f..2a95835d 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -1,21 +1,23 @@
-import { For, Show, createMemo, onMount, createSignal } from 'solid-js'
 import type { Shout, Topic } from '../../graphql/types.gen'
-import { Row3 } from '../Feed/Row3'
-import { Row2 } from '../Feed/Row2'
-import { Beside } from '../Feed/Beside'
-import styles from '../../styles/Topic.module.scss'
-import { FullTopic } from '../Topic/Full'
 
+import { clsx } from 'clsx'
+import { For, Show, createMemo, onMount, createSignal } from 'solid-js'
+
+import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
-import { useTopicsStore } from '../../stores/zine/topics'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
 import { useAuthorsStore } from '../../stores/zine/authors'
+import { useTopicsStore } from '../../stores/zine/topics'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
-import { clsx } from 'clsx'
-import { Row1 } from '../Feed/Row1'
-import { useLocalize } from '../../context/localize'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
+import { Beside } from '../Feed/Beside'
+import { Row1 } from '../Feed/Row1'
+import { Row2 } from '../Feed/Row2'
+import { Row3 } from '../Feed/Row3'
+import { FullTopic } from '../Topic/Full'
+
+import styles from '../../styles/Topic.module.scss'
 
 type TopicsPageSearchParams = {
   by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
@@ -53,7 +55,7 @@ export const TopicView = (props: TopicProps) => {
     const { hasMore } = await loadShouts({
       filters: { topic: props.topicSlug },
       limit: LOAD_MORE_PAGE_SIZE,
-      offset: sortedArticles().length
+      offset: sortedArticles().length,
     })
     setIsLoadMoreButtonVisible(hasMore)
 
@@ -75,7 +77,7 @@ export const TopicView = (props: TopicProps) => {
   })
 
   const pages = createMemo<Shout[][]>(() =>
-    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
+    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
   )
 
   return (
@@ -88,14 +90,14 @@ export const TopicView = (props: TopicProps) => {
               <ul class="view-switcher">
                 <li
                   classList={{
-                    'view-switcher__item--selected': searchParams().by === 'recent' || !searchParams().by
+                    'view-switcher__item--selected': searchParams().by === 'recent' || !searchParams().by,
                   }}
                 >
                   <button
                     type="button"
                     onClick={() =>
                       changeSearchParam({
-                        by: 'recent'
+                        by: 'recent',
                       })
                     }
                   >
diff --git a/src/components/_shared/Button/Button.tsx b/src/components/_shared/Button/Button.tsx
index c44eb7f9..91872b0b 100644
--- a/src/components/_shared/Button/Button.tsx
+++ b/src/components/_shared/Button/Button.tsx
@@ -1,5 +1,7 @@
 import type { JSX } from 'solid-js'
+
 import { clsx } from 'clsx'
+
 import styles from './Button.module.scss'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline' | 'danger'
@@ -35,9 +37,9 @@ export const Button = (props: Props) => {
         styles[props.variant ?? 'primary'],
         {
           [styles.loading]: props.loading,
-          [styles.subscribeButton]: props.isSubscribeButton
+          [styles.subscribeButton]: props.isSubscribeButton,
         },
-        props.class
+        props.class,
       )}
     >
       {props.value}
diff --git a/src/components/_shared/CheckButton/CheckButton.tsx b/src/components/_shared/CheckButton/CheckButton.tsx
index a8dcd401..a129296f 100644
--- a/src/components/_shared/CheckButton/CheckButton.tsx
+++ b/src/components/_shared/CheckButton/CheckButton.tsx
@@ -1,8 +1,10 @@
 import { clsx } from 'clsx'
-import styles from './CheckButton.module.scss'
-import { Icon } from '../Icon'
 import { createSignal, Show } from 'solid-js'
 
+import { Icon } from '../Icon'
+
+import styles from './CheckButton.module.scss'
+
 type Props = {
   class?: string
   checked: boolean
diff --git a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
index ab7ee6f5..31e94bd3 100644
--- a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
+++ b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
@@ -1,9 +1,11 @@
 import { clsx } from 'clsx'
-import styles from './DarkModeToggle.module.scss'
-import { Icon } from '../Icon'
-import { useLocalize } from '../../../context/localize'
 import { createSignal, onCleanup, onMount } from 'solid-js'
 
+import { useLocalize } from '../../../context/localize'
+import { Icon } from '../Icon'
+
+import styles from './DarkModeToggle.module.scss'
+
 type Props = {
   class?: string
 }
diff --git a/src/components/_shared/DropArea/DropArea.tsx b/src/components/_shared/DropArea/DropArea.tsx
index cf80c464..b7ad4ada 100644
--- a/src/components/_shared/DropArea/DropArea.tsx
+++ b/src/components/_shared/DropArea/DropArea.tsx
@@ -1,13 +1,16 @@
-import { clsx } from 'clsx'
-import styles from './DropArea.module.scss'
-import { createSignal, JSX, Show } from 'solid-js'
-import { createDropzone, createFileUploader } from '@solid-primitives/upload'
-import { useLocalize } from '../../../context/localize'
-import { validateFiles } from '../../../utils/validateFile'
 import type { FileTypeToUpload } from '../../../pages/types'
-import { handleFileUpload } from '../../../utils/handleFileUpload'
+
+import { createDropzone, createFileUploader } from '@solid-primitives/upload'
+import { clsx } from 'clsx'
+import { createSignal, JSX, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
 import { UploadedFile } from '../../../pages/types'
+import { handleFileUpload } from '../../../utils/handleFileUpload'
 import { handleImageUpload } from '../../../utils/handleImageUpload'
+import { validateFiles } from '../../../utils/validateFile'
+
+import styles from './DropArea.module.scss'
 
 type Props = {
   class?: string
@@ -60,14 +63,14 @@ export const DropArea = (props: Props) => {
 
   const { files, selectFiles } = createFileUploader({
     multiple: true,
-    accept: `${props.fileType}/*`
+    accept: `${props.fileType}/*`,
   })
 
   const { setRef: dropzoneRef, files: droppedFiles } = createDropzone({
     onDrop: async () => {
       setDragActive(false)
       await initUpload(droppedFiles())
-    }
+    },
   })
   const handleDrag = (event) => {
     if (event.type === 'dragenter' || event.type === 'dragover') {
diff --git a/src/components/_shared/FloatingPanel/FloatingPanel.tsx b/src/components/_shared/FloatingPanel/FloatingPanel.tsx
index 3bc7de66..d629500e 100644
--- a/src/components/_shared/FloatingPanel/FloatingPanel.tsx
+++ b/src/components/_shared/FloatingPanel/FloatingPanel.tsx
@@ -16,7 +16,7 @@ export default (props: Props) => {
   return (
     <div
       class={clsx(styles.PanelWrapper, {
-        [styles.PanelWrapperVisible]: props.isVisible
+        [styles.PanelWrapperVisible]: props.isVisible,
       })}
     >
       <Button
diff --git a/src/components/_shared/GroupAvatar/GroupAvatar.tsx b/src/components/_shared/GroupAvatar/GroupAvatar.tsx
index a0e83bb0..ec456b85 100644
--- a/src/components/_shared/GroupAvatar/GroupAvatar.tsx
+++ b/src/components/_shared/GroupAvatar/GroupAvatar.tsx
@@ -1,9 +1,11 @@
 import { clsx } from 'clsx'
-import styles from './GroupAvatar.module.scss'
 import { For } from 'solid-js'
+
 import { Userpic } from '../../Author/Userpic'
 import { NotificationUser } from '../../NotificationsPanel/NotificationView/NotificationView'
 
+import styles from './GroupAvatar.module.scss'
+
 type Props = {
   class?: string
   authors: NotificationUser[]
@@ -29,7 +31,7 @@ export const GroupAvatar = (props: Props) => {
       class={clsx(styles.GroupAvatar, props.class, {
         [styles.two]: props.authors.length === 2,
         [styles.three]: props.authors.length === 3,
-        [styles.four]: props.authors.length >= 4
+        [styles.four]: props.authors.length >= 4,
       })}
     >
       <For each={displayedAvatars}>
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
index 230b8784..cc119c4c 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
@@ -1,7 +1,8 @@
 import { clsx } from 'clsx'
-import styles from './GrowingTextarea.module.scss'
 import { createEffect, createSignal, Show } from 'solid-js'
 
+import styles from './GrowingTextarea.module.scss'
+
 type Props = {
   class?: string
   placeholder: string
@@ -43,7 +44,7 @@ export const GrowingTextarea = (props: Props) => {
     <div
       class={clsx(styles.GrowingTextarea, {
         [styles.bordered]: props.variant === 'bordered',
-        [styles.hasFieldName]: props.fieldName && value().length > 0
+        [styles.hasFieldName]: props.fieldName && value().length > 0,
       })}
     >
       <Show when={props.fieldName && value().length > 0}>
@@ -73,7 +74,7 @@ export const GrowingTextarea = (props: Props) => {
         <div
           class={clsx(styles.maxLength, {
             [styles.visible]: isFocused(),
-            [styles.limited]: value().length === props.maxLength
+            [styles.limited]: value().length === props.maxLength,
           })}
         >
           <Show when={props.variant === 'bordered'} fallback={`${value().length} / ${props.maxLength}`}>
diff --git a/src/components/_shared/Icon/Icon.tsx b/src/components/_shared/Icon/Icon.tsx
index 19652b9d..9699e0c0 100644
--- a/src/components/_shared/Icon/Icon.tsx
+++ b/src/components/_shared/Icon/Icon.tsx
@@ -1,6 +1,8 @@
-import { mergeProps, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
+
 import { clsx } from 'clsx'
+import { mergeProps, Show } from 'solid-js'
+
 import styles from './Icon.module.scss'
 
 type IconProps = {
diff --git a/src/components/_shared/Image/Image.tsx b/src/components/_shared/Image/Image.tsx
index b0a0c9a2..1b7fdba4 100644
--- a/src/components/_shared/Image/Image.tsx
+++ b/src/components/_shared/Image/Image.tsx
@@ -1,5 +1,7 @@
-import { splitProps } from 'solid-js'
 import type { JSX } from 'solid-js'
+
+import { splitProps } from 'solid-js'
+
 import { getImageUrl } from '../../../utils/getImageUrl'
 
 type Props = JSX.ImgHTMLAttributes<HTMLImageElement> & {
diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx
index 25b3103d..2ae578aa 100644
--- a/src/components/_shared/Lightbox/Lightbox.tsx
+++ b/src/components/_shared/Lightbox/Lightbox.tsx
@@ -1,8 +1,10 @@
 import { clsx } from 'clsx'
-import styles from './Lightbox.module.scss'
 import { createSignal } from 'solid-js'
-import { Icon } from '../Icon'
+
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
+import { Icon } from '../Icon'
+
+import styles from './Lightbox.module.scss'
 
 type Props = {
   class?: string
@@ -29,7 +31,7 @@ export const Lightbox = (props: Props) => {
 
   const lightboxStyle = () => ({
     transform: `scale(${zoomLevel()})`,
-    transition: 'transform 0.3s ease'
+    transition: 'transform 0.3s ease',
   })
 
   useEscKeyDownHandler(closeLightbox)
diff --git a/src/components/_shared/Loading.tsx b/src/components/_shared/Loading.tsx
index fde6d30e..59967746 100644
--- a/src/components/_shared/Loading.tsx
+++ b/src/components/_shared/Loading.tsx
@@ -1,6 +1,7 @@
-import styles from './Loading.module.scss'
 import { clsx } from 'clsx'
 
+import styles from './Loading.module.scss'
+
 type Props = {
   size?: 'small' | 'tiny'
 }
@@ -9,7 +10,7 @@ export const Loading = (props: Props) => {
     <div
       class={clsx(styles.container, {
         [styles.small]: props.size === 'small',
-        [styles.tiny]: props.size === 'tiny'
+        [styles.tiny]: props.size === 'tiny',
       })}
     >
       <div class={styles.icon} />
diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx
index 2c2c5b83..ec587dc9 100644
--- a/src/components/_shared/PageLayout.tsx
+++ b/src/components/_shared/PageLayout.tsx
@@ -1,12 +1,14 @@
 import type { JSX } from 'solid-js'
-import { Header } from '../Nav/Header'
-import { Footer } from '../Discours/Footer'
 
-import { createEffect, createSignal, Show } from 'solid-js'
+import { Title } from '@solidjs/meta'
 import { clsx } from 'clsx'
+import { createEffect, createSignal, Show } from 'solid-js'
+
+import { Footer } from '../Discours/Footer'
+import { Header } from '../Nav/Header'
+
 import '../../styles/app.scss'
 import styles from './PageLayout.module.scss'
-import { Title } from '@solidjs/meta'
 
 type Props = {
   title: string
@@ -47,7 +49,7 @@ export const PageLayout = (props: Props) => {
       <main
         class={clsx('main-content', {
           [styles.withPadding]: props.withPadding,
-          [styles.zeroBottomPadding]: props.zeroBottomPadding
+          [styles.zeroBottomPadding]: props.zeroBottomPadding,
         })}
         classList={{ 'main-content--no-padding': !isHeaderFixed }}
       >
diff --git a/src/components/_shared/Popover/Popover.tsx b/src/components/_shared/Popover/Popover.tsx
index 4a937b1f..dbadcb76 100644
--- a/src/components/_shared/Popover/Popover.tsx
+++ b/src/components/_shared/Popover/Popover.tsx
@@ -1,5 +1,6 @@
 import { createSignal, JSX, onMount, Show } from 'solid-js'
 import usePopper from 'solid-popper'
+
 import styles from './Popover.module.scss'
 
 type Props = {
@@ -18,16 +19,16 @@ export const Popover = (props: Props) => {
       {
         name: 'offset',
         options: {
-          offset: [0, 8]
-        }
+          offset: [0, 8],
+        },
       },
       {
         name: 'flip',
         options: {
-          fallbackPlacements: ['top', 'bottom']
-        }
-      }
-    ]
+          fallbackPlacements: ['top', 'bottom'],
+        },
+      },
+    ],
   })
 
   const showEvents = ['mouseenter', 'focus']
diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx
index d15fdf36..78d5cdde 100644
--- a/src/components/_shared/Popup/Popup.tsx
+++ b/src/components/_shared/Popup/Popup.tsx
@@ -1,8 +1,10 @@
-import { createEffect, createSignal, JSX, Show } from 'solid-js'
-import styles from './Popup.module.scss'
 import { clsx } from 'clsx'
+import { createEffect, createSignal, JSX, Show } from 'solid-js'
+
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 
+import styles from './Popup.module.scss'
+
 type HorizontalAnchor = 'center' | 'right'
 
 export type PopupProps = {
@@ -30,7 +32,7 @@ export const Popup = (props: PopupProps) => {
   useOutsideClickHandler({
     containerRef,
     predicate: () => isVisible(),
-    handler: () => setIsVisible(false)
+    handler: () => setIsVisible(false),
   })
 
   const toggle = () => setIsVisible((oldVisible) => !oldVisible)
@@ -46,7 +48,7 @@ export const Popup = (props: PopupProps) => {
             [styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
             [styles.horizontalAnchorRight]: horizontalAnchor === 'right',
             [styles.bordered]: props.variant === 'bordered',
-            [styles.tiny]: props.variant === 'tiny'
+            [styles.tiny]: props.variant === 'tiny',
           })}
         >
           {props.children}
diff --git a/src/components/_shared/SearchField/SearchField.tsx b/src/components/_shared/SearchField/SearchField.tsx
index 5401b04c..c23b7259 100644
--- a/src/components/_shared/SearchField/SearchField.tsx
+++ b/src/components/_shared/SearchField/SearchField.tsx
@@ -1,8 +1,9 @@
-import styles from './SearchField.module.scss'
+import { clsx } from 'clsx'
+
+import { useLocalize } from '../../../context/localize'
 import { Icon } from '../Icon'
 
-import { clsx } from 'clsx'
-import { useLocalize } from '../../../context/localize'
+import styles from './SearchField.module.scss'
 
 type Props = {
   onChange: (value: string) => void
diff --git a/src/components/_shared/ShowIfAuthenticated.tsx b/src/components/_shared/ShowIfAuthenticated.tsx
index 62d49a81..a5a934b8 100644
--- a/src/components/_shared/ShowIfAuthenticated.tsx
+++ b/src/components/_shared/ShowIfAuthenticated.tsx
@@ -1,5 +1,7 @@
 import type { JSX } from 'solid-js'
+
 import { Show } from 'solid-js'
+
 import { useSession } from '../../context/session'
 
 type ShowIfAuthenticatedProps = {
diff --git a/src/components/_shared/ShowOnlyOnClient.tsx b/src/components/_shared/ShowOnlyOnClient.tsx
index a1d3d6fe..061d2e54 100644
--- a/src/components/_shared/ShowOnlyOnClient.tsx
+++ b/src/components/_shared/ShowOnlyOnClient.tsx
@@ -1,4 +1,5 @@
 import type { JSX } from 'solid-js'
+
 import { createSignal, onMount, Show } from 'solid-js'
 
 const [isClient, setIsClient] = createSignal(false)
diff --git a/src/components/_shared/SocialNetworkInput/SocialNetworkInput.tsx b/src/components/_shared/SocialNetworkInput/SocialNetworkInput.tsx
index c3008a2a..98f228a6 100644
--- a/src/components/_shared/SocialNetworkInput/SocialNetworkInput.tsx
+++ b/src/components/_shared/SocialNetworkInput/SocialNetworkInput.tsx
@@ -1,8 +1,10 @@
 import { clsx } from 'clsx'
-import styles from './SocialNetworkInput.module.scss'
-import { Icon } from '../Icon'
 import { onMount, Show } from 'solid-js'
 
+import { Icon } from '../Icon'
+
+import styles from './SocialNetworkInput.module.scss'
+
 type Props = {
   class?: string
   network?: string
diff --git a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
index 8020c91b..adb15939 100644
--- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
@@ -1,12 +1,14 @@
-import { For, onMount, Show } from 'solid-js'
-import { Icon } from '../Icon'
-
-import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
-import { SwiperRef } from './swiper'
 import { clsx } from 'clsx'
-import styles from './Swiper.module.scss'
+import { For, onMount, Show } from 'solid-js'
+import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
+
 import { Shout } from '../../../graphql/types.gen'
 import { ArticleCard } from '../../Feed/ArticleCard'
+import { Icon } from '../Icon'
+
+import { SwiperRef } from './swiper'
+
+import styles from './Swiper.module.scss'
 
 type Props = {
   slides: Shout[]
@@ -35,7 +37,7 @@ export const ArticleCardSwiper = (props: Props) => {
               space-between={20}
               breakpoints={{
                 576: { spaceBetween: 20, slidesPerView: 1.5 },
-                992: { spaceBetween: 52, slidesPerView: 1.5 }
+                992: { spaceBetween: 52, slidesPerView: 1.5 },
               }}
               round-lengths={true}
               loop={true}
@@ -59,7 +61,7 @@ export const ArticleCardSwiper = (props: Props) => {
                         additionalClass: 'swiper-slide',
                         isFloorImportant: true,
                         isWithCover: true,
-                        nodate: true
+                        nodate: true,
                       }}
                     />
                   </swiper-slide>
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index d22c5196..f840c487 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -1,22 +1,25 @@
-import { createEffect, createSignal, For, Show, on, onMount } from 'solid-js'
-import { MediaItem, UploadedFile } from '../../../pages/types'
-import { Icon } from '../Icon'
-import { Popover } from '../Popover'
-import { useLocalize } from '../../../context/localize'
-import { DropArea } from '../DropArea'
 import { createFileUploader } from '@solid-primitives/upload'
-import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
-import { SwiperRef } from './swiper'
-import { validateFiles } from '../../../utils/validateFile'
-import { useSnackbar } from '../../../context/snackbar'
-import { Loading } from '../Loading'
 import { clsx } from 'clsx'
-import styles from './Swiper.module.scss'
+import { createEffect, createSignal, For, Show, on, onMount } from 'solid-js'
+import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
+
+import { useLocalize } from '../../../context/localize'
+import { useSnackbar } from '../../../context/snackbar'
+import { MediaItem, UploadedFile } from '../../../pages/types'
 import { composeMediaItems } from '../../../utils/composeMediaItems'
-import SimplifiedEditor from '../../Editor/SimplifiedEditor'
-import { handleImageUpload } from '../../../utils/handleImageUpload'
 import { getImageUrl } from '../../../utils/getImageUrl'
+import { handleImageUpload } from '../../../utils/handleImageUpload'
+import { validateFiles } from '../../../utils/validateFile'
+import SimplifiedEditor from '../../Editor/SimplifiedEditor'
+import { DropArea } from '../DropArea'
+import { Icon } from '../Icon'
 import { Image } from '../Image'
+import { Loading } from '../Loading'
+import { Popover } from '../Popover'
+
+import { SwiperRef } from './swiper'
+
+import styles from './Swiper.module.scss'
 
 type Props = {
   images: MediaItem[]
@@ -37,7 +40,7 @@ export const ImageSwiper = (props: Props) => {
   const thumbSwipeRef: { current: SwiperRef } = { current: null }
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const handleSlideDescriptionChange = (index: number, field: string, value) => {
@@ -62,8 +65,8 @@ export const ImageSwiper = (props: Props) => {
         mainSwipeRef.current?.swiper.update()
         thumbSwipeRef.current?.swiper.update()
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
   const handleDropAreaUpload = (value: UploadedFile[]) => {
     props.onImagesAdd(composeMediaItems(value))
@@ -82,7 +85,7 @@ export const ImageSwiper = (props: Props) => {
 
   const { selectFiles } = createFileUploader({
     multiple: true,
-    accept: `image/*`
+    accept: `image/*`,
   })
 
   const initUpload = async (selectedFiles) => {
@@ -196,7 +199,7 @@ export const ImageSwiper = (props: Props) => {
             </swiper-container>
             <div
               class={clsx(styles.navigation, styles.prev, {
-                [styles.disabled]: slideIndex() === 0
+                [styles.disabled]: slideIndex() === 0,
               })}
               onClick={() => mainSwipeRef.current.swiper.slidePrev()}
             >
@@ -204,7 +207,7 @@ export const ImageSwiper = (props: Props) => {
             </div>
             <div
               class={clsx(styles.navigation, styles.next, {
-                [styles.disabled]: slideIndex() + 1 === props.images.length
+                [styles.disabled]: slideIndex() + 1 === props.images.length,
               })}
               onClick={() => mainSwipeRef.current.swiper.slideNext()}
             >
@@ -236,7 +239,7 @@ export const ImageSwiper = (props: Props) => {
                       <div
                         class={clsx(styles.imageThumb)}
                         style={{
-                          'background-image': `url(${getImageUrl(slide.url, { width: 110, height: 75 })})`
+                          'background-image': `url(${getImageUrl(slide.url, { width: 110, height: 75 })})`,
                         }}
                       >
                         <Show when={props.editorMode}>
@@ -246,7 +249,7 @@ export const ImageSwiper = (props: Props) => {
                             </div>
                             <div
                               class={clsx(styles.action, {
-                                [styles.hidden]: index() === 0
+                                [styles.hidden]: index() === 0,
                               })}
                               onClick={() => handleChangeIndex('left', index())}
                             >
@@ -258,7 +261,7 @@ export const ImageSwiper = (props: Props) => {
                             </div>
                             <div
                               class={clsx(styles.action, {
-                                [styles.hidden]: index() === props.images.length - 1
+                                [styles.hidden]: index() === props.images.length - 1,
                               })}
                               onClick={() => handleChangeIndex('right', index())}
                             >
@@ -282,7 +285,7 @@ export const ImageSwiper = (props: Props) => {
               </swiper-container>
               <div
                 class={clsx(styles.navigation, styles.thumbsNav, styles.prev, {
-                  [styles.disabled]: slideIndex() === 0
+                  [styles.disabled]: slideIndex() === 0,
                 })}
                 onClick={() => thumbSwipeRef.current.swiper.slidePrev()}
               >
@@ -290,7 +293,7 @@ export const ImageSwiper = (props: Props) => {
               </div>
               <div
                 class={clsx(styles.navigation, styles.thumbsNav, styles.next, {
-                  [styles.disabled]: slideIndex() + 1 === props.images.length
+                  [styles.disabled]: slideIndex() + 1 === props.images.length,
                 })}
                 onClick={() => thumbSwipeRef.current.swiper.slideNext()}
               >
diff --git a/src/components/_shared/Subscribe/Subscribe.tsx b/src/components/_shared/Subscribe/Subscribe.tsx
index aaaf055a..ee4bd243 100644
--- a/src/components/_shared/Subscribe/Subscribe.tsx
+++ b/src/components/_shared/Subscribe/Subscribe.tsx
@@ -1,11 +1,13 @@
 import { createSignal, JSX, Show } from 'solid-js'
+
 import { useLocalize } from '../../../context/localize'
+import { useSnackbar } from '../../../context/snackbar'
 import { validateEmail } from '../../../utils/validateEmail'
 import { Button } from '../Button'
-import styles from './Subscribe.module.scss'
-import { useSnackbar } from '../../../context/snackbar'
 import { Icon } from '../Icon'
 
+import styles from './Subscribe.module.scss'
+
 type Props = {
   variant?: 'mobileSubscription'
 }
@@ -16,7 +18,7 @@ export const Subscribe = (props: Props) => {
   const [email, setEmail] = createSignal('')
   const [emailError, setEmailError] = createSignal<string>(null)
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const validate = (): boolean => {
@@ -49,9 +51,9 @@ export const Subscribe = (props: Props) => {
     const requestOptions = {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ email: email() })
+      body: JSON.stringify({ email: email() }),
     }
 
     const response = await fetch('/api/newsletter', requestOptions)
diff --git a/src/components/_shared/TimeAgo/TimeAgo.tsx b/src/components/_shared/TimeAgo/TimeAgo.tsx
index cb1cca0a..20177335 100644
--- a/src/components/_shared/TimeAgo/TimeAgo.tsx
+++ b/src/components/_shared/TimeAgo/TimeAgo.tsx
@@ -1,7 +1,8 @@
 import { clsx } from 'clsx'
-import { useLocalize } from '../../../context/localize'
 import { createSignal, onCleanup, onMount } from 'solid-js'
 
+import { useLocalize } from '../../../context/localize'
+
 import styles from './TimeAgo.module.scss'
 
 type Props = {
diff --git a/src/components/_shared/VideoPlayer/VideoPlayer.tsx b/src/components/_shared/VideoPlayer/VideoPlayer.tsx
index 490fe443..6c7f9202 100644
--- a/src/components/_shared/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/_shared/VideoPlayer/VideoPlayer.tsx
@@ -1,10 +1,12 @@
+import { clsx } from 'clsx'
 import { createEffect, createSignal, Match, Switch, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
 import { Popover } from '../Popover'
-import { clsx } from 'clsx'
+
 import styles from './VideoPlayer.module.scss'
-import { useLocalize } from '../../../context/localize'
 
 type Props = {
   videoUrl: string
diff --git a/src/components/_shared/VotersList/VotersList.tsx b/src/components/_shared/VotersList/VotersList.tsx
index f71fadf9..1a100f4b 100644
--- a/src/components/_shared/VotersList/VotersList.tsx
+++ b/src/components/_shared/VotersList/VotersList.tsx
@@ -1,9 +1,12 @@
-import { For, Show } from 'solid-js'
 import type { Reaction } from '../../../graphql/types.gen'
+
+import { clsx } from 'clsx'
+import { For, Show } from 'solid-js'
+
 import { ReactionKind } from '../../../graphql/types.gen'
 import { Userpic } from '../../Author/Userpic'
+
 import styles from './VotersList.module.scss'
-import { clsx } from 'clsx'
 
 type Props = {
   reactions: Reaction[]
diff --git a/src/context/confirm.tsx b/src/context/confirm.tsx
index a4a4f745..276ec6a0 100644
--- a/src/context/confirm.tsx
+++ b/src/context/confirm.tsx
@@ -1,8 +1,9 @@
-import { createContext, createSignal, useContext } from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
-import { hideModal, showModal } from '../stores/ui'
+import { createContext, createSignal, useContext } from 'solid-js'
+
 import { ButtonVariant } from '../components/_shared/Button/Button'
+import { hideModal, showModal } from '../stores/ui'
 
 type ConfirmMessage = {
   confirmBody?: string | JSX.Element
@@ -44,14 +45,14 @@ export const ConfirmProvider = (props: { children: JSX.Element }) => {
       confirmButtonVariant?: ConfirmMessage['confirmButtonVariant']
       declineButtonLabel?: ConfirmMessage['declineButtonLabel']
       declineButtonVariant?: ConfirmMessage['declineButtonVariant']
-    } = {}
+    } = {},
   ): Promise<boolean> => {
     const messageToShow = {
       confirmBody: message.confirmBody,
       confirmButtonLabel: message.confirmButtonLabel,
       confirmButtonVariant: message.confirmButtonVariant,
       declineButtonLabel: message.declineButtonLabel,
-      declineButtonVariant: message.declineButtonVariant
+      declineButtonVariant: message.declineButtonVariant,
     }
 
     setConfirmMessage(messageToShow)
@@ -69,7 +70,7 @@ export const ConfirmProvider = (props: { children: JSX.Element }) => {
 
   const actions = {
     showConfirm,
-    resolveConfirm
+    resolveConfirm,
   }
 
   const value: ConfirmContextType = { confirmMessage, actions }
diff --git a/src/context/editor.tsx b/src/context/editor.tsx
index a15d261c..3d98ad34 100644
--- a/src/context/editor.tsx
+++ b/src/context/editor.tsx
@@ -1,14 +1,17 @@
 import type { JSX } from 'solid-js'
+
+import { openPage } from '@nanostores/router'
+import { Editor } from '@tiptap/core'
 import { Accessor, createContext, createSignal, useContext } from 'solid-js'
 import { createStore, SetStoreFunction } from 'solid-js/store'
+
 import { Topic, TopicInput } from '../graphql/types.gen'
+import { router, useRouter } from '../stores/router'
 import { apiClient } from '../utils/apiClient'
+import { slugify } from '../utils/slugify'
+
 import { useLocalize } from './localize'
 import { useSnackbar } from './snackbar'
-import { openPage } from '@nanostores/router'
-import { router, useRouter } from '../stores/router'
-import { slugify } from '../utils/slugify'
-import { Editor } from '@tiptap/core'
 
 type WordCounter = {
   characters: number
@@ -62,7 +65,7 @@ const topic2topicInput = (topic: Topic): TopicInput => {
   return {
     id: topic.id,
     slug: topic.slug,
-    title: topic.title
+    title: topic.title,
   }
 }
 
@@ -83,7 +86,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   const { page } = useRouter()
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const [isEditorPanelVisible, setIsEditorPanelVisible] = createSignal<boolean>(false)
@@ -94,7 +97,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   const [formErrors, setFormErrors] = createStore<Record<keyof ShoutForm, string>>(null)
   const [wordCounter, setWordCounter] = createSignal<WordCounter>({
     characters: 0,
-    words: 0
+    words: 0,
   })
   const toggleEditorPanel = () => setIsEditorPanelVisible((value) => !value)
   const countWords = (value) => setWordCounter(value)
@@ -137,9 +140,9 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
         lead: formToUpdate.lead,
         description: formToUpdate.description,
         cover: formToUpdate.coverImageUrl,
-        media: formToUpdate.media
+        media: formToUpdate.media,
       },
-      publish
+      publish,
     })
   }
 
@@ -210,7 +213,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     try {
       await apiClient.updateArticle({
         shoutId,
-        publish: true
+        publish: true,
       })
 
       openPage(router, 'feed')
@@ -223,7 +226,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   const deleteShout = async (shoutId: number) => {
     try {
       await apiClient.deleteShout({
-        shoutId
+        shoutId,
       })
       return true
     } catch {
@@ -248,7 +251,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     countWords,
     setForm,
     setFormErrors,
-    setEditor
+    setEditor,
   }
 
   const value: EditorContextType = {
@@ -257,7 +260,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     formErrors,
     editorRef,
     isEditorPanelVisible,
-    wordCounter
+    wordCounter,
   }
 
   return <EditorContext.Provider value={value}>{props.children}</EditorContext.Provider>
diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx
index 356afbd5..633f22cb 100644
--- a/src/context/inbox.tsx
+++ b/src/context/inbox.tsx
@@ -1,10 +1,12 @@
-import type { Accessor, JSX } from 'solid-js'
-import { createContext, createSignal, useContext } from 'solid-js'
-// import { createSubClient } from '../graphql/privateGraphQLClient'
 import type { Chat, Message, MutationCreateMessageArgs } from '../graphql/types.gen'
+import type { Accessor, JSX } from 'solid-js'
+
+import { createContext, createSignal, useContext } from 'solid-js'
+
+// import { createSubClient } from '../graphql/privateGraphQLClient'
+import { loadMessages } from '../stores/inbox'
 import { apiClient } from '../utils/apiClient'
 // import type { Client } from '@urql/core'
-import { loadMessages } from '../stores/inbox'
 
 type InboxContextType = {
   chats: Accessor<Chat[]>
@@ -54,7 +56,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
       const currentChat = chats().find((chat) => chat.id === args.chat)
       setChats((prev) => [
         ...prev.filter((c) => c.id !== currentChat.id),
-        { ...currentChat, updatedAt: message.createdAt }
+        { ...currentChat, updatedAt: message.createdAt },
       ])
     } catch (error) {
       console.error('[post message error]:', error)
@@ -82,7 +84,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
     createChat,
     loadChats,
     getMessages,
-    sendMessage
+    sendMessage,
     // unsubscribe // TODO: call unsubscribe some time!
   }
 
diff --git a/src/context/localize.tsx b/src/context/localize.tsx
index 10254c6d..394526e8 100644
--- a/src/context/localize.tsx
+++ b/src/context/localize.tsx
@@ -1,12 +1,14 @@
 import type { i18n } from 'i18next'
 import type { Accessor, JSX } from 'solid-js'
-import { createContext, createEffect, createMemo, createSignal, Show, useContext } from 'solid-js'
-import { useRouter } from '../stores/router'
+
 import i18next, { changeLanguage, t } from 'i18next'
-import Cookie from 'js-cookie'
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en'
 import ru from 'javascript-time-ago/locale/ru'
+import Cookie from 'js-cookie'
+import { createContext, createEffect, createMemo, createSignal, Show, useContext } from 'solid-js'
+
+import { useRouter } from '../stores/router'
 
 TimeAgo.addLocale(en)
 TimeAgo.addLocale(ru)
@@ -52,9 +54,9 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => {
       {},
       {
         hour: '2-digit',
-        minute: '2-digit'
+        minute: '2-digit',
       },
-      options
+      options,
     )
 
     return date.toLocaleTimeString(lang(), opts)
@@ -66,9 +68,9 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => {
       {
         month: 'long',
         day: 'numeric',
-        year: 'numeric'
+        year: 'numeric',
       },
-      options
+      options,
     )
 
     let result = date.toLocaleDateString(lang(), opts)
diff --git a/src/context/notifications.tsx b/src/context/notifications.tsx
index e610311d..1a96ed94 100644
--- a/src/context/notifications.tsx
+++ b/src/context/notifications.tsx
@@ -1,14 +1,17 @@
 import type { Accessor, JSX } from 'solid-js'
+
 import { createContext, createEffect, createMemo, createSignal, useContext } from 'solid-js'
-import { useSession } from './session'
-import SSEService, { EventData } from '../utils/sseService'
-import { apiBaseUrl } from '../utils/config'
+import { createStore } from 'solid-js/store'
 import { Portal } from 'solid-js/web'
+
 import { ShowIfAuthenticated } from '../components/_shared/ShowIfAuthenticated'
 import { NotificationsPanel } from '../components/NotificationsPanel'
-import { apiClient } from '../utils/apiClient'
-import { createStore } from 'solid-js/store'
 import { Notification } from '../graphql/types.gen'
+import { apiClient } from '../utils/apiClient'
+import { apiBaseUrl } from '../utils/config'
+import SSEService, { EventData } from '../utils/sseService'
+
+import { useSession } from './session'
 
 type NotificationsContextType = {
   notificationEntities: Record<number, Notification>
@@ -56,7 +59,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => {
 
   const sortedNotifications = createMemo(() => {
     return Object.values(notificationEntities).sort(
-      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
     )
   })
 
@@ -97,7 +100,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => {
     hideNotificationsPanel,
     markNotificationAsRead,
     markAllNotificationsAsRead,
-    loadNotifications
+    loadNotifications,
   }
 
   const value: NotificationsContextType = {
@@ -106,7 +109,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => {
     unreadNotificationsCount,
     loadedNotificationsCount,
     totalNotificationsCount,
-    actions
+    actions,
   }
 
   const handleNotificationPanelClose = () => {
diff --git a/src/context/profile.tsx b/src/context/profile.tsx
index ed6f13c3..3050dbc0 100644
--- a/src/context/profile.tsx
+++ b/src/context/profile.tsx
@@ -1,9 +1,12 @@
+import type { ProfileInput } from '../graphql/types.gen'
+
 import { createEffect, createMemo, createSignal } from 'solid-js'
 import { createStore } from 'solid-js/store'
-import { useSession } from './session'
+
 import { loadAuthor, useAuthorsStore } from '../stores/zine/authors'
 import { apiClient } from '../utils/apiClient'
-import type { ProfileInput } from '../graphql/types.gen'
+
+import { useSession } from './session'
 
 const userpicUrl = (userpic: string) => {
   if (userpic.includes('assets.discours.io')) {
@@ -33,7 +36,7 @@ const useProfileForm = () => {
     about: '',
     slug: '',
     userpic: '',
-    links: []
+    links: [],
   })
 
   createEffect(async () => {
@@ -46,7 +49,7 @@ const useProfileForm = () => {
         bio: currentAuthor()?.bio,
         about: currentAuthor()?.about,
         userpic: userpicUrl(currentAuthor()?.userpic),
-        links: currentAuthor()?.links
+        links: currentAuthor()?.links,
       })
     } catch (error) {
       console.error(error)
@@ -58,14 +61,14 @@ const useProfileForm = () => {
       if (remove) {
         setForm(
           'links',
-          form.links.filter((item) => item !== value)
+          form.links.filter((item) => item !== value),
         )
       } else {
         setForm((prev) => ({ ...prev, links: [...prev.links, value] }))
       }
     } else {
       setForm({
-        [fieldName]: value
+        [fieldName]: value,
       })
     }
   }
diff --git a/src/context/reactions.tsx b/src/context/reactions.tsx
index b6c94909..066c5552 100644
--- a/src/context/reactions.tsx
+++ b/src/context/reactions.tsx
@@ -1,9 +1,11 @@
-import type { JSX } from 'solid-js'
-import { createContext, onCleanup, useContext } from 'solid-js'
 import type { Reaction, ReactionBy, ReactionInput } from '../graphql/types.gen'
+import type { JSX } from 'solid-js'
+
+import { createContext, onCleanup, useContext } from 'solid-js'
+import { createStore, reconcile } from 'solid-js/store'
+
 import { ReactionKind } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
-import { createStore, reconcile } from 'solid-js/store'
 
 type ReactionsContextType = {
   reactionEntities: Record<number, Reaction>
@@ -26,7 +28,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
 
   const loadReactionsBy = async ({
     by,
-    limit
+    limit,
   }: {
     by: ReactionBy
     limit?: number
@@ -44,7 +46,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     const reaction = await apiClient.createReaction(input)
 
     const changes = {
-      [reaction.id]: reaction
+      [reaction.id]: reaction,
     }
 
     if ([ReactionKind.Like, ReactionKind.Dislike].includes(reaction.kind)) {
@@ -56,7 +58,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
           r.kind === oppositeReactionKind &&
           r.createdBy.slug === reaction.createdBy.slug &&
           r.shout.id === reaction.shout.id &&
-          r.replyTo === reaction.replyTo
+          r.replyTo === reaction.replyTo,
       )
 
       if (oppositeReaction) {
@@ -70,7 +72,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
   const deleteReaction = async (id: number): Promise<void> => {
     const reaction = await apiClient.destroyReaction(id)
     setReactionEntities({
-      [reaction.id]: undefined
+      [reaction.id]: undefined,
     })
   }
 
@@ -85,7 +87,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     loadReactionsBy,
     createReaction,
     updateReaction,
-    deleteReaction
+    deleteReaction,
   }
 
   const value: ReactionsContextType = { reactionEntities, actions }
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 041ba7fe..0be22560 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -1,4 +1,7 @@
+import type { AuthModalSource } from '../components/Nav/AuthModal/types'
+import type { AuthResult, MySubscriptionsQueryResult, User } from '../graphql/types.gen'
 import type { Accessor, JSX, Resource } from 'solid-js'
+
 import {
   createEffect,
   createContext,
@@ -6,15 +9,15 @@ import {
   createResource,
   createSignal,
   onMount,
-  useContext
+  useContext,
 } from 'solid-js'
-import type { AuthResult, MySubscriptionsQueryResult, User } from '../graphql/types.gen'
-import { apiClient } from '../utils/apiClient'
+
 import { resetToken, setToken } from '../graphql/privateGraphQLClient'
-import { useSnackbar } from './snackbar'
-import { useLocalize } from './localize'
 import { showModal } from '../stores/ui'
-import type { AuthModalSource } from '../components/Nav/AuthModal/types'
+import { apiClient } from '../utils/apiClient'
+
+import { useLocalize } from './localize'
+import { useSnackbar } from './snackbar'
 
 type SessionContextType = {
   session: Resource<AuthResult>
@@ -27,7 +30,7 @@ type SessionContextType = {
     loadSubscriptions: () => Promise<void>
     requireAuthentication: (
       callback: (() => Promise<void>) | (() => void),
-      modalSource: AuthModalSource
+      modalSource: AuthModalSource,
     ) => void
     signIn: ({ email, password }: { email: string; password: string }) => Promise<void>
     signOut: () => Promise<void>
@@ -43,7 +46,7 @@ export function useSession() {
 
 const EMPTY_SUBSCRIPTIONS = {
   topics: [],
-  authors: []
+  authors: [],
 }
 
 export const SessionProvider = (props: { children: JSX.Element }) => {
@@ -51,7 +54,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
   const [subscriptions, setSubscriptions] = createSignal<MySubscriptionsQueryResult>(EMPTY_SUBSCRIPTIONS)
   const { t } = useLocalize()
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const getSession = async (): Promise<AuthResult> => {
@@ -85,7 +88,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
 
   const [session, { refetch: loadSession, mutate }] = createResource<AuthResult>(getSession, {
     ssrLoadFrom: 'initial',
-    initialValue: null
+    initialValue: null,
   })
 
   const user = createMemo(() => session()?.user)
@@ -144,7 +147,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
     signIn,
     signOut,
     confirmEmail,
-    loadSubscriptions
+    loadSubscriptions,
   }
 
   const value: SessionContextType = {
@@ -153,7 +156,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
     isSessionLoaded,
     user,
     isAuthenticated,
-    actions
+    actions,
   }
 
   onMount(() => {
diff --git a/src/context/snackbar.tsx b/src/context/snackbar.tsx
index 57d7de24..9ea589b5 100644
--- a/src/context/snackbar.tsx
+++ b/src/context/snackbar.tsx
@@ -1,5 +1,7 @@
 import type { Accessor, JSX } from 'solid-js'
+
 import { createContext, createSignal, useContext } from 'solid-js'
+
 import { delay } from '../utils/delay'
 
 const DEFAULT_DURATION = 3000 // 3 sec
@@ -56,7 +58,7 @@ export const SnackbarProvider = (props: { children: JSX.Element }) => {
     const messageToShow = {
       type: message.type ?? 'success',
       body: message.body,
-      duration: message.duration ?? DEFAULT_DURATION
+      duration: message.duration ?? DEFAULT_DURATION,
     }
 
     messagesToShow.push(messageToShow)
@@ -70,7 +72,7 @@ export const SnackbarProvider = (props: { children: JSX.Element }) => {
   }
 
   const actions = {
-    showSnackbar
+    showSnackbar,
   }
 
   const value: SnackbarContextType = { snackbarMessage, actions }
diff --git a/src/graphql/privateGraphQLClient.ts b/src/graphql/privateGraphQLClient.ts
index f09bee37..38da3a31 100644
--- a/src/graphql/privateGraphQLClient.ts
+++ b/src/graphql/privateGraphQLClient.ts
@@ -1,6 +1,6 @@
 import { ClientOptions, dedupExchange, fetchExchange, Exchange, createClient } from '@urql/core'
-
 import { devtoolsExchange } from '@urql/devtools'
+
 import { isDev, apiBaseUrl } from '../utils/config'
 
 const TOKEN_LOCAL_STORAGE_KEY = 'token'
@@ -41,7 +41,7 @@ const options: ClientOptions = {
     const headers = { Authorization: token }
     return { headers }
   },
-  exchanges
+  exchanges,
 }
 
 export const privateGraphQLClient = createClient(options)
diff --git a/src/graphql/publicGraphQLClient.ts b/src/graphql/publicGraphQLClient.ts
index 50dec0c7..ce58878a 100644
--- a/src/graphql/publicGraphQLClient.ts
+++ b/src/graphql/publicGraphQLClient.ts
@@ -1,5 +1,6 @@
 import { ClientOptions, dedupExchange, fetchExchange, Exchange, createClient } from '@urql/core'
 import { devtoolsExchange } from '@urql/devtools'
+
 import { isDev, apiBaseUrl } from '../utils/config'
 // import { cache } from './cache'
 
@@ -13,7 +14,7 @@ const options: ClientOptions = {
   url: apiBaseUrl,
   maskTypename: true,
   requestPolicy: 'cache-and-network',
-  exchanges
+  exchanges,
 }
 
 export const publicGraphQLClient = createClient(options)
diff --git a/src/graphql/types.gen.ts b/src/graphql/types.gen.ts
index 415462da..fd7bb869 100644
--- a/src/graphql/types.gen.ts
+++ b/src/graphql/types.gen.ts
@@ -113,7 +113,7 @@ export enum FollowingEntity {
   Author = 'AUTHOR',
   Community = 'COMMUNITY',
   Reactions = 'REACTIONS',
-  Topic = 'TOPIC'
+  Topic = 'TOPIC',
 }
 
 export type LoadShoutsFilters = {
@@ -151,7 +151,7 @@ export type Message = {
 export enum MessageStatus {
   Deleted = 'DELETED',
   New = 'NEW',
-  Updated = 'UPDATED'
+  Updated = 'UPDATED',
 }
 
 export type MessagesBy = {
@@ -323,7 +323,7 @@ export type Notification = {
 
 export enum NotificationType {
   NewComment = 'NEW_COMMENT',
-  NewReply = 'NEW_REPLY'
+  NewReply = 'NEW_REPLY',
 }
 
 export type NotificationsQueryParams = {
@@ -544,7 +544,7 @@ export enum ReactionKind {
   Propose = 'PROPOSE',
   Quote = 'QUOTE',
   Reject = 'REJECT',
-  Remark = 'REMARK'
+  Remark = 'REMARK',
 }
 
 export enum ReactionStatus {
@@ -552,7 +552,7 @@ export enum ReactionStatus {
   Deleted = 'DELETED',
   Explained = 'EXPLAINED',
   New = 'NEW',
-  Updated = 'UPDATED'
+  Updated = 'UPDATED',
 }
 
 export type ReactionUpdating = {
diff --git a/src/pages/about/guide.page.tsx b/src/pages/about/guide.page.tsx
index dc251882..9c4d26a7 100644
--- a/src/pages/about/guide.page.tsx
+++ b/src/pages/about/guide.page.tsx
@@ -1,8 +1,9 @@
-import { createSignal, Show } from 'solid-js'
-import { PageLayout } from '../../components/_shared/PageLayout'
-import { Icon } from '../../components/_shared/Icon'
-import { useLocalize } from '../../context/localize'
 import { Meta } from '@solidjs/meta'
+import { createSignal, Show } from 'solid-js'
+
+import { Icon } from '../../components/_shared/Icon'
+import { PageLayout } from '../../components/_shared/PageLayout'
+import { useLocalize } from '../../context/localize'
 
 export const GuidePage = () => {
   const { t } = useLocalize()
diff --git a/src/pages/about/help.page.tsx b/src/pages/about/help.page.tsx
index 223b6ec5..87e29026 100644
--- a/src/pages/about/help.page.tsx
+++ b/src/pages/about/help.page.tsx
@@ -1,8 +1,9 @@
+import { Meta } from '@solidjs/meta'
 import { createSignal, Show } from 'solid-js'
+
+import { Icon } from '../../components/_shared/Icon'
 import { PageLayout } from '../../components/_shared/PageLayout'
 import { Donate } from '../../components/Discours/Donate'
-import { Icon } from '../../components/_shared/Icon'
-import { Meta } from '@solidjs/meta'
 import { useLocalize } from '../../context/localize'
 
 export const HelpPage = () => {
diff --git a/src/pages/about/manifest.page.tsx b/src/pages/about/manifest.page.tsx
index f1c88dc6..6b4ab838 100644
--- a/src/pages/about/manifest.page.tsx
+++ b/src/pages/about/manifest.page.tsx
@@ -1,10 +1,11 @@
 import { createSignal, Show } from 'solid-js'
-import { PageLayout } from '../../components/_shared/PageLayout'
-import { Modal } from '../../components/Nav/Modal'
-import { Feedback } from '../../components/Discours/Feedback'
-import { Subscribe } from '../../components/_shared/Subscribe'
-import Opener from '../../components/Nav/Modal/Opener'
+
 import { Icon } from '../../components/_shared/Icon'
+import { PageLayout } from '../../components/_shared/PageLayout'
+import { Subscribe } from '../../components/_shared/Subscribe'
+import { Feedback } from '../../components/Discours/Feedback'
+import { Modal } from '../../components/Nav/Modal'
+import Opener from '../../components/Nav/Modal/Opener'
 import { useLocalize } from '../../context/localize'
 
 export const ManifestPage = () => {
diff --git a/src/pages/about/termsOfUse.page.tsx b/src/pages/about/termsOfUse.page.tsx
index 35af29cf..cf6e294b 100644
--- a/src/pages/about/termsOfUse.page.tsx
+++ b/src/pages/about/termsOfUse.page.tsx
@@ -1,8 +1,9 @@
-import { createSignal, Show } from 'solid-js'
-import { PageLayout } from '../../components/_shared/PageLayout'
-import { Icon } from '../../components/_shared/Icon'
-import { useLocalize } from '../../context/localize'
 import { Meta } from '@solidjs/meta'
+import { createSignal, Show } from 'solid-js'
+
+import { Icon } from '../../components/_shared/Icon'
+import { PageLayout } from '../../components/_shared/PageLayout'
+import { useLocalize } from '../../context/localize'
 
 export const TermsOfUsePage = () => {
   const { t } = useLocalize()
diff --git a/src/pages/about/thanks.page.tsx b/src/pages/about/thanks.page.tsx
index 9be94907..96288037 100644
--- a/src/pages/about/thanks.page.tsx
+++ b/src/pages/about/thanks.page.tsx
@@ -1,4 +1,5 @@
 import { Meta } from '@solidjs/meta'
+
 import { PageLayout } from '../../components/_shared/PageLayout'
 import { useLocalize } from '../../context/localize'
 
diff --git a/src/pages/allAuthors.page.server.ts b/src/pages/allAuthors.page.server.ts
index 3973435c..51bf4f0c 100644
--- a/src/pages/allAuthors.page.server.ts
+++ b/src/pages/allAuthors.page.server.ts
@@ -1,6 +1,7 @@
-import type { PageContext } from '../renderer/types'
-import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import type { PageContext } from '../renderer/types'
+
+import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
   const allAuthors = await apiClient.getAllAuthors()
@@ -9,7 +10,7 @@ export const onBeforeRender = async (_pageContext: PageContext) => {
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/allAuthors.page.tsx b/src/pages/allAuthors.page.tsx
index 82c9f4bf..c4a1f197 100644
--- a/src/pages/allAuthors.page.tsx
+++ b/src/pages/allAuthors.page.tsx
@@ -1,11 +1,12 @@
+import type { PageProps } from './types'
+
+import { createSignal, onMount, Show } from 'solid-js'
+
+import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { AllAuthorsView } from '../components/Views/AllAuthors'
-import type { PageProps } from './types'
-import { createSignal, onMount, Show } from 'solid-js'
-import { loadAllAuthors } from '../stores/zine/authors'
-import { Loading } from '../components/_shared/Loading'
-
 import { useLocalize } from '../context/localize'
+import { loadAllAuthors } from '../stores/zine/authors'
 
 export const AllAuthorsPage = (props: PageProps) => {
   const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.allAuthors))
diff --git a/src/pages/allTopics.page.server.ts b/src/pages/allTopics.page.server.ts
index 9ddb09f3..db920a1b 100644
--- a/src/pages/allTopics.page.server.ts
+++ b/src/pages/allTopics.page.server.ts
@@ -1,6 +1,7 @@
-import type { PageContext } from '../renderer/types'
-import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import type { PageContext } from '../renderer/types'
+
+import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
   const allTopics = await apiClient.getAllTopics()
@@ -9,7 +10,7 @@ export const onBeforeRender = async (_pageContext: PageContext) => {
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/allTopics.page.tsx b/src/pages/allTopics.page.tsx
index 3f908645..98c082df 100644
--- a/src/pages/allTopics.page.tsx
+++ b/src/pages/allTopics.page.tsx
@@ -1,10 +1,12 @@
+import type { PageProps } from './types'
+
+import { createSignal, onMount, Show } from 'solid-js'
+
+import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { AllTopicsView } from '../components/Views/AllTopics'
-import type { PageProps } from './types'
-import { createSignal, onMount, Show } from 'solid-js'
-import { loadAllTopics } from '../stores/zine/topics'
-import { Loading } from '../components/_shared/Loading'
 import { useLocalize } from '../context/localize'
+import { loadAllTopics } from '../stores/zine/topics'
 
 export const AllTopicsPage = (props: PageProps) => {
   const { t } = useLocalize()
diff --git a/src/pages/article.page.server.ts b/src/pages/article.page.server.ts
index d95451e3..b23803ff 100644
--- a/src/pages/article.page.server.ts
+++ b/src/pages/article.page.server.ts
@@ -1,8 +1,10 @@
-import type { PageContext } from '../renderer/types'
 import type { PageProps } from './types'
-import { apiClient } from '../utils/apiClient'
+import type { PageContext } from '../renderer/types'
+
 import { render } from 'vike/abort'
 
+import { apiClient } from '../utils/apiClient'
+
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { slug } = pageContext.routeParams
   const article = await apiClient.getShoutBySlug(slug)
@@ -15,7 +17,7 @@ export const onBeforeRender = async (pageContext: PageContext) => {
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/article.page.tsx b/src/pages/article.page.tsx
index 775836d0..8c49cffc 100644
--- a/src/pages/article.page.tsx
+++ b/src/pages/article.page.tsx
@@ -1,14 +1,16 @@
-import { createMemo, createSignal, onMount, Show } from 'solid-js'
-import type { Shout } from '../graphql/types.gen'
-import { PageLayout } from '../components/_shared/PageLayout'
 import type { PageProps } from './types'
-import { loadShout, useArticlesStore } from '../stores/zine/articles'
-import { router, useRouter } from '../stores/router'
-import { Loading } from '../components/_shared/Loading'
-import { ReactionsProvider } from '../context/reactions'
-import { FullArticle } from '../components/Article/FullArticle'
-import { setPageLoadManagerPromise } from '../utils/pageLoadManager'
+import type { Shout } from '../graphql/types.gen'
+
 import { redirectPage } from '@nanostores/router'
+import { createMemo, createSignal, onMount, Show } from 'solid-js'
+
+import { Loading } from '../components/_shared/Loading'
+import { PageLayout } from '../components/_shared/PageLayout'
+import { FullArticle } from '../components/Article/FullArticle'
+import { ReactionsProvider } from '../context/reactions'
+import { router, useRouter } from '../stores/router'
+import { loadShout, useArticlesStore } from '../stores/zine/articles'
+import { setPageLoadManagerPromise } from '../utils/pageLoadManager'
 
 export const ArticlePage = (props: PageProps) => {
   const shouts = props.article ? [props.article] : []
@@ -17,7 +19,7 @@ export const ArticlePage = (props: PageProps) => {
   const slug = createMemo(() => page().params['slug'] as string)
 
   const { articleEntities } = useArticlesStore({
-    shouts
+    shouts,
   })
 
   const article = createMemo<Shout>(() => articleEntities()[slug()])
diff --git a/src/pages/author.page.server.ts b/src/pages/author.page.server.ts
index 6ef91ff6..512243d7 100644
--- a/src/pages/author.page.server.ts
+++ b/src/pages/author.page.server.ts
@@ -1,14 +1,15 @@
-import type { PageContext } from '../renderer/types'
-import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import type { PageContext } from '../renderer/types'
+
 import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author'
+import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { slug } = pageContext.routeParams
 
   const authorShouts = await apiClient.getShouts({
     filters: { author: slug, visibility: 'community' },
-    limit: PRERENDERED_ARTICLES_COUNT
+    limit: PRERENDERED_ARTICLES_COUNT,
   })
   const author = await apiClient.getAuthor({ slug })
 
@@ -16,7 +17,7 @@ export const onBeforeRender = async (pageContext: PageContext) => {
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/author.page.tsx b/src/pages/author.page.tsx
index 6cb61e8f..91c4b74b 100644
--- a/src/pages/author.page.tsx
+++ b/src/pages/author.page.tsx
@@ -1,28 +1,30 @@
+import type { PageProps } from './types'
+
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
+
+import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author'
-import type { PageProps } from './types'
-import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
-import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
-import { useRouter } from '../stores/router'
-import { loadAuthor } from '../stores/zine/authors'
-import { Loading } from '../components/_shared/Loading'
 import { ReactionsProvider } from '../context/reactions'
+import { useRouter } from '../stores/router'
+import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
+import { loadAuthor } from '../stores/zine/authors'
 
 export const AuthorPage = (props: PageProps) => {
   const { page } = useRouter()
   const slug = createMemo(() => page().params['slug'] as string)
 
   const [isLoaded, setIsLoaded] = createSignal(
-    Boolean(props.authorShouts) && Boolean(props.author) && props.author.slug === slug()
+    Boolean(props.authorShouts) && Boolean(props.author) && props.author.slug === slug(),
   )
 
   const preload = () => {
     return Promise.all([
       loadShouts({
         filters: { author: slug(), visibility: 'community' },
-        limit: PRERENDERED_ARTICLES_COUNT
+        limit: PRERENDERED_ARTICLES_COUNT,
       }),
-      loadAuthor({ slug: slug() })
+      loadAuthor({ slug: slug() }),
     ])
   }
 
@@ -46,8 +48,8 @@ export const AuthorPage = (props: PageProps) => {
         await preload()
         setIsLoaded(true)
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
 
   onCleanup(() => resetSortedArticles())
diff --git a/src/pages/connect.page.tsx b/src/pages/connect.page.tsx
index b469a053..7d731ccf 100644
--- a/src/pages/connect.page.tsx
+++ b/src/pages/connect.page.tsx
@@ -1,6 +1,7 @@
-import { PageLayout } from '../components/_shared/PageLayout'
 import { createSignal, Show } from 'solid-js'
 
+import { PageLayout } from '../components/_shared/PageLayout'
+
 export const ConnectPage = () => {
   const [state, setState] = createSignal<'initial' | 'loading' | 'success' | 'error'>('initial')
 
@@ -19,15 +20,15 @@ export const ConnectPage = () => {
 
         return acc
       },
-      {} as Record<string, string>
+      {} as Record<string, string>,
     )
 
     const requestOptions = {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
-      body: JSON.stringify(postData)
+      body: JSON.stringify(postData),
     }
 
     const result = await fetch('/api/feedback', requestOptions)
@@ -40,7 +41,7 @@ export const ConnectPage = () => {
 
     setState('success')
     window.scrollTo({
-      top: 0
+      top: 0,
     })
   }
 
diff --git a/src/pages/create.page.tsx b/src/pages/create.page.tsx
index 5593099c..8efcf156 100644
--- a/src/pages/create.page.tsx
+++ b/src/pages/create.page.tsx
@@ -1,19 +1,22 @@
-import { PageLayout } from '../components/_shared/PageLayout'
-import { useLocalize } from '../context/localize'
+import { redirectPage } from '@nanostores/router'
+import { clsx } from 'clsx'
+
 import { Button } from '../components/_shared/Button'
 import { Icon } from '../components/_shared/Icon'
-import { clsx } from 'clsx'
-import styles from '../styles/Create.module.scss'
-import { apiClient } from '../utils/apiClient'
-import { redirectPage } from '@nanostores/router'
-import { router } from '../stores/router'
-import { LayoutType } from './types'
+import { PageLayout } from '../components/_shared/PageLayout'
 import { AuthGuard } from '../components/AuthGuard'
+import { useLocalize } from '../context/localize'
+import { router } from '../stores/router'
+import { apiClient } from '../utils/apiClient'
+
+import { LayoutType } from './types'
+
+import styles from '../styles/Create.module.scss'
 
 const handleCreate = async (layout: LayoutType) => {
   const shout = await apiClient.createArticle({ article: { layout: layout } })
   redirectPage(router, 'edit', {
-    shoutId: shout.id.toString()
+    shoutId: shout.id.toString(),
   })
 }
 
diff --git a/src/pages/drafts.page.tsx b/src/pages/drafts.page.tsx
index 06073e69..1ea7a25d 100644
--- a/src/pages/drafts.page.tsx
+++ b/src/pages/drafts.page.tsx
@@ -1,7 +1,6 @@
 import { PageLayout } from '../components/_shared/PageLayout'
-
-import { useLocalize } from '../context/localize'
 import { DraftsView } from '../components/Views/DraftsView'
+import { useLocalize } from '../context/localize'
 
 export const DraftsPage = () => {
   const { t } = useLocalize()
diff --git a/src/pages/edit.page.tsx b/src/pages/edit.page.tsx
index b561aa83..ce18b308 100644
--- a/src/pages/edit.page.tsx
+++ b/src/pages/edit.page.tsx
@@ -1,12 +1,14 @@
 import { createMemo, createSignal, lazy, onMount, Show, Suspense } from 'solid-js'
-import { PageLayout } from '../components/_shared/PageLayout'
+
 import { Loading } from '../components/_shared/Loading'
+import { PageLayout } from '../components/_shared/PageLayout'
+import { AuthGuard } from '../components/AuthGuard'
+import { useLocalize } from '../context/localize'
 import { Shout } from '../graphql/types.gen'
 import { useRouter } from '../stores/router'
 import { apiClient } from '../utils/apiClient'
-import { AuthGuard } from '../components/AuthGuard'
+
 import { LayoutType } from './types'
-import { useLocalize } from '../context/localize'
 
 const Edit = lazy(() => import('../components/Views/Edit'))
 
diff --git a/src/pages/expo/expo.page.server.ts b/src/pages/expo/expo.page.server.ts
index dd3e6cba..1f771a42 100644
--- a/src/pages/expo/expo.page.server.ts
+++ b/src/pages/expo/expo.page.server.ts
@@ -1,17 +1,18 @@
 import type { PageContext } from '../../renderer/types'
-import { apiClient } from '../../utils/apiClient'
 import type { PageProps } from '../types'
+
 import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Expo/Expo'
+import { apiClient } from '../../utils/apiClient'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
   const expoShouts = await apiClient.getShouts({
     filters: { excludeLayout: 'article' },
-    limit: PRERENDERED_ARTICLES_COUNT
+    limit: PRERENDERED_ARTICLES_COUNT,
   })
   const pageProps: PageProps = { expoShouts, seo: { title: '' } }
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/expo/expo.page.tsx b/src/pages/expo/expo.page.tsx
index 16d5c33b..658e68e0 100644
--- a/src/pages/expo/expo.page.tsx
+++ b/src/pages/expo/expo.page.tsx
@@ -1,11 +1,13 @@
-import { PageLayout } from '../../components/_shared/PageLayout'
 import type { PageProps } from '../types'
+
+import { createMemo } from 'solid-js'
+
+import { PageLayout } from '../../components/_shared/PageLayout'
 import { Topics } from '../../components/Nav/Topics'
 import { Expo } from '../../components/Views/Expo'
 import { useLocalize } from '../../context/localize'
-import { createMemo } from 'solid-js'
-import { LayoutType } from '../types'
 import { useRouter } from '../../stores/router'
+import { LayoutType } from '../types'
 
 export const ExpoPage = (props: PageProps) => {
   const { t } = useLocalize()
diff --git a/src/pages/expo/expoLayout.page.server.ts b/src/pages/expo/expoLayout.page.server.ts
index febb4d75..fbdd5118 100644
--- a/src/pages/expo/expoLayout.page.server.ts
+++ b/src/pages/expo/expoLayout.page.server.ts
@@ -1,20 +1,21 @@
 import type { PageContext } from '../../renderer/types'
-import { apiClient } from '../../utils/apiClient'
 import type { PageProps } from '../types'
+
 import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Expo/Expo'
+import { apiClient } from '../../utils/apiClient'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { layout } = pageContext.routeParams
   const expoShouts = await apiClient.getShouts({
     filters: { layout: layout },
-    limit: PRERENDERED_ARTICLES_COUNT
+    limit: PRERENDERED_ARTICLES_COUNT,
   })
 
   const pageProps: PageProps = { expoShouts, seo: { title: '' } }
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/feed.page.tsx b/src/pages/feed.page.tsx
index c5d4912d..ee3c8bf1 100644
--- a/src/pages/feed.page.tsx
+++ b/src/pages/feed.page.tsx
@@ -1,17 +1,18 @@
-import { PageLayout } from '../components/_shared/PageLayout'
-import { FeedView } from '../components/Views/Feed'
 import { createEffect, Match, on, onCleanup, Switch } from 'solid-js'
-import { loadMyFeed, loadShouts, resetSortedArticles } from '../stores/zine/articles'
-import { ReactionsProvider } from '../context/reactions'
-import { useRouter } from '../stores/router'
+
+import { PageLayout } from '../components/_shared/PageLayout'
 import { AuthGuard } from '../components/AuthGuard'
-import { LoadShoutsOptions } from '../graphql/types.gen'
+import { FeedView } from '../components/Views/Feed'
 import { useLocalize } from '../context/localize'
+import { ReactionsProvider } from '../context/reactions'
+import { LoadShoutsOptions } from '../graphql/types.gen'
+import { useRouter } from '../stores/router'
+import { loadMyFeed, loadShouts, resetSortedArticles } from '../stores/zine/articles'
 
 const handleFeedLoadShouts = (options: LoadShoutsOptions) => {
   return loadShouts({
     ...options,
-    filters: { visibility: 'community' }
+    filters: { visibility: 'community' },
   })
 }
 
@@ -32,8 +33,8 @@ export const FeedPage = () => {
       () => {
         resetSortedArticles()
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
 
   return (
diff --git a/src/pages/fourOuFour.page.tsx b/src/pages/fourOuFour.page.tsx
index 32e4ee32..6aa1a4b5 100644
--- a/src/pages/fourOuFour.page.tsx
+++ b/src/pages/fourOuFour.page.tsx
@@ -1,5 +1,5 @@
-import { FourOuFourView } from '../components/Views/FourOuFour'
 import { PageLayout } from '../components/_shared/PageLayout'
+import { FourOuFourView } from '../components/Views/FourOuFour'
 import { useLocalize } from '../context/localize'
 
 export const FourOuFourPage = () => {
diff --git a/src/pages/inbox.page.tsx b/src/pages/inbox.page.tsx
index 4b701288..1d09f694 100644
--- a/src/pages/inbox.page.tsx
+++ b/src/pages/inbox.page.tsx
@@ -1,7 +1,7 @@
 import { PageLayout } from '../components/_shared/PageLayout'
+import { ShowOnlyOnClient } from '../components/_shared/ShowOnlyOnClient'
 import { InboxView } from '../components/Views/Inbox'
 import { InboxProvider } from '../context/inbox'
-import { ShowOnlyOnClient } from '../components/_shared/ShowOnlyOnClient'
 import { useLocalize } from '../context/localize'
 
 export const InboxPage = () => {
diff --git a/src/pages/index.page.server.ts b/src/pages/index.page.server.ts
index c6fec57b..e3371943 100644
--- a/src/pages/index.page.server.ts
+++ b/src/pages/index.page.server.ts
@@ -1,19 +1,20 @@
-import type { PageContext } from '../renderer/types'
-import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import type { PageContext } from '../renderer/types'
+
 import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Home'
+import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
   const homeShouts = await apiClient.getShouts({
     filters: { visibility: 'public' },
-    limit: PRERENDERED_ARTICLES_COUNT
+    limit: PRERENDERED_ARTICLES_COUNT,
   })
 
   const pageProps: PageProps = { homeShouts, seo: { title: '' } }
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
index 17c5c252..752fc2bf 100644
--- a/src/pages/index.page.tsx
+++ b/src/pages/index.page.tsx
@@ -1,13 +1,14 @@
+import type { PageProps } from './types'
+
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 
-import { HomeView, PRERENDERED_ARTICLES_COUNT, RANDOM_TOPICS_COUNT } from '../components/Views/Home'
-import { PageLayout } from '../components/_shared/PageLayout'
-import type { PageProps } from './types'
-import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
-import { loadRandomTopics } from '../stores/zine/topics'
 import { Loading } from '../components/_shared/Loading'
+import { PageLayout } from '../components/_shared/PageLayout'
+import { HomeView, PRERENDERED_ARTICLES_COUNT, RANDOM_TOPICS_COUNT } from '../components/Views/Home'
 import { useLocalize } from '../context/localize'
 import { ReactionsProvider } from '../context/reactions'
+import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
+import { loadRandomTopics } from '../stores/zine/topics'
 
 export const HomePage = (props: PageProps) => {
   const [isLoaded, setIsLoaded] = createSignal(Boolean(props.homeShouts))
@@ -20,7 +21,7 @@ export const HomePage = (props: PageProps) => {
 
     await Promise.all([
       loadShouts({ filters: { visibility: 'public' }, limit: PRERENDERED_ARTICLES_COUNT }),
-      loadRandomTopics({ amount: RANDOM_TOPICS_COUNT })
+      loadRandomTopics({ amount: RANDOM_TOPICS_COUNT }),
     ])
 
     setIsLoaded(true)
diff --git a/src/pages/profile/profileSecurity.page.tsx b/src/pages/profile/profileSecurity.page.tsx
index bd0c7ad2..de37e74c 100644
--- a/src/pages/profile/profileSecurity.page.tsx
+++ b/src/pages/profile/profileSecurity.page.tsx
@@ -1,11 +1,13 @@
-import { PageLayout } from '../../components/_shared/PageLayout'
-import styles from './Settings.module.scss'
-import { Icon } from '../../components/_shared/Icon'
 import { clsx } from 'clsx'
-import { ProfileSettingsNavigation } from '../../components/Nav/ProfileSettingsNavigation'
+
+import { Icon } from '../../components/_shared/Icon'
+import { PageLayout } from '../../components/_shared/PageLayout'
 import { AuthGuard } from '../../components/AuthGuard'
+import { ProfileSettingsNavigation } from '../../components/Nav/ProfileSettingsNavigation'
 import { useLocalize } from '../../context/localize'
 
+import styles from './Settings.module.scss'
+
 export const ProfileSecurityPage = () => {
   const { t } = useLocalize()
 
@@ -111,7 +113,7 @@ export const ProfileSecurityPage = () => {
                           class={clsx(
                             styles.socialButton,
                             styles.socialButtonApple,
-                            'button' + ' button--light'
+                            'button' + ' button--light',
                           )}
                           type="button"
                         >
diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx
index 91aedec0..53d089bf 100644
--- a/src/pages/profile/profileSettings.page.tsx
+++ b/src/pages/profile/profileSettings.page.tsx
@@ -1,28 +1,30 @@
-import { PageLayout } from '../../components/_shared/PageLayout'
-import { ProfileSettingsNavigation } from '../../components/Nav/ProfileSettingsNavigation'
-import { For, createSignal, Show, onMount, onCleanup, createEffect, Switch, Match } from 'solid-js'
-import deepEqual from 'fast-deep-equal'
-import { clsx } from 'clsx'
-import styles from './Settings.module.scss'
-import { useProfileForm } from '../../context/profile'
-import { validateUrl } from '../../utils/validateUrl'
 import { createFileUploader } from '@solid-primitives/upload'
-import { useSession } from '../../context/session'
-import FloatingPanel from '../../components/_shared/FloatingPanel/FloatingPanel'
-import { useSnackbar } from '../../context/snackbar'
-import { useLocalize } from '../../context/localize'
+import { clsx } from 'clsx'
+import deepEqual from 'fast-deep-equal'
+import { For, createSignal, Show, onMount, onCleanup, createEffect, Switch, Match } from 'solid-js'
 import { createStore } from 'solid-js/store'
-import { clone } from '../../utils/clone'
-import SimplifiedEditor from '../../components/Editor/SimplifiedEditor'
+
+import FloatingPanel from '../../components/_shared/FloatingPanel/FloatingPanel'
 import { GrowingTextarea } from '../../components/_shared/GrowingTextarea'
-import { AuthGuard } from '../../components/AuthGuard'
-import { handleImageUpload } from '../../utils/handleImageUpload'
-import { SocialNetworkInput } from '../../components/_shared/SocialNetworkInput'
-import { profileSocialLinks } from '../../utils/profileSocialLinks'
 import { Icon } from '../../components/_shared/Icon'
-import { Popover } from '../../components/_shared/Popover'
 import { Loading } from '../../components/_shared/Loading'
+import { PageLayout } from '../../components/_shared/PageLayout'
+import { Popover } from '../../components/_shared/Popover'
+import { SocialNetworkInput } from '../../components/_shared/SocialNetworkInput'
+import { AuthGuard } from '../../components/AuthGuard'
+import SimplifiedEditor from '../../components/Editor/SimplifiedEditor'
+import { ProfileSettingsNavigation } from '../../components/Nav/ProfileSettingsNavigation'
+import { useLocalize } from '../../context/localize'
+import { useProfileForm } from '../../context/profile'
+import { useSession } from '../../context/session'
+import { useSnackbar } from '../../context/snackbar'
+import { clone } from '../../utils/clone'
 import { getImageUrl } from '../../utils/getImageUrl'
+import { handleImageUpload } from '../../utils/handleImageUpload'
+import { profileSocialLinks } from '../../utils/profileSocialLinks'
+import { validateUrl } from '../../utils/validateUrl'
+
+import styles from './Settings.module.scss'
 
 export const ProfileSettingsPage = () => {
   const { t } = useLocalize()
@@ -34,11 +36,11 @@ export const ProfileSettingsPage = () => {
   const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false)
 
   const {
-    actions: { showSnackbar }
+    actions: { showSnackbar },
   } = useSnackbar()
 
   const {
-    actions: { loadSession }
+    actions: { loadSession },
   } = useSession()
 
   const { form, updateFormField, submit, slugError } = useProfileForm()
@@ -93,7 +95,7 @@ export const ProfileSettingsPage = () => {
     const handleBeforeUnload = (event) => {
       if (!deepEqual(form, prevForm)) {
         event.returnValue = t(
-          'There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?'
+          'There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?',
         )
       }
     }
@@ -154,8 +156,8 @@ export const ProfileSettingsPage = () => {
                                 style={{
                                   'background-image': `url(${getImageUrl(form.userpic, {
                                     width: 180,
-                                    height: 180
-                                  })})`
+                                    height: 180,
+                                  })})`,
                                 }}
                               />
                               <div class={styles.controls}>
@@ -196,7 +198,7 @@ export const ProfileSettingsPage = () => {
                       <h4>{t('Name')}</h4>
                       <p class="description">
                         {t(
-                          'Your name will appear on your profile page and as your signature in publications, comments and responses.'
+                          'Your name will appear on your profile page and as your signature in publications, comments and responses.',
                         )}
                       </p>
                       <div class="pretty-form__item">
diff --git a/src/pages/search.page.server.ts b/src/pages/search.page.server.ts
index 0b899089..7c4f7115 100644
--- a/src/pages/search.page.server.ts
+++ b/src/pages/search.page.server.ts
@@ -1,6 +1,7 @@
-import type { PageContext } from '../renderer/types'
-import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import type { PageContext } from '../renderer/types'
+
+import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { q } = pageContext.routeParams
@@ -11,7 +12,7 @@ export const onBeforeRender = async (pageContext: PageContext) => {
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/search.page.tsx b/src/pages/search.page.tsx
index 66190130..d7a72e3a 100644
--- a/src/pages/search.page.tsx
+++ b/src/pages/search.page.tsx
@@ -1,12 +1,14 @@
+import type { PageProps } from './types'
+
+import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
+
+import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { SearchView } from '../components/Views/Search'
-import type { PageProps } from './types'
-import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { useLocalize } from '../context/localize'
+import { ReactionsProvider } from '../context/reactions'
 import { useRouter } from '../stores/router'
 import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
-import { Loading } from '../components/_shared/Loading'
-import { ReactionsProvider } from '../context/reactions'
-import { useLocalize } from '../context/localize'
 
 export const SearchPage = (props: PageProps) => {
   const [isLoaded, setIsLoaded] = createSignal(Boolean(props.searchResults))
diff --git a/src/pages/topic.page.server.ts b/src/pages/topic.page.server.ts
index 8b49c822..3f48dfdb 100644
--- a/src/pages/topic.page.server.ts
+++ b/src/pages/topic.page.server.ts
@@ -1,6 +1,7 @@
-import type { PageContext } from '../renderer/types'
-import { apiClient } from '../utils/apiClient'
 import type { PageProps } from './types'
+import type { PageContext } from '../renderer/types'
+
+import { apiClient } from '../utils/apiClient'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { slug } = pageContext.routeParams
@@ -11,7 +12,7 @@ export const onBeforeRender = async (pageContext: PageContext) => {
 
   return {
     pageContext: {
-      pageProps
-    }
+      pageProps,
+    },
   }
 }
diff --git a/src/pages/topic.page.tsx b/src/pages/topic.page.tsx
index db6888f7..6f7cdf74 100644
--- a/src/pages/topic.page.tsx
+++ b/src/pages/topic.page.tsx
@@ -1,12 +1,14 @@
+import type { PageProps } from './types'
+
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
+
+import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../components/Views/Topic'
-import type { PageProps } from './types'
-import { createEffect, createMemo, createSignal, on, onCleanup, onMount, Show } from 'solid-js'
-import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
-import { useRouter } from '../stores/router'
-import { loadTopic } from '../stores/zine/topics'
-import { Loading } from '../components/_shared/Loading'
 import { ReactionsProvider } from '../context/reactions'
+import { useRouter } from '../stores/router'
+import { loadShouts, resetSortedArticles } from '../stores/zine/articles'
+import { loadTopic } from '../stores/zine/topics'
 
 export const TopicPage = (props: PageProps) => {
   const { page } = useRouter()
@@ -14,13 +16,13 @@ export const TopicPage = (props: PageProps) => {
   const slug = createMemo(() => page().params['slug'] as string)
 
   const [isLoaded, setIsLoaded] = createSignal(
-    Boolean(props.topicShouts) && Boolean(props.topic) && props.topic.slug === slug()
+    Boolean(props.topicShouts) && Boolean(props.topic) && props.topic.slug === slug(),
   )
 
   const preload = () =>
     Promise.all([
       loadShouts({ filters: { topic: slug() }, limit: PRERENDERED_ARTICLES_COUNT, offset: 0 }),
-      loadTopic({ slug: slug() })
+      loadTopic({ slug: slug() }),
     ])
 
   onMount(async () => {
@@ -42,8 +44,8 @@ export const TopicPage = (props: PageProps) => {
         await preload()
         setIsLoaded(true)
       },
-      { defer: true }
-    )
+      { defer: true },
+    ),
   )
 
   onCleanup(() => resetSortedArticles())
diff --git a/src/renderer/_default.page.client.tsx b/src/renderer/_default.page.client.tsx
index 5e54ab82..338f3ccd 100644
--- a/src/renderer/_default.page.client.tsx
+++ b/src/renderer/_default.page.client.tsx
@@ -1,14 +1,16 @@
-import { App } from '../components/App'
-import { hydrate } from 'solid-js/web'
-import type { PageContextBuiltInClientWithClientRouting } from 'vike/types'
 import type { PageContext } from './types'
-import i18next from 'i18next'
-import ICU from 'i18next-icu'
-import HttpApi from 'i18next-http-backend'
+import type { PageContextBuiltInClientWithClientRouting } from 'vike/types'
+
 import * as Sentry from '@sentry/browser'
+import i18next from 'i18next'
+import HttpApi from 'i18next-http-backend'
+import ICU from 'i18next-icu'
+import { hydrate } from 'solid-js/web'
+
+import { App } from '../components/App'
+import { initRouter } from '../stores/router'
 import { SENTRY_DSN } from '../utils/config'
 import { resolveHydrationPromise } from '../utils/hydrationPromise'
-import { initRouter } from '../stores/router'
 
 let layoutReady = false
 
@@ -25,7 +27,7 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
 
   if (SENTRY_DSN) {
     Sentry.init({
-      dsn: SENTRY_DSN
+      dsn: SENTRY_DSN,
     })
   }
 
@@ -38,7 +40,7 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
       supportedLngs: ['ru', 'en'],
       fallbackLng: lng,
       lng,
-      load: 'languageOnly'
+      load: 'languageOnly',
     })
 
   const isIOSorMacOSorAndroid = /iphone|ipad|ipod|macintosh|android/i.test(navigator.userAgent)
diff --git a/src/renderer/_default.page.server.tsx b/src/renderer/_default.page.server.tsx
index a847feae..1b721a91 100644
--- a/src/renderer/_default.page.server.tsx
+++ b/src/renderer/_default.page.server.tsx
@@ -1,13 +1,15 @@
+import type { PageContext } from './types'
+import type { Language } from '../context/localize'
+
+import i18next from 'i18next'
+import ICU from 'i18next-icu'
 import { generateHydrationScript, getAssets, renderToString } from 'solid-js/web'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+
+import en from '../../public/locales/en/translation.json'
+import ru from '../../public/locales/ru/translation.json'
 import { App } from '../components/App'
 import { initRouter } from '../stores/router'
-import type { PageContext } from './types'
-import i18next from 'i18next'
-import ru from '../../public/locales/ru/translation.json'
-import en from '../../public/locales/en/translation.json'
-import type { Language } from '../context/localize'
-import ICU from 'i18next-icu'
 
 export const passToClient = ['pageProps', 'lng', 'documentProps', 'is404']
 
@@ -38,8 +40,8 @@ export const render = async (pageContext: PageContext) => {
       lng,
       resources: {
         ru: { translation: ru },
-        en: { translation: en }
-      }
+        en: { translation: en },
+      },
     })
   } else if (i18next.language !== lng) {
     // eslint-disable-next-line import/no-named-as-default-member
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index 56c7d1ea..7f97c7ca 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -1,5 +1,6 @@
 import type { PageProps } from '../pages/types'
 import type { Component } from 'solid-js'
+
 import { PageContextBuiltInClientWithClientRouting } from 'vike/dist/esm/types'
 
 export type PageContext = PageContextBuiltInClientWithClientRouting & {
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index defc4783..ced69896 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -3,7 +3,7 @@ import { apiClient } from '../utils/apiClient'
 export const register = async ({
   name,
   email,
-  password
+  password,
 }: {
   name: string
   email: string
@@ -12,14 +12,14 @@ export const register = async ({
   await apiClient.authRegister({
     name,
     email,
-    password
+    password,
   })
 }
 
 export const signSendLink = async ({
   email,
   lang,
-  template
+  template,
 }: {
   email: string
   lang: string
diff --git a/src/stores/emailChecks.ts b/src/stores/emailChecks.ts
index 62c5e71f..2d20c162 100644
--- a/src/stores/emailChecks.ts
+++ b/src/stores/emailChecks.ts
@@ -1,6 +1,7 @@
-import { apiClient } from '../utils/apiClient'
 import { createSignal } from 'solid-js'
 
+import { apiClient } from '../utils/apiClient'
+
 const [emailChecks, setEmailChecks] = createSignal<{ [email: string]: boolean }>({})
 
 export const checkEmail = async (email: string): Promise<boolean> => {
diff --git a/src/stores/inbox.ts b/src/stores/inbox.ts
index 08c764a7..1f262fa7 100644
--- a/src/stores/inbox.ts
+++ b/src/stores/inbox.ts
@@ -1,6 +1,7 @@
-import { apiClient } from '../utils/apiClient'
 import type { MessagesBy } from '../graphql/types.gen'
 
+import { apiClient } from '../utils/apiClient'
+
 export const loadRecipients = async (by = {}): Promise<void> => {
   return await apiClient.getRecipients(by)
 }
diff --git a/src/stores/router.ts b/src/stores/router.ts
index 0d98a392..23e98b9c 100644
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@@ -1,7 +1,9 @@
 import type { Accessor } from 'solid-js'
+
 import { createRouter, createSearchParams } from '@nanostores/router'
-import { isServer } from 'solid-js/web'
 import { useStore } from '@nanostores/solid'
+import { isServer } from 'solid-js/web'
+
 import { hydrationPromise } from '../utils/hydrationPromise'
 
 export const ROUTES = {
@@ -41,13 +43,13 @@ export const ROUTES = {
   profileSecurity: '/profile/security',
   profileSubscriptions: '/profile/subscriptions',
   fourOuFour: '/404',
-  article: '/:slug'
+  article: '/:slug',
 } as const
 
 const searchParamsStore = createSearchParams()
 const routerStore = createRouter(ROUTES, {
   search: false,
-  links: false
+  links: false,
 })
 
 export const router = routerStore
@@ -83,7 +85,7 @@ const scrollToHash = (hash: string) => {
 
   window.scrollTo({
     top: newScrollTop,
-    behavior: 'smooth'
+    behavior: 'smooth',
   })
 }
 
@@ -119,7 +121,7 @@ const handleClientRouteLinkClick = async (event) => {
 
   window.scrollTo({
     top: 0,
-    left: 0
+    left: 0,
   })
 }
 
@@ -154,6 +156,6 @@ export const useRouter = <TSearchParams extends Record<string, string> = Record<
   return {
     page,
     searchParams,
-    changeSearchParam
+    changeSearchParam,
   }
 }
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index b9600651..b4edecd2 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -1,12 +1,14 @@
-import { createSignal } from 'solid-js'
-import { useRouter } from './router'
 import type {
   AuthModalSearchParams,
   AuthModalSource,
-  ConfirmEmailSearchParams
+  ConfirmEmailSearchParams,
 } from '../components/Nav/AuthModal/types'
 import type { RootSearchParams } from '../pages/types'
 
+import { createSignal } from 'solid-js'
+
+import { useRouter } from './router'
+
 export type ModalType =
   | 'auth'
   | 'subscribe'
@@ -37,7 +39,7 @@ export const MODALS: Record<ModalType, ModalType> = {
   editorInsertLink: 'editorInsertLink',
   simplifiedEditorInsertLink: 'simplifiedEditorInsertLink',
   followers: 'followers',
-  following: 'following'
+  following: 'following',
 }
 
 const [modal, setModal] = createSignal<ModalType>(null)
@@ -49,7 +51,7 @@ const { searchParams, changeSearchParam } = useRouter<
 export const showModal = (modalType: ModalType, modalSource?: AuthModalSource) => {
   if (modalSource) {
     changeSearchParam({
-      source: modalSource
+      source: modalSource,
     })
   }
 
@@ -60,7 +62,7 @@ export const showModal = (modalType: ModalType, modalSource?: AuthModalSource) =
 export const hideModal = () => {
   const newSearchParams: Partial<AuthModalSearchParams & ConfirmEmailSearchParams & RootSearchParams> = {
     modal: null,
-    source: null
+    source: null,
   }
 
   if (searchParams().modal === 'auth') {
@@ -77,6 +79,6 @@ export const hideModal = () => {
 
 export const useModalStore = () => {
   return {
-    modal
+    modal,
   }
 }
diff --git a/src/stores/zine/articles.ts b/src/stores/zine/articles.ts
index 3630550e..48f6e316 100644
--- a/src/stores/zine/articles.ts
+++ b/src/stores/zine/articles.ts
@@ -1,9 +1,12 @@
 import type { Author, Shout, ShoutInput, LoadShoutsOptions } from '../../graphql/types.gen'
-import { apiClient } from '../../utils/apiClient'
-import { addAuthorsByTopic } from './authors'
-import { byStat } from '../../utils/sortby'
-import { createSignal } from 'solid-js'
+
 import { createLazyMemo } from '@solid-primitives/memo'
+import { createSignal } from 'solid-js'
+
+import { apiClient } from '../../utils/apiClient'
+import { byStat } from '../../utils/sortby'
+
+import { addAuthorsByTopic } from './authors'
 
 const [sortedArticles, setSortedArticles] = createSignal<Shout[]>([])
 const [articleEntities, setArticleEntities] = createSignal<{ [articleSlug: string]: Shout }>({})
@@ -23,7 +26,7 @@ const articlesByAuthor = createLazyMemo(() => {
 
       return acc
     },
-    {} as { [authorSlug: string]: Shout[] }
+    {} as { [authorSlug: string]: Shout[] },
   )
 })
 
@@ -39,7 +42,7 @@ const articlesByTopic = createLazyMemo(() => {
 
       return acc
     },
-    {} as { [authorSlug: string]: Shout[] }
+    {} as { [authorSlug: string]: Shout[] },
   )
 })
 
@@ -54,7 +57,7 @@ const articlesByLayout = createLazyMemo(() => {
 
       return acc
     },
-    {} as { [layout: string]: Shout[] }
+    {} as { [layout: string]: Shout[] },
   )
 })
 
@@ -79,13 +82,13 @@ const addArticles = (...args: Shout[][]) => {
       acc[article.slug] = article
       return acc
     },
-    {} as { [articleSLug: string]: Shout }
+    {} as { [articleSLug: string]: Shout },
   )
 
   setArticleEntities((prevArticleEntities) => {
     return {
       ...prevArticleEntities,
-      ...newArticleEntities
+      ...newArticleEntities,
     }
   })
 
@@ -107,7 +110,7 @@ const addArticles = (...args: Shout[][]) => {
 
       return acc
     },
-    {} as { [topicSlug: string]: Author[] }
+    {} as { [topicSlug: string]: Author[] },
   )
 
   addAuthorsByTopic(authorsByTopic)
@@ -132,11 +135,11 @@ export const loadShout = async (slug: string): Promise<void> => {
 }
 
 export const loadShouts = async (
-  options: LoadShoutsOptions
+  options: LoadShoutsOptions,
 ): Promise<{ hasMore: boolean; newShouts: Shout[] }> => {
   const newShouts = await apiClient.getShouts({
     ...options,
-    limit: options.limit + 1
+    limit: options.limit + 1,
   })
 
   const hasMore = newShouts.length === options.limit + 1
@@ -152,11 +155,11 @@ export const loadShouts = async (
 }
 
 export const loadMyFeed = async (
-  options: LoadShoutsOptions
+  options: LoadShoutsOptions,
 ): Promise<{ hasMore: boolean; newShouts: Shout[] }> => {
   const newShouts = await apiClient.getMyFeed({
     ...options,
-    limit: options.limit + 1
+    limit: options.limit + 1,
   })
 
   const hasMore = newShouts.length === options.limit + 1
@@ -194,10 +197,10 @@ export const loadTopMonthArticles = async (): Promise<void> => {
     filters: {
       visibility: 'public',
       // TODO: replace with from, to
-      days: 30
+      days: 30,
     },
     order_by: 'rating_stat',
-    limit: TOP_MONTH_ARTICLES_COUNT
+    limit: TOP_MONTH_ARTICLES_COUNT,
   })
   addArticles(articles)
   setTopMonthArticles(articles)
@@ -208,10 +211,10 @@ const TOP_ARTICLES_COUNT = 10
 export const loadTopArticles = async (): Promise<void> => {
   const articles = await apiClient.getShouts({
     filters: {
-      visibility: 'public'
+      visibility: 'public',
     },
     order_by: 'rating_stat',
-    limit: TOP_ARTICLES_COUNT
+    limit: TOP_ARTICLES_COUNT,
   })
   addArticles(articles)
   setTopArticles(articles)
@@ -233,6 +236,6 @@ export const useArticlesStore = (initialState: InitialState = {}) => {
     topMonthArticles,
     topArticles,
     topCommentedArticles,
-    topViewedArticles
+    topViewedArticles,
   }
 }
diff --git a/src/stores/zine/authors.ts b/src/stores/zine/authors.ts
index 9c3abd30..816a043b 100644
--- a/src/stores/zine/authors.ts
+++ b/src/stores/zine/authors.ts
@@ -1,7 +1,9 @@
-import { apiClient } from '../../utils/apiClient'
 import type { Author } from '../../graphql/types.gen'
-import { createSignal } from 'solid-js'
+
 import { createLazyMemo } from '@solid-primitives/memo'
+import { createSignal } from 'solid-js'
+
+import { apiClient } from '../../utils/apiClient'
 import { byStat } from '../../utils/sortby'
 
 export type AuthorsSortBy = 'shouts' | 'name' | 'followers'
@@ -33,22 +35,25 @@ const sortedAuthors = createLazyMemo(() => {
 })
 
 const addAuthors = (authors: Author[]) => {
-  const newAuthorEntities = authors.filter(Boolean).reduce((acc, author) => {
-    acc[author.slug] = author
-    return acc
-  }, {} as Record<string, Author>)
+  const newAuthorEntities = authors.filter(Boolean).reduce(
+    (acc, author) => {
+      acc[author.slug] = author
+      return acc
+    },
+    {} as Record<string, Author>,
+  )
 
   setAuthorEntities((prevAuthorEntities) =>
     Object.keys(newAuthorEntities).reduce(
       (acc, authorSlug) => {
         acc[authorSlug] = {
           ...acc[authorSlug],
-          ...newAuthorEntities[authorSlug]
+          ...newAuthorEntities[authorSlug],
         }
         return acc
       },
-      { ...prevAuthorEntities }
-    )
+      { ...prevAuthorEntities },
+    ),
   )
 }
 
diff --git a/src/stores/zine/common.ts b/src/stores/zine/common.ts
index 4a7f40ed..d4b0905e 100644
--- a/src/stores/zine/common.ts
+++ b/src/stores/zine/common.ts
@@ -1,4 +1,5 @@
 import type { FollowingEntity } from '../../graphql/types.gen'
+
 import { apiClient } from '../../utils/apiClient'
 
 export const follow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
diff --git a/src/stores/zine/layouts.ts b/src/stores/zine/layouts.ts
index b96ea96c..34398207 100644
--- a/src/stores/zine/layouts.ts
+++ b/src/stores/zine/layouts.ts
@@ -1,7 +1,9 @@
 import type { Shout, LoadShoutsOptions } from '../../graphql/types.gen'
-import { apiClient } from '../../utils/apiClient'
+
 import { createSignal } from 'solid-js'
 
+import { apiClient } from '../../utils/apiClient'
+
 export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature'
 
 const [sortedLayoutShouts, setSortedLayoutShouts] = createSignal<Map<LayoutType, Shout[]>>(new Map())
@@ -24,7 +26,7 @@ export const resetSortedLayoutShouts = () => {
 export const loadLayoutShoutsBy = async (options: LoadShoutsOptions): Promise<{ hasMore: boolean }> => {
   const newLayoutShouts = await apiClient.getShouts({
     ...options,
-    limit: options.limit + 1
+    limit: options.limit + 1,
   })
 
   const hasMore = newLayoutShouts.length === options.limit + 1
@@ -43,6 +45,6 @@ export const useLayoutsStore = (layout: LayoutType, initialData: Shout[]) => {
   return {
     addLayoutShouts,
     sortedLayoutShouts,
-    loadLayoutShoutsBy
+    loadLayoutShoutsBy,
   }
 }
diff --git a/src/stores/zine/seen.ts b/src/stores/zine/seen.ts
index e0539a53..bf01d92d 100644
--- a/src/stores/zine/seen.ts
+++ b/src/stores/zine/seen.ts
@@ -10,6 +10,6 @@ export const useSeenStore = (initialData: { [slug: string]: Date } = {}) => {
   return {
     seen,
     setSeen,
-    addSeen
+    addSeen,
   }
 }
diff --git a/src/stores/zine/topAuthors.ts b/src/stores/zine/topAuthors.ts
index 400313f8..c3b8ee17 100644
--- a/src/stores/zine/topAuthors.ts
+++ b/src/stores/zine/topAuthors.ts
@@ -1,4 +1,5 @@
 import { createMemo } from 'solid-js'
+
 import { useArticlesStore } from './articles'
 import { useAuthorsStore } from './authors'
 
@@ -13,11 +14,11 @@ export const useTopAuthorsStore = () => {
       .sort((authorSlug1, authorSlug2) => {
         const author1Rating = articlesByAuthor()[authorSlug1].reduce(
           (acc, article) => acc + article.stat?.rating,
-          0
+          0,
         )
         const author2Rating = articlesByAuthor()[authorSlug2].reduce(
           (acc, article) => acc + article.stat?.rating,
-          0
+          0,
         )
         if (author1Rating === author2Rating) {
           return 0
diff --git a/src/stores/zine/topics.ts b/src/stores/zine/topics.ts
index c8d81caf..62ecc10b 100644
--- a/src/stores/zine/topics.ts
+++ b/src/stores/zine/topics.ts
@@ -1,8 +1,10 @@
-import { createMemo, createSignal } from 'solid-js'
-import { apiClient } from '../../utils/apiClient'
 import type { Topic } from '../../graphql/types.gen'
-import { byTopicStatDesc } from '../../utils/sortby'
+
 import { createLazyMemo } from '@solid-primitives/memo'
+import { createMemo, createSignal } from 'solid-js'
+
+import { apiClient } from '../../utils/apiClient'
+import { byTopicStatDesc } from '../../utils/sortby'
 
 export type TopicsSortBy = 'followers' | 'title' | 'authors' | 'shouts'
 
@@ -54,15 +56,18 @@ const topTopics = createMemo(() => {
 const addTopics = (...args: Topic[][]) => {
   const allTopics = args.flatMap((topics) => (topics || []).filter(Boolean))
 
-  const newTopicEntities = allTopics.reduce((acc, topic) => {
-    acc[topic.slug] = topic
-    return acc
-  }, {} as Record<string, Topic>)
+  const newTopicEntities = allTopics.reduce(
+    (acc, topic) => {
+      acc[topic.slug] = topic
+      return acc
+    },
+    {} as Record<string, Topic>,
+  )
 
   setTopicEntities((prevTopicEntities) => {
     return {
       ...prevTopicEntities,
-      ...newTopicEntities
+      ...newTopicEntities,
     }
   })
 }
diff --git a/src/styles/404.css b/src/styles/404.css
index 58816bf4..433a5687 100644
--- a/src/styles/404.css
+++ b/src/styles/404.css
@@ -30,7 +30,9 @@
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 
 .form-control,
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index 8ed9591e..e9e25b26 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,7 +1,9 @@
 @font-face {
   font-family: Muller;
   font-display: fallback;
-  src: url('/fonts/Muller-Regular.woff2') format('woff2'), url('/fonts/Muller-Regular.woff') format('woff');
+  src:
+    url('/fonts/Muller-Regular.woff2') format('woff2'),
+    url('/fonts/Muller-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
@@ -9,7 +11,8 @@
 @font-face {
   font-family: Muller;
   font-display: fallback;
-  src: url('/fonts/Muller-RegularItalic.woff2') format('woff2'),
+  src:
+    url('/fonts/Muller-RegularItalic.woff2') format('woff2'),
     url('/fonts/Muller-RegularItalic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
@@ -18,7 +21,9 @@
 @font-face {
   font-family: Muller;
   font-display: fallback;
-  src: url('/fonts/Muller-Medium.woff2') format('woff2'), url('/fonts/Muller-Medium.woff') format('woff');
+  src:
+    url('/fonts/Muller-Medium.woff2') format('woff2'),
+    url('/fonts/Muller-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
@@ -26,7 +31,8 @@
 @font-face {
   font-family: Muller;
   font-display: fallback;
-  src: url('/fonts/Muller-MediumItalic.woff2') format('woff2'),
+  src:
+    url('/fonts/Muller-MediumItalic.woff2') format('woff2'),
     url('/fonts/Muller-MediumItalic.woff') format('woff');
   font-weight: 500;
   font-style: italic;
@@ -35,7 +41,9 @@
 @font-face {
   font-family: Muller;
   font-display: fallback;
-  src: url('/fonts/Muller-Bold.woff2') format('woff2'), url('/fonts/Muller-Bold.woff') format('woff');
+  src:
+    url('/fonts/Muller-Bold.woff2') format('woff2'),
+    url('/fonts/Muller-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
 }
@@ -43,7 +51,8 @@
 @font-face {
   font-family: Muller;
   font-display: fallback;
-  src: url('/fonts/Muller-ExtraBold.woff2') format('woff2'),
+  src:
+    url('/fonts/Muller-ExtraBold.woff2') format('woff2'),
     url('/fonts/Muller-ExtraBold.woff') format('woff');
   font-weight: 800;
   font-style: normal;
diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss
index fb18331c..6f69c5bc 100644
--- a/src/styles/_globals.scss
+++ b/src/styles/_globals.scss
@@ -10,7 +10,7 @@ $grid-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1400px
+  xxl: 1400px,
 ) !default;
 $default-color: #141414;
 $link-color: #2638d9;
diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts
index 6069b384..8ba484f8 100644
--- a/src/utils/apiClient.ts
+++ b/src/utils/apiClient.ts
@@ -18,49 +18,50 @@ import type {
   Shout,
   NotificationsQueryParams,
   NotificationsQueryResult,
-  MySubscriptionsQueryResult
+  MySubscriptionsQueryResult,
 } from '../graphql/types.gen'
-import { publicGraphQLClient } from '../graphql/publicGraphQLClient'
-import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient'
-import topicsAll from '../graphql/query/topics-all'
-import mySession from '../graphql/mutation/my-session'
-import authLogoutQuery from '../graphql/mutation/auth-logout'
-import authLoginQuery from '../graphql/query/auth-login'
-import authRegisterMutation from '../graphql/mutation/auth-register'
-import authCheckEmailQuery from '../graphql/query/auth-check-email'
+
+import createArticle from '../graphql/mutation/article-create'
+import deleteShout from '../graphql/mutation/article-delete'
+import updateArticle from '../graphql/mutation/article-update'
 import authConfirmEmailMutation from '../graphql/mutation/auth-confirm-email'
+import authLogoutQuery from '../graphql/mutation/auth-logout'
+import authRegisterMutation from '../graphql/mutation/auth-register'
 import authSendLinkMutation from '../graphql/mutation/auth-send-link'
+import createChat from '../graphql/mutation/create-chat'
+import createMessage from '../graphql/mutation/create-chat-message'
 import followMutation from '../graphql/mutation/follow'
-import unfollowMutation from '../graphql/mutation/unfollow'
-import topicsRandomQuery from '../graphql/query/topics-random'
-import authorsAll from '../graphql/query/authors-all'
+import markAllNotificationsAsRead from '../graphql/mutation/mark-all-notifications-as-read'
+import markNotificationAsRead from '../graphql/mutation/mark-notification-as-read'
+import mySession from '../graphql/mutation/my-session'
 import reactionCreate from '../graphql/mutation/reaction-create'
 import reactionDestroy from '../graphql/mutation/reaction-destroy'
 import reactionUpdate from '../graphql/mutation/reaction-update'
-import createArticle from '../graphql/mutation/article-create'
-import myChats from '../graphql/query/chats-load'
-import chatMessagesLoadBy from '../graphql/query/chat-messages-load-by'
+import unfollowMutation from '../graphql/mutation/unfollow'
+import updateProfile from '../graphql/mutation/update-profile'
+import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient'
+import { publicGraphQLClient } from '../graphql/publicGraphQLClient'
+import shoutLoad from '../graphql/query/article-load'
+import shoutsLoadBy from '../graphql/query/articles-load-by'
+import authCheckEmailQuery from '../graphql/query/auth-check-email'
+import authLoginQuery from '../graphql/query/auth-login'
 import authorBySlug from '../graphql/query/author-by-slug'
 import userSubscribers from '../graphql/query/author-followers'
-import userFollowedAuthors from '../graphql/query/author-following-users'
 import userFollowedTopics from '../graphql/query/author-following-topics'
-import topicBySlug from '../graphql/query/topic-by-slug'
-import createChat from '../graphql/mutation/create-chat'
-import reactionsLoadBy from '../graphql/query/reactions-load-by'
+import userFollowedAuthors from '../graphql/query/author-following-users'
+import authorsAll from '../graphql/query/authors-all'
 import authorsLoadBy from '../graphql/query/authors-load-by'
-import shoutsLoadBy from '../graphql/query/articles-load-by'
-import draftsLoad from '../graphql/query/drafts-load'
-import shoutLoad from '../graphql/query/article-load'
-import myFeed from '../graphql/query/my-feed'
+import chatMessagesLoadBy from '../graphql/query/chat-messages-load-by'
 import loadRecipients from '../graphql/query/chat-recipients'
-import createMessage from '../graphql/mutation/create-chat-message'
-import updateProfile from '../graphql/mutation/update-profile'
-import updateArticle from '../graphql/mutation/article-update'
-import deleteShout from '../graphql/mutation/article-delete'
-import notifications from '../graphql/query/notifications'
-import markNotificationAsRead from '../graphql/mutation/mark-notification-as-read'
-import markAllNotificationsAsRead from '../graphql/mutation/mark-all-notifications-as-read'
+import myChats from '../graphql/query/chats-load'
+import draftsLoad from '../graphql/query/drafts-load'
+import myFeed from '../graphql/query/my-feed'
 import mySubscriptions from '../graphql/query/my-subscriptions'
+import notifications from '../graphql/query/notifications'
+import reactionsLoadBy from '../graphql/query/reactions-load-by'
+import topicBySlug from '../graphql/query/topic-by-slug'
+import topicsAll from '../graphql/query/topics-all'
+import topicsRandomQuery from '../graphql/query/topics-random'
 
 type ApiErrorCode =
   | 'unknown'
@@ -107,7 +108,7 @@ export const apiClient = {
   authRegister: async ({
     email,
     password,
-    name
+    name,
   }: {
     email: string
     password: string
@@ -261,7 +262,7 @@ export const apiClient = {
   updateArticle: async ({
     shoutId,
     shoutInput,
-    publish
+    publish,
   }: {
     shoutId: number
     shoutInput?: ShoutInput
@@ -306,7 +307,7 @@ export const apiClient = {
   getShoutBySlug: async (slug: string) => {
     const resp = await publicGraphQLClient
       .query(shoutLoad, {
-        slug
+        slug,
       })
       .toPromise()
 
@@ -319,7 +320,7 @@ export const apiClient = {
   getShoutById: async (shoutId: number) => {
     const resp = await publicGraphQLClient
       .query(shoutLoad, {
-        shoutId
+        shoutId,
       })
       .toPromise()
 
@@ -362,7 +363,7 @@ export const apiClient = {
   markNotificationAsRead: async (notificationId: number): Promise<void> => {
     await privateGraphQLClient
       .mutation(markNotificationAsRead, {
-        notificationId
+        notificationId,
       })
       .toPromise()
   },
@@ -400,5 +401,5 @@ export const apiClient = {
   getRecipients: async (options: QueryLoadRecipientsArgs) => {
     const resp = await privateGraphQLClient.query(loadRecipients, options).toPromise()
     return resp.data.loadRecipients.members
-  }
+  },
 }
diff --git a/src/utils/composeMediaItems.ts b/src/utils/composeMediaItems.ts
index e2152892..ac3ad887 100644
--- a/src/utils/composeMediaItems.ts
+++ b/src/utils/composeMediaItems.ts
@@ -11,7 +11,7 @@ export const composeMediaItems = (value: UploadedFile[], optionalParams = {}) =>
       source: '',
       title: fileData.originalFilename ? removeFileExtension(fileData.originalFilename) : '',
       body: '',
-      ...optionalParams
+      ...optionalParams,
     }
   })
 }
diff --git a/src/utils/dummyFilter.ts b/src/utils/dummyFilter.ts
index 3b68b38b..560d19f4 100644
--- a/src/utils/dummyFilter.ts
+++ b/src/utils/dummyFilter.ts
@@ -1,6 +1,7 @@
-import { translit } from './ru2en'
 import { Author, Topic } from '../graphql/types.gen'
+
 import { isAuthor } from './isAuthor'
+import { translit } from './ru2en'
 
 const prepareQuery = (searchQuery, lang) => {
   const q = searchQuery.toLowerCase()
@@ -16,7 +17,7 @@ const stringMatches = (str, q, lang) => {
 export const dummyFilter = <T extends Topic | Author>(
   data: T[],
   searchQuery: string,
-  lang: 'ru' | 'en'
+  lang: 'ru' | 'en',
 ): T[] => {
   const q = prepareQuery(searchQuery, lang)
 
diff --git a/src/utils/groupby.ts b/src/utils/groupby.ts
index 85a7a83b..544a7a95 100644
--- a/src/utils/groupby.ts
+++ b/src/utils/groupby.ts
@@ -15,8 +15,8 @@ export const groupByName = (arr: Author[]) => {
       return acc
     },
     {
-      'A-Z': []
-    }
+      'A-Z': [],
+    },
   )
 }
 
@@ -33,7 +33,7 @@ export const groupByTitle = (arr: (Shout | Topic)[]) => {
       return acc
     },
     {
-      'A-Z': []
-    }
+      'A-Z': [],
+    },
   )
 }
diff --git a/src/utils/handleFileUpload.ts b/src/utils/handleFileUpload.ts
index ddf5d4ef..af2df1da 100644
--- a/src/utils/handleFileUpload.ts
+++ b/src/utils/handleFileUpload.ts
@@ -1,7 +1,9 @@
 import { UploadFile } from '@solid-primitives/upload'
-import { apiBaseUrl } from './config'
+
 import { UploadedFile } from '../pages/types'
 
+import { apiBaseUrl } from './config'
+
 const apiUrl = `${apiBaseUrl}/upload`
 
 export const handleFileUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
@@ -9,7 +11,7 @@ export const handleFileUpload = async (uploadFile: UploadFile): Promise<Uploaded
   formData.append('file', uploadFile.file, uploadFile.name)
   const response = await fetch(apiUrl, {
     method: 'POST',
-    body: formData
+    body: formData,
   })
   return response.json()
 }
diff --git a/src/utils/handleImageUpload.ts b/src/utils/handleImageUpload.ts
index 609823df..54ec619e 100644
--- a/src/utils/handleImageUpload.ts
+++ b/src/utils/handleImageUpload.ts
@@ -1,5 +1,7 @@
 import { UploadFile } from '@solid-primitives/upload'
+
 import { UploadedFile } from '../pages/types'
+
 import { thumborUrl } from './config'
 
 export const handleImageUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
@@ -7,7 +9,7 @@ export const handleImageUpload = async (uploadFile: UploadFile): Promise<Uploade
   formData.append('media', uploadFile.file, uploadFile.name)
   const response = await fetch(`${thumborUrl}/image`, {
     method: 'POST',
-    body: formData
+    body: formData,
   })
 
   const location = response.headers.get('Location')
@@ -35,6 +37,6 @@ export const handleImageUpload = async (uploadFile: UploadFile): Promise<Uploade
 
   return {
     originalFilename,
-    url
+    url,
   }
 }
diff --git a/src/utils/logger.ts b/src/utils/logger.ts
index 14ce2b34..a455e61d 100644
--- a/src/utils/logger.ts
+++ b/src/utils/logger.ts
@@ -1,5 +1,6 @@
 import loglevel from 'loglevel'
 import prefix from 'loglevel-plugin-prefix'
+
 import { isDev } from './config'
 
 prefix.reg(loglevel)
diff --git a/src/utils/profileSocialLinks.ts b/src/utils/profileSocialLinks.ts
index bc0f3e7a..aa326e4e 100644
--- a/src/utils/profileSocialLinks.ts
+++ b/src/utils/profileSocialLinks.ts
@@ -10,7 +10,7 @@ const links: Link[] = [
   { link: 'https://vk.com/', name: 'vk', isPlaceholder: true },
   { link: 'https://instagram.com/', name: 'instagram', isPlaceholder: true },
   { link: 'https://t.me/', name: 'telegram', isPlaceholder: true },
-  { link: 'https://twitter.com/', name: 'twitter', isPlaceholder: true }
+  { link: 'https://twitter.com/', name: 'twitter', isPlaceholder: true },
 ]
 
 const checkLink = (link: string, keyword: string): boolean => link.includes(keyword)
diff --git a/src/utils/renderUploadedImage.ts b/src/utils/renderUploadedImage.ts
index e4e61279..a6b2ac78 100644
--- a/src/utils/renderUploadedImage.ts
+++ b/src/utils/renderUploadedImage.ts
@@ -1,6 +1,7 @@
+import { Editor } from '@tiptap/core'
+
 import { UploadedFile } from '../pages/types'
 import { hideModal } from '../stores/ui'
-import { Editor } from '@tiptap/core'
 
 export const renderUploadedImage = (editor: Editor, image: UploadedFile) => {
   editor
@@ -14,17 +15,17 @@ export const renderUploadedImage = (editor: Editor, image: UploadedFile) => {
           content: [
             {
               type: 'text',
-              text: image.originalFilename ?? ''
-            }
-          ]
+              text: image.originalFilename ?? '',
+            },
+          ],
         },
         {
           type: 'image',
           attrs: {
-            src: image.url
-          }
-        }
-      ]
+            src: image.url,
+          },
+        },
+      ],
     })
     .run()
   hideModal()
diff --git a/src/utils/ru2en.ts b/src/utils/ru2en.ts
index 3999fcaf..57f90d85 100644
--- a/src/utils/ru2en.ts
+++ b/src/utils/ru2en.ts
@@ -62,7 +62,7 @@ const ru2en: { [key: string]: string } = {
   Ю: 'Yu',
   ю: 'yu',
   Я: 'Ya',
-  я: 'ya'
+  я: 'ya',
 }
 
 export const translit = (str: string) => {
diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts
index 536eb595..30afb30a 100644
--- a/src/utils/scroll.ts
+++ b/src/utils/scroll.ts
@@ -1,6 +1,6 @@
 const scrollPosition = {
   top: 0,
-  left: 0
+  left: 0,
 }
 
 export const saveScrollPosition = () => {
@@ -11,7 +11,7 @@ export const saveScrollPosition = () => {
 export const restoreScrollPosition = () => {
   window.scroll({
     top: scrollPosition.top,
-    left: scrollPosition.left
+    left: scrollPosition.left,
   })
 }
 
@@ -21,7 +21,7 @@ export const scrollHandler = (elemId: string, offset = -100) => {
   if (anchor) {
     window.scrollTo({
       top: anchor.getBoundingClientRect().top + offset,
-      behavior: 'smooth'
+      behavior: 'smooth',
     })
   }
 }
diff --git a/src/utils/sortby.ts b/src/utils/sortby.ts
index fd6cb9c7..1b17c3e6 100644
--- a/src/utils/sortby.ts
+++ b/src/utils/sortby.ts
@@ -15,7 +15,7 @@ export const byCreated = (a: Shout | Reaction, b: Shout | Reaction) => {
 
 export const byLength = (
   a: (Shout | Reaction | Topic | Author)[],
-  b: (Shout | Reaction | Topic | Author)[]
+  b: (Shout | Reaction | Topic | Author)[],
 ) => {
   const x = a.length
   const y = b.length
diff --git a/src/utils/validateFile.ts b/src/utils/validateFile.ts
index 3baeec71..f3d1ac3b 100644
--- a/src/utils/validateFile.ts
+++ b/src/utils/validateFile.ts
@@ -1,4 +1,5 @@
 import { UploadFile } from '@solid-primitives/upload'
+
 import { FileTypeToUpload } from '../pages/types'
 
 export const validateFiles = (fileType: FileTypeToUpload, files: UploadFile[]): boolean => {
diff --git a/vite.config.ts b/vite.config.ts
index b3f06529..f2dc1524 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
 import ssrPlugin from 'vike/plugin'
-import sassDts from 'vite-plugin-sass-dts'
+import { defineConfig } from 'vite'
 import mkcert from 'vite-plugin-mkcert'
+import sassDts from 'vite-plugin-sass-dts'
+import solidPlugin from 'vite-plugin-solid'
 
 const cssModuleHMR = () => {
   return {
@@ -17,7 +17,7 @@ const cssModuleHMR = () => {
           module.isSelfAccepting = true
         }
       })
-    }
+    },
   }
 }
 
@@ -38,7 +38,7 @@ export default defineConfig(({ mode, command }) => {
     solidPlugin({ ssr: true }),
     ssrPlugin({ includeAssetsImportedByServer: true }),
     sassDts(),
-    cssModuleHMR()
+    cssModuleHMR(),
   ]
 
   if (command === 'serve') {
@@ -52,23 +52,23 @@ export default defineConfig(({ mode, command }) => {
     plugins,
     server: {
       https: true,
-      port: 3000
+      port: 3000,
     },
     css: {
       devSourcemap: isDev,
       preprocessorOptions: {
-        scss: { additionalData: '@import "src/styles/imports";\n' }
+        scss: { additionalData: '@import "src/styles/imports";\n' },
       },
       modules: {
-        generateScopedName: isDev ? devGenerateScopedName : '[hash:base64:5]'
-      }
+        generateScopedName: isDev ? devGenerateScopedName : '[hash:base64:5]',
+      },
     },
     build: {
       rollupOptions: {
-        external: []
+        external: [],
       },
       chunkSizeWarningLimit: 1024,
-      target: 'esnext'
+      target: 'esnext',
     },
     ssr: {
       noExternal: [
@@ -106,8 +106,8 @@ export default defineConfig(({ mode, command }) => {
         '@tiptap/extension-link',
         '@tiptap/extension-image',
         '@tiptap/extension-character-count',
-        'clsx'
-      ]
-    }
+        'clsx',
+      ],
+    },
   }
 })