Merge branch 'dev' of https://github.com/Discours/discoursio-webapp into hotfix/header-navigation-style

 Conflicts:

	src/components/Nav/HeaderAuth.tsx

.github/workflows/node-ci.yml

@@ -29,14 +29,14 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.deployment_status.state == 'success'
     steps:
-    - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v4
 
-    - name: Install dependencies
+      - name: Install dependencies
-      run: npm ci
+        run: npm ci
-    - name: Install Playwright
+      - name: Install Playwright
-      run: npx playwright install --with-deps
+        run: npx playwright install --with-deps
-    - name: Run Playwright tests
+      - name: Run Playwright tests
-      run: npx playwright test
+        run: npx playwright test
-      env:
+        env:
-        BASE_URL: ${{ github.event.deployment_status.target_url }}
+          BASE_URL: ${{ github.event.deployment_status.target_url }}

biome.json

@@ -36,7 +36,8 @@
       "complexity": {
         "noForEach": "off",
         "useOptionalChain": "warn",
-        "useLiteralKeys": "off"
+        "useLiteralKeys": "off",
+        "noExcessiveCognitiveComplexity": "off"
       },
       "correctness": {
         "useHookAtTopLevel": "off"
@@ -54,15 +55,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

@@ -16,7 +16,7 @@
     "hygen": "HYGEN_TMPLS=gen hygen",
     "postinstall": "npm run codegen && npx patch-package",
     "check:code": "npx @biomejs/biome check src --log-kind=compact --verbose",
-    "check:code:fix": "npx @biomejs/biome check src --log-kind=compact",
+    "check:code:fix": "npx @biomejs/biome check . --apply",
     "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",
@@ -47,14 +47,13 @@
     "@nanostores/solid": "0.4.2",
     "@playwright/test": "1.41.2",
     "@popperjs/core": "2.11.8",
-    "@sentry/browser": "7.99.0",
+    "@sentry/browser": "^7.113.0",
     "@solid-primitives/media": "2.2.3",
     "@solid-primitives/memo": "1.2.4",
     "@solid-primitives/pagination": "0.2.10",
     "@solid-primitives/share": "2.0.4",
-    "@solid-primitives/storage": "1.3.9",
+    "@solid-primitives/storage": "^3.5.0",
-    "@solid-primitives/upload": "0.0.110",
+    "@solid-primitives/upload": "0.0.115",
-    "@solidjs/meta": "0.29.1",
     "@thisbeyond/solid-select": "0.14.0",
     "@tiptap/core": "2.2.3",
     "@tiptap/extension-blockquote": "2.2.3",
@@ -113,9 +112,9 @@
     "prosemirror-history": "1.3.2",
     "prosemirror-trailing-node": "2.0.7",
     "prosemirror-view": "1.32.7",
-    "rollup": "4.11.0",
+    "rollup": "4.17.2",
     "sass": "1.69.5",
-    "solid-js": "1.8.15",
+    "solid-js": "1.8.17",
     "solid-popper": "0.3.0",
     "solid-tiptap": "0.7.0",
     "solid-transition-group": "0.2.3",
@@ -129,8 +128,9 @@
     "typograf": "7.3.0",
     "uniqolor": "1.1.0",
     "vike": "0.4.148",
-    "vite": "5.1.2",
+    "vite": "5.2.11",
     "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 +139,6 @@
   "overrides": {
     "y-prosemirror": "1.2.2",
     "yjs": "13.6.12"
-  }
+  },
+  "trustedDependencies": ["@biomejs/biome"]
 }

public/icons/logout.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M16.1785 3.05371C15.1421 3.05371 14.3035 3.89486 14.3035 4.92871C14.3035 5.96256 15.1421 6.80371 16.1785 6.80371C17.215 6.80371 18.0535 5.96256 18.0535 4.92871C18.0535 3.89486 17.215 3.05371 16.1785 3.05371ZM14.6785 7.55371C14.4051 7.55371 14.1473 7.61621 13.9129 7.72038L10.9181 9.12923C10.7723 9.19694 10.6577 9.31413 10.5926 9.45736L9.12124 12.7308C9.07957 12.8089 9.05353 12.8975 9.05353 12.9912C9.05353 13.3011 9.30613 13.5537 9.61603 13.5537C9.8478 13.5537 10.0483 13.4131 10.1343 13.2126V13.21L11.702 10.5303L12.4858 10.249L11.7462 12.6761L11.7541 12.6787C11.7098 12.8376 11.6785 13.0042 11.6785 13.1787C11.6785 13.8923 12.0822 14.5068 12.6707 14.8245L12.6655 14.8298L15.5848 16.9626L16.5874 20.5225H16.59C16.6837 20.8298 16.965 21.0537 17.3035 21.0537C17.7176 21.0537 18.0535 20.7178 18.0535 20.3037C18.0535 20.2282 18.0379 20.1553 18.0171 20.085H18.0197L17.2671 16.3454C17.2436 16.223 17.1968 16.1058 17.1317 15.999L15.4806 13.2881L16.4806 9.99902L16.4572 9.99121C16.5145 9.81152 16.5535 9.62663 16.5535 9.42871C16.5535 8.39486 15.715 7.55371 14.6785 7.55371ZM17.1681 10.5355L16.603 12.0771L17.0353 12.4001C17.0718 12.4261 17.1108 12.4469 17.1525 12.4626L19.8869 13.5042C19.8973 13.5094 19.9103 13.512 19.9207 13.5173L19.9363 13.5225C19.9936 13.5407 20.0535 13.5537 20.116 13.5537C20.4259 13.5537 20.6785 13.3011 20.6785 12.9912C20.6785 12.7699 20.5483 12.5771 20.3608 12.486L17.9233 11.21L17.1681 10.5355ZM8.91551 13.9313C8.69676 13.9105 8.47801 14.0225 8.36863 14.2282L7.43895 15.9886L6.11343 15.2829C5.74884 15.0876 5.29572 15.2256 5.1004 15.5928L3.33738 18.9053C3.14468 19.2673 3.2853 19.723 3.64988 19.9183L4.48582 20.3636C4.47801 20.1058 4.5379 19.8454 4.66551 19.611C4.92593 19.1188 5.43374 18.8115 5.99103 18.8115C6.23322 18.8115 6.47801 18.874 6.69155 18.9886C6.80353 19.0485 6.9077 19.1188 6.99884 19.21L7.98843 17.348C7.99103 17.3454 7.99103 17.3454 7.99363 17.3428L8.2254 16.9027L8.43113 16.5173V16.5146L9.36343 14.7542C9.50926 14.4782 9.40249 14.1396 9.12905 13.9938C9.06134 13.9574 8.98843 13.9365 8.91551 13.9313ZM11.8608 15.3532L11.4988 17.0225L9.93113 19.8844L9.89988 19.9417C9.83999 20.0485 9.80353 20.1709 9.80353 20.3037C9.80353 20.7178 10.1395 21.0537 10.5535 21.0537C10.8244 21.0537 11.0613 20.9079 11.1916 20.6917L13.7332 16.7334L11.8608 15.3532ZM6.05613 19.5641C5.76447 19.5407 5.4728 19.6865 5.32697 19.96C5.13165 20.3271 5.27228 20.7803 5.63686 20.9756C6.00145 21.1683 6.45718 21.0303 6.65249 20.6657C6.8452 20.2985 6.70718 19.8454 6.33999 19.6501C6.24884 19.6006 6.15249 19.5745 6.05613 19.5641Z" fill="currentColor"/>
+</svg>

public/icons/profile.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M12.4285 3.05347C11.392 3.05347 10.5535 3.89461 10.5535 4.92847C10.5535 5.96232 11.392 6.80347 12.4285 6.80347C13.4649 6.80347 14.3035 5.96232 14.3035 4.92847C14.3035 3.89461 13.4649 3.05347 12.4285 3.05347ZM12.4285 7.55347C10.3113 7.55347 9.05347 9.05347 9.05347 10.1785V14.6785C9.05347 15.0925 9.3894 15.4285 9.80347 15.4285H10.1785V21.7852C10.1785 22.2097 10.5222 22.5535 10.9467 22.5535C11.3582 22.5535 11.6941 22.2332 11.7149 21.8243L12.017 15.4285H12.8399L13.142 21.8243C13.1628 22.2332 13.4988 22.5535 13.9102 22.5535C14.3347 22.5535 14.6785 22.2097 14.6785 21.7852V15.4285H15.0535C15.4675 15.4285 15.8035 15.0925 15.8035 14.6785V10.1785C15.8035 9.05347 14.5457 7.55347 12.4285 7.55347Z" fill="currentColor"/>
+</svg>

public/locales/en/translation.json

@@ -397,7 +397,7 @@
   "Top authors": "Authors rating",
   "Top commented": "Most commented",
   "Top discussed": "Top discussed",
-  "Top month articles": "Top of the month",
+  "Top month": "Top of the month",
   "Top rated": "Popular",
   "Top recent": "Most recent",
   "Top topics": "Interesting topics",
@@ -448,6 +448,7 @@
   "Write your colleagues name or email": "Write your colleague's name or email",
   "You can download multiple tracks at once in .mp3, .wav or .flac formats": "You can download multiple tracks at once in .mp3, .wav or .flac formats",
   "You can now login using your new password": "Теперь вы можете входить с помощью нового пароля",
+  "You can't edit this post": "You can't edit this post",
   "You were successfully authorized": "You were successfully authorized",
   "You ll be able to participate in discussions, rate others' comments and learn about new responses": "You ll be able to participate in discussions, rate others' comments and learn about new responses",
   "You've confirmed email": "You've confirmed email",
@@ -530,5 +531,13 @@
   "It's OK. Just enter your email to receive a link to change your password": "It's OK. Just enter your email to receive a link to change your password",
   "Restore password": "Restore password",
   "Subscribing...": "Subscribing...",
-  "Unsubscribing...": "Unsubscribing..."
+  "Unsubscribing...": "Unsubscribing...",
+  "Login and security": "Login and security",
+  "Settings for account, email, password and login methods.": "Settings for account, email, password and login methods.",
+  "Current password": "Current password",
+  "Confirm your new password": "Confirm your new password",
+  "Connect": "Connect",
+  "Incorrect old password": "Incorrect old password",
+  "Repeat new password": "Repeat new password",
+  "Incorrect new password confirm": "Incorrect new password confirm"
 }

public/locales/ru/translation.json

@@ -418,7 +418,7 @@
   "Top authors": "Рейтинг авторов",
   "Top commented": "Самое комментируемое",
   "Top discussed": "Обсуждаемое",
-  "Top month articles": "Лучшие материалы месяца",
+  "Top month": "Лучшее за месяц",
   "Top rated": "Популярное",
   "Top recent": "Самое новое",
   "Top topics": "Интересные темы",
@@ -471,6 +471,7 @@
   "You can download multiple tracks at once in .mp3, .wav or .flac formats": "Можно загрузить сразу несколько треков в форматах .mp3, .wav или .flac",
   "You can now login using your new password": "Теперь вы можете входить с помощью нового пароля",
   "You was successfully authorized": "Вы были успешно авторизованы",
+  "You can't edit this post": "Вы не можете редактировать этот материал",
   "You ll be able to participate in discussions, rate others' comments and learn about new responses": "Вы сможете участвовать в обсуждениях, оценивать комментарии других и узнавать о новых ответах",
   "You've confirmed email": "Вы подтвердили почту",
   "You've reached a non-existed page": "Вы попали на несуществующую страницу",
@@ -532,7 +533,7 @@
   "resend confirmation link": "отправить ссылку ещё раз",
   "shout": "пост",
   "shout not found": "публикация не найдена",
-  "shoutsWithCount": "{count} {count, plural, one {пост} few {поста}  other {постов}}",
+  "shoutsWithCount": "{count} {count, plural, one {публикация} few {публикации}  other {публикаций}}",
   "sign in": "войти",
   "sign up or sign in": "зарегистрироваться или войти",
   "sign up": "зарегистрироваться",
@@ -557,5 +558,13 @@
   "It's OK. Just enter your email to receive a link to change your password": "Ничего страшного. Просто укажите свою почту, чтобы получить ссылку для смены пароля",
   "Restore password": "Восстановить пароль",
   "Subscribing...": "Подписываем...",
-  "Unsubscribing...": "Отписываем..."
+  "Unsubscribing...": "Отписываем...",
+  "Login and security": "Вход и безопасность",
+  "Settings for account, email, password and login methods.": "Настройки аккаунта, почты, пароля и способов входа.",
+  "Current password": "Текущий пароль",
+  "Confirm your new password": "Подтвердите новый пароль",
+  "Connect": "Привязать",
+  "Incorrect old password": "Старый пароль не верен",
+  "Repeat new password": "Повторите новый пароль",
+  "Incorrect new password confirm": "Неверное подтверждение нового пароля"
 }

src/components/App.tsx

@@ -1,8 +1,8 @@
 import type { PageProps, RootSearchParams } from '../pages/types'
 
-import { Meta, MetaProvider } from '@solidjs/meta'
 import { Component, createEffect, createMemo } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
+import { Meta, MetaProvider } from '../context/meta'
 
 import { ConfirmProvider } from '../context/confirm'
 import { ConnectProvider } from '../context/connect'
@@ -12,6 +12,7 @@ import { InboxProvider } from '../context/inbox'
 import { LocalizeProvider } from '../context/localize'
 import { MediaQueryProvider } from '../context/mediaQuery'
 import { NotificationsProvider } from '../context/notifications'
+import { SeenProvider } from '../context/seen'
 import { SessionProvider } from '../context/session'
 import { SnackbarProvider } from '../context/snackbar'
 import { TopicsProvider } from '../context/topics'
