Merge branch 'hotfix/editor-permission' into feature/rating

biome.json

@@ -1,8 +1,21 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
   "files": {
-    "include": ["*.tsx", "*.ts", "*.js", "*.json"],
+    "include": [
-    "ignore": ["./dist", "./node_modules", ".husky", "docs", "gen", "*.gen.ts", "*.d.ts"]
+      "*.tsx",
+      "*.ts",
+      "*.js",
+      "*.json"
+    ],
+    "ignore": [
+      "./dist",
+      "./node_modules",
+      ".husky",
+      "docs",
+      "gen",
+      "*.gen.ts",
+      "*.d.ts"
+    ]
   },
   "vcs": {
     "defaultBranch": "dev",
@@ -10,13 +23,19 @@
   },
   "organizeImports": {
     "enabled": true,
-    "ignore": ["./api", "./gen"]
+    "ignore": [
+      "./api",
+      "./gen"
+    ]
   },
   "formatter": {
     "indentStyle": "space",
     "indentWidth": 2,
     "lineWidth": 108,
-    "ignore": ["./src/graphql/schema", "./gen"]
+    "ignore": [
+      "./src/graphql/schema",
+      "./gen"
+    ]
   },
   "javascript": {
     "formatter": {
@@ -29,14 +48,21 @@
     }
   },
   "linter": {
-    "ignore": ["*.scss", "*.md", ".DS_Store", "*.svg", "*.d.ts"],
+    "ignore": [
+      "*.scss",
+      "*.md",
+      ".DS_Store",
+      "*.svg",
+      "*.d.ts"
+    ],
     "enabled": true,
     "rules": {
       "all": true,
       "complexity": {
         "noForEach": "off",
         "useOptionalChain": "warn",
-        "useLiteralKeys": "off"
+        "useLiteralKeys": "off",
+        "noExcessiveCognitiveComplexity": "off"
       },
       "correctness": {
         "useHookAtTopLevel": "off"
@@ -54,15 +80,18 @@
         "noSvgWithoutTitle": "off"
       },
       "nursery": {
-        "useImportRestrictions": "off",
+        "useImportRestrictions": "off"
-        "useImportType": "off",
+      },
-        "useFilenamingConvention": "off"
+      "performance": {
+        "noBarrelFile": "off"
       },
       "style": {
         "useBlockStatements": "off",
         "noImplicitBoolean": "off",
         "useNamingConvention": "off",
-        "noDefaultExport": "off"
+        "useImportType": "off",
+        "noDefaultExport": "off",
+        "useFilenamingConvention": "off"
       },
       "suspicious": {
         "noConsoleLog": "off",

package.json

@@ -11,12 +11,12 @@
     "deploy": "graphql-codegen && npm run typecheck && vite build && vercel",
     "dev": "vite",
     "e2e": "npx playwright test --project=chromium",
-    "fix": "npm run check:code:fix && stylelint **/*.{scss,css} --fix",
+    "fix": "npm run lint:code:fix && stylelint **/*.{scss,css} --fix",
     "format": "npx @biomejs/biome format src/. --write",
     "hygen": "HYGEN_TMPLS=gen hygen",
     "postinstall": "npm run codegen && npx patch-package",
     "check:code": "npx @biomejs/biome check src --log-kind=compact --verbose",
-    "check:code:fix": "npx @biomejs/biome check src --log-kind=compact",
+    "check:code:fix": "npx @biomejs/biome lint src --log-kind=compact",
     "lint": "npm run lint:code && stylelint **/*.{scss,css}",
     "lint:code": "npx @biomejs/biome lint src --log-kind=compact --verbose",
     "lint:code:fix": "npx @biomejs/biome lint src --apply-unsafe --log-kind=compact --verbose",
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@authorizerdev/authorizer-js": "2.0.0",
     "@babel/core": "7.23.3",
-    "@biomejs/biome": "^1.5.3",
+    "@biomejs/biome": "^1.7.2",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
@@ -129,8 +129,9 @@
     "typograf": "7.3.0",
     "uniqolor": "1.1.0",
     "vike": "0.4.148",
-    "vite": "5.1.2",
+    "vite": "5.2.10",
     "vite-plugin-mkcert": "^1.17.3",
+    "vite-plugin-node-polyfills": "0.21.0",
     "vite-plugin-sass-dts": "^1.3.17",
     "vite-plugin-solid": "2.10.1",
     "y-prosemirror": "1.2.2",
@@ -139,5 +140,8 @@
   "overrides": {
     "y-prosemirror": "1.2.2",
     "yjs": "13.6.12"
-  }
+  },
+  "trustedDependencies": [
+    "@biomejs/biome"
+  ]
 }

src/components/App.tsx

@@ -40,15 +40,11 @@ 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'
-//TODO: ProfileSubscriptionsPage - garbage code?
 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 { MODALS, hideModal, showModal } from '../stores/ui'
+import { MODALS, showModal } from '../stores/ui'
-
-// TODO: lazy load
-// const SomePage = lazy(() => import('./Pages/SomePage'))
 
 const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
   author: AuthorPage,

src/components/Article/CommentDate/CommentDate.tsx

@@ -14,7 +14,7 @@ type Props = {
 }
 
 export const CommentDate = (props: Props) => {
-  const { t, formatDate } = useLocalize()
+  const { formatDate } = useLocalize()
 
   const formattedDate = (date: number) => {
     const formatDateOptions: Intl.DateTimeFormatOptions = props.isShort

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -1,6 +1,6 @@
 import { openPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { Match, Show, Switch, createEffect, createMemo, createSignal, on } from 'solid-js'
+import { Match, Show, Switch, createEffect, createMemo, createSignal } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
@@ -36,7 +36,7 @@ export const AuthorBadge = (props: Props) => {
   const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
 
   createEffect(() => {
-    if (!subscriptions || !props.author) return
+    if (!(subscriptions && props.author)) return
     const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id)
     setIsSubscribed(subscribed)
   })
@@ -45,7 +45,7 @@ export const AuthorBadge = (props: Props) => {
     setIsMobileView(!mediaMatches.sm)
   })
 
-  const { setFollowing } = useFollowing()
+  // const { setFollowing } = useFollowing()
   const { changeSearchParams } = useRouter()
   const { t, formatDate, lang } = useLocalize()
 
@@ -127,6 +127,9 @@ export const AuthorBadge = (props: Props) => {
                 <Show when={props.author?.stat.shouts > 0}>
                   <div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>
                 </Show>
+                <Show when={props.author?.stat.comments > 0}>
+                  <div>{t('CommentsWithCount', { count: props.author.stat?.comments ?? 0 })}</div>
+                </Show>
                 <Show when={props.author?.stat.followers > 0}>
                   <div>{t('FollowersWithCount', { count: props.author.stat?.followers ?? 0 })}</div>
                 </Show>

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -43,7 +43,7 @@ export const AuthorCard = (props: Props) => {
   })
 
   createEffect(() => {
-    if (!subscriptions || !props.author) return
+    if (!(subscriptions && props.author)) return
     const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id)
     setIsSubscribed(subscribed)
   })

src/components/AuthorsList/AuthorsList.tsx

@@ -1,9 +1,7 @@
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal, on, onMount } from 'solid-js'
+import { For, Show, createEffect, createSignal, on } from 'solid-js'
-import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
 import { apiClient } from '../../graphql/client/core'
-import { Author } from '../../graphql/schema/core.gen'
 import { setAuthorsByFollowers, setAuthorsByShouts, useAuthorsStore } from '../../stores/zine/authors'
 import { AuthorBadge } from '../Author/AuthorBadge'
 import { InlineLoader } from '../InlineLoader'

src/components/Discours/Hero.tsx

@@ -1,7 +1,7 @@
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
 import { showModal } from '../../stores/ui'
-import { AuthModalSearchParams } from '../Nav/AuthModal/types'
+import type { AuthModalSearchParams } from '../Nav/AuthModal/types'
 
 import styles from './Hero.module.scss'
 

src/components/Editor/AudioUploader/AudioUploader.tsx

@@ -1,5 +1,3 @@
-import { Buffer } from 'buffer'
-
 import { clsx } from 'clsx'
 import { Show } from 'solid-js'
 
@@ -9,6 +7,7 @@ import { composeMediaItems } from '../../../utils/composeMediaItems'
 import { AudioPlayer } from '../../Article/AudioPlayer'
 import { DropArea } from '../../_shared/DropArea'
 
+// import { Buffer } from 'node:buffer'
 import styles from './AudioUploader.module.scss'
 
 window.Buffer = Buffer

src/components/Editor/Editor.tsx

@@ -1,5 +1,3 @@
-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'
@@ -30,7 +28,7 @@ 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 { Doc } from 'yjs'
 
 import { useEditorContext } from '../../context/editor'
 import { useLocalize } from '../../context/localize'
@@ -85,7 +83,7 @@ export const Editor = (props: Props) => {
   const docName = `shout-${props.shoutId}`
 
   if (!yDocs[docName]) {
-    yDocs[docName] = new Y.Doc()
+    yDocs[docName] = new Doc()
   }
 
   if (!providers[docName]) {

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -29,9 +29,11 @@ const embedData = (data) => {
   const result: { src: string; width?: string; height?: string } = { src: '' }
 
   for (let i = 0; i < attributes.length; i++) {
-    const attribute = attributes[i]
+    const attribute = attributes.item(i)
+    if (attribute) {
       result[attribute.name] = attribute.value
     }
+  }
 
   return result
 }

src/components/Editor/Panel/Panel.tsx

@@ -13,8 +13,6 @@ import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 import { Button } from '../../_shared/Button'
 import { DarkModeToggle } from '../../_shared/DarkModeToggle'
 import { Icon } from '../../_shared/Icon'
-
-import { useSnackbar } from '../../../context/snackbar'
 import styles from './Panel.module.scss'
 
 const typograf = new Typograf({ locale: ['ru', 'en-US'] })

src/components/Feed/Beside.tsx

@@ -4,8 +4,6 @@ import type { Author, Shout, Topic } from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
 import { For, Show } from 'solid-js'
-
-import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
 import { AuthorBadge } from '../Author/AuthorBadge'
 import { TopicCard } from '../Topic/Card'

src/components/InlineLoader/InlineLoader.tsx

@@ -1,4 +1,3 @@
-import { clsx } from 'clsx'
 import { useLocalize } from '../../context/localize'
 import { Loading } from '../_shared/Loading'
 import styles from './InlineLoader.module.scss'
@@ -7,7 +6,7 @@ type Props = {
   class?: string
 }
 
-export const InlineLoader = (props: Props) => {
+export const InlineLoader = (_props: Props) => {
   const { t } = useLocalize()
   return (
     <div class={styles.InlineLoader}>

src/components/Nav/AuthModal/LoginForm.tsx

@@ -1,7 +1,7 @@
 import type { AuthModalSearchParams } from './types'
 
 import { clsx } from 'clsx'
-import { JSX, Show, createEffect, createSignal } from 'solid-js'
+import { JSX, Show, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
@@ -31,8 +31,8 @@ export const LoginForm = () => {
   const [isSubmitting, setIsSubmitting] = createSignal(false)
   const [password, setPassword] = createSignal('')
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
-
+  // FIXME: use signal or remove
-  const [isLinkSent, setIsLinkSent] = createSignal(false)
+  const [_isLinkSent, setIsLinkSent] = createSignal(false)
   const authFormRef: { current: HTMLFormElement } = { current: null }
   const { showSnackbar } = useSnackbar()
   const { signIn } = useSession()

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -32,7 +32,8 @@ export const RegisterForm = () => {
   const { changeSearchParams } = useRouter<AuthModalSearchParams>()
   const { t } = useLocalize()
   const { signUp, isRegistered, resendVerifyEmail } = useSession()
-  const [submitError, setSubmitError] = createSignal('')
+  // FIXME: use submit error data or remove signal
+  const [_submitError, setSubmitError] = createSignal('')
   const [fullName, setFullName] = createSignal('')
   const [password, setPassword] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
@@ -116,7 +117,7 @@ export const RegisterForm = () => {
 
   const handleCheckEmailStatus = (status: EmailStatus | string) => {
     switch (status) {
-      case 'not verified':
+      case 'not verified': {
         setValidationErrors((prev) => ({
           ...prev,
           email: (
@@ -129,8 +130,9 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      case 'verified':
+      }
-        setValidationErrors((prev) => ({
+      case 'verified': {
+        setValidationErrors((_prev) => ({
           email: (
             <>
               {t('This email is registered')}. {t('try')}
@@ -142,7 +144,8 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      case 'registered':
+      }
+      case 'registered': {
         setValidationErrors((prev) => ({
           ...prev,
           email: (
@@ -156,11 +159,13 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      default:
+      }
+      default: {
         console.info('[RegisterForm] email is not registered')
         break
       }
     }
+  }
 
   const handleEmailBlur = async () => {
     if (validateEmail(email())) {

src/components/Nav/HeaderAuth.tsx

@@ -59,7 +59,8 @@ export const HeaderAuth = (props: Props) => {
     toggleEditorPanel()
   }
 
-  const handleSaveButtonClick = () => {
+  // FIXME: remove the code if not needed here
+  const _handleSaveButtonClick = () => {
     saveShout(form)
   }
 

src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx

@@ -63,7 +63,7 @@ export const NotificationGroup = (props: NotificationGroupProps) => {
   return (
     <>
       <For each={props.notifications}>
-        {(n: Group, index) => (
+        {(n: Group, _index) => (
           <>
             {t(threadCaption(n.thread), { commentsCount: n.reactions.length })}{' '}
             <div

src/components/Topic/Card.tsx

@@ -42,14 +42,16 @@ export const TopicCard = (props: TopicProps) => {
   const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
 
   createEffect(() => {
-    if (!subscriptions || !props.topic) return
+    if (!(subscriptions && props.topic)) return
     const subscribed = subscriptions.topics?.some((topics) => topics.id === props.topic?.id)
     setIsSubscribed(subscribed)
   })
 
   const handleFollowClick = () => {
     requireAuthentication(() => {
-      follow(FollowingEntity.Topic, props.topic.slug)
+      isSubscribed()
+        ? unfollow(FollowingEntity.Topic, props.topic.slug)
+        : follow(FollowingEntity.Topic, props.topic.slug)
     }, 'subscribe')
   }
 

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx'
-import { Show, createEffect, createSignal, on } from 'solid-js'
+import { Show, createEffect, createSignal } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
@@ -26,7 +26,7 @@ export const TopicBadge = (props: Props) => {
   const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
 
   createEffect(() => {
-    if (!subscriptions || !props.topic) return
+    if (!(subscriptions && props.topic)) return
     const subscribed = subscriptions.topics?.some((topics) => topics.id === props.topic?.id)
     setIsSubscribed(subscribed)
   })

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -2,11 +2,11 @@ import type { Author } from '../../../graphql/schema/core.gen'
 
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
+import { For, Show, createMemo, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useRouter } from '../../../stores/router'
-import { setAuthorsSort, useAuthorsStore } from '../../../stores/zine/authors'
+import { useAuthorsStore } from '../../../stores/zine/authors'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { scrollHandler } from '../../../utils/scroll'
 import { authorLetterReduce, translateAuthor } from '../../../utils/translate'
@@ -33,7 +33,7 @@ export const AllAuthors = (props: Props) => {
   const [searchQuery, setSearchQuery] = createSignal('')
   const ALPHABET =
     lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ@']
-  const { searchParams, changeSearchParams } = useRouter<AllAuthorsPageSearchParams>()
+  const { searchParams } = useRouter<AllAuthorsPageSearchParams>()
   const { sortedAuthors } = useAuthorsStore({
     authors: props.authors,
     sortBy: searchParams().by || 'name',

src/components/Views/AllTopics/AllTopics.tsx

@@ -3,8 +3,6 @@ import type { Topic } from '../../../graphql/schema/core.gen'
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
-
-import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useRouter } from '../../../stores/router'
 import { setTopicsSort, useTopicsStore } from '../../../stores/zine/topics'

src/components/Views/Author/Author.tsx

@@ -11,7 +11,7 @@ import { useSession } from '../../../context/session'
 import { apiClient } from '../../../graphql/client/core'
 import { router, useRouter } from '../../../stores/router'
 import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
-import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
+import { loadAuthor } from '../../../stores/zine/authors'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { getDescription } from '../../../utils/meta'
 import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
@@ -39,10 +39,9 @@ const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
   const { t } = useLocalize()
-  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
+  const { followers: myFollowers } = useFollowing()
   const { session } = useSession()
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
   const { page: getPage, searchParams } = useRouter()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [isBioExpanded, setIsBioExpanded] = createSignal(false)
@@ -87,7 +86,7 @@ export const AuthorView = (props: Props) => {
       setFollowing([...(authors || []), ...(topics || [])])
       setFollowers(followersResult || [])
 
-      console.info('[components.Author] data loaded')
+      console.debug('[components.Author] following data loaded', subscriptionsResult)
     } catch (error) {
       console.error('[components.Author] fetch error', error)
     }

src/components/Views/DraftsView/DraftsView.tsx

@@ -1,6 +1,6 @@
 import { openPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal } from 'solid-js'
+import { For, Show, createEffect, createSignal, on } from 'solid-js'
 
 import { useEditorContext } from '../../../context/editor'
 import { useSession } from '../../../context/session'
@@ -9,22 +9,24 @@ import { Shout } from '../../../graphql/schema/core.gen'
 import { router } from '../../../stores/router'
 import { Draft } from '../../Draft'
 
+import { Loading } from '../../_shared/Loading'
 import styles from './DraftsView.module.scss'
 
 export const DraftsView = () => {
-  const { isAuthenticated, isSessionLoaded } = useSession()
+  const { session } = useSession()
   const [drafts, setDrafts] = createSignal<Shout[]>([])
 
-  const loadDrafts = async () => {
+  createEffect(
-    if (apiClient.private) {
+    on(
+      () => session(),
+      async (s) => {
+        if (s) {
           const loadedDrafts = await apiClient.getDrafts()
           setDrafts(loadedDrafts.reverse() || [])
         }
-  }
+      },
-
+    ),
-  createEffect(() => {
+  )
-    if (isSessionLoaded()) loadDrafts()
-  })
 
   const { publishShoutById, deleteShout } = useEditorContext()
 
@@ -44,11 +46,10 @@ export const DraftsView = () => {
 
   return (
     <div class={clsx(styles.DraftsView)}>
-      <Show when={isSessionLoaded()}>
+      <Show when={session()?.user?.id} fallback={<Loading />}>
         <div class="wide-container">
           <div class="row">
             <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
-              <Show when={isAuthenticated()} fallback="Давайте авторизуемся">
               <For each={drafts()}>
                 {(draft) => (
                   <Draft
@@ -59,7 +60,6 @@ export const DraftsView = () => {
                   />
                 )}
               </For>
-              </Show>
             </div>
           </div>
         </div>

src/components/Views/EditView/EditView.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx'
 import deepEqual from 'fast-deep-equal'
 import { Accessor, Show, createMemo, createSignal, lazy, onCleanup, onMount } from 'solid-js'
 import { createStore } from 'solid-js/store'
+import { throttle } from 'throttle-debounce'
 
 import { ShoutForm, useEditorContext } from '../../../context/editor'
 import { useLocalize } from '../../../context/localize'
@@ -41,7 +42,9 @@ export const EMPTY_TOPIC: Topic = {
   slug: '',
 }
 
+const THROTTLING_INTERVAL = 2000
 const AUTO_SAVE_INTERVAL = 5000
+const AUTO_SAVE_DELAY = 5000
 const handleScrollTopButtonClick = (e) => {
   e.preventDefault()
   window.scrollTo({
@@ -66,8 +69,9 @@ export const EditView = (props: Props) => {
   const shoutTopics = props.shout.topics || []
 
   // TODO: проверить сохранение черновика в local storage (не работает)
-  const draft = getDraftFromLocalStorage(props.shout.id)
+  const draft = props.shout || getDraftFromLocalStorage(props.shout.id)
   if (draft) {
+    // console.debug('draft: ', draft)
     setForm(Object.keys(draft).length !== 0 ? draft : { shoutId: props.shout.id })
   } else {
     setForm({
@@ -180,11 +184,10 @@ export const EditView = (props: Props) => {
 
   let autoSaveTimeOutId: number | string | NodeJS.Timeout
 
-  //TODO: add throttle
+  const autoSave = async () => {
-  const autoSaveRecursive = () => {
-    autoSaveTimeOutId = setTimeout(async () => {
     const hasChanges = !deepEqual(form, prevForm)
-      if (hasChanges) {
+    const hasTopic = Boolean(form.mainTopic)
+    if (hasChanges && hasTopic) {
       setSaving(true)
       if (props.shout?.published_at) {
         saveDraftToLocalStorage(form)
@@ -194,28 +197,30 @@ export const EditView = (props: Props) => {
       setPrevForm(clone(form))
       setTimeout(() => {
         setSaving(false)
-        }, 2000)
+      }, AUTO_SAVE_DELAY)
     }
+  }
+
+  // Throttle the autoSave function
+  const throttledAutoSave = throttle(THROTTLING_INTERVAL, autoSave)
+
+  const autoSaveRecursive = () => {
+    autoSaveTimeOutId = setTimeout(() => {
+      throttledAutoSave()
       autoSaveRecursive()
     }, AUTO_SAVE_INTERVAL)
   }
 
-  const stopAutoSave = () => {
-    clearTimeout(autoSaveTimeOutId)
-  }
-
   onMount(() => {
     autoSaveRecursive()
-  })
+    onCleanup(() => clearTimeout(autoSaveTimeOutId))
-
-  onCleanup(() => {
-    stopAutoSave()
   })
 
   const showSubtitleInput = () => {
     setIsSubtitleVisible(true)
     subtitleInput.current.focus()
   }
+
   const showLeadInput = () => {
     setIsLeadVisible(true)
   }

src/components/Views/Feed/Feed.tsx

@@ -49,7 +49,7 @@ type VisibilityItem = {
 }
 
 type FeedSearchParams = {
-  by: 'publish_date' | 'likes' | 'comments'
+  by: 'publish_date' | 'likes' | 'last_comment'
   period: FeedPeriod
   visibility: VisibilityMode
 }
@@ -258,10 +258,10 @@ export const FeedView = (props: Props) => {
               </li>
               <li
                 class={clsx({
-                  'view-switcher__item--selected': searchParams().by === 'comments',
+                  'view-switcher__item--selected': searchParams().by === 'last_comment',
                 })}
               >
-                <span class="link" onClick={() => changeSearchParams({ by: 'comments' })}>
+                <span class="link" onClick={() => changeSearchParams({ by: 'last_comment' })}>
                   {t('Most commented')}
                 </span>
               </li>

src/components/Views/Home.tsx

@@ -1,8 +1,7 @@
 import { getPagePath } from '@nanostores/router'
-import { For, Show, batch, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
-import { apiClient } from '../../graphql/client/core'
 import { Shout, Topic } from '../../graphql/schema/core.gen'
 import { router } from '../../stores/router'
 import {
@@ -52,8 +51,8 @@ export const HomeView = (props: Props) => {
   const { topAuthors } = useTopAuthorsStore()
   const { t } = useLocalize()
 
-  const [randomTopic, setRandomTopic] = createSignal<Topic>(null)
+  const [randomTopic, _setRandomTopic] = createSignal<Topic>(null)
-  const [randomTopicArticles, setRandomTopicArticles] = createSignal<Shout[]>([])
+  const [randomTopicArticles, _setRandomTopicArticles] = createSignal<Shout[]>([])
 
   onMount(async () => {
     loadTopArticles()

src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx

@@ -1,10 +1,8 @@
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createSignal } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
-import { useSession } from '../../../context/session'
-import { apiClient } from '../../../graphql/client/core'
 import { Author, Topic } from '../../../graphql/schema/core.gen'
 import { SubscriptionFilter } from '../../../pages/types'
 import { dummyFilter } from '../../../utils/dummyFilter'
@@ -21,7 +19,6 @@ import stylesSettings from '../../../styles/FeedSettings.module.scss'
 
 export const ProfileSubscriptions = () => {
   const { t, lang } = useLocalize()
-  const { author, session } = useSession()
   const { subscriptions } = useFollowing()
   const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
   const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([])

src/components/Views/PublishSettings/PublishSettings.tsx

@@ -127,10 +127,10 @@ export const PublishSettings = (props: Props) => {
   }
   const handlePublishSubmit = () => {
     const shoutData = { ...props.form, ...settingsForm }
-    if (!shoutData?.mainTopic) {
+    if (shoutData?.mainTopic) {
-      showSnackbar({ body: t('Please, set the main topic first') })
-    } else {
       publishShout(shoutData)
+    } else {
+      showSnackbar({ body: t('Please, set the main topic first') })
     }
   }
   const handleSaveDraft = () => {

src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx

@@ -1,6 +1,5 @@
 import { clsx } from 'clsx'
 import { Show, createMemo } from 'solid-js'
-import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { Button } from '../Button'
 import stylesButton from '../Button/Button.module.scss'

src/components/_shared/Icon/index.ts

@@ -1 +1 @@
-export * from './Icon'
+export { Icon } from './Icon'

src/components/_shared/InviteMembers/InviteMembers.tsx

@@ -10,7 +10,6 @@ import { useAuthorsStore } from '../../../stores/zine/authors'
 import { AuthorBadge } from '../../Author/AuthorBadge'
 import { Button } from '../Button'
 import { DropdownSelect } from '../DropdownSelect'
-import { Loading } from '../Loading'
 
 import { InlineLoader } from '../../InlineLoader'
 import styles from './InviteMembers.module.scss'

src/components/_shared/Popup/index.ts

@@ -1 +1 @@
-export * from './Popup'
+export { Popup, type PopupProps } from './Popup'

src/components/_shared/SolidSwiper/ImageSwiper.tsx

@@ -57,11 +57,11 @@ export const ImageSwiper = (props: Props) => {
     const { register } = await import('swiper/element/bundle')
     register()
     SwiperCore.use([Pagination, Navigation, Manipulation, HashNavigation])
-    while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) {
+    while (!mainSwipeRef.current?.swiper) {
       await new Promise((resolve) => setTimeout(resolve, 10)) // wait 10 ms
     }
     mainSwipeRef.current.swiper.on('slideChange', handleSlideChange)
-    const initialSlide = parseInt(searchParams().slide) - 1
+    const initialSlide = Number.parseInt(searchParams().slide) - 1
     if (initialSlide && !Number.isNaN(initialSlide) && initialSlide < props.images.length) {
       mainSwipeRef.current.swiper.slideTo(initialSlide, 0)
     } else {

src/context/following.tsx

@@ -1,4 +1,4 @@
-import { Accessor, JSX, createContext, createEffect, createMemo, createSignal, useContext } from 'solid-js'
+import { Accessor, JSX, createContext, createEffect, createSignal, useContext } from 'solid-js'
 import { createStore } from 'solid-js/store'
 
 import { apiClient } from '../graphql/client/core'
@@ -16,7 +16,7 @@ type SubscribeAction = { slug: string; type: 'subscribe' | 'unsubscribe' }
 
 interface FollowingContextType {
   loading: Accessor<boolean>
-  followers: Accessor<Array<Author>>
+  followers: Accessor<Author[]>
   subscriptions: AuthorFollowsResult
   setSubscriptions: (subscriptions: AuthorFollowsResult) => void
   setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
@@ -41,7 +41,7 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollowsResult = {
 
 export const FollowingProvider = (props: { children: JSX.Element }) => {
   const [loading, setLoading] = createSignal<boolean>(false)
-  const [followers, setFollowers] = createSignal<Array<Author>>([])
+  const [followers, setFollowers] = createSignal<Author[]>([])
   const [subscriptions, setSubscriptions] = createStore<AuthorFollowsResult>(EMPTY_SUBSCRIPTIONS)
   const { author, session } = useSession()
 

src/context/session.tsx

@@ -72,6 +72,7 @@ export type SessionContextType = {
   resendVerifyEmail: (params: ResendVerifyEmailInput) => Promise<GenericResponse>
 }
 
+// biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
 const noop = () => {}
 
 const SessionContext = createContext<SessionContextType>()
@@ -270,12 +271,9 @@ export const SessionProvider = (props: {
 
   // callback state updater
   createEffect(
-    on(
+    on([() => props.onStateChangeCallback, session], ([_, ses]) => {
-      () => props.onStateChangeCallback,
+      ses?.user?.id && props.onStateChangeCallback(ses)
-      () => {
+    }),
-        props.onStateChangeCallback(session())
-      },
-    ),
   )
 
   const [authCallback, setAuthCallback] = createSignal<() => void>(noop)

src/context/topics.tsx

@@ -25,7 +25,7 @@ const setupIndexedDB = async () => {
   })
 }
 
-const getTopicsFromIndexedDB = async (db) => {
+const getTopicsFromIndexedDB = (db) => {
   const tx = db.transaction(STORE_NAME, 'readonly')
   const store = tx.objectStore(STORE_NAME)
   return store.getAll()
@@ -44,7 +44,7 @@ export const TopicsProvider = (props: { children: JSX.Element }) => {
 
   onMount(async () => {
     const db = await setupIndexedDB()
-    let topics = await getTopicsFromIndexedDB(db)
+    let topics = getTopicsFromIndexedDB(db)
 
     if (topics.length === 0) {
       topics = await apiClient.getAllTopics()

src/graphql/client/notifier.ts

@@ -1,4 +1,3 @@
-import { createGraphQLClient } from '../createGraphQLClient'
 import markSeenMutation from '../mutation/notifier/mark-seen'
 import markSeenAfterMutation from '../mutation/notifier/mark-seen-after'
 import markThreadSeenMutation from '../mutation/notifier/mark-seen-thread'

src/pages/allAuthors.page.tsx

@@ -1,6 +1,6 @@
 import type { PageProps } from './types'
 
-import { createEffect, createSignal, onMount } from 'solid-js'
+import { createSignal, onMount } from 'solid-js'
 
 import { AllAuthors } from '../components/Views/AllAuthors/'
 import { PAGE_SIZE } from '../components/Views/AllTopics/AllTopics'

src/pages/edit.page.tsx

@@ -1,12 +1,12 @@
-import { Show, Suspense, createMemo, createSignal, lazy, onMount } from 'solid-js'
+import { Show, Suspense, createEffect, createMemo, createSignal, lazy, on, onMount } from 'solid-js'
 
 import { AuthGuard } from '../components/AuthGuard'
 import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { useLocalize } from '../context/localize'
+import { useSession } from '../context/session'
 import { apiClient } from '../graphql/client/core'
 import { Shout } from '../graphql/schema/core.gen'
-import { useRouter } from '../stores/router'
 import { router } from '../stores/router'
 
 import { redirectPage } from '@nanostores/router'
@@ -15,68 +15,70 @@ import { LayoutType } from './types'
 
 const EditView = lazy(() => import('../components/Views/EditView/EditView'))
 
-export const EditPage = () => {
+const getContentTypeTitle = (layout: LayoutType) => {
-  const { page } = useRouter()
+  switch (layout) {
-  const snackbar = useSnackbar()
+    case 'audio':
-  const { t } = useLocalize()
+      return 'Publish Album'
+    case 'image':
+      return 'Create gallery'
+    case 'video':
+      return 'Create video'
+    case 'literature':
+      return 'New literary work'
+    default:
+      return 'Write an article'
+  }
+}
 
-  const [shout, setShout] = createSignal<Shout>(null)
+export const EditPage = () => {
-  const loadMyShout = async (shout_id: number) => {
+  const { t } = useLocalize()
-    if (shout_id) {
+  const { session } = useSession()
-      const { shout: loadedShout, error } = await apiClient.getMyShout(shout_id)
+  const snackbar = useSnackbar()
-      console.log(loadedShout)
+
-      if (error) {
+  const fail = async (error: string) => {
-        await snackbar?.showSnackbar({ type: 'error', body: t('This content is not published yet') })
+    console.error(error)
+    await snackbar?.showSnackbar({ type: 'error', body: t(error) })
     redirectPage(router, 'drafts')
+  }
+
+  const [shoutId, setShoutId] = createSignal<number>(0)
+  const [shout, setShout] = createSignal<Shout>()
+
+  onMount(() => {
+    const shoutId = window.location.pathname.split('/').pop()
+    const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
+    console.debug(`editing shout ${shoutIdFromUrl}`)
+    if (shoutIdFromUrl) setShoutId(shoutIdFromUrl)
+  })
+
+  createEffect(
+    on([session, shout, shoutId], async ([ses, sh, shid]) => {
+      if (ses?.user && !sh && shid) {
+        const { shout: loadedShout, error } = await apiClient.getMyShout(shid)
+        if (error) {
+          fail(error)
         } else {
           setShout(loadedShout)
         }
       }
-  }
+    }),
-
+  )
-  onMount(async () => {
-    const shout_id = window.location.pathname.split('/').pop()
-    if (shout_id) {
-      try {
-        await loadMyShout(parseInt(shout_id, 10))
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  })
 
   const title = createMemo(() => {
     if (!shout()) {
       return t('Create post')
     }
-
+    return t(getContentTypeTitle(shout()?.layout as LayoutType))
-    switch (shout().layout as LayoutType) {
-      case 'audio': {
-        return t('Publish Album')
-      }
-      case 'image': {
-        return t('Create gallery')
-      }
-      case 'video': {
-        return t('Create video')
-      }
-      case 'literature': {
-        return t('New literary work')
-      }
-      default: {
-        return t('Write an article')
-      }
-    }
   })
 
   return (
     <PageLayout title={title()}>
       <AuthGuard>
-        <Show when={shout()}>
         <Suspense fallback={<Loading />}>
-            <EditView shout={shout()} />
+          <Show when={shout()} fallback={<Loading />}>
-          </Suspense>
+            <EditView shout={shout() as Shout} />
           </Show>
+        </Suspense>
       </AuthGuard>
     </PageLayout>
   )

src/stores/router.ts

@@ -69,7 +69,8 @@ const checkOpenOnClient = (link: HTMLAnchorElement, event) => {
   )
 }
 
-const scrollToHash = (hash: string) => {
+// TODO: use scrollToHash or remove
+const _scrollToHash = (hash: string) => {
   let selector = hash
 
   if (/^#\d+/.test(selector)) {

src/stores/zine/authors.ts

@@ -1,13 +1,13 @@
 import { createLazyMemo } from '@solid-primitives/memo'
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 
 import { apiClient } from '../../graphql/client/core'
 import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'
 
 export type AuthorsSortBy = 'shouts' | 'name' | 'followers'
 type SortedAuthorsSetter = (prev: Author[]) => Author[]
-
+// FIXME: use signal or remove
-const [sortAllBy, setSortAllBy] = createSignal<AuthorsSortBy>('name')
+const [_sortAllBy, setSortAllBy] = createSignal<AuthorsSortBy>('name')
 
 export const setAuthorsSort = (sortBy: AuthorsSortBy) => setSortAllBy(sortBy)
 

src/utils/getRandomTopicsFromArray.ts

@@ -2,6 +2,7 @@ import { RANDOM_TOPICS_COUNT } from '../components/Views/Home'
 import { Topic } from '../graphql/schema/core.gen'
 
 export const getRandomTopicsFromArray = (topics: Topic[], count: number = RANDOM_TOPICS_COUNT): Topic[] => {
+  if (!Array.isArray(topics)) return []
   const shuffledTopics = [...topics].sort(() => 0.5 - Math.random())
   return shuffledTopics.slice(0, count)
 }

vite.config.ts

@@ -1,6 +1,7 @@
 import ssrPlugin from 'vike/plugin'
 import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import mkcert from 'vite-plugin-mkcert'
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import sassDts from 'vite-plugin-sass-dts'
 import solidPlugin from 'vite-plugin-solid'
 
@@ -40,6 +41,19 @@ export default defineConfig(({ mode, command }) => {
     ssrPlugin({ includeAssetsImportedByServer: true }),
     sassDts(),
     cssModuleHMR(),
+    nodePolyfills({
+      include: ['path', 'stream', 'util'],
+      exclude: ['http'],
+      globals: {
+        Buffer: true,
+        //global: true,
+        //process: true,
+      },
+      overrides: {
+        fs: 'memfs',
+      },
+      protocolImports: true,
+    }),
   ]
 
   if (command === 'serve') {