@@ -40,15 +41,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,
@@ -119,21 +116,23 @@ export const App = (props: Props) => {
         <MediaQueryProvider>
           <SnackbarProvider>
             <TopicsProvider>
-              <ConfirmProvider>
+              <SeenProvider>
-                <SessionProvider onStateChangeCallback={console.log}>
+                <ConfirmProvider>
-                  <FollowingProvider>
+                  <SessionProvider onStateChangeCallback={console.log}>
-                    <ConnectProvider>
+                    <FollowingProvider>
-                      <NotificationsProvider>
+                      <ConnectProvider>
-                        <EditorProvider>
+                        <NotificationsProvider>
-                          <InboxProvider>
+                          <EditorProvider>
-                            <Dynamic component={pageComponent()} {...props} />
+                            <InboxProvider>
-                          </InboxProvider>
+                              <Dynamic component={pageComponent()} {...props} />
-                        </EditorProvider>
+                            </InboxProvider>
-                      </NotificationsProvider>
+                          </EditorProvider>
-                    </ConnectProvider>
+                        </NotificationsProvider>
-                  </FollowingProvider>
+                      </ConnectProvider>
-                </SessionProvider>
+                    </FollowingProvider>
-              </ConfirmProvider>
+                  </SessionProvider>
+                </ConfirmProvider>
+              </SeenProvider>
             </TopicsProvider>
           </SnackbarProvider>
         </MediaQueryProvider>

src/components/Article/Comment/Comment.tsx

@@ -127,7 +127,7 @@ export const Comment = (props: Props) => {
     <li
       id={`comment_${props.comment.id}`}
       class={clsx(styles.comment, props.class, {
-        [styles.isNew]: props.comment?.created_at > props.lastSeen,
+        [styles.isNew]: props.lastSeen > (props.comment.updated_at || props.comment.created_at),
       })}
     >
       <Show when={!!body()}>

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/Article/CommentsTree.tsx

@@ -11,6 +11,7 @@ import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 
 import { Comment } from './Comment'
 
+import { useSeen } from '../../context/seen'
 import styles from './Article.module.scss'
 
 const SimplifiedEditor = lazy(() => import('../Editor/SimplifiedEditor'))
@@ -29,7 +30,7 @@ export const CommentsTree = (props: Props) => {
   const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
   const [clearEditor, setClearEditor] = createSignal(false)
   const [clickedReplyId, setClickedReplyId] = createSignal<number>()
-  const { reactionEntities, createReaction } = useReactions()
+  const { reactionEntities, createReaction, loadReactionsBy } = useReactions()
 
   const comments = createMemo(() =>
     Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT'),
@@ -48,27 +49,28 @@ export const CommentsTree = (props: Props) => {
     }
     return newSortedComments
   })
-
+  const { seen } = useSeen()
-  const dateFromLocalStorage = Number.parseInt(localStorage.getItem(`${props.shoutSlug}`))
+  const shoutLastSeen = createMemo(() => seen()[props.shoutSlug] ?? 0)
   const currentDate = new Date()
   const setCookie = () => localStorage.setItem(`${props.shoutSlug}`, `${currentDate}`)
 
   onMount(() => {
-    if (!dateFromLocalStorage) {
+    if (!shoutLastSeen()) {
       setCookie()
-    } else if (currentDate.getTime() > dateFromLocalStorage) {
+    } else if (currentDate.getTime() > shoutLastSeen()) {
       const newComments = comments().filter((c) => {
         if (c.reply_to || c.created_by.slug === author()?.slug) {
           return
         }
-        const created = c.created_at
+        return (c.updated_at || c.created_at) > shoutLastSeen()
-        return created > dateFromLocalStorage
       })
       setNewReactions(newComments)
       setCookie()
     }
   })
+  const [posting, setPosting] = createSignal(false)
   const handleSubmitComment = async (value: string) => {
+    setPosting(true)
     try {
       await createReaction({
         kind: ReactionKind.Comment,
@@ -76,10 +78,12 @@ export const CommentsTree = (props: Props) => {
         shout: props.shoutId,
       })
       setClearEditor(true)
+      await loadReactionsBy({ by: { shout: props.shoutSlug } })
     } catch (error) {
       console.error('[handleCreate reaction]:', error)
     }
     setClearEditor(false)
+    setPosting(false)
   }
 
   return (
@@ -130,7 +134,7 @@ export const CommentsTree = (props: Props) => {
               comment={reaction}
               clickedReply={(id) => setClickedReplyId(id)}
               clickedReplyId={clickedReplyId()}
-              lastSeen={dateFromLocalStorage}
+              lastSeen={shoutLastSeen()}
             />
           )}
         </For>
@@ -157,6 +161,7 @@ export const CommentsTree = (props: Props) => {
           placeholder={t('Write a comment...')}
           onSubmit={(value) => handleSubmitComment(value)}
           setClear={clearEditor()}
+          isPosting={posting()}
         />
       </ShowIfAuthenticated>
     </>

src/components/Article/FullArticle.tsx

@@ -2,11 +2,11 @@ import type { Author, Shout, Topic } from '../../graphql/schema/core.gen'
 
 import { getPagePath } from '@nanostores/router'
 import { createPopper } from '@popperjs/core'
-import { Link, Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { install } from 'ga-gtag'
 import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
 import { isServer } from 'solid-js/web'
+import { Link, Meta } from '../../context/meta'
 
 import { useLocalize } from '../../context/localize'
 import { useReactions } from '../../context/reactions'
@@ -38,6 +38,7 @@ import { CommentsTree } from './CommentsTree'
 import { SharePopup, getShareUrl } from './SharePopup'
 import { ShoutRatingControl } from './ShoutRatingControl'
 
+import { useSeen } from '../../context/seen'
 import stylesHeader from '../Nav/Header/Header.module.scss'
 import styles from './Article.module.scss'
 
@@ -75,7 +76,8 @@ export const FullArticle = (props: Props) => {
   const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false)
   const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
   const { t, formatDate, lang } = useLocalize()
-  const { author, session, isAuthenticated, requireAuthentication } = useSession()
+  const { author, session, requireAuthentication } = useSession()
+  const { addSeen } = useSeen()
 
   const formattedDate = createMemo(() => formatDate(new Date(props.article.published_at * 1000)))
 
@@ -302,6 +304,7 @@ export const FullArticle = (props: Props) => {
   onMount(async () => {
     install('G-LQ4B87H8C2')
     await loadReactionsBy({ by: { shout: props.article.slug } })
+    addSeen(props.article.slug)
     setIsReactionsLoaded(true)
     document.title = props.article.title
     window?.addEventListener('resize', updateIframeSizes)
@@ -535,7 +538,7 @@ export const FullArticle = (props: Props) => {
                   {(triggerRef: (el) => void) => (
                     <div class={styles.shoutStatsItem} ref={triggerRef}>
                       <a
-                        href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}
+                        href={getPagePath(router, 'edit', { shoutId: props.article?.id.toString() })}
                         class={styles.shoutStatsItemInner}
                       >
                         <Icon name="pencil-outline" class={styles.icon} />
@@ -561,7 +564,7 @@ export const FullArticle = (props: Props) => {
               />
             </div>
 
-            <Show when={isAuthenticated() && !canEdit()}>
+            <Show when={author()?.id && !canEdit()}>
               <div class={styles.help}>
                 <button class="button">{t('Cooperate')}</button>
               </div>

src/components/Article/SharePopup.tsx

@@ -28,7 +28,7 @@ export const SharePopup = (props: SharePopupProps) => {
   })
 
   return (
-    <Popup {...props} variant="bordered" onVisibilityChange={(value) => setIsVisible(value)}>
+    <Popup {...props} onVisibilityChange={(value) => setIsVisible(value)}>
       <ShareLinks
         variant="inPopup"
         title={props.title}

src/components/AuthGuard/AuthGuard.tsx

@@ -12,7 +12,7 @@ type Props = {
 }
 
 export const AuthGuard = (props: Props) => {
-  const { isAuthenticated, isSessionLoaded } = useSession()
+  const { author, isSessionLoaded } = useSession()
   const { changeSearchParams } = useRouter<RootSearchParams & AuthModalSearchParams>()
 
   createEffect(() => {
@@ -20,7 +20,7 @@ export const AuthGuard = (props: Props) => {
       return
     }
     if (isSessionLoaded()) {
-      if (isAuthenticated()) {
+      if (author()?.id) {
         hideModal()
       } else {
         changeSearchParams(
@@ -37,5 +37,5 @@ export const AuthGuard = (props: Props) => {
     }
   })
 
-  return <Show when={(isSessionLoaded() && isAuthenticated()) || props.disabled}>{props.children}</Show>
+  return <Show when={(isSessionLoaded() && author()?.id) || props.disabled}>{props.children}</Show>
 }

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'
@@ -27,6 +27,7 @@ type Props = {
   inviteView?: boolean
   onInvite?: (id: number) => void
   selected?: boolean
+  subscriptionsMode?: boolean
 }
 export const AuthorBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
@@ -36,7 +37,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 +46,6 @@ export const AuthorBadge = (props: Props) => {
     setIsMobileView(!mediaMatches.sm)
   })
 
-  const { setFollowing } = useFollowing()
   const { changeSearchParams } = useRouter()
   const { t, formatDate, lang } = useLocalize()
 
@@ -54,7 +54,7 @@ export const AuthorBadge = (props: Props) => {
     requireAuthentication(() => {
       openPage(router, 'inbox')
       changeSearchParams({
-        initChat: props.author.id.toString(),
+        initChat: props.author?.id.toString(),
       })
     }, 'discussions')
   }
@@ -114,11 +114,14 @@ export const AuthorBadge = (props: Props) => {
                 <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
               </Match>
             </Switch>
-            <Show when={props.author?.stat}>
+            <Show when={props.author?.stat && !props.subscriptionsMode}>
               <div class={styles.bio}>
                 <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)
   })
@@ -65,7 +65,7 @@ export const AuthorCard = (props: Props) => {
     requireAuthentication(() => {
       openPage(router, 'inbox')
       changeSearchParams({
-        initChat: props.author.id.toString(),
+        initChat: props.author?.id.toString(),
       })
     }, 'discussions')
   }
@@ -312,9 +312,9 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge author={subscription} subscriptionsMode={true} />
                         ) : (
-                          <TopicBadge topic={subscription} />
+                          <TopicBadge topic={subscription} subscriptionsMode={true} />
                         )
                       }
                     </For>

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/Draft/Draft.tsx

@@ -60,7 +60,7 @@ export const Draft = (props: Props) => {
       <div class={styles.actions}>
         <a
           class={styles.actionItem}
-          href={getPagePath(router, 'edit', { shoutId: props.shout.id.toString() })}
+          href={getPagePath(router, 'edit', { shoutId: props.shout?.id.toString() })}
         >
           {t('Edit')}
         </a>

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]) {
@@ -153,7 +151,7 @@ export const Editor = (props: Props) => {
       }
 
       showSnackbar({ body: t('Uploading image') })
-      const result = await handleImageUpload(uplFile)
+      const result = await handleImageUpload(uplFile, session()?.access_token)
 
       editor()
         .chain()

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -29,8 +29,10 @@ 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)
-    result[attribute.name] = attribute.value
+    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'] })
@@ -25,8 +23,16 @@ type Props = {
 
 export const Panel = (props: Props) => {
   const { t } = useLocalize()
-  const { isEditorPanelVisible, wordCounter, editorRef, form, toggleEditorPanel, saveShout, publishShout } =
+  const {
-    useEditorContext()
+    isEditorPanelVisible,
+    wordCounter,
+    editorRef,
+    form,
+    toggleEditorPanel,
+    saveShout,
+    saveDraft,
+    publishShout,
+  } = useEditorContext()
 
   const containerRef: { current: HTMLElement } = { current: null }
   const [isShortcutsVisible, setIsShortcutsVisible] = createSignal(false)
@@ -45,7 +51,12 @@ export const Panel = (props: Props) => {
   })
 
   const handleSaveClick = () => {
-    saveShout(form)
+    const hasTopics = form.selectedTopics?.length > 0
+    if (hasTopics) {
+      saveShout(form)
+    } else {
+      saveDraft(form)
+    }
   }
 
   const html = useEditorHTML(() => editorRef.current())

src/components/Editor/SimplifiedEditor.tsx

@@ -36,6 +36,7 @@ import { UploadModalContent } from './UploadModalContent'
 import { Figcaption } from './extensions/Figcaption'
 import { Figure } from './extensions/Figure'
 
+import { Loading } from '../_shared/Loading'
 import styles from './SimplifiedEditor.module.scss'
 
 type Props = {
@@ -47,17 +48,20 @@ type Props = {
   onChange?: (text: string) => void
   variant?: 'minimal' | 'bordered'
   maxLength?: number
+  noLimits?: boolean
   maxHeight?: number
   submitButtonText?: string
   quoteEnabled?: boolean
   imageEnabled?: boolean
   setClear?: boolean
+  resetToInitial?: boolean
   smallHeight?: boolean
   submitByCtrlEnter?: boolean
   onlyBubbleControls?: boolean
   controlsAlwaysVisible?: boolean
   autoFocus?: boolean
   isCancelButtonVisible?: boolean
+  isPosting?: boolean
 }
 
 const DEFAULT_MAX_LENGTH = 400
@@ -122,7 +126,7 @@ const SimplifiedEditor = (props: Props) => {
         openOnClick: false,
       }),
       CharacterCount.configure({
-        limit: maxLength,
+        limit: props.noLimits ? null : maxLength,
       }),
       Blockquote.configure({
         HTMLAttributes: {
@@ -214,6 +218,10 @@ const SimplifiedEditor = (props: Props) => {
     if (props.setClear) {
       editor().commands.clearContent(true)
     }
+    if (props.resetToInitial) {
+      editor().commands.clearContent(true)
+      editor().commands.setContent(props.initialContent)
+    }
   })
 
   const handleKeyDown = (event) => {
@@ -365,12 +373,14 @@ const SimplifiedEditor = (props: Props) => {
                 <Show when={isCancelButtonVisible()}>
                   <Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
                 </Show>
-                <Button
+                <Show when={!props.isPosting} fallback={<Loading />}>
-                  value={props.submitButtonText ?? t('Send')}
+                  <Button
-                  variant="primary"
+                    value={props.submitButtonText ?? t('Send')}
-                  disabled={isEmpty()}
+                    variant="primary"
-                  onClick={() => props.onSubmit(html())}
+                    disabled={isEmpty()}
-                />
+                    onClick={() => props.onSubmit(html())}
+                  />
+                </Show>
               </div>
             </Show>
           </div>

src/components/Editor/UploadModalContent/UploadModalContent.tsx

@@ -12,6 +12,7 @@ import { Icon } from '../../_shared/Icon'
 import { Loading } from '../../_shared/Loading'
 import { InlineForm } from '../InlineForm'
 
+import { useSession } from '../../../context/session'
 import styles from './UploadModalContent.module.scss'
 
 type Props = {
@@ -24,12 +25,12 @@ export const UploadModalContent = (props: Props) => {
   const [uploadError, setUploadError] = createSignal<string | undefined>()
   const [dragActive, setDragActive] = createSignal(false)
   const [dragError, setDragError] = createSignal<string | undefined>()
-
+  const { session } = useSession()
   const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' })
   const runUpload = async (file: UploadFile) => {
     try {
       setIsUploading(true)
-      const result = await handleImageUpload(file)
+      const result = await handleImageUpload(file, session()?.access_token)
       props.onClose(result)
       setIsUploading(false)
     } catch (error) {

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -603,6 +603,7 @@
 .shoutCardDetailsItem {
   align-items: center;
   display: flex;
+  font-size: 1.4rem;
   margin-right: 1.2rem;
   white-space: nowrap;
 

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -89,8 +89,8 @@ const getTitleAndSubtitle = (
 }
 
 const getMainTopicTitle = (article: Shout, lng: string) => {
-  const mainTopicSlug = article.main_topic || ''
+  const mainTopicSlug = article?.main_topic || ''
-  const mainTopic = article.topics?.find((tpc: Topic) => tpc.slug === mainTopicSlug)
+  const mainTopic = article?.topics?.find((tpc: Topic) => tpc.slug === mainTopicSlug)
   const mainTopicTitle =
     mainTopicSlug && lng === 'en' ? mainTopicSlug.replace(/-/, ' ') : mainTopic?.title || ''
 
@@ -111,8 +111,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
   const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
   const [isCoverImageLoadError, setIsCoverImageLoadError] = createSignal(false)
   const [isCoverImageLoading, setIsCoverImageLoading] = createSignal(true)
-  const description = getDescription(props.article.body)
+  const description = getDescription(props.article?.body)
-  const aspectRatio = () => LAYOUT_ASPECT[props.article.layout]
+  const aspectRatio = () => LAYOUT_ASPECT[props.article?.layout]
   const [mainTopicTitle, mainTopicSlug] = getMainTopicTitle(props.article, lang())
   const { title, subtitle } = getTitleAndSubtitle(props.article)
 
@@ -328,7 +328,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                 <Popover content={t('Edit')} disabled={isActionPopupActive()}>
                   {(triggerRef: (el) => void) => (
                     <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
-                      <a href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}>
+                      <a href={getPagePath(router, 'edit', { shoutId: props.article?.id.toString() })}>
                         <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
                         <Icon
                           name="pencil-outline-hover"

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/Feed/FeedArticlePopup/FeedArticlePopup.module.scss

@@ -1,7 +1,4 @@
 .feedArticlePopup {
-  box-shadow: none !important;
-  border: 1px solid rgb(0 0 0 / 15%);
-  border-radius: 1.6rem;
   padding: 0 !important;
   text-align: left;
   overflow: hidden;

src/components/Feed/Sidebar/Sidebar.tsx

@@ -4,21 +4,20 @@ import { For, Show, createSignal } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
+import { useSeen } from '../../../context/seen'
 import { Author } from '../../../graphql/schema/core.gen'
 import { router, useRouter } from '../../../stores/router'
 import { useArticlesStore } from '../../../stores/zine/articles'
-import { useSeenStore } from '../../../stores/zine/seen'
 import { Userpic } from '../../Author/Userpic'
 import { Icon } from '../../_shared/Icon'
-
 import styles from './Sidebar.module.scss'
 
 export const Sidebar = () => {
   const { t } = useLocalize()
-  const { seen } = useSeenStore()
+  const { seen } = useSeen()
   const { subscriptions } = useFollowing()
   const { page } = useRouter()
-  const { articlesByTopic } = useArticlesStore()
+  const { articlesByTopic, articlesByAuthor } = useArticlesStore()
   const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
 
   const checkTopicIsSeen = (topicSlug: string) => {
@@ -26,8 +25,9 @@ export const Sidebar = () => {
   }
 
   const checkAuthorIsSeen = (authorSlug: string) => {
-    return Boolean(seen()[authorSlug])
+    return articlesByAuthor()[authorSlug]?.every((article) => Boolean(seen()[article.slug]))
   }
+
   return (
     <div class={styles.sidebar}>
       <ul class={styles.feedFilters}>

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()
@@ -97,7 +97,12 @@ export const LoginForm = () => {
       const { errors } = await signIn({ email: email(), password: password() })
       console.error('[signIn errors]', errors)
       if (errors?.length > 0) {
-        if (errors.some((error) => error.message.includes('bad user credentials'))) {
+        if (
+          errors.some(
+            (error) =>
+              error.message.includes('bad user credentials') || error.message.includes('user not found'),
+          )
+        ) {
           setValidationErrors((prev) => ({
             ...prev,
             password: t('Something went wrong, check email and password'),

src/components/Nav/AuthModal/PasswordField/PasswordField.tsx

@@ -16,6 +16,9 @@ type Props = {
   onBlur?: (value: string) => void
   variant?: 'login' | 'registration'
   disableAutocomplete?: boolean
+  noValidate?: boolean
+  onFocus?: () => void
+  value?: string
 }
 
 const minLength = 8
@@ -27,7 +30,7 @@ export const PasswordField = (props: Props) => {
   const [showPassword, setShowPassword] = createSignal(false)
   const [error, setError] = createSignal<string>()
 
-  const validatePassword = (passwordToCheck) => {
+  const validatePassword = (passwordToCheck: string) => {
     if (passwordToCheck.length < minLength) {
       return t('Password should be at least 8 characters')
     }
@@ -50,11 +53,13 @@ export const PasswordField = (props: Props) => {
     }
 
     props.onInput(value)
-    const errorValue = validatePassword(value)
+    if (!props.noValidate) {
-    if (errorValue) {
+      const errorValue = validatePassword(value)
-      setError(errorValue)
+      if (errorValue) {
-    } else {
+        setError(errorValue)
-      setError()
+      } else {
+        setError()
+      }
     }
   }
 
@@ -78,6 +83,8 @@ export const PasswordField = (props: Props) => {
           id="password"
           name="password"
           disabled={props.disabled}
+          onFocus={props.onFocus}
+          value={props.value ? props.value : ''}
           autocomplete={props.disableAutocomplete ? 'one-time-code' : 'current-password'}
           type={showPassword() ? 'text' : 'password'}
           placeholder={props.placeholder || t('Password')}

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,9 +159,11 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      default:
+      }
+      default: {
         console.info('[RegisterForm] email is not registered')
         break
+      }
     }
   }
 

src/components/Nav/AuthModal/SendResetLinkForm.tsx

@@ -61,7 +61,12 @@ export const SendResetLinkForm = () => {
         redirect_uri: window.location.origin,
       })
       console.debug('[SendResetLinkForm] authorizer response:', data)
-      if (errors?.some((error) => error.message.includes('bad user credentials'))) {
+      if (
+        errors?.some(
+          (error) =>
+            error.message.includes('bad user credentials') || error.message.includes('user not found'),
+        )
+      ) {
         setIsUserNotFound(true)
       }
       if (data.message) setMessage(data.message)

src/components/Nav/Header/Header.tsx

@@ -48,7 +48,7 @@ export const Header = (props: Props) => {
   const { page } = useRouter()
   const { requireAuthentication } = useSession()
   const { searchParams } = useRouter<HeaderSearchParams>()
-  const { topics } = useTopics()
+  const { sortedTopics: topics } = useTopics()
   const [randomTopics, setRandomTopics] = createSignal([])
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
   const [getIsScrolled, setIsScrolled] = createSignal(false)
@@ -59,7 +59,7 @@ export const Header = (props: Props) => {
   const [isTopicsVisible, setIsTopicsVisible] = createSignal(false)
   const [isZineVisible, setIsZineVisible] = createSignal(false)
   const [isFeedVisible, setIsFeedVisible] = createSignal(false)
-  const { isAuthenticated } = useSession()
+  const { session } = useSession()
 
   const toggleFixed = () => setFixed(!fixed())
 
@@ -69,7 +69,9 @@ export const Header = (props: Props) => {
   let windowScrollTop = 0
 
   createEffect(() => {
-    setRandomTopics(getRandomTopicsFromArray(topics()))
+    if (topics()?.length) {
+      setRandomTopics(getRandomTopicsFromArray(topics()))
+    }
   })
 
   createEffect(() => {
@@ -333,7 +335,7 @@ export const Header = (props: Props) => {
           <Show when={props.title}>
             <div
               class={clsx(styles.articleControls, 'col-auto', {
-                [styles.articleControlsAuthorized]: isAuthenticated(),
+                [styles.articleControlsAuthorized]: session()?.user?.id,
               })}
             >
               <SharePopup

src/components/Nav/HeaderAuth.tsx

@@ -32,14 +32,14 @@ const MD_WIDTH_BREAKPOINT = 992
 export const HeaderAuth = (props: Props) => {
   const { t } = useLocalize()
   const { page } = useRouter()
-  const { session, author, isAuthenticated, isSessionLoaded } = useSession()
+  const { session, author, isSessionLoaded } = useSession()
   const { unreadNotificationsCount, showNotificationsPanel } = useNotifications()
-  const { form, toggleEditorPanel, saveShout, publishShout } = useEditorContext()
+  const { form, toggleEditorPanel, publishShout } = useEditorContext()
 
   const handleBellIconClick = (event: Event) => {
     event.preventDefault()
 
-    if (!isAuthenticated()) {
+    if (!session()?.access_token) {
       showModal('auth')
       return
     }
@@ -48,21 +48,17 @@ export const HeaderAuth = (props: Props) => {
   }
 
   const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings')
-  const isNotificationsVisible = createMemo(() => isAuthenticated() && !isEditorPage())
+  const isNotificationsVisible = createMemo(() => session()?.access_token && !isEditorPage())
-  const isSaveButtonVisible = createMemo(() => isAuthenticated() && isEditorPage())
+  const isSaveButtonVisible = createMemo(() => session()?.access_token && isEditorPage())
   const isCreatePostButtonVisible = createMemo(() => !isEditorPage())
   const isAuthenticatedControlsVisible = createMemo(
-    () => isAuthenticated() && session()?.user?.email_verified,
+    () => session()?.access_token && session()?.user?.email_verified,
   )
 
   const handleBurgerButtonClick = () => {
     toggleEditorPanel()
   }
 
-  const handleSaveButtonClick = () => {
-    saveShout(form)
-  }
-
   const [width, setWidth] = createSignal(0)
   const [editorMode, setEditorMode] = createSignal(t('Editing'))
 
@@ -106,7 +102,7 @@ export const HeaderAuth = (props: Props) => {
       <Show when={isSessionLoaded()} keyed={true}>
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
-            <Show when={isCreatePostButtonVisible() && isAuthenticated()}>
+            <Show when={isCreatePostButtonVisible() && session()?.access_token}>
               <div
                 class={clsx(
                   styles.userControlItem,
@@ -156,7 +152,6 @@ export const HeaderAuth = (props: Props) => {
                     {editorMode()}
                   </span>
                 }
-                variant="bordered"
                 popupCssClass={styles.editorPopup}
               >
                 <ul class={clsx('nodash', styles.editorModesList)}>
@@ -220,7 +215,7 @@ export const HeaderAuth = (props: Props) => {
               </div>
             </Show>
 
-            <Show when={isCreatePostButtonVisible() && !isAuthenticated()}>
+            <Show when={isCreatePostButtonVisible() && !session()?.access_token}>
               <div
                 class={clsx(
                   styles.userControlItem,
@@ -239,7 +234,7 @@ export const HeaderAuth = (props: Props) => {
             <Show
               when={isAuthenticatedControlsVisible()}
               fallback={
-                <Show when={!isAuthenticated()}>
+                <Show when={!session()?.access_token}>
                   <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                     <a href="?m=auth&mode=login">
                       <span class={styles.textLabel}>{t('Enter')}</span>
@@ -251,7 +246,12 @@ export const HeaderAuth = (props: Props) => {
               }
             >
               <Show when={!isSaveButtonVisible()}>
-                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
+                <div
+                  class={clsx(
+                    styles.userControlItem,
+                    // styles.userControlItemInbox
+                  )}
+                >
                   <a href={getPagePath(router, 'inbox')}>
                     <div classList={{ entered: page().path === '/inbox' }}>
                       <Icon name="inbox-white" class={styles.icon} />
@@ -263,7 +263,7 @@ export const HeaderAuth = (props: Props) => {
             </Show>
           </div>
 
-          <Show when={isAuthenticated()}>
+          <Show when={session()?.access_token}>
             <ProfilePopup
               onVisibilityChange={(isVisible) => {
                 props.setIsProfilePopupVisible(isVisible)

src/components/Nav/ProfilePopup.tsx

@@ -5,8 +5,10 @@ import { getPagePath } from '@nanostores/router'
 import { useLocalize } from '../../context/localize'
 import { useSession } from '../../context/session'
 import { router } from '../../stores/router'
+import { Icon } from '../_shared/Icon'
 import { Popup } from '../_shared/Popup'
 
+import { clsx } from 'clsx'
 import styles from '../_shared/Popup/Popup.module.scss'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
@@ -16,30 +18,53 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
   const { t } = useLocalize()
 
   return (
-    <Popup {...props} horizontalAnchor="right" variant="bordered">
+    <Popup {...props} horizontalAnchor="right" popupCssClass={styles.profilePopup}>
       <ul class="nodash">
         <li>
-          <a href={getPagePath(router, 'author', { slug: author().slug })}>{t('Profile')}</a>
+          <a class={styles.action} href={getPagePath(router, 'author', { slug: author().slug })}>
+            <Icon name="profile" class={styles.icon} />
+            {t('Profile')}
+          </a>
         </li>
         <li>
-          <a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
+          <a class={styles.action} href={getPagePath(router, 'drafts')}>
+            <Icon name="pencil-outline" class={styles.icon} />
+            {t('Drafts')}
+          </a>
         </li>
         <li>
-          <a href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}>
+          <a
+            class={styles.action}
+            href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}
+          >
+            <Icon name="feed-all" class={styles.icon} />
             {t('Subscriptions')}
           </a>
         </li>
         <li>
-          <a href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}>{t('Comments')}</a>
+          <a
+            class={styles.action}
+            href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}
+          >
+            <Icon name="comment" class={styles.icon} />
+            {t('Comments')}
+          </a>
         </li>
         <li>
-          <a href="#">{t('Bookmarks')}</a>
+          <a class={styles.action} href="#">
+            <Icon name="bookmark" class={styles.icon} />
+            {t('Bookmarks')}
+          </a>
         </li>
         <li>
-          <a href={getPagePath(router, 'profileSettings')}>{t('Settings')}</a>
+          <a class={styles.action} href={getPagePath(router, 'profileSettings')}>
+            <Icon name="settings" class={styles.icon} />
+            {t('Settings')}
+          </a>
         </li>
         <li class={styles.topBorderItem}>
-          <span class="link" onClick={() => signOut()}>
+          <span class={clsx(styles.action, 'link')} onClick={() => signOut()}>
+            <Icon name="logout" class={styles.icon} />
             {t('Logout')}
           </span>
         </li>

src/components/Nav/Snackbar.module.scss

@@ -3,7 +3,10 @@
   color: #fff;
   font-size: 2rem;
   font-weight: 500;
+  left: 0;
   transition: background-color 0.3s;
+  position: absolute;
+  width: 100%;
 
   &.error {
     background-color: #d00820;

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/NotificationsPanel/NotificationsPanel.tsx

@@ -46,7 +46,7 @@ const isEarlier = (date: Date) => {
 
 export const NotificationsPanel = (props: Props) => {
   const [isLoading, setIsLoading] = createSignal(false)
-  const { isAuthenticated } = useSession()
+  const { author } = useSession()
   const { t } = useLocalize()
   const {
     after,
@@ -150,16 +150,13 @@ export const NotificationsPanel = (props: Props) => {
   })
 
   createEffect(
-    on(
+    on(author, async (a) => {
-      () => isAuthenticated(),
+      if (a?.id) {
-      async () => {
+        setIsLoading(true)
-        if (isAuthenticated()) {
+        await loadNextPage()
-          setIsLoading(true)
+        setIsLoading(false)
-          await loadNextPage()
+      }
-          setIsLoading(false)
+    }),
-        }
-      },
-    ),
   )
 
   return (

src/components/ProfileSettings/ProfileSettings.tsx

@@ -20,6 +20,8 @@ import { useLocalize } from '../../context/localize'
 import { useProfileForm } from '../../context/profile'
 import { useSession } from '../../context/session'
 import { useSnackbar } from '../../context/snackbar'
+import { ProfileInput } from '../../graphql/schema/core.gen'
+import styles from '../../pages/profile/Settings.module.scss'
 import { hideModal, showModal } from '../../stores/ui'
 import { clone } from '../../utils/clone'
 import { getImageUrl } from '../../utils/getImageUrl'
@@ -35,14 +37,12 @@ import { Loading } from '../_shared/Loading'
 import { Popover } from '../_shared/Popover'
 import { SocialNetworkInput } from '../_shared/SocialNetworkInput'
 
-import styles from '../../pages/profile/Settings.module.scss'
-
 const SimplifiedEditor = lazy(() => import('../../components/Editor/SimplifiedEditor'))
 const GrowingTextarea = lazy(() => import('../../components/_shared/GrowingTextarea/GrowingTextarea'))
 
 export const ProfileSettings = () => {
   const { t } = useLocalize()
-  const [prevForm, setPrevForm] = createStore({})
+  const [prevForm, setPrevForm] = createStore<ProfileInput>({})
   const [isFormInitialized, setIsFormInitialized] = createSignal(false)
   const [isSaving, setIsSaving] = createSignal(false)
   const [social, setSocial] = createSignal([])
@@ -57,8 +57,9 @@ export const ProfileSettings = () => {
   const [nameError, setNameError] = createSignal<string>()
   const { form, submit, updateFormField, setForm } = useProfileForm()
   const { showSnackbar } = useSnackbar()
-  const { loadAuthor } = useSession()
+  const { loadAuthor, session } = useSession()
   const { showConfirm } = useConfirm()
+  const [clearAbout, setClearAbout] = createSignal(false)
 
   createEffect(() => {
     if (Object.keys(form).length > 0 && !isFormInitialized()) {
@@ -121,7 +122,9 @@ export const ProfileSettings = () => {
       declineButtonVariant: 'secondary',
     })
     if (isConfirmed) {
+      setClearAbout(true)
       setForm(clone(prevForm))
+      setClearAbout(false)
     }
   }
 
@@ -140,7 +143,7 @@ export const ProfileSettings = () => {
       setUploadError(false)
       setIsUserpicUpdating(true)
 
-      const result = await handleImageUpload(uploadFile)
+      const result = await handleImageUpload(uploadFile, session()?.access_token)
       updateFormField('pic', result.url)
 
       setUserpicFile(null)
@@ -171,11 +174,13 @@ export const ProfileSettings = () => {
     on(
       () => deepEqual(form, prevForm),
       () => {
-        setIsFloatingPanelVisible(!deepEqual(form, prevForm))
+        if (Object.keys(prevForm).length > 0) {
+          setIsFloatingPanelVisible(!deepEqual(form, prevForm))
+        }
       },
-      { defer: true },
     ),
   )
+
   const handleDeleteSocialLink = (link) => {
     updateFormField('links', link, true)
   }
@@ -317,6 +322,8 @@ export const ProfileSettings = () => {
 
                     <h4>{t('About')}</h4>
                     <SimplifiedEditor
+                      resetToInitial={clearAbout()}
+                      noLimits={true}
                       variant="bordered"
                       onlyBubbleControls={true}
                       smallHeight={true}

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.module.scss

@@ -1,12 +1,11 @@
 .TopicBadge {
-  margin-bottom: 2rem;
+  margin-bottom: 4.8rem;
   gap: 1rem;
 
   .content {
     align-items: flex-start;
     display: flex;
     flex-direction: row;
-    margin-bottom: .8rem;
   }
 
   .basicInfo {
@@ -48,11 +47,62 @@
     @include font-size(1.4rem);
 
     border: none;
-    display: flex;
+
-    flex-direction: column;
+    // display: flex;
+    // flex-direction: column;
 
     &:hover {
       background: unset;
+      color: inherit;
+
+      .title {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+      }
+    }
+
+    .title {
+      @include font-size(2.2rem);
+
+      font-weight: bold;
+    }
+
+    .description {
+      @include font-size(1.6rem);
+
+      line-height: 1.4;
+      margin: 0.8rem 0;
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-bottom: -1rem;
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
+  }
+}
+
+.TopicBadgeSubscriptionsMode {
+  margin-bottom: 2rem;
+
+  .content {
+    margin-bottom: 0.8rem;
+  }
+
+  .info {
+    &:hover {
+      .title {
+        background-color: var(--blue-500);
+        color: var(--white-500);
+      }
     }
 
     .title {
@@ -66,7 +116,11 @@
 
     .description {
       color: var(--black-400);
+
+      @include font-size(1.2rem);
+
       font-weight: 500;
+      margin: 0;
     }
   }
 
@@ -88,7 +142,6 @@
 
   color: var(--secondary-color);
   display: flex;
-  margin: 0 0 1em;
 
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
@@ -101,6 +154,7 @@
   .statsItem {
     @include font-size(1.4rem);
 
+    font-weight: 500;
     margin-right: 1.6rem;
     white-space: nowrap;
 

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'
@@ -15,6 +15,7 @@ type Props = {
   topic: Topic
   minimizeSubscribeButton?: boolean
   showStat?: boolean
+  subscriptionsMode?: boolean
 }
 
 export const TopicBadge = (props: Props) => {
@@ -26,7 +27,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)
   })
@@ -47,23 +48,27 @@ export const TopicBadge = (props: Props) => {
     lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
 
   return (
-    <div class={styles.TopicBadge}>
+    <div class={clsx(styles.TopicBadge, props.subscriptionsMode)}>
       <div class={styles.content}>
         <div class={styles.basicInfo}>
-          <a
+          <Show when={props.subscriptionsMode}>
-            href={`/topic/${props.topic.slug}`}
+            <a
-            class={clsx(styles.picture, {
+              href={`/topic/${props.topic.slug}`}
-              [styles.withImage]: props.topic.pic,
+              class={clsx(styles.picture, {
-              [styles.smallSize]: isMobileView(),
+                [styles.withImage]: props.topic.pic,
-            })}
+                [styles.smallSize]: isMobileView(),
-            style={
+              })}
-              props.topic.pic && {
+              style={
-                'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
+                props.topic.pic && {
+                  'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
+                }
               }
-            }
+            />
-          />
+          </Show>
+
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
+
             <Show
               when={props.topic.body}
               fallback={
@@ -86,18 +91,23 @@ export const TopicBadge = (props: Props) => {
           />
         </div>
       </div>
-      <div class={styles.stats}>
+
-        <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
+      <Show when={!props.subscriptionsMode}>
-        <span class={styles.statsItem}>{t('authorsWithCount', { count: props.topic?.stat?.authors })}</span>
+        <div class={styles.stats}>
-        <span class={styles.statsItem}>
+          <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
-          {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
-        </span>
-        <Show when={props.topic?.stat?.comments}>
           <span class={styles.statsItem}>
-            {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
+            {t('authorsWithCount', { count: props.topic?.stat?.authors })}
           </span>
-        </Show>
+          <span class={styles.statsItem}>
-      </div>
+            {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
+          </span>
+          <Show when={props.topic?.stat?.comments}>
+            <span class={styles.statsItem}>
+              {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
+            </span>
+          </Show>
+        </div>
+      </Show>
     </div>
   )
 }

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -1,12 +1,12 @@
 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 { Meta } from '../../../context/meta'
 
 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',
@@ -42,7 +42,8 @@ export const AllAuthors = (props: Props) => {
   const filteredAuthors = createMemo(() => {
     const query = searchQuery().toLowerCase()
     return sortedAuthors().filter((author) => {
-      return author.name.toLowerCase().includes(query) // Предполагаем, что у автора есть свойство name
+      // Предполагаем, что у автора есть свойство name
+      return author.name.toLowerCase().includes(query)
     })
   })
 

src/components/Views/AllTopics/AllTopics.tsx

@@ -1,13 +1,11 @@
 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 { Meta } from '../../../context/meta'
+import { useTopics } from '../../../context/topics'
 import { useRouter } from '../../../stores/router'
-import { setTopicsSort, useTopicsStore } from '../../../stores/zine/topics'
 import { capitalize } from '../../../utils/capitalize'
 import { dummyFilter } from '../../../utils/dummyFilter'
 import { getImageUrl } from '../../../utils/getImageUrl'
@@ -35,11 +33,7 @@ export const AllTopics = (props: Props) => {
   const [limit, setLimit] = createSignal(PAGE_SIZE)
   const ALPHABET =
     lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ#'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ#']
-
+  const { sortedTopics, setTopicsSort } = useTopics()
-  const { sortedTopics } = useTopicsStore({
-    topics: props.topics,
-    sortBy: searchParams().by || 'shouts',
-  })
 
   createEffect(() => {
     if (!searchParams().by) {
@@ -82,7 +76,7 @@ export const AllTopics = (props: Props) => {
 
   const AllTopicsHead = () => (
     <div class="row">
-      <div class="col-lg-20 col-xl-18">
+      <div class="col-lg-18 col-xl-15">
         <h1>{t('Topics')}</h1>
         <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
@@ -131,7 +125,7 @@ export const AllTopics = (props: Props) => {
 
             <Show when={filteredResults().length > 0}>
               <Show when={searchParams().by === 'title'}>
-                <div class="col-lg-20 col-xl-18">
+                <div class="col-lg-18 col-xl-15">
                   <ul class={clsx('nodash', styles.alphabet)}>
                     <For each={ALPHABET}>
                       {(letter, index) => (
@@ -182,7 +176,7 @@ export const AllTopics = (props: Props) => {
 
               <Show when={searchParams().by && searchParams().by !== 'title'}>
                 <div class="row">
-                  <div class="col-lg-20 col-xl-18 py-4">
+                  <div class="col-lg-18 col-xl-15 py-4">
                     <For each={filteredResults().slice(0, limit())}>
                       {(topic) => (
                         <>

src/components/Views/Author/Author.tsx

@@ -1,17 +1,17 @@
 import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
 
 import { getPagePath } from '@nanostores/router'
-import { Meta, Title } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
+import { Meta, Title } from '../../../context/meta'
 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)
@@ -244,7 +243,7 @@ export const AuthorView = (props: Props) => {
                   class={styles.longBio}
                   classList={{ [styles.longBioExpanded]: isBioExpanded() }}
                 >
-                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
+                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author()?.about || ''} />
                 </div>
 
                 <Show when={showExpandBioControl()}>

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,28 @@ 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 { author, loadSession } = useSession()
   const [drafts, setDrafts] = createSignal<Shout[]>([])
 
-  const loadDrafts = async () => {
+  createEffect(
-    if (apiClient.private) {
+    on(
-      const loadedDrafts = await apiClient.getDrafts()
+      () => author(),
-      setDrafts(loadedDrafts.reverse() || [])
+      async (a) => {
-    }
+        if (a) {
-  }
+          const { shouts: loadedDrafts, error } = await apiClient.getDrafts()
-
+          if (error) {
-  createEffect(() => {
+            console.warn(error)
-    if (isSessionLoaded()) loadDrafts()
+            await loadSession()
-  })
+          }
+          setDrafts(loadedDrafts || [])
+        }
+      },
+    ),
+  )
 
   const { publishShoutById, deleteShout } = useEditorContext()
 
@@ -44,22 +50,20 @@ export const DraftsView = () => {
 
   return (
     <div class={clsx(styles.DraftsView)}>
-      <Show when={isSessionLoaded()}>
+      <Show when={author()?.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()}>
-                <For each={drafts()}>
+                {(draft) => (
-                  {(draft) => (
+                  <Draft
-                    <Draft
+                    class={styles.draft}
-                      class={styles.draft}
+                    shout={draft}
-                      shout={draft}
+                    onDelete={handleDraftDelete}
-                      onDelete={handleDraftDelete}
+                    onPublish={handleDraftPublish}
-                      onPublish={handleDraftPublish}
+                  />
-                    />
+                )}
-                  )}
+              </For>
-                </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({
@@ -65,12 +68,14 @@ export const EditView = (props: Props) => {
   } = useEditorContext()
   const shoutTopics = props.shout.topics || []
 
-  // TODO: проверить сохранение черновика в local storage (не работает)
   const draft = getDraftFromLocalStorage(props.shout.id)
+
   if (draft) {
-    setForm(Object.keys(draft).length !== 0 ? draft : { shoutId: props.shout.id })
+    const draftForm = Object.keys(draft).length !== 0 ? draft : { shoutId: props.shout.id }
+    setForm(draftForm)
+    console.debug('draft from localstorage: ', draftForm)
   } else {
-    setForm({
+    const draftForm = {
       slug: props.shout.slug,
       shoutId: props.shout.id,
       title: props.shout.title,
@@ -83,7 +88,9 @@ export const EditView = (props: Props) => {
       coverImageUrl: props.shout.cover,
       media: props.shout.media,
       layout: props.shout.layout,
-    })
+    }
+    setForm(draftForm)
+    console.debug('draft from props data: ', draftForm)
   }
 
   const subtitleInput: { current: HTMLTextAreaElement } = { current: null }
@@ -106,9 +113,6 @@ export const EditView = (props: Props) => {
     onCleanup(() => {
       window.removeEventListener('scroll', handleScroll)
     })
-  })
-
-  onMount(() => {
     // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleBeforeUnload = (event) => {
       if (!deepEqual(prevForm, form)) {
@@ -180,42 +184,39 @@ export const EditView = (props: Props) => {
 
   let autoSaveTimeOutId: number | string | NodeJS.Timeout
 
-  //TODO: add throttle
+  const autoSave = async () => {
+    const hasChanges = !deepEqual(form, prevForm)
+    const hasTopic = Boolean(form.mainTopic)
+    if (hasChanges || hasTopic) {
+      console.debug('saving draft', form)
+      setSaving(true)
+      saveDraftToLocalStorage(form)
+      await saveDraft(form)
+      setPrevForm(clone(form))
+      setTimeout(() => setSaving(false), AUTO_SAVE_DELAY)
+    }
+  }
+
+  // Throttle the autoSave function
+  const throttledAutoSave = throttle(THROTTLING_INTERVAL, autoSave)
+
   const autoSaveRecursive = () => {
-    autoSaveTimeOutId = setTimeout(async () => {
+    autoSaveTimeOutId = setTimeout(() => {
-      const hasChanges = !deepEqual(form, prevForm)
+      throttledAutoSave()
-      if (hasChanges) {
-        setSaving(true)
-        if (props.shout?.published_at) {
-          saveDraftToLocalStorage(form)
-        } else {
-          await saveDraft(form)
-        }
-        setPrevForm(clone(form))
-        setTimeout(() => {
-          setSaving(false)
-        }, 2000)
-      }
       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/Expo/Expo.tsx

@@ -192,7 +192,7 @@ export const Expo = (props: Props) => {
               )}
             </For>
             <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
-              <ArticleCardSwiper title={t('Top month articles')} slides={reactedTopMonthArticles()} />
+              <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
             </Show>
             <For each={expoShouts().slice(LOAD_MORE_PAGE_SIZE, LOAD_MORE_PAGE_SIZE * 2)}>
               {(shout) => (

src/components/Views/Feed/Feed.tsx

@@ -1,18 +1,18 @@
 import { getPagePath } from '@nanostores/router'
-import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
+import { Meta } from '../../../context/meta'
 import { useReactions } from '../../../context/reactions'
 import { useSession } from '../../../context/session'
+import { useTopics } from '../../../context/topics'
 import { apiClient } from '../../../graphql/client/core'
 import type { Author, LoadShoutsOptions, Reaction, Shout } from '../../../graphql/schema/core.gen'
 import { router, useRouter } from '../../../stores/router'
 import { showModal } from '../../../stores/ui'
 import { resetSortedArticles, useArticlesStore } from '../../../stores/zine/articles'
 import { useTopAuthorsStore } from '../../../stores/zine/topAuthors'
-import { useTopicsStore } from '../../../stores/zine/topics'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { byCreated } from '../../../utils/sortby'
 import { CommentDate } from '../../Article/CommentDate'
@@ -49,7 +49,7 @@ type VisibilityItem = {
 }
 
 type FeedSearchParams = {
-  by: 'publish_date' | 'likes' | 'comments'
+  by: 'publish_date' | 'likes' | 'last_comment'
   period: FeedPeriod
   visibility: VisibilityMode
 }
@@ -103,7 +103,7 @@ export const FeedView = (props: Props) => {
   const { session } = useSession()
   const { loadReactionsBy } = useReactions()
   const { sortedArticles } = useArticlesStore()
-  const { topTopics } = useTopicsStore()
+  const { topTopics } = useTopics()
   const { topAuthors } = useTopAuthorsStore()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [topComments, setTopComments] = createSignal<Reaction[]>([])
@@ -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,8 @@
 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 { useTopics } from '../../context/topics'
 import { Shout, Topic } from '../../graphql/schema/core.gen'
 import { router } from '../../stores/router'
 import {
@@ -12,7 +12,6 @@ import {
   useArticlesStore,
 } from '../../stores/zine/articles'
 import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
-import { useTopicsStore } from '../../stores/zine/topics'
 import { capitalize } from '../../utils/capitalize'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
@@ -47,13 +46,13 @@ export const HomeView = (props: Props) => {
       shouts: props.shouts,
     })
 
-  const { topTopics } = useTopicsStore()
+  const { topTopics } = useTopics()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   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()
@@ -111,7 +110,7 @@ export const HomeView = (props: Props) => {
           nodate={true}
         />
         <Show when={topMonthArticles()}>
-          <ArticleCardSwiper title={t('Top month articles')} slides={topMonthArticles()} />
+          <ArticleCardSwiper title={t('Top month')} slides={topMonthArticles()} />
         </Show>
         <Row2 articles={sortedArticles().slice(10, 12)} nodate={true} />
         <RowShort articles={sortedArticles().slice(12, 16)} />

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

@@ -6,11 +6,11 @@ import { createStore } from 'solid-js/store'
 import { ShoutForm, useEditorContext } from '../../../context/editor'
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
+import { useTopics } from '../../../context/topics'
 import { Topic } from '../../../graphql/schema/core.gen'
 import { UploadedFile } from '../../../pages/types'
 import { router } from '../../../stores/router'
 import { hideModal, showModal } from '../../../stores/ui'
-import { loadAllTopics, useTopicsStore } from '../../../stores/zine/topics'
 import { TopicSelect, UploadModalContent } from '../../Editor'
 import { Modal } from '../../Nav/Modal'
 import { Button } from '../../_shared/Button'
@@ -53,13 +53,13 @@ const emptyConfig = {
 export const PublishSettings = (props: Props) => {
   const { t } = useLocalize()
   const { author } = useSession()
-  const { sortedTopics } = useTopicsStore()
+  const { sortedTopics } = useTopics()
   const { showSnackbar } = useSnackbar()
   const [topics, setTopics] = createSignal<Topic[]>(sortedTopics())
 
   const composeDescription = () => {
     if (!props.form.description) {
-      const cleanFootnotes = props.form.body.replaceAll(/<footnote data-value=".*?">.*?<\/footnote>/g, '')
+      const cleanFootnotes = props.form.body.replaceAll(/<footnote data-value=".*?">(.*?)<\/footnote>/g, '')
       const leadText = cleanFootnotes.replaceAll(/<\/?[^>]+(>|$)/gi, ' ')
       return shorten(leadText, DESCRIPTION_MAX_LENGTH).trim()
     }
@@ -82,7 +82,6 @@ export const PublishSettings = (props: Props) => {
 
   onMount(() => {
     setSettingsForm(initialData())
-    loadAllTopics()
   })
 
   createEffect(() => setTopics(sortedTopics()))
@@ -127,10 +126,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/Views/Topic.tsx

@@ -1,14 +1,14 @@
 import { LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
 
-import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
+import { Meta } from '../../context/meta'
 
 import { useLocalize } from '../../context/localize'
+import { useTopics } from '../../context/topics'
 import { useRouter } from '../../stores/router'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
 import { useAuthorsStore } from '../../stores/zine/authors'
-import { useTopicsStore } from '../../stores/zine/topics'
 import { capitalize } from '../../utils/capitalize'
 import { getImageUrl } from '../../utils/getImageUrl'
 import { getDescription } from '../../utils/meta'
@@ -43,7 +43,7 @@ export const TopicView = (props: Props) => {
   const { searchParams, changeSearchParams } = useRouter<TopicsPageSearchParams>()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
-  const { topicEntities } = useTopicsStore({ topics: [props.topic] })
+  const { topicEntities } = useTopics()
   const { authorsByTopic } = useAuthorsStore()
   const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
   const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
@@ -216,7 +216,7 @@ export const TopicView = (props: Props) => {
         wrapper={'author'}
       />
       <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
-        <ArticleCardSwiper title={t('Top month articles')} slides={reactedTopMonthArticles()} />
+        <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
       </Show>
       <Beside
         beside={sortedArticles()[12]}

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/DropArea/DropArea.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { JSX, Show, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
 import { UploadedFile } from '../../../pages/types'
 import { handleFileUpload } from '../../../utils/handleFileUpload'
 import { handleImageUpload } from '../../../utils/handleImageUpload'
@@ -27,6 +28,7 @@ export const DropArea = (props: Props) => {
   const [dragActive, setDragActive] = createSignal(false)
   const [dropAreaError, setDropAreaError] = createSignal<string>()
   const [loading, setLoading] = createSignal(false)
+  const { session } = useSession()
 
   const runUpload = async (files) => {
     try {
@@ -35,7 +37,7 @@ export const DropArea = (props: Props) => {
       const results: UploadedFile[] = []
       for (const file of files) {
         const handler = props.fileType === 'image' ? handleImageUpload : handleFileUpload
-        const result = await handler(file)
+        const result = await handler(file, session()?.access_token)
         results.push(result)
       }
       props.onUpload(results)

src/components/_shared/DropDown/DropDown.tsx

@@ -5,6 +5,7 @@ import { For, Show, createSignal } from 'solid-js'
 
 import { Popup } from '../Popup'
 
+import popupStyles from '../Popup/Popup.module.scss'
 import styles from './DropDown.module.scss'
 
 export type Option = {
@@ -56,16 +57,22 @@ export const DropDown = <TOption extends Option = Option>(props: Props<TOption>)
         onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
         {...props.popupProps}
       >
-        <For each={props.options}>
+        <ul class="nodash">
-          {(option) => (
+          <For each={props.options}>
-            <div
+            {(option) => (
-              class={clsx('link', { [styles.active]: props.currentOption.value === option.value })}
+              <li>
-              onClick={() => props.onChange(option)}
+                <button
-            >
+                  class={clsx(popupStyles.action, {
-              {option.title}
+                    [styles.active]: props.currentOption.value === option.value,
-            </div>
+                  })}
-          )}
+                  onClick={() => props.onChange(option)}
-        </For>
+                >
+                  {option.title}
+                </button>
+              </li>
+            )}
+          </For>
+        </ul>
       </Popup>
     </Show>
   )

src/components/_shared/Icon/index.ts

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

src/components/_shared/Image/Image.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js'
 
-import { Link } from '@solidjs/meta'
 import { splitProps } from 'solid-js'
+import { Link } from '../../../context/meta'
 
 import { getImageUrl } from '../../../utils/getImageUrl'
 

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/PageLayout.tsx

@@ -1,8 +1,8 @@
 import type { JSX } from 'solid-js'
 
-import { Title } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { Show, createEffect, createSignal } from 'solid-js'
+import { Title } from '../../context/meta'
 
 import { Footer } from '../Discours/Footer'
 import { Header } from '../Nav/Header'

src/components/_shared/Popup/Popup.module.scss

@@ -8,10 +8,14 @@
 
 .popup {
   background: var(--background-color);
+  border: 1px solid rgb(0 0 0 / 15%);
+  border-radius: 1.6rem;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 5%);
   color: var(--default-color);
   cursor: default;
   min-width: 144px;
   opacity: 1;
+  overflow: hidden;
   position: absolute;
   text-align: left;
   top: calc(100% + 11px);
@@ -21,6 +25,7 @@
     margin-bottom: 0;
 
     li {
+      margin: 0;
       position: relative;
 
       &:last-child {
@@ -29,33 +34,19 @@
     }
   }
 
-  &.bordered {
-    @include font-size(1.6rem);
-
-    border: 2px solid #000;
-    padding: 2.4rem;
-
-    ul li {
-      margin-bottom: 1.6rem;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
   &.tiny {
     @include font-size(1.4rem);
 
-    box-shadow: 0 4px 60px rgb(0 0 0 / 10%);
+    .action {
-    padding: 1rem;
+      padding: 0.5rem 1rem;
+    }
 
-    ul li {
+    li:first-child .action {
-      margin-bottom: 1rem;
+      padding-top: 1rem;
+    }
 
-      &:last-child {
+    li:last-child .action {
-        margin-bottom: 0;
+      padding-bottom: 1rem;
-      }
     }
   }
 
@@ -75,7 +66,6 @@
 
   .topBorderItem {
     border-top: 2px solid;
-    padding-top: 1em;
   }
 
   a:link,
@@ -83,26 +73,64 @@
     border: none;
     white-space: nowrap;
 
-    &:hover {
+    &::before {
-      .icon img {
+      content: '';
-        filter: invert(0);
+      height: 100%;
-      }
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
     }
   }
 
   .icon {
     display: inline-block;
-    width: 3.6rem;
+    margin-right: 1rem;
+    width: 2.4rem;
 
     img {
       display: inline-block;
-      filter: invert(1);
+      max-height: 2.4rem;
-      max-height: 2rem;
+      max-width: 2.4rem;
-      max-width: 2rem;
       transition: filter 0.3s;
       vertical-align: middle;
     }
   }
+
+  .action {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px 16px;
+    font-size: inherit;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--black-500);
+      color: var(--black-50) !important;
+
+      .icon img {
+        filter: invert(1);
+      }
+    }
+  }
+
+  li:first-child .action {
+    padding-top: 16px;
+  }
+
+  li:last-child .action {
+    padding-bottom: 16px;
+  }
+}
+
+.profilePopup {
+  @include media-breakpoint-up(sm) {
+    min-width: 22rem;
+  }
 }
 
 // TODO: animation

src/components/_shared/Popup/Popup.tsx

@@ -14,7 +14,7 @@ export type PopupProps = {
   children: JSX.Element
   onVisibilityChange?: (isVisible: boolean) => void
   horizontalAnchor?: HorizontalAnchor
-  variant?: 'bordered' | 'tiny'
+  variant?: 'tiny'
   closePopup?: boolean
 }
 
@@ -54,7 +54,6 @@ export const Popup = (props: PopupProps) => {
           class={clsx(styles.popup, props.popupCssClass, {
             [styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
             [styles.horizontalAnchorRight]: horizontalAnchor === 'right',
-            [styles.bordered]: props.variant === 'bordered',
             [styles.tiny]: props.variant === 'tiny',
           })}
         >

src/components/_shared/Popup/index.ts

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

src/components/_shared/ShareLinks/ShareLinks.module.scss

@@ -7,9 +7,6 @@
     white-space: nowrap;
 
     &:hover {
-      background: #000;
-      color: #fff;
-
       .icon img {
         filter: invert(0);
       }
@@ -17,7 +14,7 @@
 
     .icon {
       display: inline-block;
-      width: 3.6rem;
+      width: 2rem;
 
       img {
         display: inline-block;

src/components/_shared/ShareLinks/ShareLinks.tsx

@@ -7,6 +7,7 @@ import { useSnackbar } from '../../../context/snackbar'
 import { Icon } from '../Icon'
 import { Popover } from '../Popover'
 
+import popupStyles from '../Popup/Popup.module.scss'
 import styles from './ShareLinks.module.scss'
 
 type Props = {
@@ -53,26 +54,42 @@ export const ShareLinks = (props: Props) => {
     <div class={clsx(styles.ShareLinks, props.class, { [styles.inModal]: props.variant === 'inModal' })}>
       <ul class="nodash">
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(FACEBOOK)}>
+          <button
-            <Icon name="facebook-white" class={styles.icon} />
+            role="button"
+            class={clsx(styles.shareControl, popupStyles.action)}
+            onClick={() => handleShare(FACEBOOK)}
+          >
+            <Icon name="facebook-white" class={clsx(styles.icon, popupStyles.icon)} />
             Facebook
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(TWITTER)}>
+          <button
-            <Icon name="twitter-white" class={styles.icon} />
+            role="button"
+            class={clsx(styles.shareControl, popupStyles.action)}
+            onClick={() => handleShare(TWITTER)}
+          >
+            <Icon name="twitter-white" class={clsx(styles.icon, popupStyles.icon)} />
             Twitter
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(TELEGRAM)}>
+          <button
-            <Icon name="telegram-white" class={styles.icon} />
+            role="button"
+            class={clsx(styles.shareControl, popupStyles.action)}
+            onClick={() => handleShare(TELEGRAM)}
+          >
+            <Icon name="telegram-white" class={clsx(styles.icon, popupStyles.icon)} />
             Telegram
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(VK)}>
+          <button
-            <Icon name="vk-white" class={styles.icon} />
+            role="button"
+            class={clsx(styles.shareControl, popupStyles.action)}
+            onClick={() => handleShare(VK)}
+          >
+            <Icon name="vk-white" class={clsx(styles.icon, popupStyles.icon)} />
             VK
           </button>
         </li>
@@ -80,8 +97,12 @@ export const ShareLinks = (props: Props) => {
           <Show
             when={props.variant === 'inModal'}
             fallback={
-              <button role="button" class={styles.shareControl} onClick={copyLink}>
+              <button
-                <Icon name="link-white" class={styles.icon} />
+                role="button"
+                class={clsx(styles.shareControl, popupStyles.action)}
+                onClick={copyLink}
+              >
+                <Icon name="link-white" class={clsx(styles.icon, popupStyles.icon)} />
                 {t('Copy link')}
               </button>
             }
@@ -93,7 +114,7 @@ export const ShareLinks = (props: Props) => {
               <Popover content={t('Copy link')}>
                 {(triggerRef: (el) => void) => (
                   <div class={styles.copyButton} onClick={copyLink} ref={triggerRef}>
-                    <Icon name="copy" class={styles.icon} />
+                    <Icon name="copy" class={clsx(styles.icon, popupStyles.icon)} />
                   </div>
                 )}
               </Popover>

src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx

@@ -10,6 +10,8 @@ import { ShowOnlyOnClient } from '../ShowOnlyOnClient'
 
 import { SwiperRef } from './swiper'
 
+import { Row1 } from '../../Feed/Row1'
+import { Row2 } from '../../Feed/Row2'
 import styles from './Swiper.module.scss'
 
 type Props = {
@@ -21,70 +23,82 @@ export const ArticleCardSwiper = (props: Props) => {
   const mainSwipeRef: { current: SwiperRef } = { current: null }
 
   onMount(async () => {
-    const { register } = await import('swiper/element/bundle')
+    if (props.slides.length > 1) {
-    register()
+      const { register } = await import('swiper/element/bundle')
-    SwiperCore.use([Pagination, Navigation, Manipulation])
+      register()
+      SwiperCore.use([Pagination, Navigation, Manipulation])
+    }
   })
 
   return (
     <ShowOnlyOnClient>
-      <div class={clsx(styles.Swiper, styles.articleMode, styles.ArticleCardSwiper)}>
+      <div
+        class={clsx({
+          [styles.Swiper]: props.slides.length > 1,
+          [styles.articleMode]: true,
+          [styles.ArticleCardSwiper]: props.slides.length > 1,
+        })}
+      >
         <Show when={props.title}>
           <h2 class={styles.sliderTitle}>{props.title}</h2>
         </Show>
         <div class={styles.container}>
           <Show when={props.slides.length > 0}>
-            <div class={styles.holder}>
+            <Show when={props.slides.length !== 1} fallback={<Row1 article={props.slides[0]} />}>
-              <swiper-container
+              <Show when={props.slides.length !== 2} fallback={<Row2 articles={props.slides} />}>
-                ref={(el) => (mainSwipeRef.current = el)}
+                <div class={styles.holder}>
-                centered-slides={true}
+                  <swiper-container
-                observer={true}
+                    ref={(el) => (mainSwipeRef.current = el)}
-                space-between={10}
+                    centered-slides={true}
-                breakpoints={{
+                    observer={true}
-                  576: { spaceBetween: 20, slidesPerView: 1.5 },
+                    space-between={10}
-                  992: { spaceBetween: 52, slidesPerView: 1.5 },
+                    breakpoints={{
-                }}
+                      576: { spaceBetween: 20, slidesPerView: 1.5 },
-                round-lengths={true}
+                      992: { spaceBetween: 52, slidesPerView: 1.5 },
-                loop={true}
+                    }}
-                speed={800}
+                    round-lengths={true}
-                autoplay={{
+                    loop={true}
-                  disableOnInteraction: false,
+                    speed={800}
-                  delay: 6000,
+                    autoplay={{
-                  pauseOnMouseEnter: true,
+                      disableOnInteraction: false,
-                }}
+                      delay: 6000,
-              >
+                      pauseOnMouseEnter: true,
-                <For each={props.slides}>
+                    }}
-                  {(slide, index) => (
+                  >
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    <For each={props.slides}>
-                    // @ts-ignore
+                      {(slide, index) => (
-                    <swiper-slide virtual-index={index()}>
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                      <ArticleCard
+                        // @ts-ignore
-                        article={slide}
+                        <swiper-slide virtual-index={index()}>
-                        settings={{
+                          <ArticleCard
-                          additionalClass: 'swiper-slide',
+                            article={slide}
-                          isFloorImportant: true,
+                            settings={{
-                          isWithCover: true,
+                              additionalClass: 'swiper-slide',
-                          nodate: true,
+                              isFloorImportant: true,
-                        }}
+                              isWithCover: true,
-                        desktopCoverSize="L"
+                              nodate: true,
-                      />
+                            }}
-                    </swiper-slide>
+                            desktopCoverSize="L"
-                  )}
+                          />
-                </For>
+                        </swiper-slide>
-              </swiper-container>
+                      )}
-              <div
+                    </For>
-                class={clsx(styles.navigation, styles.prev)}
+                  </swiper-container>
-                onClick={() => mainSwipeRef.current.swiper.slidePrev()}
+                  <div
-              >
+                    class={clsx(styles.navigation, styles.prev)}
-                <Icon name="swiper-l-arr" class={styles.icon} />
+                    onClick={() => mainSwipeRef.current.swiper.slidePrev()}
-              </div>
+                  >
-              <div
+                    <Icon name="swiper-l-arr" class={styles.icon} />
-                class={clsx(styles.navigation, styles.next)}
+                  </div>
-                onClick={() => mainSwipeRef.current.swiper.slideNext()}
+                  <div
-              >
+                    class={clsx(styles.navigation, styles.next)}
-                <Icon name="swiper-r-arr" class={styles.icon} />
+                    onClick={() => mainSwipeRef.current.swiper.slideNext()}
-              </div>
+                  >
-            </div>
+                    <Icon name="swiper-r-arr" class={styles.icon} />
+                  </div>
+                </div>
+              </Show>
+            </Show>
           </Show>
         </div>
       </div>

src/components/_shared/SolidSwiper/EditorSwiper.tsx

@@ -19,6 +19,7 @@ import { Popover } from '../Popover'
 
 import { SwiperRef } from './swiper'
 
+import { useSession } from '../../../context/session'
 import styles from './Swiper.module.scss'
 
 const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
@@ -36,7 +37,7 @@ export const EditorSwiper = (props: Props) => {
   const [loading, setLoading] = createSignal(false)
   const [slideIndex, setSlideIndex] = createSignal(0)
   const [slideBody, setSlideBody] = createSignal<string>()
-
+  const { session } = useSession()
   const mainSwipeRef: { current: SwiperRef } = { current: null }
   const thumbSwipeRef: { current: SwiperRef } = { current: null }
 
@@ -100,7 +101,7 @@ export const EditorSwiper = (props: Props) => {
       setLoading(true)
       const results: UploadedFile[] = []
       for (const file of selectedFiles) {
-        const result = await handleImageUpload(file)
+        const result = await handleImageUpload(file, session()?.access_token)
         results.push(result)
       }
       props.onImagesAdd(composeMediaItems(results))

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/components/_shared/SolidSwiper/Swiper.module.scss

@@ -57,7 +57,7 @@
         margin: 0;
         position: relative;
 
-        & > swiper-container {
+        &>swiper-container {
           display: flex;
           flex-direction: row;
           gap: 10px;

src/context/connect.tsx

@@ -61,10 +61,10 @@ export const ConnectProvider = (props: { children: JSX.Element }) => {
           if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
             setConnected(true)
           } else if (response.status === 401) {
-            throw new Error('unauthorized')
+            throw new Error('SSE: cannot connect to real-time updates')
           } else {
             setRetried((r) => r + 1)
-            throw new Error('Internal Error')
+            throw new Error(`SSE: failed to connect ${retried()} times`)
           }
         },
         onclose() {

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/meta.tsx

@@ -0,0 +1,275 @@
+import {
+  Component,
+  JSX,
+  ParentComponent,
+  createContext,
+  createRenderEffect,
+  createUniqueId,
+  onCleanup,
+  sharedConfig,
+  useContext,
+} from 'solid-js'
+import { escape as escapeMeta, isServer, spread, ssr, useAssets } from 'solid-js/web'
+
+export const MetaContext = createContext<MetaContextType>()
+
+interface TagDescription {
+  tag: string
+  props: Record<string, unknown>
+  setting?: { close?: boolean; escape?: boolean }
+  id: string
+  name?: string
+  ref?: Element
+}
+
+export interface MetaContextType {
+  addTag: (tag: TagDescription) => number
+  removeTag: (tag: TagDescription, index: number) => void
+}
+
+const cascadingTags = ['title', 'meta']
+
+// https://html.spec.whatwg.org/multipage/semantics.html#the-title-element
+const titleTagProperties: string[] = []
+
+const metaTagProperties: string[] =
+  // https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element
+  ['name', 'http-equiv', 'content', 'charset', 'media']
+    // additional properties
+    .concat(['property'])
+
+const getTagKey = (tag: TagDescription, properties: string[]) => {
+  // pick allowed properties and sort them
+  const tagProps = Object.fromEntries(
+    Object.entries(tag.props)
+      .filter(([k]) => properties.includes(k))
+      .sort(),
+  )
+
+  // treat `property` as `name` for meta tags
+  if (Object.hasOwn(tagProps, 'name') || Object.hasOwn(tagProps, 'property')) {
+    tagProps.name = tagProps.name || tagProps.property
+    tagProps.property = undefined
+  }
+
+  // concat tag name and properties as unique key for this tag
+  return tag.tag + JSON.stringify(tagProps)
+}
+
+function initClientProvider() {
+  if (!sharedConfig.context) {
+    const ssrTags = document.head.querySelectorAll('[data-sm]')
+    // `forEach` on `NodeList` is not supported in Googlebot, so use a workaround
+    Array.prototype.forEach.call(ssrTags, (ssrTag: Node) => ssrTag.parentNode?.removeChild(ssrTag))
+  }
+
+  const cascadedTagInstances = new Map()
+  // TODO: use one element for all tags of the same type, just swap out
+  // where the props get applied
+  function getElement(tag: TagDescription) {
+    if (tag.ref) {
+      return tag.ref
+    }
+    let el = document.querySelector(`[data-sm="${tag.id}"]`)
+    if (el) {
+      if (el.tagName.toLowerCase() !== tag.tag) {
+        if (el.parentNode) {
+          // remove the old tag
+          el.parentNode.removeChild(el)
+        }
+        // add the new tag
+        el = document.createElement(tag.tag)
+      }
+      // use the old tag
+      el.removeAttribute('data-sm')
+    } else {
+      // create a new tag
+      el = document.createElement(tag.tag)
+    }
+    return el
+  }
+
+  return {
+    addTag(tag: TagDescription) {
+      if (cascadingTags.indexOf(tag.tag) !== -1) {
+        const properties = tag.tag === 'title' ? titleTagProperties : metaTagProperties
+        const tagKey = getTagKey(tag, properties)
+
+        //  only cascading tags need to be kept as singletons
+        if (!cascadedTagInstances.has(tagKey)) {
+          cascadedTagInstances.set(tagKey, [])
+        }
+
+        let instances = cascadedTagInstances.get(tagKey)
+        const index = instances.length
+
+        instances = [...instances, tag]
+
+        // track indices synchronously
+        cascadedTagInstances.set(tagKey, instances)
+
+        const element = getElement(tag)
+        tag.ref = element
+
+        spread(element, tag.props)
+
+        let lastVisited = null
+        for (let i = index - 1; i >= 0; i--) {
+          if (instances[i] != null) {
+            lastVisited = instances[i]
+            break
+          }
+        }
+
+        if (element.parentNode !== document.head) {
+          document.head.appendChild(element)
+        }
+        if (lastVisited?.ref?.parentNode) {
+          document.head?.removeChild(lastVisited.ref)
+        }
+
+        return index
+      }
+
+      const element = getElement(tag)
+      tag.ref = element
+
+      spread(element, tag.props)
+
+      if (element.parentNode !== document.head) {
+        document.head.appendChild(element)
+      }
+
+      return -1
+    },
+    removeTag(tag: TagDescription, index: number) {
+      const properties = tag.tag === 'title' ? titleTagProperties : metaTagProperties
+      const tagKey = getTagKey(tag, properties)
+
+      if (tag.ref) {
+        const t = cascadedTagInstances.get(tagKey)
+        if (t) {
+          if (tag.ref.parentNode) {
+            tag.ref.parentNode.removeChild(tag.ref)
+            for (let i = index - 1; i >= 0; i--) {
+              if (t[i] != null) {
+                document.head.appendChild(t[i].ref)
+              }
+            }
+          }
+
+          t[index] = null
+          cascadedTagInstances.set(tagKey, t)
+        } else if (tag.ref.parentNode) {
+          tag.ref.parentNode.removeChild(tag.ref)
+        }
+      }
+    },
+  }
+}
+
+function initServerProvider() {
+  const tags: TagDescription[] = []
+  useAssets(() => {
+    const rendered = renderTags(tags)
+    return ssr(rendered as string) as unknown as Element
+  })
+
+  return {
+    addTag(tagDesc: TagDescription) {
+      // tweak only cascading tags
+      if (cascadingTags.indexOf(tagDesc.tag) !== -1) {
+        const properties = tagDesc.tag === 'title' ? titleTagProperties : metaTagProperties
+        const tagDescKey = getTagKey(tagDesc, properties)
+        const index = tags.findIndex(
+          (prev) => prev.tag === tagDesc.tag && getTagKey(prev, properties) === tagDescKey,
+        )
+        if (index !== -1) {
+          tags.splice(index, 1)
+        }
+      }
+      tags.push(tagDesc)
+      return tags.length
+    },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: initial value
+    removeTag(_tag: TagDescription, _index: number) {},
+  }
+}
+
+export const MetaProvider: ParentComponent = (props) => {
+  const actions = isServer ? initServerProvider() : initClientProvider()
+  return <MetaContext.Provider value={actions as MetaContextType}>{props.children}</MetaContext.Provider>
+}
+
+const MetaTag = (
+  tag: string,
+  props: { [k: string]: string },
+  setting?: { escape?: boolean; close?: boolean },
+) => {
+  useHead({
+    tag,
+    props,
+    setting,
+    id: createUniqueId(),
+    get name() {
+      return props.name || props.property
+    },
+  })
+
+  return null
+}
+
+export function useHead(tagDesc: TagDescription) {
+  const c = useContext(MetaContext)
+  if (!c) throw new Error('<MetaProvider /> should be in the tree')
+
+  createRenderEffect(() => {
+    const index = c?.addTag(tagDesc)
+    onCleanup(() => c?.removeTag(tagDesc, index))
+  })
+}
+
+function renderTags(tags: TagDescription[]) {
+  return tags
+    .map((tag) => {
+      const keys = Object.keys(tag.props)
+      const props = keys
+        .map((k) =>
+          k === 'children'
+            ? ''
+            : ` ${k}="${
+                // @ts-expect-error
+                escapeMeta(tag.props[k], true)
+              }"`,
+        )
+        .join('')
+      const children = tag.props.children
+      if (tag.setting?.close) {
+        return `<${tag.tag} data-sm="${tag.id}"${props}>${
+          // @ts-expect-error
+          tag.setting?.escape ? escapeMeta(children) : children || ''
+        }</${tag.tag}>`
+      }
+      return `<${tag.tag} data-sm="${tag.id}"${props}/>`
+    })
+    .join('')
+}
+
+export const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>> = (props) =>
+  MetaTag('title', props as { [k: string]: string }, { escape: true, close: true })
+
+export const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>> = (props) =>
+  MetaTag('style', props as { [k: string]: string }, { close: true })
+
+export const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>> = (props) =>
+  MetaTag('meta', props as { [k: string]: string })
+
+export const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>> = (props) =>
+  MetaTag('link', props as { [k: string]: string })
+
+export const Base: Component<JSX.BaseHTMLAttributes<HTMLBaseElement>> = (props) =>
+  MetaTag('base', props as { [k: string]: string })
+
+export const Stylesheet: Component<Omit<JSX.LinkHTMLAttributes<HTMLLinkElement>, 'rel'>> = (props) => (
+  <Link rel="stylesheet" {...props} />
+)

src/context/notifications.tsx

@@ -40,11 +40,11 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => {
   const [unreadNotificationsCount, setUnreadNotificationsCount] = createSignal(0)
   const [totalNotificationsCount, setTotalNotificationsCount] = createSignal(0)
   const [notificationEntities, setNotificationEntities] = createStore<Record<string, NotificationGroup>>({})
-  const { isAuthenticated } = useSession()
+  const { author } = useSession()
   const { addHandler } = useConnect()
 
   const loadNotificationsGrouped = async (options: { after: number; limit?: number; offset?: number }) => {
-    if (isAuthenticated() && notifierClient?.private) {
+    if (author()?.id && notifierClient?.private) {
       const notificationsResult = await notifierClient.getNotifications(options)
       const groups = notificationsResult?.notifications || []
       const total = notificationsResult?.total || 0
@@ -74,7 +74,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => {
 
   onMount(() => {
     addHandler((data: SSEMessage) => {
-      if (data.entity === 'reaction' && isAuthenticated()) {
+      if (data.entity === 'reaction' && author()?.id) {
         console.info('[context.notifications] event', data)
         loadNotificationsGrouped({ after: after(), limit: Math.max(PAGE_SIZE, loadedNotificationsCount()) })
       }
@@ -91,14 +91,14 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => {
   }
 
   const markSeenAll = async () => {
-    if (isAuthenticated() && notifierClient.private) {
+    if (author()?.id && notifierClient.private) {
       await notifierClient.markSeenAfter({ after: after() })
       await loadNotificationsGrouped({ after: after(), limit: loadedNotificationsCount() })
     }
   }
 
   const markSeen = async (notification_id: number) => {
-    if (isAuthenticated() && notifierClient.private) {
+    if (author()?.id && notifierClient.private) {
       await notifierClient.markSeen(notification_id)
       await loadNotificationsGrouped({ after: after(), limit: loadedNotificationsCount() })
     }

src/context/seen.tsx

@@ -0,0 +1,29 @@
+import { makePersisted } from '@solid-primitives/storage'
+import { Accessor, JSX, createContext, createSignal, useContext } from 'solid-js'
+
+type SeenContextType = {
+  seen: Accessor<{ [slug: string]: number }>
+  addSeen: (slug: string) => void
+}
+
+const SeenContext = createContext<SeenContextType>()
+export function useSeen() {
+  return useContext(SeenContext)
+}
+
+export const SeenProvider = (props: { children: JSX.Element }) => {
+  const [seen, setSeen] = makePersisted(createSignal<{ [slug: string]: number }>({}), {
+    name: 'discoursio-seen',
+  })
+
+  const addSeen = async (slug: string) => {
+    setSeen((prev) => {
+      const newSeen = { ...prev, [slug]: Date.now() }
+      return newSeen
+    })
+  }
+
+  const value: SeenContextType = { seen, addSeen }
+
+  return <SeenContext.Provider value={value}>{props.children}</SeenContext.Provider>
+}

src/context/session.tsx

@@ -13,6 +13,7 @@ import {
   LoginInput,
   ResendVerifyEmailInput,
   SignupInput,
+  UpdateProfileInput,
   VerifyEmailInput,
 } from '@authorizerdev/authorizer-js'
 import {
@@ -48,7 +49,6 @@ export type SessionContextType = {
   author: Resource<Author | null>
   authError: Accessor<string>
   isSessionLoaded: Accessor<boolean>
-  isAuthenticated: Accessor<boolean>
   loadSession: () => AuthToken | Promise<AuthToken>
   setSession: (token: AuthToken | null) => void // setSession
   loadAuthor: (info?: unknown) => Author | Promise<Author>
@@ -59,6 +59,7 @@ export type SessionContextType = {
   ) => void
   signUp: (params: SignupInput) => Promise<{ data: AuthToken; errors: Error[] }>
   signIn: (params: LoginInput) => Promise<{ data: AuthToken; errors: Error[] }>
+  updateProfile: (params: UpdateProfileInput) => Promise<{ data: AuthToken; errors: Error[] }>
   signOut: () => Promise<void>
   oauth: (provider: string) => Promise<void>
   forgotPassword: (
@@ -72,6 +73,7 @@ export type SessionContextType = {
   resendVerifyEmail: (params: ResendVerifyEmailInput) => Promise<GenericResponse>
 }
 
+// biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
 const noop = () => {}
 
 const SessionContext = createContext<SessionContextType>()
@@ -223,9 +225,12 @@ export const SessionProvider = (props: {
           const appdata = session()?.user.app_data
           if (appdata) {
             const { profile } = appdata
-            setAuthor(profile)
+            if (profile?.id) {
-            addAuthors([profile])
+              setAuthor(profile)
-            if (!profile) loadAuthor()
+              addAuthors([profile])
+            } else {
+              setTimeout(loadAuthor, 15)
+            }
           }
         } catch (e) {
           console.error(e)
@@ -270,12 +275,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)
@@ -308,6 +310,8 @@ export const SessionProvider = (props: {
   }
   const signUp = async (params: SignupInput) => await authenticate(authorizer().signup, params)
   const signIn = async (params: LoginInput) => await authenticate(authorizer().login, params)
+  const updateProfile = async (params: UpdateProfileInput) =>
+    await authenticate(authorizer().updateProfile, params)
 
   const signOut = async () => {
     const authResult: ApiResponse<GenericResponse> = await authorizer().logout()
@@ -377,9 +381,6 @@ export const SessionProvider = (props: {
       console.warn(error)
     }
   }
-
-  const isAuthenticated = createMemo(() => Boolean(author()))
-
   const actions = {
     loadSession,
     requireAuthentication,
@@ -387,6 +388,7 @@ export const SessionProvider = (props: {
     signIn,
     signOut,
     confirmEmail,
+    updateProfile,
     setIsSessionLoaded,
     setSession,
     setAuthor,
@@ -404,7 +406,6 @@ export const SessionProvider = (props: {
     isSessionLoaded,
     author,
     ...actions,
-    isAuthenticated,
     resendVerifyEmail,
   }
 

src/context/topics.tsx

@@ -1,10 +1,19 @@
+import { createLazyMemo } from '@solid-primitives/memo'
 import { openDB } from 'idb'
-import { Accessor, JSX, createContext, createSignal, onMount, useContext } from 'solid-js'
+import { Accessor, JSX, createContext, createMemo, createSignal, onMount, useContext } from 'solid-js'
 import { apiClient } from '../graphql/client/core'
 import { Topic } from '../graphql/schema/core.gen'
+import { useRouter } from '../stores/router'
+import { byTopicStatDesc } from '../utils/sortby'
 
 type TopicsContextType = {
-  topics: Accessor<Topic[]>
+  topicEntities: Accessor<{ [topicSlug: string]: Topic }>
+  sortedTopics: Accessor<Topic[]>
+  randomTopics: Accessor<Topic[]>
+  topTopics: Accessor<Topic[]>
+  setTopicsSort: (sortBy: string) => void
+  addTopics: (topics: Topic[]) => void
+  loadTopics: () => Promise<Topic[]>
 }
 
 const TopicsContext = createContext<TopicsContextType>()
@@ -28,8 +37,10 @@ const setupIndexedDB = async () => {
 const getTopicsFromIndexedDB = async (db) => {
   const tx = db.transaction(STORE_NAME, 'readonly')
   const store = tx.objectStore(STORE_NAME)
-  return store.getAll()
+  const topics = await store.getAll()
+  return { topics, timestamp: tx.done }
 }
+
 const saveTopicsToIndexedDB = async (db, topics) => {
   const tx = db.transaction(STORE_NAME, 'readwrite')
   const store = tx.objectStore(STORE_NAME)
@@ -40,20 +51,93 @@ const saveTopicsToIndexedDB = async (db, topics) => {
 }
 
 export const TopicsProvider = (props: { children: JSX.Element }) => {
+  const [topicEntities, setTopicEntities] = createSignal<{ [topicSlug: string]: Topic }>({})
+  const [sortAllBy, setSortAllBy] = createSignal<'shouts' | 'followers' | 'authors' | 'title'>('shouts')
   const [randomTopics, setRandomTopics] = createSignal<Topic[]>([])
 
+  const sortedTopics = createLazyMemo<Topic[]>(() => {
+    const topics = Object.values(topicEntities())
+    const { changeSearchParams } = useRouter()
+    switch (sortAllBy()) {
+      case 'followers': {
+        topics.sort(byTopicStatDesc('followers'))
+        break
+      }
+      case 'shouts': {
+        topics.sort(byTopicStatDesc('shouts'))
+        break
+      }
+      case 'authors': {
+        topics.sort(byTopicStatDesc('authors'))
+        break
+      }
+      case 'title': {
+        topics.sort((a, b) => a.title.localeCompare(b.title))
+        break
+      }
+      default: {
+        topics.sort(byTopicStatDesc('shouts'))
+        changeSearchParams({ by: 'shouts' })
+      }
+    }
+
+    return topics
+  })
+
+  const topTopics = createMemo(() => {
+    const topics = Object.values(topicEntities())
+    topics.sort(byTopicStatDesc('shouts'))
+    return topics
+  })
+
+  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>,
+    )
+
+    setTopicEntities((prevTopicEntities) => {
+      return {
+        ...prevTopicEntities,
+        ...newTopicEntities,
+      }
+    })
+  }
+  const [db, setDb] = createSignal()
+  const loadTopics = async () => {
+    const ttt = await apiClient.getAllTopics()
+    await saveTopicsToIndexedDB(db(), ttt)
+    return ttt
+  }
+
   onMount(async () => {
     const db = await setupIndexedDB()
-    let topics = await getTopicsFromIndexedDB(db)
+    setDb(db)
+    let { topics, timestamp } = await getTopicsFromIndexedDB(db)
 
-    if (topics.length === 0) {
+    if (topics.length < 100 || Date.now() - timestamp > 3600000) {
-      topics = await apiClient.getAllTopics()
+      const newTopics = await loadTopics()
-      await saveTopicsToIndexedDB(db, topics)
+      await saveTopicsToIndexedDB(db, newTopics)
+      topics = newTopics
     }
+    addTopics(topics)
     setRandomTopics(topics)
   })
 
-  const value: TopicsContextType = { topics: randomTopics }
+  const value: TopicsContextType = {
+    setTopicsSort: setSortAllBy,
+    topicEntities,
+    sortedTopics,
+    randomTopics,
+    topTopics,
+    addTopics,
+    loadTopics,
+  }
 
   return <TopicsContext.Provider value={value}>{props.children}</TopicsContext.Provider>
 }

src/graphql/client/core.ts

@@ -1,6 +1,5 @@
 import type {
   Author,
-  AuthorFollowsResult,
   CommonResult,
   FollowingEntity,
   LoadShoutsOptions,
@@ -134,7 +133,7 @@ export const apiClient = {
     slug?: string
     author_id?: number
     user?: string
-  }): Promise<AuthorFollowsResult> => {
+  }): Promise<CommonResult> => {
     const response = await publicGraphQLClient.query(authorFollows, params).toPromise()
     return response.data.get_author_follows
   },
@@ -175,7 +174,7 @@ export const apiClient = {
     console.debug('[graphql.client.core] deleteShout:', response)
   },
 
-  getDrafts: async (): Promise<Shout[]> => {
+  getDrafts: async (): Promise<CommonResult> => {
     const response = await apiClient.private.query(draftsLoad, {}).toPromise()
     console.debug('[graphql.client.core] getDrafts:', response)
     return response.data.get_shouts_drafts

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/graphql/query/core/articles-load-drafts.ts

@@ -3,40 +3,43 @@ import { gql } from '@urql/core'
 export default gql`
   query LoadDraftsQuery {
     get_shouts_drafts {
-      id
+      error
-      title
+      shouts {
-      subtitle
-      slug
-      layout
-      cover
-      # community
-      media
-      main_topic
-      topics {
         id
         title
-        body
+        subtitle
         slug
-        stat {
+        layout
-          shouts
+        cover
-          authors
+        # community
-          followers
+        media
+        main_topic
+        topics {
+          id
+          title
+          body
+          slug
+          stat {
+            shouts
+            authors
+            followers
+          }
+        }
+        authors {
+          id
+          name
+          slug
+          pic
+          created_at
         }
-      }
-      authors {
-        id
-        name
-        slug
-        pic
         created_at
-      }
+        published_at
-      created_at
+        featured_at
-      published_at
+        stat {
-      featured_at
+          viewed
-      stat {
+          rating
-        viewed
+          commented
-        rating
+        }
-        commented
       }
     }
   }

src/graphql/query/core/author-follows.ts

@@ -3,6 +3,7 @@ import { gql } from '@urql/core'
 export default gql`
   query GetAuthorFollows($slug: String, $user: String, $author_id: Int) {
     get_author_follows(slug: $slug, user: $user, author_id: $author_id) {
+      error
       authors {
         id
         slug

src/graphql/query/core/my-followed.ts

@@ -1,28 +0,0 @@
-import { gql } from '@urql/core'
-
-export default gql`
-  query MySubscriptionsQuery {
-    get_my_followed {
-      topics {
-        id
-        title
-        body
-        slug
-      }
-      authors {
-        id
-        name
-        slug
-        pic
-        created_at
-      }
-      communities {
-        id
-        name
-        slug
-        pic
-        created_at
-      }
-    }
-  }
-`

src/pages/about/discussionRules.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

src/pages/about/dogma.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

src/pages/about/guide.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

src/pages/about/help.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { Donate } from '../../components/Discours/Donate'
 import { StaticPage } from '../../components/Views/StaticPage'

src/pages/about/manifest.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { Feedback } from '../../components/Discours/Feedback'
 import { Modal } from '../../components/Nav/Modal'

src/pages/about/partners.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

src/pages/about/principles.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

src/pages/about/termsOfUse.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

src/pages/about/thanks.page.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@solidjs/meta'
+import { Meta } from '../../context/meta'
 
 import { StaticPage } from '../../components/Views/StaticPage'
 import { useLocalize } from '../../context/localize'

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/allTopics.page.tsx

@@ -1,29 +1,15 @@
-import type { PageProps } from './types'
-
-import { createSignal, onMount } from 'solid-js'
-
 import { AllTopics } from '../components/Views/AllTopics'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { useLocalize } from '../context/localize'
-import { loadAllTopics } from '../stores/zine/topics'
+import { useTopics } from '../context/topics'
 
-export const AllTopicsPage = (props: PageProps) => {
+export const AllTopicsPage = () => {
   const { t } = useLocalize()
-
+  const { sortedTopics } = useTopics()
-  const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.allTopics))
-
-  onMount(async () => {
-    if (isLoaded()) {
-      return
-    }
-
-    await loadAllTopics()
-    setIsLoaded(true)
-  })
 
   return (
     <PageLayout title={t('Themes and plots')}>
-      <AllTopics isLoaded={isLoaded()} topics={props.allTopics} />
+      <AllTopics isLoaded={!!sortedTopics()?.length} topics={sortedTopics()} />
     </PageLayout>
   )
 }

src/pages/create.page.tsx

@@ -1,6 +1,6 @@
 import { redirectPage } from '@nanostores/router'
-import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
+import { Meta } from '../context/meta'
 
 import { AuthGuard } from '../components/AuthGuard'
 import { Button } from '../components/_shared/Button'
@@ -18,7 +18,7 @@ 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(),
   })
 }
 

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,71 @@ 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)
-        redirectPage(router, 'drafts')
+    const errorMessage = error === 'forbidden' ? "You can't edit this post" : error
-      } else {
+    await snackbar?.showSnackbar({ type: 'error', body: t(errorMessage) })
-        setShout(loadedShout)
+    redirectPage(router, 'drafts')
-      }
-    }
   }
 
-  onMount(async () => {
+  const [shoutId, setShoutId] = createSignal<number>(0)
-    const shout_id = window.location.pathname.split('/').pop()
+  const [shout, setShout] = createSignal<Shout>()
-    if (shout_id) {
+
-      try {
+  onMount(() => {
-        await loadMyShout(parseInt(shout_id, 10))
+    const shoutId = window.location.pathname.split('/').pop()
-      } catch (e) {
+    const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
-        console.error(e)
+    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)
+        }
+      }
+    }),
+  )
+
   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 />}>
-          <Suspense fallback={<Loading />}>
+          <Show when={shout()} fallback={<Loading />}>
-            <EditView shout={shout()} />
+            <EditView shout={shout() as Shout} />
-          </Suspense>
+          </Show>
-        </Show>
+        </Suspense>
       </AuthGuard>
     </PageLayout>
   )

src/pages/index.page.tsx

@@ -2,13 +2,12 @@ import type { PageProps } from './types'
 
 import { Show, createSignal, onCleanup, onMount } from 'solid-js'
 
-import { HomeView, PRERENDERED_ARTICLES_COUNT, RANDOM_TOPICS_COUNT } from '../components/Views/Home'
+import { HomeView, PRERENDERED_ARTICLES_COUNT } from '../components/Views/Home'
 import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 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))
@@ -19,10 +18,7 @@ export const HomePage = (props: PageProps) => {
       return
     }
 
-    await Promise.all([
+    await loadShouts({ filters: { featured: true }, limit: PRERENDERED_ARTICLES_COUNT })
-      loadShouts({ filters: { featured: true }, limit: PRERENDERED_ARTICLES_COUNT }),
-      loadRandomTopics({ amount: RANDOM_TOPICS_COUNT }),
-    ])
 
     setIsLoaded(true)
   })

src/pages/profile/Settings.module.scss

@@ -100,17 +100,6 @@ h5 {
   }
 }
 
-.passwordToggleControl {
-  position: absolute;
-  right: 1em;
-  transform: translateY(-50%);
-  top: 50%;
-}
-
-.passwordInput {
-  padding-right: 3em !important;
-}
-
 .searchContainer {
   margin-top: 2.4rem;
 }
@@ -331,3 +320,12 @@ div[data-lastpass-infield="true"] {
   opacity: 0 !important;
 }
 
+
+.emailValidationError {
+  position: absolute;
+  top: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 0.3em;
+  color: var(--danger-color);
+}