merged-dev

.eslintrc.js

@@ -27,7 +27,6 @@ module.exports = {
         // 'plugin:@typescript-eslint/recommended-requiring-type-checking'
       ],
       rules: {
-        'no-nested-ternary': 'off',
         '@typescript-eslint/no-unused-vars': [
           'warn',
           {
@@ -35,8 +34,9 @@ module.exports = {
             varsIgnorePattern: '^log$'
           }
         ],
-        '@typescript-eslint/no-explicit-any': 'warn',
+        // TODO: Remove any usage and enable
-        '@typescript-eslint/no-non-null-assertion': 'warn',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'error',
 
         // solid-js fix
         'import/no-unresolved': [2, { ignore: ['solid-js/'] }]

.lintstagedrc

@@ -1,6 +1,4 @@
 {
   "*.{js,ts,tsx,json,scss,css,html}": "prettier --write",
-  "package.json": "sort-package-json",
+  "package.json": "sort-package-json"
-  "*.{scss,css}": "stylelint",
-  "*.{ts,tsx,js}": "eslint --fix"
 }

.lintstagedrc.bak

@@ -0,0 +1,6 @@
+{
+  "*.{js,ts,tsx,json,scss,css,html}": "prettier --write",
+  "package.json": "sort-package-json",
+  "*.{scss,css}": "stylelint",
+  "*.{ts,tsx,js}": "eslint --fix"
+}

package.json

@@ -17,9 +17,9 @@
     "lint:code:fix": "eslint . --fix",
     "lint:styles": "stylelint **/*.{scss,css}",
     "lint:styles:fix": "stylelint **/*.{scss,css} --fix",
-    "pre-commit": "",
+    "pre-commit": "lint-staged",
-    "pre-push": "",
     "pre-commit-old": "lint-staged",
+    "pre-push": "",
     "pre-push-old": "npm run typecheck",
     "prepare": "husky install",
     "preview": "astro preview",
@@ -30,7 +30,7 @@
     "vercel-build": "astro build"
   },
   "dependencies": {
-    "aws-sdk": "^2.0.0",
+    "@aws-sdk/client-s3": "^3.178.0",
     "mailgun.js": "^8.0.1"
   },
   "devDependencies": {
@@ -60,17 +60,17 @@
     "@urql/devtools": "^2.0.3",
     "@urql/exchange-auth": "^1.0.0",
     "@urql/exchange-graphcache": "^5.0.0",
-    "astro": "^1.4.6",
+    "astro": "^1.1.1",
-    "astro-eslint-parser": "^0.7.3",
+    "astro-eslint-parser": "^0.9.0",
     "bcryptjs": "^2.4.3",
     "bootstrap": "5.1.3",
     "clsx": "^1.2.1",
     "cookie": "^0.5.0",
     "cookie-signature": "^1.2.0",
-    "eslint": "^8.22.0",
+    "eslint": "^8.26.0",
     "eslint-config-stylelint": "^17.0.0",
     "eslint-import-resolver-typescript": "^3.5.0",
-    "eslint-plugin-astro": "^0.20.0",
+    "eslint-plugin-astro": "^0.21.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-promise": "^6.0.1",
@@ -85,6 +85,8 @@
     "idb": "^7.1.0",
     "jest": "^29.2.1",
     "lint-staged": "^13.0.3",
+    "loglevel": "^1.8.0",
+    "loglevel-plugin-prefix": "^0.8.4",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-implicit-figures": "^0.10.0",
@@ -123,7 +125,7 @@
     "stylelint": "^14.12.1",
     "stylelint-config-css-modules": "^4.1.0",
     "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-standard-scss": "^6.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.3.0",
     "swiper": "^8.4.2",

src/components/Article/Comment.tsx

@@ -1,10 +1,9 @@
 import './Comment.scss'
 import { Icon } from '../Nav/Icon'
 import { AuthorCard } from '../Author/Card'
-import { Show } from 'solid-js/web'
+import { Show, createMemo } from 'solid-js'
 import { clsx } from 'clsx'
 import type { Author, Reaction as Point } from '../../graphql/types.gen'
-import { createMemo } from 'solid-js'
 import { t } from '../../utils/intl'
 // import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
 import MD from './MD'

src/components/Article/FullArticle.tsx

@@ -10,6 +10,7 @@ import { showModal } from '../../stores/ui'
 import { useAuthStore } from '../../stores/auth'
 import { incrementView } from '../../stores/zine/articles'
 import MD from './MD'
+import { SharePopup } from './SharePopup'
 
 const MAX_COMMENT_LEVEL = 6
 
@@ -126,9 +127,13 @@ export const FullArticle = (props: ArticleProps) => {
           {/*  </a>*/}
           {/*</div>*/}
           <div class="shout-stats__item">
-            <a href="#share" onClick={() => showModal('share')}>
+            <SharePopup
-              <Icon name="share" />
+              trigger={
-            </a>
+                <a href="#" onClick={(event) => event.preventDefault()}>
+                  <Icon name="share" />
+                </a>
+              }
+            />
           </div>
           {/*FIXME*/}
           {/*<Show when={canEdit()}>*/}

src/components/Article/SharePopup.tsx

@@ -0,0 +1,45 @@
+import { Icon } from '../Nav/Icon'
+import styles from '../Nav/Popup.module.scss'
+import { t } from '../../utils/intl'
+import { Popup, PopupProps } from '../Nav/Popup'
+
+type SharePopupProps = Omit<PopupProps, 'children'>
+
+export const SharePopup = (props: SharePopupProps) => {
+  return (
+    <Popup {...props}>
+      <ul class="nodash">
+        <li>
+          <a href="#">
+            <Icon name="vk-white" class={styles.icon} />
+            VK
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Icon name="facebook-white" class={styles.icon} />
+            Facebook
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Icon name="twitter-white" class={styles.icon} />
+            Twitter
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Icon name="telegram-white" class={styles.icon} />
+            Telegram
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Icon name="link-white" class={styles.icon} />
+            {t('Copy link')}
+          </a>
+        </li>
+      </ul>
+    </Popup>
+  )
+}

src/components/Author/Card.tsx

@@ -1,9 +1,8 @@
-import { For, Show } from 'solid-js/web'
 import type { Author } from '../../graphql/types.gen'
 import Userpic from './Userpic'
 import { Icon } from '../Nav/Icon'
 import style from './Card.module.scss'
-import { createMemo } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
 import { translit } from '../../utils/ru2en'
 import { t } from '../../utils/intl'
 import { useAuthStore } from '../../stores/auth'

src/components/Author/Full.tsx

@@ -2,7 +2,7 @@ import type { Author } from '../../graphql/types.gen'
 import { AuthorCard } from './Card'
 import './Full.scss'
 
-export default (props: { author: Author }) => {
+export const AuthorFull = (props: { author: Author }) => {
   return (
     <div class="container">
       <div class="row">

src/components/Author/Userpic.tsx

@@ -1,11 +1,13 @@
-import { Show } from 'solid-js/web'
+import { Show } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
 import style from './Userpic.module.scss'
+import { clsx } from 'clsx'
 
 interface UserpicProps {
   user: Author
   hasLink?: boolean
   isBig?: boolean
+  class?: string
 }
 
 export default (props: UserpicProps) => {
@@ -16,7 +18,7 @@ export default (props: UserpicProps) => {
   }
 
   return (
-    <div class={style.circlewrap} classList={{ [style.big]: props.isBig }}>
+    <div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}>
       <Show when={props.hasLink}>
         <a href={`/author/${props.user.slug}`}>
           <Show

src/components/Discours/Banner.tsx

@@ -1,7 +1,7 @@
 import styles from './Banner.module.scss'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
-import {clsx} from "clsx";
+import { clsx } from 'clsx'
 
 export default () => {
   return (

src/components/Discours/Footer.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../Nav/Icon'
 import Subscribe from './Subscribe'
 import { t } from '../../utils/intl'
 import { locale } from '../../stores/ui'
-import {clsx} from "clsx";
+import { clsx } from 'clsx'
 
 export const Footer = () => {
   const locale_title = createMemo(() => (locale() === 'ru' ? 'English' : 'Русский'))

src/components/Editor/components/Editor.module.scss

@@ -0,0 +1,7 @@
+.error {
+  display: none;
+}
+
+.markdown {
+  white-space: pre-wrap;
+}

src/components/Editor/components/Editor.tsx

@@ -3,18 +3,21 @@ import type { EditorState } from 'prosemirror-state'
 import { useState } from '../store/context'
 import { ProseMirror } from './ProseMirror'
 import '../styles/Editor.scss'
+import styles from './Editor.module.scss'
+import { clsx } from 'clsx'
 
 export const Editor = () => {
   const [store, ctrl] = useState()
   const onInit = (text: EditorState, editorView: EditorView) => ctrl.setState({ editorView, text })
   const onReconfigure = (text: EditorState) => ctrl.setState({ text })
   const onChange = (text: EditorState) => ctrl.setState({ text, lastModified: new Date() })
-  // const editorCss = (config) => css``
+
-  const style = () => (store.error ? `display: none;` : (store.markdown ? `white-space: pre-wrap;` : ''))
   return (
     <ProseMirror
-      className='editor col-md-6 shift-content'
+      cssClass={clsx('editor', 'col-md-6', 'shift-content', {
-      style={style()}
+        [styles.error]: store.error,
+        [styles.markdown]: store.markdown
+      })}
       editorView={store.editorView}
       text={store.text}
       extensions={store.extensions}

src/components/Editor/components/Error.tsx

@@ -7,13 +7,13 @@ export default () => {
   return (
     <Switch fallback={<Other />}>
       <Match when={store.error.id === 'invalid_state'}>
-        <InvalidState title='Invalid State' />
+        <InvalidState title="Invalid State" />
       </Match>
       <Match when={store.error.id === 'invalid_config'}>
-        <InvalidState title='Invalid Config' />
+        <InvalidState title="Invalid Config" />
       </Match>
       <Match when={store.error.id === 'invalid_draft'}>
-        <InvalidState title='Invalid Draft' />
+        <InvalidState title="Invalid Draft" />
       </Match>
     </Switch>
   )
@@ -24,8 +24,8 @@ const InvalidState = (props: { title: string }) => {
   const onClick = () => ctrl.clean()
 
   return (
-    <div class='error'>
+    <div class="error">
-      <div class='container'>
+      <div class="container">
         <h1>{props.title}</h1>
         <p>
           There is an error with the editor state. This is probably due to an old version in which the data
@@ -35,7 +35,7 @@ const InvalidState = (props: { title: string }) => {
         <pre>
           <code>{JSON.stringify(store.error.props)}</code>
         </pre>
-        <button class='primary' onClick={onClick}>
+        <button class="primary" onClick={onClick}>
           Clean
         </button>
       </div>
@@ -53,13 +53,13 @@ const Other = () => {
   }
 
   return (
-    <div class='error'>
+    <div class="error">
-      <div class='container'>
+      <div class="container">
         <h1>An error occurred.</h1>
         <pre>
           <code>{getMessage()}</code>
         </pre>
-        <button class='primary' onClick={onClick}>
+        <button class="primary" onClick={onClick}>
           Close
         </button>
       </div>

src/components/Editor/components/Layout.tsx

@@ -1,17 +1,19 @@
-import type { JSX } from 'solid-js/jsx-runtime';
+import type { JSX } from 'solid-js/jsx-runtime'
 import type { Config } from '../store/context'
 import '../styles/Layout.scss'
 
 export type Styled = {
-  children: JSX.Element;
+  children: JSX.Element
-  config?: Config;
+  config?: Config
-  'data-testid'?: string;
+  'data-testid'?: string
-  onClick?: () => void;
+  onClick?: () => void
-  onMouseEnter?: (e: MouseEvent) => void;
+  onMouseEnter?: (e: MouseEvent) => void
 }
 
 export const Layout = (props: Styled) => {
-  return (<div onMouseEnter={props.onMouseEnter} class='layout container' data-testid={props['data-testid']}>
+  return (
-    {props.children}
+    <div onMouseEnter={props.onMouseEnter} class="layout container" data-testid={props['data-testid']}>
-  </div>)
+      {props.children}
+    </div>
+  )
 }

src/components/Editor/components/ProseMirror.tsx

@@ -6,14 +6,13 @@ import { Schema } from 'prosemirror-model'
 import type { NodeViewFn, ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
 
 interface ProseMirrorProps {
-  style?: string;
+  cssClass?: string
-  className?: string;
+  text?: Store<ProseMirrorState>
-  text?: Store<ProseMirrorState>;
+  editorView?: Store<EditorView>
-  editorView?: Store<EditorView>;
+  extensions?: Store<ProseMirrorExtension[]>
-  extensions?: Store<ProseMirrorExtension[]>;
+  onInit: (s: EditorState, v: EditorView) => void
-  onInit: (s: EditorState, v: EditorView) => void;
+  onReconfigure: (s: EditorState) => void
-  onReconfigure: (s: EditorState) => void;
+  onChange: (s: EditorState) => void
-  onChange: (s: EditorState) => void;
 }
 
 export const ProseMirror = (props: ProseMirrorProps) => {
@@ -28,45 +27,39 @@ export const ProseMirror = (props: ProseMirrorProps) => {
     props.onChange(newState)
   }
 
-  createEffect((payload: [EditorState, ProseMirrorExtension[]]) => {
+  createEffect(
-    const [prevText, prevExtensions] = payload
+    (payload: [EditorState, ProseMirrorExtension[]]) => {
-    const text = unwrap(props.text)
+      const [prevText, prevExtensions] = payload
-    const extensions: ProseMirrorExtension[] = unwrap(props.extensions)
+      const text = unwrap(props.text)
-    if (!text || !extensions?.length) {
+      const extensions: ProseMirrorExtension[] = unwrap(props.extensions)
+      if (!text || !extensions?.length) {
+        return [text, extensions]
+      }
+
+      if (!props.editorView) {
+        const { editorState, nodeViews } = createEditorState(text, extensions)
+        const view = new EditorView(editorRef, { state: editorState, nodeViews, dispatchTransaction })
+        view.focus()
+        props.onInit(editorState, view)
+        return [editorState, extensions]
+      }
+
+      if (extensions !== prevExtensions || (!(text instanceof EditorState) && text !== prevText)) {
+        const { editorState, nodeViews } = createEditorState(text, extensions, prevText)
+        if (!editorState) return
+        editorView().updateState(editorState)
+        editorView().setProps({ nodeViews, dispatchTransaction })
+        props.onReconfigure(editorState)
+        editorView().focus()
+        return [editorState, extensions]
+      }
+
       return [text, extensions]
-    }
+    },
-
+    [props.text, props.extensions]
-    if (!props.editorView) {
-      const { editorState, nodeViews } = createEditorState(text, extensions)
-      const view = new EditorView(editorRef, { state: editorState, nodeViews, dispatchTransaction })
-      view.focus()
-      props.onInit(editorState, view)
-      return [editorState, extensions]
-    }
-
-    if (extensions !== prevExtensions || (!(text instanceof EditorState) && text !== prevText)) {
-      const { editorState, nodeViews } = createEditorState(text, extensions, prevText)
-      if (!editorState) return
-      editorView().updateState(editorState)
-      editorView().setProps({ nodeViews, dispatchTransaction })
-      props.onReconfigure(editorState)
-      editorView().focus()
-      return [editorState, extensions]
-    }
-
-    return [text, extensions]
-  },
-  [props.text, props.extensions]
   )
 
-  return (
+  return <div ref={editorRef} class={props.cssClass} spell-check={false} />
-    <div
-      style={props.style}
-      ref={editorRef}
-      class={props.className}
-      spell-check={false}
-    />
-  )
 }
 
 const createEditorState = (
@@ -74,8 +67,8 @@ const createEditorState = (
   extensions: ProseMirrorExtension[],
   prevText?: EditorState
 ): {
-  editorState: EditorState;
+  editorState: EditorState
-  nodeViews: { [key: string]: NodeViewFn };
+  nodeViews: { [key: string]: NodeViewFn }
 } => {
   const reconfigure = text instanceof EditorState && prevText?.schema
   let schemaSpec = { nodes: {} }
@@ -104,7 +97,7 @@ const createEditorState = (
     editorState = text.reconfigure({ schema, plugins } as EditorStateConfig)
   } else if (text instanceof EditorState) {
     editorState = EditorState.fromJSON({ schema, plugins }, text.toJSON())
-  } else if (text){
+  } else if (text) {
     console.debug(text)
     editorState = EditorState.fromJSON({ schema, plugins }, text)
   }

src/components/Editor/components/Sidebar.module.scss

@@ -0,0 +1,3 @@
+.withMargin {
+  margin-bottom: 10px;
+}

src/components/Editor/components/Sidebar.tsx

@@ -7,17 +7,20 @@ import * as remote from '../remote'
 import { isEmpty } from '../prosemirror/helpers'
 import type { Styled } from './Layout'
 import '../styles/Sidebar.scss'
+import { clsx } from 'clsx'
+import styles from './Sidebar.module.scss'
 
-const Off = (props) => <div class='sidebar-off'>{props.children}</div>
+const Off = (props) => <div class="sidebar-off">{props.children}</div>
 
-const Label = (props: Styled) => <h3 class='sidebar-label'>{props.children}</h3>
+const Label = (props: Styled) => <h3 class="sidebar-label">{props.children}</h3>
 
 const Link = (
   props: Styled & { withMargin?: boolean; disabled?: boolean; title?: string; className?: string }
 ) => (
   <button
-    class={`sidebar-link${props.className ? ' ' + props.className : ''}`}
+    class={clsx('sidebar-link', props.className, {
-    style={{ "margin-bottom": props.withMargin ? '10px' : '' }}
+      [styles.withMargin]: props.withMargin
+    })}
     onClick={props.onClick}
     disabled={props.disabled}
     title={props.title}
@@ -34,22 +37,46 @@ export const Sidebar = () => {
     document.body.classList.toggle('dark')
     ctrl.updateConfig({ theme: document.body.className })
   }
-  const collabText = () => (store.collab?.started ? 'Stop' : (store.collab?.error ? 'Restart 🚨' : 'Start'))
+  const collabText = () => {
+    if (store.collab?.started) {
+      return 'Stop'
+    }
+
+    if (store.collab?.error) {
+      return 'Restart 🚨'
+    }
+
+    return 'Start'
+  }
+
+  const discardText = () => {
+    if (store.path) {
+      return 'Close'
+    }
+
+    if (store.drafts.length > 0 && isEmpty(store.text)) {
+      return 'Delete ⚠️'
+    }
+
+    return 'Clear'
+  }
+
   const editorView = () => unwrap(store.editorView)
   const onToggleMarkdown = () => ctrl.toggleMarkdown()
   const onOpenDraft = (draft: Draft) => ctrl.openDraft(unwrap(draft))
   const collabUsers = () => store.collab?.y?.provider.awareness.meta.size ?? 0
   const onUndo = () => undo(editorView().state, editorView().dispatch)
   const onRedo = () => redo(editorView().state, editorView().dispatch)
-  const onCopyAllAsMd = () => remote.copyAllAsMarkdown(editorView().state).then(() => setLastAction('copy-md'))
+  const onCopyAllAsMd = () =>
+    remote.copyAllAsMarkdown(editorView().state).then(() => setLastAction('copy-md'))
   const onDiscard = () => ctrl.discard()
   const [isHidden, setIsHidden] = createSignal<boolean | false>()
 
   const toggleSidebar = () => {
-    setIsHidden(!isHidden());
+    setIsHidden(!isHidden())
   }
 
-  toggleSidebar();
+  toggleSidebar()
 
   const onCollab = () => {
     const state = unwrap(store)
@@ -84,11 +111,13 @@ export const Sidebar = () => {
     }
 
     const text = () =>
-      p.draft.path ? p.draft.path.slice(Math.max(0, p.draft.path.length - length)) : getContent(p.draft.text?.doc)
+      p.draft.path
+        ? p.draft.path.slice(Math.max(0, p.draft.path.length - length))
+        : getContent(p.draft.text?.doc)
 
     return (
       // eslint-disable-next-line solid/no-react-specific-props
-      <Link className='draft' onClick={() => onOpenDraft(p.draft)} data-testid='open'>
+      <Link className="draft" onClick={() => onOpenDraft(p.draft)} data-testid="open">
         {text()} {p.draft.path && '📎'}
       </Link>
     )
@@ -96,9 +125,7 @@ export const Sidebar = () => {
 
   const Keys = (props) => (
     <span>
-      <For each={props.keys}>{(k: Element) => (
+      <For each={props.keys}>{(k: Element) => <i>{k}</i>}</For>
-        <i>{k}</i>
-      )}</For>
     </span>
   )
 
@@ -116,10 +143,12 @@ export const Sidebar = () => {
 
   return (
     <div class={'sidebar-container' + (isHidden() ? ' sidebar-container--hidden' : '')}>
-      <span class='sidebar-opener' onClick={toggleSidebar}>Советы и&nbsp;предложения</span>
+      <span class="sidebar-opener" onClick={toggleSidebar}>
+        Советы и&nbsp;предложения
+      </span>
 
       <Off onClick={() => editorView().focus()}>
-        <div class='sidebar-closer' onClick={toggleSidebar}/>
+        <div class="sidebar-closer" onClick={toggleSidebar} />
         <Show when={true}>
           <div>
             {store.path && (
@@ -127,28 +156,21 @@ export const Sidebar = () => {
                 <i>({store.path.slice(Math.max(0, store.path.length - 24))})</i>
               </Label>
             )}
-            <Link>
+            <Link>Пригласить соавторов</Link>
-              Пригласить соавторов
+            <Link>Настройки публикации</Link>
-            </Link>
+            <Link>История правок</Link>
-            <Link>
-              Настройки публикации
-            </Link>
-            <Link>
-              История правок
-            </Link>
 
-            <div class='theme-switcher'>
+            <div class="theme-switcher">
               Ночная тема
-              <input type='checkbox' name='theme' id='theme' onClick={toggleTheme} />
+              <input type="checkbox" name="theme" id="theme" onClick={toggleTheme} />
-              <label for='theme'>Ночная тема</label>
+              <label for="theme">Ночная тема</label>
             </div>
             <Link
               onClick={onDiscard}
               disabled={!store.path && store.drafts.length === 0 && isEmpty(store.text)}
-              data-testid='discard'
+              data-testid="discard"
             >
-              {store.path ? 'Close' : (store.drafts.length > 0 && isEmpty(store.text) ? 'Delete ⚠️' : 'Clear')}{' '}
+              {discardText()} <Keys keys={[mod, 'w']} />
-              <Keys keys={[mod, 'w']} />
             </Link>
             <Link onClick={onUndo}>
               Undo <Keys keys={[mod, 'z']} />
@@ -156,7 +178,7 @@ export const Sidebar = () => {
             <Link onClick={onRedo}>
               Redo <Keys keys={[mod, 'Shift', 'z']} />
             </Link>
-            <Link onClick={onToggleMarkdown} data-testid='markdown'>
+            <Link onClick={onToggleMarkdown} data-testid="markdown">
               Markdown mode {store.markdown && '✅'} <Keys keys={[mod, 'm']} />
             </Link>
             <Link onClick={onCopyAllAsMd}>Copy all as MD {lastAction() === 'copy-md' && '📋'}</Link>

src/components/Editor/markdown.ts

@@ -1,5 +1,10 @@
 import markdownit from 'markdown-it'
-import { MarkdownSerializer, MarkdownParser, defaultMarkdownSerializer, MarkdownSerializerState } from 'prosemirror-markdown'
+import {
+  MarkdownSerializer,
+  MarkdownParser,
+  defaultMarkdownSerializer,
+  MarkdownSerializerState
+} from 'prosemirror-markdown'
 import type { Node, Schema } from 'prosemirror-model'
 import type { EditorState } from 'prosemirror-state'
 
@@ -12,7 +17,6 @@ export const serialize = (state: EditorState) => {
   return text
 }
 
-
 function findAlignment(cell: Node): string | null {
   const alignment = cell.attrs.style as string
   if (!alignment) {

src/components/Editor/prosemirror/extension/base.ts

@@ -36,13 +36,13 @@ export default (plain = false): ProseMirrorExtension => ({
   schema: () =>
     plain
       ? {
-        nodes: plainSchema.spec.nodes,
+          nodes: plainSchema.spec.nodes,
-        marks: plainSchema.spec.marks
+          marks: plainSchema.spec.marks
-      }
+        }
       : {
-        nodes: (markdownSchema.spec.nodes as OrderedMap<NodeSpec>).update('blockquote', blockquoteSchema),
+          nodes: (markdownSchema.spec.nodes as OrderedMap<NodeSpec>).update('blockquote', blockquoteSchema),
-        marks: markdownSchema.spec.marks
+          marks: markdownSchema.spec.marks
-      },
+        },
   plugins: (prev, schema) => [
     ...prev,
     keymap({

src/components/Editor/prosemirror/extension/code.ts

@@ -10,26 +10,26 @@ const blank = '\u00A0'
 
 const onArrow =
   (dir: 'left' | 'right') =>
-    (state: EditorState, dispatch: (tr: Transaction) => void, editorView: EditorView) => {
+  (state: EditorState, dispatch: (tr: Transaction) => void, editorView: EditorView) => {
-      if (!state.selection.empty) return false
+    if (!state.selection.empty) return false
-      const $pos = state.selection.$head
+    const $pos = state.selection.$head
-      const isCode = $pos.marks().find((m: Mark) => m.type.name === 'code')
+    const isCode = $pos.marks().find((m: Mark) => m.type.name === 'code')
-      const tr = state.tr
+    const tr = state.tr
 
-      if (dir === 'left') {
+    if (dir === 'left') {
-        const up = editorView.endOfTextblock('up')
+      const up = editorView.endOfTextblock('up')
-        if (!$pos.nodeBefore && up && isCode) {
+      if (!$pos.nodeBefore && up && isCode) {
-          tr.insertText(blank, $pos.pos - 1, $pos.pos)
+        tr.insertText(blank, $pos.pos - 1, $pos.pos)
-          dispatch(tr)
+        dispatch(tr)
-        }
+      }
-      } else {
+    } else {
-        const down = editorView.endOfTextblock('down')
+      const down = editorView.endOfTextblock('down')
-        if (!$pos.nodeAfter && down && isCode) {
+      if (!$pos.nodeAfter && down && isCode) {
-          tr.insertText(blank, $pos.pos, $pos.pos + 1)
+        tr.insertText(blank, $pos.pos, $pos.pos + 1)
-          dispatch(tr)
+        dispatch(tr)
-        }
       }
     }
+  }
 
 const codeKeymap = {
   ArrowLeft: onArrow('left'),

src/components/Editor/prosemirror/extension/collab.ts

@@ -2,7 +2,11 @@ import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from 'y-prosemirror'
 import type { ProseMirrorExtension } from '../helpers'
 import type { YOptions } from '../../store/context'
 
-interface YUser { background: string, foreground: string, name: string }
+interface YUser {
+  background: string
+  foreground: string
+  name: string
+}
 
 export const cursorBuilder = (user: YUser): HTMLElement => {
   const cursor = document.createElement('span')
@@ -19,10 +23,10 @@ export default (y: YOptions): ProseMirrorExtension => ({
   plugins: (prev) =>
     y
       ? [
-        ...prev,
+          ...prev,
-        ySyncPlugin(y.type),
+          ySyncPlugin(y.type),
-        yCursorPlugin(y.provider.awareness, { cursorBuilder }),
+          yCursorPlugin(y.provider.awareness, { cursorBuilder }),
-        yUndoPlugin()
+          yUndoPlugin()
-      ]
+        ]
       : prev
 })

src/components/Editor/prosemirror/extension/menu.ts

@@ -14,7 +14,7 @@ import {
 } from 'prosemirror-menu'
 
 import { wrapInList } from 'prosemirror-schema-list'
-import type{ NodeSelection } from 'prosemirror-state'
+import type { NodeSelection } from 'prosemirror-state'
 
 import { TextField, openPrompt } from './prompt'
 import type { ProseMirrorExtension } from '../helpers'
@@ -22,7 +22,6 @@ import type { Schema } from 'prosemirror-model'
 
 // Helpers to create specific types of items
 
-
 const cut = (something) => something.filter(Boolean)
 
 function canInsert(state, nodeType) {
@@ -45,7 +44,11 @@ function insertImageItem(nodeType) {
       return canInsert(state, nodeType)
     },
     run(state, _, view) {
-      const { from, to, node: { attrs } } = state.selection as NodeSelection
+      const {
+        from,
+        to,
+        node: { attrs }
+      } = state.selection as NodeSelection
 
       openPrompt({
         title: 'Insert image',
@@ -78,7 +81,9 @@ function cmdItem(cmd, options) {
 
   for (const prop in options) passedOptions[prop] = options[prop]
 
-  if ((!options.enable || options.enable === true) && !options.select) { passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state) }
+  if ((!options.enable || options.enable === true) && !options.select) {
+    passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state)
+  }
 
   return new MenuItem(passedOptions)
 }
@@ -130,7 +135,7 @@ function linkItem(markType) {
           href: new TextField({
             label: 'Link target',
             required: true
-          }),
+          })
         },
         callback(attrs) {
           toggleMark(markType, attrs)(view.state, view.dispatch)
@@ -214,7 +219,7 @@ export function buildMenuItems(schema: Schema<any, any>) {
       icon: {
         width: 13,
         height: 16,
-        path: "M9.82857 7.76C10.9371 6.99429 11.7143 5.73714 11.7143 4.57143C11.7143 1.98857 9.71428 0 7.14286 0H0V16H8.04571C10.4343 16 12.2857 14.0571 12.2857 11.6686C12.2857 9.93143 11.3029 8.44571 9.82857 7.76ZM3.42799 2.85708H6.85656C7.80513 2.85708 8.57085 3.6228 8.57085 4.57137C8.57085 5.51994 7.80513 6.28565 6.85656 6.28565H3.42799V2.85708ZM3.42799 13.1429H7.42799C8.37656 13.1429 9.14228 12.3772 9.14228 11.4286C9.14228 10.4801 8.37656 9.71434 7.42799 9.71434H3.42799V13.1429Z"
+        path: 'M9.82857 7.76C10.9371 6.99429 11.7143 5.73714 11.7143 4.57143C11.7143 1.98857 9.71428 0 7.14286 0H0V16H8.04571C10.4343 16 12.2857 14.0571 12.2857 11.6686C12.2857 9.93143 11.3029 8.44571 9.82857 7.76ZM3.42799 2.85708H6.85656C7.80513 2.85708 8.57085 3.6228 8.57085 4.57137C8.57085 5.51994 7.80513 6.28565 6.85656 6.28565H3.42799V2.85708ZM3.42799 13.1429H7.42799C8.37656 13.1429 9.14228 12.3772 9.14228 11.4286C9.14228 10.4801 8.37656 9.71434 7.42799 9.71434H3.42799V13.1429Z'
       }
     })
   }
@@ -225,7 +230,7 @@ export function buildMenuItems(schema: Schema<any, any>) {
       icon: {
         width: 14,
         height: 16,
-        path: "M4.39216 0V3.42857H6.81882L3.06353 12.5714H0V16H8.78431V12.5714H6.35765L10.1129 3.42857H13.1765V0H4.39216Z"
+        path: 'M4.39216 0V3.42857H6.81882L3.06353 12.5714H0V16H8.78431V12.5714H6.35765L10.1129 3.42857H13.1765V0H4.39216Z'
       }
     })
   }
@@ -320,17 +325,16 @@ export function buildMenuItems(schema: Schema<any, any>) {
     })
   }
 
-  r.typeMenu = new Dropdown(
+  r.typeMenu = new Dropdown(cut([r.makeHead1, r.makeHead2, r.makeHead3, r.typeMenu, r.wrapBlockQuote]), {
-    cut([r.makeHead1, r.makeHead2, r.makeHead3, r.typeMenu, r.wrapBlockQuote]),
+    label: 'Тт',
-    { label: 'Тт',
+    class: 'editor-dropdown' // TODO: use this class
-      class: 'editor-dropdown' // TODO: use this class
+    // FIXME: icon svg code shouldn't be here
-      // FIXME: icon svg code shouldn't be here
+    // icon: {
-      // icon: {
+    //  width: 12,
-      //  width: 12,
+    //  height: 12,
-      //  height: 12,
+    //  path: "M6.39999 3.19998V0H20.2666V3.19998H14.9333V15.9999H11.7333V3.19998H6.39999ZM3.19998 8.5334H0V5.33342H9.59994V8.5334H6.39996V16H3.19998V8.5334Z"
-      //  path: "M6.39999 3.19998V0H20.2666V3.19998H14.9333V15.9999H11.7333V3.19998H6.39999ZM3.19998 8.5334H0V5.33342H9.59994V8.5334H6.39996V16H3.19998V8.5334Z"
+    // }
-      // }
+  }) as MenuItem
-    }) as MenuItem
   r.blockMenu = []
   r.listMenu = [cut([r.wrapBulletList, r.wrapOrderedList])]
   r.inlineMenu = [cut([r.toggleStrong, r.toggleEm, r.toggleMark])]

src/components/Editor/prosemirror/extension/selection.ts

@@ -1,60 +1,54 @@
-import { renderGrouped } from "prosemirror-menu";
+import { renderGrouped } from 'prosemirror-menu'
-import { Plugin } from "prosemirror-state";
+import { Plugin } from 'prosemirror-state'
-import type { ProseMirrorExtension } from "../helpers";
+import type { ProseMirrorExtension } from '../helpers'
-import { buildMenuItems } from "./menu";
+import { buildMenuItems } from './menu'
 
 export class SelectionTooltip {
-  tooltip: any;
+  tooltip: any
 
   constructor(view: any, schema: any) {
-    this.tooltip = document.createElement("div");
+    this.tooltip = document.createElement('div')
-    this.tooltip.className = "tooltip";
+    this.tooltip.className = 'tooltip'
-    view.dom.parentNode.appendChild(this.tooltip);
+    view.dom.parentNode.appendChild(this.tooltip)
-    const { dom } = renderGrouped(view, buildMenuItems(schema).fullMenu as any);
+    const { dom } = renderGrouped(view, buildMenuItems(schema).fullMenu as any)
-    this.tooltip.appendChild(dom);
+    this.tooltip.appendChild(dom)
-    this.update(view, null);
+    this.update(view, null)
   }
 
   update(view: any, lastState: any) {
-    const state = view.state;
+    const state = view.state
-    if (
+    if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
-      lastState &&
+      return
-      lastState.doc.eq(state.doc) &&
-      lastState.selection.eq(state.selection)
-    )
-    {return;}
-
-    if (state.selection.empty) {
-      this.tooltip.style.display = "none";
-      return;
     }
 
-    this.tooltip.style.display = "";
+    if (state.selection.empty) {
-    const { from, to } = state.selection;
+      this.tooltip.style.display = 'none'
+      return
+    }
+
+    this.tooltip.style.display = ''
+    const { from, to } = state.selection
     const start = view.coordsAtPos(from),
-      end = view.coordsAtPos(to);
+      end = view.coordsAtPos(to)
-    const box = this.tooltip.offsetParent.getBoundingClientRect();
+    const box = this.tooltip.offsetParent.getBoundingClientRect()
-    const left = Math.max((start.left + end.left) / 2, start.left + 3);
+    const left = Math.max((start.left + end.left) / 2, start.left + 3)
-    this.tooltip.style.left = left - box.left + "px";
+    this.tooltip.style.left = left - box.left + 'px'
-    this.tooltip.style.bottom = box.bottom - (start.top + 15) + "px";
+    this.tooltip.style.bottom = box.bottom - (start.top + 15) + 'px'
   }
 
   destroy() {
-    this.tooltip.remove();
+    this.tooltip.remove()
   }
 }
 
 export function toolTip(schema: any) {
   return new Plugin({
     view(editorView: any) {
-      return new SelectionTooltip(editorView, schema);
+      return new SelectionTooltip(editorView, schema)
-    },
+    }
-  });
+  })
 }
 
 export default (): ProseMirrorExtension => ({
-  plugins: (prev, schema) => [
+  plugins: (prev, schema) => [...prev, toolTip(schema)]
-    ...prev,
-    toolTip(schema)
-  ]
 })

src/components/Editor/prosemirror/extension/table.ts

@@ -10,7 +10,7 @@ export const tableInputRule = (schema: Schema) =>
     new RegExp('^\\|{2,}\\s$'),
     (state: EditorState, match: string[], start: number, end: number) => {
       const tr = state.tr
-      const columns = Array.from({length: match[0].trim().length - 1})
+      const columns = Array.from({ length: match[0].trim().length - 1 })
       const headers = columns.map(() => schema.node(schema.nodes.table_header, {}))
       const cells = columns.map(() => schema.node(schema.nodes.table_cell, {}))
       const table = schema.node(schema.nodes.table, {}, [

src/components/Editor/prosemirror/extension/todo-list.ts

@@ -1,6 +1,13 @@
-import { DOMOutputSpec, DOMSerializer, Node as ProsemirrorNode, NodeSpec, NodeType, Schema } from 'prosemirror-model'
+import {
+  DOMOutputSpec,
+  DOMSerializer,
+  Node as ProsemirrorNode,
+  NodeSpec,
+  NodeType,
+  Schema
+} from 'prosemirror-model'
 import type { EditorView } from 'prosemirror-view'
-import { wrappingInputRule , inputRules } from 'prosemirror-inputrules'
+import { wrappingInputRule, inputRules } from 'prosemirror-inputrules'
 import { splitListItem } from 'prosemirror-schema-list'
 import { keymap } from 'prosemirror-keymap'
 import type { NodeViewFn, ProseMirrorExtension } from '../helpers'
@@ -59,8 +66,8 @@ class TodoItemView {
     this.dom = res.dom
     this.contentDOM = res.contentDOM
     this.view = view
-    this.getPos = getPos;
+    this.getPos = getPos
-    (this.dom as HTMLElement).querySelector('input').addEventListener('click', this.handleClick.bind(this))
+    ;(this.dom as HTMLElement).querySelector('input').addEventListener('click', this.handleClick.bind(this))
   }
 
   handleClick(e: MouseEvent) {
@@ -90,5 +97,5 @@ export default (): ProseMirrorExtension => ({
     todo_item: (node: ProsemirrorNode, view: EditorView, getPos: () => number) => {
       return new TodoItemView(node, view, getPos)
     }
-  } as unknown as { [key:string]: NodeViewFn }
+  } as unknown as { [key: string]: NodeViewFn }
 })

src/components/Editor/prosemirror/helpers.ts

@@ -3,9 +3,9 @@ import type { Node, Schema, SchemaSpec } from 'prosemirror-model'
 import type { Decoration, EditorView, NodeView } from 'prosemirror-view'
 
 export interface ProseMirrorExtension {
-  schema?: (prev: SchemaSpec) => SchemaSpec;
+  schema?: (prev: SchemaSpec) => SchemaSpec
-  plugins?: (prev: Plugin[], schema: Schema) => Plugin[];
+  plugins?: (prev: Plugin[], schema: Schema) => Plugin[]
-  nodeViews?: { [key: string]: NodeViewFn };
+  nodeViews?: { [key: string]: NodeViewFn }
 }
 
 export type ProseMirrorState = EditorState | unknown

src/components/Editor/prosemirror/p2p.ts

@@ -5,7 +5,11 @@ import { Doc, XmlFragment } from 'yjs'
 // import type { Reaction } from '../../../graphql/types.gen'
 // import { setReactions } from '../../../stores/editor'
 
-export const roomConnect = (room: string, username = '', keyname = 'collab'): [XmlFragment, WebrtcProvider] => {
+export const roomConnect = (
+  room: string,
+  username = '',
+  keyname = 'collab'
+): [XmlFragment, WebrtcProvider] => {
   const ydoc = new Doc()
   // const yarr = ydoc.getArray(keyname + '-reactions')
   // TODO: use reactions

src/components/Editor/prosemirror/setup.ts

@@ -25,15 +25,16 @@ const customKeymap = (props: ExtensionsProps): ProseMirrorExtension => ({
 })
 
 export const createExtensions = (props: ExtensionsProps): ProseMirrorExtension[] => {
-  const eee = [
+  const extensions = [
     placeholder(t('Just start typing...')),
     customKeymap(props),
     base(props.markdown),
     selectionMenu(),
     scrollPlugin(props.config?.typewriterMode)
   ]
+
   if (props.markdown) {
-    eee.push(
+    extensions.push(
       markdown(),
       todoList(),
       dragHandle(),
@@ -54,8 +55,12 @@ export const createExtensions = (props: ExtensionsProps): ProseMirrorExtension[]
         */
     )
   }
-  if (props.collab?.room) eee.push(collab(props.y))
+
-  return eee
+  if (props.collab?.room) {
+    extensions.push(collab(props.y))
+  }
+
+  return extensions
 }
 
 export const createEmptyText = () => ({

src/components/Editor/store/actions.ts

@@ -11,12 +11,12 @@ import { mod } from '../env'
 import { serialize, createMarkdownParser } from '../markdown'
 import db from '../db'
 import { isEmpty, isInitialized } from '../prosemirror/helpers'
+import { useRouter } from '../../../stores/router'
 
 const isText = (x) => x && x.doc && x.selection
 const isState = (x) => typeof x.lastModified !== 'string' && Array.isArray(x.drafts || [])
 const isDraft = (x): boolean => x && (x.text || x.path)
 
-
 export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
   const [store, setState] = createStore(initial)
 
@@ -54,8 +54,6 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
     return true
   }
 
-
-
   const toggleMarkdown = () => {
     const state = unwrap(store)
     const editorState = store.text as EditorState
@@ -65,7 +63,9 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
 
     if (markdown) {
       const lines = serialize(editorState).split('\n')
-      const nodes = lines.map((text) => text ? { type: 'paragraph', content: [{ type: 'text', text }] } : { type: 'paragraph' })
+      const nodes = lines.map((text) =>
+        text ? { type: 'paragraph', content: [{ type: 'text', text }] } : { type: 'paragraph' }
+      )
 
       doc = { type: 'doc', content: nodes }
     } else {
@@ -178,7 +178,8 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
 
   const fetchData = async (): Promise<State> => {
     const state: State = unwrap(store)
-    const room = window.location.pathname?.slice(1).trim()
+    const { searchParams } = useRouter<{ room: string }>()
+    const room = searchParams().room
     const args = { room: room ?? undefined }
     const data = await db.get('state')
     let parsed: State
@@ -275,26 +276,27 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
     })
   }
 
-  const saveState = () => debounce(async (state: State) => {
+  const saveState = () =>
-    const data: State = {
+    debounce(async (state: State) => {
-      lastModified: state.lastModified,
+      const data: State = {
-      drafts: state.drafts,
+        lastModified: state.lastModified,
-      config: state.config,
+        drafts: state.drafts,
-      path: state.path,
+        config: state.config,
-      markdown: state.markdown,
+        path: state.path,
-      collab: {
+        markdown: state.markdown,
-        room: state.collab?.room
+        collab: {
+          room: state.collab?.room
+        }
       }
-    }
 
-    if (isInitialized(state.text)) {
+      if (isInitialized(state.text)) {
-      data.text = store.editorView.state.toJSON()
+        data.text = store.editorView.state.toJSON()
-    } else if (state.text) {
+      } else if (state.text) {
-      data.text = state.text
+        data.text = state.text
-    }
+      }
 
-    db.set('state', JSON.stringify(data))
+      db.set('state', JSON.stringify(data))
-  }, 200)
+    }, 200)
 
   const setFullscreen = (fullscreen: boolean) => {
     setState({ fullscreen })
@@ -309,7 +311,8 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
   const doStartCollab = async (state: State): Promise<State> => {
     const backup = state.args?.room && state.collab?.room !== state.args.room
     const room = state.args?.room ?? uuidv4()
-    window.history.replaceState(null, '', `/${room}`)
+    const { changeSearchParam } = useRouter<{ room: string }>()
+    changeSearchParam('room', room, true)
 
     const { roomConnect } = await import('../prosemirror/p2p')
     const [type, provider] = roomConnect(room)
@@ -380,7 +383,7 @@ export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
   }
 
   const updateTheme = () => {
-    const { theme }  = getTheme(unwrap(store))
+    const { theme } = getTheme(unwrap(store))
     setState('config', { theme })
   }
 

src/components/Editor/store/context.ts

@@ -19,65 +19,65 @@ export interface ExtensionsProps {
   typewriterMode?: boolean
 }
 export interface Args {
-  cwd?: string;
+  cwd?: string
-  draft?: string;
+  draft?: string
-  room?: string;
+  room?: string
-  text?: any;
+  text?: any
 }
 
 export interface PrettierConfig {
-  printWidth: number;
+  printWidth: number
-  tabWidth: number;
+  tabWidth: number
-  useTabs: boolean;
+  useTabs: boolean
-  semi: boolean;
+  semi: boolean
-  singleQuote: boolean;
+  singleQuote: boolean
 }
 
 export interface Config {
-  theme: string;
+  theme: string
   // codeTheme: string;
-  font: string;
+  font: string
-  fontSize: number;
+  fontSize: number
-  contentWidth: number;
+  contentWidth: number
-  typewriterMode: boolean;
+  typewriterMode: boolean
-  prettier: PrettierConfig;
+  prettier: PrettierConfig
 }
 
 export interface ErrorObject {
-  id: string;
+  id: string
-  props?: unknown;
+  props?: unknown
 }
 
 export interface YOptions {
-  type: XmlFragment;
+  type: XmlFragment
-  provider: WebrtcProvider;
+  provider: WebrtcProvider
 }
 
 export interface Collab {
-  started?: boolean;
+  started?: boolean
-  error?: boolean;
+  error?: boolean
-  room?: string;
+  room?: string
-  y?: YOptions;
+  y?: YOptions
 }
 
 export type LoadingType = 'loading' | 'initialized'
 
 export interface State {
   isMac?: boolean
-  text?: ProseMirrorState;
+  text?: ProseMirrorState
-  editorView?: EditorView;
+  editorView?: EditorView
-  extensions?: ProseMirrorExtension[];
+  extensions?: ProseMirrorExtension[]
-  markdown?: boolean;
+  markdown?: boolean
-  lastModified?: Date;
+  lastModified?: Date
-  drafts: Draft[];
+  drafts: Draft[]
-  config: Config;
+  config: Config
-  error?: ErrorObject;
+  error?: ErrorObject
-  loading?: LoadingType;
+  loading?: LoadingType
-  fullscreen?: boolean;
+  fullscreen?: boolean
-  collab?: Collab;
+  collab?: Collab
-  path?: string;
+  path?: string
-  args?: Args;
+  args?: Args
-  keymap?: { [key: string]: Command; }
+  keymap?: { [key: string]: Command }
 }
 
 export interface Draft {
@@ -91,7 +91,7 @@ export interface Draft {
 
 export interface EditorActions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key:string]: any
+  [key: string]: any
 }
 
 export class ServiceError extends Error {

src/components/Editor/styles/ArticlesList.scss

@@ -10,6 +10,7 @@
 
 .article__title {
   @include font-size(2.4rem);
+
   line-height: 1.25;
 }
 
@@ -31,10 +32,11 @@
 }
 
 .article__controls {
+  @include font-size(1.4rem);
+
   align-content: baseline;
   display: flex;
   flex-wrap: wrap;
-  @include font-size(1.4rem);
   padding-top: 2em;
 }
 

src/components/Editor/styles/Button.scss

@@ -8,14 +8,14 @@ button {
   align-items: center;
   outline: none;
   text-decoration: none;
-  font-family: 'JetBrains Mono';
+  background: none;
+  font-family: inherit;
+  color: var(--foreground);
+  border: 1px solid var(--foreground);
+
   &:hover {
     opacity: 0.8;
   }
-  background: none;
-  font-family: 'Muller';
-  color: var(--foreground);
-  border: 1px solid var(--foreground);
 }
 
 button.primary {

src/components/Editor/styles/Editor.scss

@@ -1,13 +1,9 @@
-.main-content {
-  padding-top: 80px;
-}
-
 .editor {
   flex: 1;
   padding-top: 1em;
 
   a {
-    color: rgb(0, 100, 200);
+    color: rgb(0 100 200);
     text-decoration: none;
   }
 
@@ -16,7 +12,7 @@
   }
 
   a:visited {
-    color: rgb(0, 80, 160);
+    color: rgb(0 80 160);
   }
 }
 
@@ -32,7 +28,7 @@ textarea {
   font-size: inherit;
   -webkit-padding: 0.4em 0;
   padding: 0.4em;
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
   box-sizing: border-box;
   border: 1px solid #ccc;
   border-radius: 2px;
@@ -66,7 +62,6 @@ button:focus {
   position: relative;
   word-wrap: break-word;
   white-space: pre-wrap;
-  -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
   outline: none;
   margin: 1em 1em 1em 0;
@@ -121,12 +116,14 @@ button:focus {
   blockquote {
     border-left: 2px solid;
     @include font-size(1.6rem);
+
     margin: 1.5em 0;
     padding-left: 1.6em;
   }
 }
 
 .ProseMirror-menuitem {
+  display: flex;
   font-size: small;
 
   &:hover {
@@ -157,15 +154,10 @@ button:focus {
 }
 
 .ProseMirror-tooltip .ProseMirror-menu {
-  width: -webkit-fit-content;
   width: fit-content;
   white-space: pre;
 }
 
-.ProseMirror-menuitem {
-  display: flex;
-}
-
 .ProseMirror-menuseparator {
   border-right: 1px solid #ddd;
 }
@@ -189,11 +181,11 @@ button:focus {
   position: relative;
 }
 
-.ProseMirror-menu-dropdown:after {
+.ProseMirror-menu-dropdown::after {
   content: '';
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid currentColor;
+  border-top: 4px solid currentcolor;
   opacity: 0.6;
   position: absolute;
   right: 4px;
@@ -211,6 +203,7 @@ button:focus {
 
 .ProseMirror-menu-dropdown-menu {
   z-index: 15;
+
   /* min-width: 6em; */
 }
 
@@ -228,11 +221,11 @@ button:focus {
   margin-right: -4px;
 }
 
-.ProseMirror-menu-submenu-label:after {
+.ProseMirror-menu-submenu-label::after {
   content: '';
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
-  border-left: 4px solid currentColor;
+  border-left: 4px solid currentcolor;
   opacity: 0.6;
   position: absolute;
   right: 4px;
@@ -273,7 +266,6 @@ button:focus {
   border-bottom: 1px solid silver;
   background: white;
   z-index: 10;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
   overflow: visible;
 }
@@ -288,7 +280,7 @@ button:focus {
 }
 
 .ProseMirror-icon svg {
-  fill: currentColor;
+  fill: currentcolor;
   height: 1em;
 }
 
@@ -308,10 +300,6 @@ button:focus {
   background: transparent;
 }
 
-.ProseMirror-hideselection *::-moz-selection {
-  background: transparent;
-}
-
 .ProseMirror-hideselection {
   caret-color: transparent;
 }
@@ -325,7 +313,7 @@ li.ProseMirror-selectednode {
   outline: none;
 }
 
-li.ProseMirror-selectednode:after {
+li.ProseMirror-selectednode::after {
   content: '';
   position: absolute;
   left: -32px;
@@ -355,7 +343,7 @@ li.ProseMirror-selectednode:after {
 
 .ProseMirror-prompt {
   background: #fff;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
   font-size: 0.7em;
   position: absolute;
 }
@@ -400,7 +388,7 @@ li.ProseMirror-selectednode:after {
 
 .tooltip {
   background: #fff;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
   color: #000;
   display: flex;
   position: absolute;

src/components/Editor/styles/Error.scss

@@ -3,8 +3,8 @@
   overflow: y-auto;
   padding: 50px;
   display: flex;
-  font-family: 'JetBrains Mono';
   justify-content: center;
+
   ::-webkit-scrollbar {
     display: none;
   }
@@ -17,7 +17,7 @@
 }
 
 .error pre {
-  background: var(--foreground) 19;
+  background: var(--foreground);
   border: 1px solid var(--foreground);
   white-space: pre-wrap;
   word-wrap: break-word;

src/components/Editor/styles/Layout.scss

@@ -1,6 +1,5 @@
 .layout {
   display: flex;
-  font-family: 'Muller';
   font-size: 18px;
   background: var(--background);
   color: var(--foreground);
@@ -12,7 +11,7 @@
     color: var(--background);
     border-color: var(--foreground);
   }
-  
+
   .drop-cursor {
     height: 2px !important;
     opacity: 0.5;

src/components/Editor/styles/Sidebar.scss

@@ -1,7 +1,7 @@
 .sidebar-container {
-  color: rgba(255,255,255,0.5);
+  color: rgb(255 255 255 / 50%);
-  font-family: 'Muller';
   @include font-size(1.6rem);
+
   overflow: hidden;
   position: relative;
   top: 0;
@@ -9,6 +9,19 @@
   p {
     color: var(--foreground);
   }
+
+  h4 {
+    @include font-size(120%);
+
+    margin-left: 1rem;
+  }
+
+  button {
+    height: auto;
+    min-height: 50px;
+    padding: 0 1rem;
+    width: 100%;
+  }
 }
 
 .sidebar-off {
@@ -44,7 +57,7 @@
     opacity: 0.5;
   }
 
-  &:after {
+  &::after {
     background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1090_23825' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='4' height='4'%3E%3Crect y='14.8237' width='3.17647' height='3.17647' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1090_23825)'%3E%3Cpath d='M16.0941 1.05908H0.847027C0.379194 1.05908 0 1.43828 0 1.90611V18.0003L3.38824 14.612H16.0942C16.562 14.612 16.9412 14.2328 16.9412 13.765V1.90614C16.9412 1.43831 16.562 1.05912 16.0942 1.05912L16.0941 1.05908ZM15.2471 12.9179H1.69412V2.7532H15.2471V12.9179Z' fill='black'/%3E%3C/g%3E%3Crect x='1' y='1' width='16' height='12.8235' stroke='black' stroke-width='2'/%3E%3Crect x='4.23535' y='3.17627' width='9.52941' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='9.5293' width='7.41176' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='6.35303' width='5.29412' height='2.11765' fill='black'/%3E%3C/svg%3E");
     content: '';
     height: 18px;
@@ -73,7 +86,8 @@
 }
 
 .sidebar-label {
-  color: var(--foreground) #7f7f7f;
+  color: var(--foreground);
+
   > i {
     text-transform: none;
   }
@@ -83,16 +97,15 @@
   margin: 10px 0;
   margin-bottom: 30px;
 }
+
 .sidebar-container button,
 .sidebar-container a,
 .sidebar-item {
-  text-align: left;
   margin: 0;
   outline: none;
   display: flex;
   align-items: center;
   line-height: 24px;
-  font-family: 'Muller';
   text-align: left;
 }
 
@@ -103,20 +116,6 @@
   width: 100%;
 }
 
-.sidebar-container {
-  h4 {
-    @include font-size(120%);
-    margin-left: 1rem;
-  }
-
-  button {
-    height: auto;
-    min-height: 50px;
-    padding: 0 1rem;
-    width: 100%;
-  }
-}
-
 .sidebar-link {
   background: none;
   border: 0;
@@ -138,12 +137,12 @@
   }
 
   &[disabled] {
-    color: var(--foreground) 99;
+    color: var(--foreground);
     cursor: not-allowed;
   }
 
   &.draft {
-    color: rgba(255,255,255,0.5);
+    color: rgb(255 255 255 / 50%);
     line-height: 1.4;
     margin: 0 0 1em 1.5em;
     width: calc(100% - 2rem);
@@ -176,20 +175,22 @@
 }
 
 .theme-switcher {
-  border-bottom: 1px solid rgba(255,255,255,0.3);
+  border-bottom: 1px solid rgb(255 255 255 / 30%);
-  border-top: 1px solid rgba(255,255,255,0.3);
+  border-top: 1px solid rgb(255 255 255 / 30%);
   display: flex;
   justify-content: space-between;
   margin: 1rem;
   padding: 1em 0;
 
-  input[type=checkbox] {
+  input[type='checkbox'] {
     opacity: 0;
     position: absolute;
 
     + label {
-      background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")   no-repeat 30px 9px,
+      background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")
-      url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A") #000 no-repeat 8px 8px;
+          no-repeat 30px 9px,
+        url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A")
+          #000 no-repeat 8px 8px;
       border-radius: 14px;
       cursor: pointer;
       display: block;
@@ -200,7 +201,7 @@
       transition: background-color 0.3s;
       width: 46px;
 
-      &:before {
+      &::before {
         background-color: #fff;
         border-radius: 100%;
         content: '';
@@ -216,7 +217,7 @@
     &:checked + label {
       background-color: #fff;
 
-      &:before {
+      &::before {
         background-color: #1f1f1f;
         left: 24px;
       }

src/components/Feed/Beside.tsx

@@ -1,6 +1,6 @@
 // TODO: additional entities list column + article
 
-import { For, Show } from 'solid-js/web'
+import { For, Show } from 'solid-js'
 import { ArticleCard } from './Card'
 import { AuthorCard } from '../Author/Card'
 import { TopicCard } from '../Topic/Card'
@@ -21,7 +21,7 @@ interface BesideProps {
   iconButton?: boolean
 }
 
-export default (props: BesideProps) => {
+export const Beside = (props: BesideProps) => {
   return (
     <Show when={!!props.beside?.slug && props.values?.length > 0}>
       <div class="floor floor--9">

src/components/Feed/Card.module.scss

@@ -418,7 +418,7 @@
   display: flex;
 }
 
-.shoutCardDetailsTtem {
+.shoutCardDetailsItem {
   align-items: center;
   display: flex;
   margin-right: 1.7em;
@@ -454,6 +454,12 @@
   }
 }
 
+.shoutCardDetailsViewed {
+  .icon {
+    margin-top: -0.1em;
+  }
+}
+
 .rating {
   align-items: center;
   display: flex;

src/components/Feed/Card.tsx

@@ -1,11 +1,10 @@
 import { t } from '../../utils/intl'
-import { createMemo } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
-import { For, Show } from 'solid-js/web'
 import type { Shout } from '../../graphql/types.gen'
 import { capitalize } from '../../utils'
 import { translit } from '../../utils/ru2en'
 import { Icon } from '../Nav/Icon'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { locale } from '../../stores/ui'
 import { handleClientRouteLinkClick } from '../../stores/router'
 import { clsx } from 'clsx'
@@ -72,33 +71,33 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   return (
     <section
-      class={clsx(style.shoutCard, `${props.settings?.additionalClass || ''}`)}
+      class={clsx(styles.shoutCard, `${props.settings?.additionalClass || ''}`)}
       classList={{
-        [style.shoutCardShort]: props.settings?.isShort,
+        [styles.shoutCardShort]: props.settings?.isShort,
-        [style.shoutCardPhotoBottom]: props.settings?.noimage && props.settings?.photoBottom,
+        [styles.shoutCardPhotoBottom]: props.settings?.noimage && props.settings?.photoBottom,
-        [style.shoutCardFeed]: props.settings?.isFeedMode,
+        [styles.shoutCardFeed]: props.settings?.isFeedMode,
-        [style.shoutCardFloorImportant]: props.settings?.isFloorImportant,
+        [styles.shoutCardFloorImportant]: props.settings?.isFloorImportant,
-        [style.shoutCardWithCover]: props.settings?.isWithCover,
+        [styles.shoutCardWithCover]: props.settings?.isWithCover,
-        [style.shoutCardBigTitle]: props.settings?.isBigTitle,
+        [styles.shoutCardBigTitle]: props.settings?.isBigTitle,
-        [style.shoutCardVertical]: props.settings?.isVertical,
+        [styles.shoutCardVertical]: props.settings?.isVertical,
-        [style.shoutCardWithBorder]: props.settings?.withBorder,
+        [styles.shoutCardWithBorder]: props.settings?.withBorder,
-        [style.shoutCardCompact]: props.settings?.isCompact,
+        [styles.shoutCardCompact]: props.settings?.isCompact,
-        [style.shoutCardSingle]: props.settings?.isSingle
+        [styles.shoutCardSingle]: props.settings?.isSingle
       }}
     >
       <Show when={!props.settings?.noimage && cover}>
-        <div class={style.shoutCardCoverContainer}>
+        <div class={styles.shoutCardCoverContainer}>
-          <div class={style.shoutCardCover}>
+          <div class={styles.shoutCardCover}>
             <img src={cover || ''} alt={title || ''} loading="lazy" />
           </div>
         </div>
       </Show>
 
-      <div class={style.shoutCardContent}>
+      <div class={styles.shoutCardContent}>
         <Show when={layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)}>
-          <div class={style.shoutCardType}>
+          <div class={styles.shoutCardType}>
             <a href={`/topic/${mainTopic.slug}`}>
-              <Icon name={layout} class={style.icon} />
+              <Icon name={layout} class={styles.icon} />
             </a>
           </div>
         </Show>
@@ -113,24 +112,24 @@ export const ArticleCard = (props: ArticleCardProps) => {
           />
         </Show>
 
-        <div class={style.shoutCardTitlesContainer}>
+        <div class={styles.shoutCardTitlesContainer}>
           <a href={`/${slug || ''}`} onClick={handleClientRouteLinkClick}>
-            <div class={style.shoutCardTitle}>
+            <div class={styles.shoutCardTitle}>
-              <span class={style.shoutCardLinkContainer}>{title}</span>
+              <span class={styles.shoutCardLinkContainer}>{title}</span>
             </div>
 
             <Show when={!props.settings?.nosubtitle && subtitle}>
-              <div class={style.shoutCardSubtitle}>
+              <div class={styles.shoutCardSubtitle}>
-                <span class={style.shoutCardLinkContainer}>{subtitle}</span>
+                <span class={styles.shoutCardLinkContainer}>{subtitle}</span>
               </div>
             </Show>
           </a>
         </div>
 
         <Show when={!props.settings?.noauthor || !props.settings?.nodate}>
-          <div class={style.shoutDetails}>
+          <div class={styles.shoutDetails}>
             <Show when={!props.settings?.noauthor}>
-              <div class={style.shoutAuthor}>
+              <div class={styles.shoutAuthor}>
                 <For each={authors}>
                   {(author, index) => {
                     const name =
@@ -150,44 +149,50 @@ export const ArticleCard = (props: ArticleCardProps) => {
             </Show>
 
             <Show when={!props.settings?.nodate}>
-              <div class={style.shoutDate}>{formattedDate()}</div>
+              <div class={styles.shoutDate}>{formattedDate()}</div>
             </Show>
           </div>
         </Show>
 
         <Show when={props.settings?.isFeedMode}>
-          <section class={style.shoutCardDetails}>
+          <section class={styles.shoutCardDetails}>
-            <div class={style.shoutCardDetailsContent}>
+            <div class={styles.shoutCardDetailsContent}>
-              <div class={clsx(style.shoutCardDetailsItem, 'rating')}>
+              <div class={clsx(styles.shoutCardDetailsItem, styles.rating)}>
-                <button class="rating__control">&minus;</button>
+                <button class={styles.ratingControl}>&minus;</button>
-                <span class="rating__value">{stat?.rating || ''}</span>
+                <span class={styles.ratingValue}>{stat?.rating || ''}</span>
-                <button class="rating__control">+</button>
+                <button class={styles.ratingControl}>+</button>
               </div>
-              <div class={clsx(style.shoutCardDetailsItem, style.shoutCardComments)}>
+              <div
-                <Icon name="eye" class={style.icon} />
+                class={clsx(
+                  styles.shoutCardDetailsItem,
+                  styles.shoutCardDetailsViewed,
+                  styles.shoutCardComments
+                )}
+              >
+                <Icon name="eye" class={styles.icon} />
                 {stat?.viewed}
               </div>
-              <div class={clsx(style.shoutCardDetailsTtem, style.shoutCardComments)}>
+              <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
                 <a href={`/${slug + '#comments' || ''}`}>
-                  <Icon name="comment" class={style.icon} />
+                  <Icon name="comment" class={styles.icon} />
                   {stat?.commented || ''}
                 </a>
               </div>
 
-              <div class={style.shoutCardDetailsItem}>
+              <div class={styles.shoutCardDetailsItem}>
                 <button>
-                  <Icon name="bookmark" class={style.icon} />
+                  <Icon name="bookmark" class={styles.icon} />
                 </button>
               </div>
 
-              <div class={style.shoutCardDetailsItem}>
+              <div class={styles.shoutCardDetailsItem}>
                 <button>
-                  <Icon name="ellipsis" class={style.icon} />
+                  <Icon name="ellipsis" class={styles.icon} />
                 </button>
               </div>
             </div>
 
-            <button class="button--light shout-card__edit-control">{t('Collaborate')}</button>
+            <button class={clsx('button--light', styles.shoutCardEditControl)}>{t('Collaborate')}</button>
           </section>
         </Show>
       </div>

src/components/Feed/Group.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js/jsx-runtime'
-import { For, Show } from 'solid-js/web'
+import { For, Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
 import './Group.scss'

src/components/Feed/List.tsx

@@ -1,16 +1,15 @@
-import { For, Suspense } from 'solid-js/web'
+import { Row1 } from './Row1'
-import OneWide from './Row1'
+import { Row2 } from './Row2'
-import Row2 from './Row2'
+import { Row3 } from './Row3'
-import Row3 from './Row3'
 import { shuffle } from '../../utils'
-import { createMemo, createSignal } from 'solid-js'
+import { createMemo, createSignal, For, Suspense } from 'solid-js'
 import type { JSX } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import './List.scss'
 import { t } from '../../utils/intl'
 
 export const Block6 = (props: { articles: Shout[] }) => {
-  const dice = createMemo(() => shuffle([OneWide, Row2, Row3]))
+  const dice = createMemo(() => shuffle([Row1, Row2, Row3]))
 
   return (
     <>

src/components/Feed/Row1.tsx

@@ -2,12 +2,12 @@ import { Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
 
-export default (props: { article: Shout }) => (
+export const Row1 = (props: { article: Shout }) => (
   <Show when={!!props.article}>
     <div class="floor floor--one-article">
       <div class="wide-container row">
         <div class="col-12">
-          <ArticleCard article={props.article} settings={{isSingle: true}} />
+          <ArticleCard article={props.article} settings={{ isSingle: true }} />
         </div>
       </div>
     </div>

src/components/Feed/Row2.tsx

@@ -1,14 +1,14 @@
-import { createComputed, createSignal, Show } from 'solid-js'
+import { createComputed, createSignal, Show, For } from 'solid-js'
-import { For } from 'solid-js/web'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
+
 const x = [
   ['6', '6'],
   ['4', '8'],
   ['8', '4']
 ]
 
-export default (props: { articles: Shout[] }) => {
+export const Row2 = (props: { articles: Shout[] }) => {
   const [y, setY] = createSignal(0)
 
   createComputed(() => setY(Math.floor(Math.random() * x.length)))

src/components/Feed/Row3.tsx

@@ -1,9 +1,9 @@
 import type { JSX } from 'solid-js/jsx-runtime'
-import { For } from 'solid-js/web'
+import { For } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
 
-export default (props: { articles: Shout[]; header?: JSX.Element }) => {
+export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
   return (
     <div class="floor">
       <div class="wide-container row">

src/components/Feed/Sidebar.tsx

@@ -85,12 +85,12 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
         </For>
       </ul>
 
-      <p class="settings">
+      <div class="settings">
         <a href="/feed/settings">
           <strong>{t('Feed settings')}</strong>
+          <Icon name="settings" />
         </a>
-        <Icon name="settings" />
+      </div>
-      </p>
     </>
   )
 }

src/components/Feed/Slider.tsx

@@ -1,4 +1,3 @@
-import { For } from 'solid-js/web'
 import { ArticleCard } from './Card'
 import { Swiper, Navigation, Pagination } from 'swiper'
 import type { SwiperOptions } from 'swiper'
@@ -7,7 +6,7 @@ import 'swiper/scss/navigation'
 import 'swiper/scss/pagination'
 import './Slider.scss'
 import type { Shout } from '../../graphql/types.gen'
-import { createEffect, createMemo, createSignal, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, Show, For } from 'solid-js'
 import { Icon } from '../Nav/Icon'
 
 interface SliderProps {

src/components/Nav/AuthModal/AuthModal.module.scss

@@ -148,11 +148,11 @@
   margin-bottom: 8px;
 
   /* Red/500 */
-  color: #D00820;
+  color: #d00820;
 
   a {
-    color: #D00820;
+    color: #d00820;
-    border-color: #D00820;
+    border-color: #d00820;
 
     &:hover {
       color: white;
@@ -160,3 +160,17 @@
     }
   }
 }
+
+.title {
+  font-size: 26px;
+  line-height: 32px;
+  font-weight: 700;
+  color: #141414;
+  margin-bottom: 16px;
+}
+
+.text {
+  font-size: 15px;
+  line-height: 24px;
+  margin-bottom: 52px;
+}

src/components/Nav/AuthModal/ConfirmEmail.tsx

@@ -1,41 +0,0 @@
-import styles from './ConfirmEmail.module.scss'
-import authModalStyles from './AuthModal.module.scss'
-import { clsx } from 'clsx'
-import { t } from '../../../utils/intl'
-import { hideModal } from '../../../stores/ui'
-import { onMount } from 'solid-js'
-import { useRouter } from '../../../stores/router'
-import { confirmEmail } from '../../../stores/auth'
-
-type ConfirmEmailSearchParams = {
-  token: string
-}
-
-export const ConfirmEmail = () => {
-  const confirmedEmail = 'test@test.com'
-
-  const { searchParams } = useRouter<ConfirmEmailSearchParams>()
-
-  onMount(async () => {
-    const token = searchParams().token
-    try {
-      await confirmEmail(token)
-    } catch (error) {
-      console.log(error)
-    }
-  })
-
-  return (
-    <div>
-      <div class={styles.title}>{t('Hooray! Welcome!')}</div>
-      <div class={styles.text}>
-        {t("You've confirmed email")} {confirmedEmail}
-      </div>
-      <div>
-        <button class={clsx('button', authModalStyles.submitButton)} onClick={() => hideModal()}>
-          Перейти на главную
-        </button>
-      </div>
-    </div>
-  )
-}

src/components/Nav/AuthModal/ConfirmOAuth.tsx

@@ -1,38 +0,0 @@
-import styles from './ConfirmEmail.module.scss'
-import authModalStyles from './AuthModal.module.scss'
-import { clsx } from 'clsx'
-import { t } from '../../../utils/intl'
-import { hideModal } from '../../../stores/ui'
-import { onMount } from 'solid-js'
-import { useRouter } from '../../../stores/router'
-
-type ConfirmOAuthSearchParams = {
-  token: string
-}
-
-export const ConfirmOAuth = () => {
-  const { searchParams } = useRouter<ConfirmOAuthSearchParams>()
-
-  onMount(async () => {
-    console.debug('[confirm-oauth] params', searchParams())
-    const token = searchParams().token
-    localStorage.setItem('token', token)
-    window.addEventListener('mousemove', () => window.close())
-    window.addEventListener('keydown', () => window.close())
-    window.addEventListener('click', () => window.close())
-  })
-
-  return (
-    <div>
-      <div class={styles.title}>{t('Hooray! Welcome!')}</div>
-      <div class={styles.text}>
-        {t("You've confirmed your account")} { /* TODO: get '%username%' */ }
-      </div>
-      <div>
-        <button class={clsx('button', authModalStyles.submitButton)} onClick={() => hideModal()}>
-          {t('Back to mainpage')}
-        </button>
-      </div>
-    </div>
-  )
-}

src/components/Nav/AuthModal/EmailConfirm.tsx

@@ -0,0 +1,44 @@
+import styles from './AuthModal.module.scss'
+import { clsx } from 'clsx'
+import { t } from '../../../utils/intl'
+import { hideModal } from '../../../stores/ui'
+import { createMemo, onMount, Show } from 'solid-js'
+import { useRouter } from '../../../stores/router'
+import { confirmEmail, useAuthStore } from '../../../stores/auth'
+
+type ConfirmEmailSearchParams = {
+  token: string
+}
+
+export const EmailConfirm = () => {
+  const { session } = useAuthStore()
+
+  const confirmedEmail = createMemo(() => session()?.user?.email || '')
+
+  const { searchParams } = useRouter<ConfirmEmailSearchParams>()
+
+  onMount(async () => {
+    const token = searchParams().token
+    try {
+      await confirmEmail(token)
+    } catch (error) {
+      console.log(error)
+    }
+  })
+
+  return (
+    <div>
+      <div class={styles.title}>{t('Hooray! Welcome!')}</div>
+      <Show when={Boolean(confirmedEmail())}>
+        <div class={styles.text}>
+          {t("You've confirmed email")} {confirmedEmail()}
+        </div>
+      </Show>
+      <div>
+        <button class={clsx('button', styles.submitButton)} onClick={() => hideModal()}>
+          {t('Go to main page')}
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -1,8 +1,7 @@
-import { Show } from 'solid-js/web'
 import { t } from '../../../utils/intl'
 import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
-import { createSignal, JSX } from 'solid-js'
+import { createSignal, JSX, Show } from 'solid-js'
 import { useRouter } from '../../../stores/router'
 import { email, setEmail } from './sharedLogic'
 import type { AuthModalSearchParams } from './types'
@@ -64,7 +63,7 @@ export const ForgotPasswordForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <h4>{t('Forgot password?')}</h4>
-      {t('Everything is ok, please give us your email address')}
+      <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
       <Show when={submitError()}>
         <div class={styles.authInfo}>
           <ul>

src/components/Nav/AuthModal/LoginForm.tsx

@@ -1,11 +1,10 @@
-import { Show } from 'solid-js/web'
 import { t } from '../../../utils/intl'
 import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { SocialProviders } from './SocialProviders'
-import { signIn } from '../../../stores/auth'
+import { signIn, signSendLink } from '../../../stores/auth'
 import { ApiError } from '../../../utils/apiClient'
-import { createSignal } from 'solid-js'
+import { createSignal, Show } from 'solid-js'
 import { isValidEmail } from './validators'
 import { email, setEmail } from './sharedLogic'
 import { useRouter } from '../../../stores/router'
@@ -23,6 +22,9 @@ export const LoginForm = () => {
   const [submitError, setSubmitError] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
+  // TODO: better solution for interactive error messages
+  const [isEmailNotConfirmed, setIsEmailNotConfirmed] = createSignal(false)
+  const [isLinkSent, setIsLinkSent] = createSignal(false)
 
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
 
@@ -49,6 +51,7 @@ export const LoginForm = () => {
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
 
+    setIsLinkSent(false)
     setSubmitError('')
 
     const newValidationErrors: ValidationErrors = {}
@@ -72,10 +75,12 @@ export const LoginForm = () => {
 
     try {
       await signIn({ email: email(), password: password() })
+      hideModal()
     } catch (error) {
       if (error instanceof ApiError) {
         if (error.code === 'email_not_confirmed') {
           setSubmitError(t('Please, confirm email'))
+          setIsEmailNotConfirmed(true)
           return
         }
 
@@ -96,11 +101,17 @@ export const LoginForm = () => {
       <h4>{t('Enter the Discours')}</h4>
       <Show when={submitError()}>
         <div class={styles.authInfo}>
-          <ul>
+          <div class={styles.warn}>{submitError()}</div>
-            <li class={styles.warn}>{submitError()}</li>
+          <Show when={isEmailNotConfirmed()}>
-          </ul>
+            <a href="#" class={styles.sendLink} onClick={handleSendLinkAgainClick}>
+              {t('Send link again')}
+            </a>
+          </Show>
         </div>
       </Show>
+      <Show when={isLinkSent()}>
+        <div class={styles.authInfo}>{t('Link sent, check your email')}</div>
+      </Show>
       <div class="pretty-form__item">
         <input
           id="email"

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -1,16 +1,16 @@
-import { Show } from 'solid-js/web'
+import { Show, createSignal } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { t } from '../../../utils/intl'
 import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { SocialProviders } from './SocialProviders'
 import { checkEmail, register, useAuthStore } from '../../../stores/auth'
-import { createSignal } from 'solid-js'
 import { isValidEmail } from './validators'
 import { ApiError } from '../../../utils/apiClient'
 import { email, setEmail } from './sharedLogic'
 import { useRouter } from '../../../stores/router'
 import type { AuthModalSearchParams } from './types'
+import { hideModal } from '../../../stores/ui'
 
 type FormFields = {
   name: string
@@ -29,6 +29,7 @@ export const RegisterForm = () => {
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const [isSuccess, setIsSuccess] = createSignal(false)
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
 
   const handleEmailInput = (newEmail: string) => {
@@ -91,6 +92,8 @@ export const RegisterForm = () => {
         email: email(),
         password: password()
       })
+
+      setIsSuccess(true)
     } catch (error) {
       if (error instanceof ApiError && error.code === 'user_already_exists') {
         return
@@ -103,87 +106,100 @@ export const RegisterForm = () => {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <>
-      <h4>{t('Create account')}</h4>
+      <Show when={!isSuccess()}>
-      <Show when={submitError()}>
+        <form onSubmit={handleSubmit}>
-        <div class={styles.authInfo}>
+          <h4>{t('Create account')}</h4>
-          <ul>
+          <Show when={submitError()}>
-            <li class={styles.warn}>{submitError()}</li>
+            <div class={styles.authInfo}>
-          </ul>
+              <ul>
+                <li class={styles.warn}>{submitError()}</li>
+              </ul>
+            </div>
+          </Show>
+          <div class="pretty-form__item">
+            <input
+              id="name"
+              name="name"
+              type="text"
+              placeholder={t('Full name')}
+              autocomplete=""
+              onInput={(event) => handleNameInput(event.currentTarget.value)}
+            />
+            <label for="name">{t('Full name')}</label>
+          </div>
+          <Show when={validationErrors().name}>
+            <div class={styles.validationError}>{validationErrors().name}</div>
+          </Show>
+          <div class="pretty-form__item">
+            <input
+              id="email"
+              name="email"
+              autocomplete="email"
+              type="text"
+              value={email()}
+              placeholder={t('Email')}
+              onInput={(event) => handleEmailInput(event.currentTarget.value)}
+              onBlur={handleEmailBlur}
+            />
+            <label for="email">{t('Email')}</label>
+          </div>
+          <Show when={validationErrors().email}>
+            <div class={styles.validationError}>{validationErrors().email}</div>
+          </Show>
+          <Show when={emailChecks()[email()]}>
+            <div class={styles.validationError}>
+              {t("This email is already taken. If it's you")},{' '}
+              <a
+                href="#"
+                onClick={(event) => {
+                  event.preventDefault()
+                  changeSearchParam('mode', 'login')
+                }}
+              >
+                {t('enter')}
+              </a>
+            </div>
+          </Show>
+          <div class="pretty-form__item">
+            <input
+              id="password"
+              name="password"
+              autocomplete="current-password"
+              type="password"
+              placeholder={t('Password')}
+              onInput={(event) => handlePasswordInput(event.currentTarget.value)}
+            />
+            <label for="password">{t('Password')}</label>
+          </div>
+          <Show when={validationErrors().password}>
+            <div class={styles.validationError}>{validationErrors().password}</div>
+          </Show>
+
+          <div>
+            <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
+              {isSubmitting() ? '...' : t('Join')}
+            </button>
+          </div>
+
+          <SocialProviders />
+
+          <div class={styles.authControl}>
+            <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
+              {t('I have an account')}
+            </span>
+          </div>
+        </form>
+      </Show>
+      <Show when={isSuccess()}>
+        <div class={styles.title}>{t('Almost done! Check your email.')}</div>
+        <div class={styles.text}>{t("We've sent you a message with a link to enter our website.")}</div>
+        <div>
+          <button class={clsx('button', styles.submitButton)} onClick={() => hideModal()}>
+            {t('Back to main page')}
+          </button>
         </div>
       </Show>
-      <div class="pretty-form__item">
+    </>
-        <input
-          id="name"
-          name="name"
-          type="text"
-          placeholder={t('Full name')}
-          autocomplete=""
-          onInput={(event) => handleNameInput(event.currentTarget.value)}
-        />
-        <label for="name">{t('Full name')}</label>
-      </div>
-      <Show when={validationErrors().name}>
-        <div class={styles.validationError}>{validationErrors().name}</div>
-      </Show>
-      <div class="pretty-form__item">
-        <input
-          id="email"
-          name="email"
-          autocomplete="email"
-          type="text"
-          value={email()}
-          placeholder={t('Email')}
-          onInput={(event) => handleEmailInput(event.currentTarget.value)}
-          onBlur={handleEmailBlur}
-        />
-        <label for="email">{t('Email')}</label>
-      </div>
-      <Show when={validationErrors().email}>
-        <div class={styles.validationError}>{validationErrors().email}</div>
-      </Show>
-      <Show when={emailChecks()[email()]}>
-        <div class={styles.validationError}>
-          {t("This email is already taken. If it's you")},{' '}
-          <a
-            href="#"
-            onClick={(event) => {
-              event.preventDefault()
-              changeSearchParam('mode', 'login')
-            }}
-          >
-            {t('enter')}
-          </a>
-        </div>
-      </Show>
-      <div class="pretty-form__item">
-        <input
-          id="password"
-          name="password"
-          autocomplete="current-password"
-          type="password"
-          placeholder={t('Password')}
-          onInput={(event) => handlePasswordInput(event.currentTarget.value)}
-        />
-        <label for="password">{t('Password')}</label>
-      </div>
-      <Show when={validationErrors().password}>
-        <div class={styles.validationError}>{validationErrors().password}</div>
-      </Show>
-
-      <div>
-        <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
-          {isSubmitting() ? '...' : t('Join')}
-        </button>
-      </div>
-
-      <SocialProviders />
-
-      <div class={styles.authControl}>
-        <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
-          {t('I have an account')}
-        </span>
-      </div>
-    </form>
   )
 }

src/components/Nav/AuthModal/index.tsx

@@ -1,5 +1,5 @@
-import { Show } from 'solid-js/web'
+import { Dynamic } from 'solid-js/web'
-import { createEffect, createMemo } from 'solid-js'
+import { Component, createEffect, createMemo } from 'solid-js'
 import { t } from '../../../utils/intl'
 import { hideModal } from '../../../stores/ui'
 import { handleClientRouteLinkClick, useRouter } from '../../../stores/router'
@@ -8,15 +8,24 @@ import styles from './AuthModal.module.scss'
 import { LoginForm } from './LoginForm'
 import { RegisterForm } from './RegisterForm'
 import { ForgotPasswordForm } from './ForgotPasswordForm'
-import { ConfirmEmail } from './ConfirmEmail'
+import { EmailConfirm } from './EmailConfirm'
 import type { AuthModalMode, AuthModalSearchParams } from './types'
-import { ConfirmOAuth } from './ConfirmOAuth'
 
+const AUTH_MODAL_MODES: Record<AuthModalMode, Component> = {
+  login: LoginForm,
+  register: RegisterForm,
+  'forgot-password': ForgotPasswordForm,
+  'confirm-email': EmailConfirm
+}
 
 export const AuthModal = () => {
   let rootRef: HTMLDivElement
+
   const { searchParams } = useRouter<AuthModalSearchParams>()
-  const mode = createMemo<AuthModalMode>(() => searchParams().mode || 'login')
+
+  const mode = createMemo<AuthModalMode>(() => {
+    return AUTH_MODAL_MODES[searchParams().mode] ? searchParams().mode : 'login'
+  })
 
   createEffect((oldMode) => {
     if (oldMode !== mode()) {
@@ -28,12 +37,12 @@ export const AuthModal = () => {
     <div
       ref={rootRef}
       class={clsx('row', styles.view)}
-      classList={{ [styles.signUp]: mode() === 'register' || mode().startsWith('confirm-') }}
+      classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }}
     >
       <div class={clsx('col-sm-6', 'd-md-none', styles.authImage)}>
         <div
           class={styles.authImageText}
-          classList={{ [styles.hidden]: mode() !== 'register' && !mode().startsWith('confirm-') }}
+          classList={{ [styles.hidden]: mode() !== 'register' && mode() !== 'confirm-email' }}
         >
           <h2>{t('Discours')}</h2>
           <h4>{t(`Join the global community of authors!`)}</h4>
@@ -60,21 +69,7 @@ export const AuthModal = () => {
         </div>
       </div>
       <div class={clsx('col-sm-6', styles.auth)}>
-        <Show when={mode() === 'login'}>
+        <Dynamic component={AUTH_MODAL_MODES[mode()]} />
-          <LoginForm />
-        </Show>
-        <Show when={mode() === 'register'}>
-          <RegisterForm />
-        </Show>
-        <Show when={mode() === 'forgot-password'}>
-          <ForgotPasswordForm />
-        </Show>
-        <Show when={mode() === 'confirm-email'}>
-          <ConfirmEmail />
-        </Show>
-        <Show when={mode() === 'confirm-oauth'}>
-          <ConfirmOAuth />
-        </Show>
       </div>
     </div>
   )

src/components/Nav/AuthModal/types.ts

@@ -1,4 +1,4 @@
-export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'confirm-oauth' | 'forgot-password'
+export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'forgot-password'
 
 export type AuthModalSearchParams = {
   mode: AuthModalMode

src/components/Nav/Confirmed.scss

@@ -0,0 +1,6 @@
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 420px;
+}

src/components/Nav/Confirmed.tsx

@@ -0,0 +1,18 @@
+import './Confirmed.scss'
+import { onMount } from 'solid-js'
+import { t } from '../../utils/intl'
+
+export const Confirmed = (props: { token?: string }) => {
+  onMount(() => {
+    const token = props.token ?? document.cookie.split(';').at(0).replace('token=', '')
+    window.addEventListener('mousemove', () => window.close())
+    window.addEventListener('keydown', () => window.close())
+    window.addEventListener('click', () => window.close())
+    localStorage.setItem('token', token)
+  })
+  return (
+    <>
+      <div class="center">{t('You was successfully authorized')}</div>
+    </>
+  )
+}

src/components/Nav/Header.module.scss

@@ -35,18 +35,6 @@
   }
 }
 
-.popupShare {
-  opacity: 1;
-  transition: opacity 0.3s;
-  z-index: 1;
-
-  .headerScrolledTop & {
-    opacity: 0;
-    transition: opacity 0.3s, z-index 0s 0.3s;
-    z-index: -1;
-  }
-}
-
 .headerFixed {
   position: fixed;
   top: 0;
@@ -327,18 +315,6 @@
   }
 }
 
-.userControl {
-  opacity: 1;
-  transition: opacity 0.3s;
-  z-index: 1;
-
-  .headerWithTitle.headerScrolledBottom & {
-    transition: opacity 0.3s, z-index 0s 0.3s;
-    opacity: 0;
-    z-index: -1;
-  }
-}
-
 .articleControls {
   display: flex;
   justify-content: flex-end;
@@ -348,18 +324,14 @@
   transform: translateY(-50%);
   width: 100%;
 
-  .icon {
+  .control {
-    margin-left: 1.6rem;
+    cursor: pointer;
-    opacity: 0.6;
+    border: 0;
-    transition: opacity 0.3s;
-  }
 
-  img {
+    .icon {
-    vertical-align: middle;
+      opacity: 0.6;
-  }
+      transition: opacity 0.3s;
-
+    }
-  a {
-    border: none;
 
     &:hover {
       background: none;
@@ -370,4 +342,141 @@
       }
     }
   }
+
+  .control + .control {
+    margin-left: 1.6rem;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+}
+
+.userControl {
+  align-items: baseline;
+  display: flex;
+  opacity: 1;
+  transition: opacity 0.3s;
+  z-index: 1;
+
+  .headerWithTitle.headerScrolledBottom & {
+    transition: opacity 0.3s, z-index 0s 0.3s;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  @include font-size(1.7rem);
+
+  justify-content: flex-end;
+
+  @include media-breakpoint-down(md) {
+    padding: divide($container-padding-x, 2);
+  }
+
+  .userpic {
+    margin-right: 0;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+.userControlItem {
+  align-items: center;
+  border: 2px solid #f6f6f6;
+  border-radius: 100%;
+  display: flex;
+  height: 2.4em;
+  justify-content: center;
+  margin-left: divide($container-padding-x, 2);
+  position: relative;
+  width: 2.4em;
+
+  @include media-breakpoint-up(sm) {
+    margin-left: 1.2rem;
+  }
+
+  .circlewrap {
+    height: 23px;
+    min-width: 23px;
+    width: 23px;
+  }
+
+  .button,
+  a {
+    border: none;
+    height: auto;
+    margin: 0;
+    padding: 0;
+
+    &:hover {
+      background: none;
+
+      &::before {
+        background-color: #000;
+      }
+
+      img {
+        filter: invert(1);
+      }
+    }
+
+    img {
+      filter: invert(0);
+      transition: filter 0.3s;
+    }
+
+    &::before {
+      background-color: #fff;
+      border-radius: 100%;
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: background-color 0.3s;
+      width: 100%;
+    }
+  }
+
+  img {
+    height: 20px;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  .textLabel {
+    display: none;
+  }
+}
+
+.userControlItemInbox,
+.userControlItemSearch {
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}
+
+.userControlItemWritePost {
+  width: auto;
+
+  @include media-breakpoint-up(lg) {
+    .icon {
+      display: none;
+    }
+
+    .textLabel {
+      display: inline;
+      padding: 0 1.2rem;
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  &,
+  a::before {
+    border-radius: 1.2em;
+  }
 }

src/components/Nav/Header.tsx

@@ -1,19 +1,22 @@
 import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
-import Private from './Private'
 import Notifications from './Notifications'
 import { Icon } from './Icon'
 import { Modal } from './Modal'
-import { Popup } from './Popup'
 import { AuthModal } from './AuthModal'
 import { t } from '../../utils/intl'
 import { useModalStore, showModal, useWarningsStore } from '../../stores/ui'
 import { useAuthStore } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
 import styles from './Header.module.scss'
-import stylesPopup from './Popup.module.scss'
-import privateStyles from './Private.module.scss'
 import { getPagePath } from '@nanostores/router'
+import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
+import { SharePopup } from '../Article/SharePopup'
+import { ProfilePopup } from './ProfilePopup'
+import Userpic from '../Author/Userpic'
+import type { Author } from '../../graphql/types.gen'
+
+const log = getLogger('header')
 
 const resources: { name: string; route: keyof Routes }[] = [
   { name: t('zine'), route: 'home' },
@@ -32,6 +35,9 @@ export const Header = (props: Props) => {
   const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
   const [visibleWarnings, setVisibleWarnings] = createSignal(false)
+  const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
+  const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false)
+
   // stores
   const { warnings } = useWarningsStore()
   const { session } = useAuthStore()
@@ -41,13 +47,11 @@ export const Header = (props: Props) => {
 
   // methods
   const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
-  const toggleFixed = () => setFixed(!fixed())
+  const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
   // effects
   createEffect(() => {
-    const isFixed = fixed() || (modal() && modal() !== 'share');
+    document.body.classList.toggle('fixed', fixed() || modal() !== null)
-
+    document.body.classList.toggle(styles.fixed, fixed() && !modal())
-    document.body.classList.toggle('fixed', isFixed);
-    document.body.classList.toggle(styles.fixed, isFixed && !modal());
   })
 
   // derived
@@ -85,7 +89,8 @@ export const Header = (props: Props) => {
       classList={{
         [styles.headerFixed]: props.isHeaderFixed,
         [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
-        [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled(),
+        [styles.headerScrolledBottom]:
+          (getIsScrollingBottom() && getIsScrolled() && !isProfilePopupVisible()) || isSharePopupVisible(),
         [styles.headerWithTitle]: Boolean(props.title)
       }}
     >
@@ -94,41 +99,6 @@ export const Header = (props: Props) => {
       </Modal>
 
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
-        <Popup name="share" class={clsx(styles.popupShare, stylesPopup.popupShare)}>
-          <ul class="nodash">
-            <li>
-              <a href="#">
-                <Icon name="vk-white" class={stylesPopup.icon} />
-                VK
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <Icon name="facebook-white" class={stylesPopup.icon} />
-                Facebook
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <Icon name="twitter-white" class={stylesPopup.icon} />
-                Twitter
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <Icon name="telegram-white" class={stylesPopup.icon} />
-                Telegram
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <Icon name="link-white" class={stylesPopup.icon} />
-                {t('Copy link')}
-              </a>
-            </li>
-          </ul>
-        </Popup>
-
         <nav class={clsx(styles.headerInner, 'row')} classList={{ fixed: fixed() }}>
           <div class={clsx(styles.mainLogo, 'col-auto')}>
             <a href={getPagePath(router, 'home')} onClick={handleClientRouteLinkClick}>
@@ -162,8 +132,15 @@ export const Header = (props: Props) => {
             </ul>
           </div>
           <div class={styles.usernav}>
-            <div class={clsx(privateStyles.userControl, styles.userControl, 'col')}>
+            <div class={clsx(styles.userControl, styles.userControl, 'col')}>
-              <div class={privateStyles.userControlItem}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
+                <a href="/create">
+                  <span class={styles.textLabel}>{t('Create post')}</span>
+                  <Icon name="pencil" class={styles.icon} />
+                </a>
+              </div>
+
+              <div class={styles.userControlItem}>
                 <a href="#" onClick={handleBellIconClick}>
                   <div>
                     <Icon name="bell-white" counter={authorized() ? warnings().length : 1} />
@@ -172,7 +149,7 @@ export const Header = (props: Props) => {
               </div>
 
               <Show when={visibleWarnings()}>
-                <div class={clsx(privateStyles.userControlItem, 'notifications')}>
+                <div class={clsx(styles.userControlItem, 'notifications')}>
                   <Notifications />
                 </div>
               </Show>
@@ -180,31 +157,56 @@ export const Header = (props: Props) => {
               <Show
                 when={authorized()}
                 fallback={
-                  <div class={clsx(privateStyles.userControlItem, 'loginbtn')}>
+                  <div class={clsx(styles.userControlItem, 'loginbtn')}>
                     <a href="?modal=auth&mode=login" onClick={handleClientRouteLinkClick}>
                       <Icon name="user-anonymous" />
                     </a>
                   </div>
                 }
               >
-                <Private />
+                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
+                  <a href="/inbox">
+                    {/*FIXME: replace with route*/}
+                    <div classList={{ entered: page().path === '/inbox' }}>
+                      <Icon name="inbox-white" counter={session()?.news?.unread || 0} />
+                    </div>
+                  </a>
+                </div>
+                <ProfilePopup
+                  onVisibilityChange={(isVisible) => {
+                    setIsProfilePopupVisible(isVisible)
+                  }}
+                  containerCssClass={styles.control}
+                  trigger={
+                    <div class={styles.userControlItem}>
+                      <button class={styles.button}>
+                        <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
+                          <Userpic user={session().user as Author} class={styles.userpic} />
+                        </div>
+                      </button>
+                    </div>
+                  }
+                />
               </Show>
             </div>
             <Show when={props.title}>
               <div class={styles.articleControls}>
-                <button
+                <SharePopup
-                  onClick={() => {
+                  onVisibilityChange={(isVisible) => {
-                    // FIXME: Popup
+                    setIsSharePopupVisible(isVisible)
-                    showModal('share')
                   }}
-                >
+                  containerCssClass={styles.control}
-                  <Icon name="share-outline" class={styles.icon} />
+                  trigger={<Icon name="share-outline" class={styles.icon} />}
-                </button>
+                />
-                <a href="#comments">
+                <a href="#comments" class={styles.control}>
                   <Icon name="comments-outline" class={styles.icon} />
                 </a>
-                <Icon name="pencil-outline" class={styles.icon} />
+                <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
-                <Icon name="bookmark" class={styles.icon} />
+                  <Icon name="pencil-outline" class={styles.icon} />
+                </a>
+                <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
+                  <Icon name="bookmark" class={styles.icon} />
+                </a>
               </div>
             </Show>
           </div>

src/components/Nav/Icon.css

@@ -1,4 +1,5 @@
 .icon {
+  line-height: 1;
   position: relative;
 }
 

src/components/Nav/Modal.tsx

@@ -1,8 +1,11 @@
 import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
+import { getLogger } from '../../utils/logger'
 import './Modal.scss'
 import { hideModal, useModalStore } from '../../stores/ui'
 
+const log = getLogger('modal')
+
 interface ModalProps {
   name: string
   children: JSX.Element
@@ -31,7 +34,7 @@ export const Modal = (props: ModalProps) => {
 
   createEffect(() => {
     setVisible(modal() === props.name)
-    console.debug(`[auth.modal] ${props.name} is ${modal() === props.name ? 'visible' : 'hidden'}`)
+    log.debug(`${props.name} is ${modal() === props.name ? 'visible' : 'hidden'}`)
   })
 
   return (

src/components/Nav/Notifications.tsx

@@ -1,6 +1,6 @@
-import { For, Portal, Show } from 'solid-js/web'
+import { Portal } from 'solid-js/web'
 import { useWarningsStore } from '../../stores/ui'
-import { createMemo } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
 
 export default () => {
   const { warnings } = useWarningsStore()

src/components/Nav/Popup.module.scss

@@ -1,10 +1,25 @@
+.container {
+  position: relative;
+}
+
 .popup {
   background: #fff;
   border: 2px solid #000;
+  top: calc(100% + 8px);
+  opacity: 1;
+
+  &.horizontalAnchorCenter {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.horizontalAnchorRight {
+    right: 0;
+  }
 
   @include font-size(1.6rem);
 
-  padding: 2.4rem 2.4rem 2.4rem 1.6rem;
+  padding: 2.4rem;
   position: absolute;
   z-index: 10;
 
@@ -14,7 +29,6 @@
 
   li {
     margin-bottom: 1.6rem;
-    padding-left: 3.6rem;
     position: relative;
 
     &:last-child {
@@ -24,23 +38,36 @@
 
   a {
     border: none;
+    white-space: nowrap;
+
+    &:hover {
+      img {
+        filter: invert(0);
+      }
+    }
   }
 
   img {
     filter: invert(1);
     max-height: 2rem;
     max-width: 2rem;
+    transition: filter 0.3s;
   }
 
   .icon {
-    left: 1.5rem;
+    display: inline-block;
-    position: absolute;
+    width: 3.6rem;
-    top: 50%;
-    transform: translate(-50%, -50%);
   }
 }
 
-.popupShare {
+// TODO: animation
-  right: 1em;
+// .popup {
-  top: 4.5rem;
+//  opacity: 1;
-}
+//  transition: opacity 0.3s;
+//  z-index: 1;
+//  &.visible {
+//    opacity: 0;
+//    transition: opacity 0.3s, z-index 0s 0.3s;
+//    z-index: -1;
+//  }
+// }

src/components/Nav/Popup.tsx

@@ -1,31 +1,61 @@
-import { createEffect, createSignal, JSX, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, JSX, onCleanup, onMount, Show } from 'solid-js'
-import style from './Popup.module.scss'
+import styles from './Popup.module.scss'
-import { hideModal, useModalStore } from '../../stores/ui'
 import { clsx } from 'clsx'
 
-interface PopupProps {
+type HorizontalAnchor = 'center' | 'right'
-  name: string
+
+export type PopupProps = {
+  containerCssClass?: string
+  trigger: JSX.Element
   children: JSX.Element
-  class?: string
+  onVisibilityChange?: (isVisible) => void
+  horizontalAnchor?: HorizontalAnchor
 }
 
 export const Popup = (props: PopupProps) => {
-  const { modal } = useModalStore()
+  const [isVisible, setIsVisible] = createSignal(false)
+  const horizontalAnchor: HorizontalAnchor = props.horizontalAnchor || 'center'
+
+  createEffect(() => {
+    if (props.onVisibilityChange) {
+      props.onVisibilityChange(isVisible())
+    }
+  })
+
+  let container: HTMLDivElement | undefined
+
+  const handleClickOutside = (event: MouseEvent & { target: Element }) => {
+    if (!isVisible()) {
+      return
+    }
+
+    if (event.target === container || container?.contains(event.target)) {
+      return
+    }
+
+    setIsVisible(false)
+  }
 
   onMount(() => {
-    window.addEventListener('keydown', (e: KeyboardEvent) => {
+    document.addEventListener('click', handleClickOutside, { capture: true })
-      if (e.key === 'Escape') hideModal()
+    onCleanup(() => document.removeEventListener('click', handleClickOutside, { capture: true }))
-    })
   })
 
-  const [visible, setVisible] = createSignal(false)
+  const toggle = () => setIsVisible((oldVisible) => !oldVisible)
-  createEffect(() => {
-    setVisible(modal() === props.name)
-  })
 
   return (
-    <Show when={visible()}>
+    <span class={clsx(styles.container, props.containerCssClass)} ref={container}>
-      <div class={clsx(style.popup, props.class)}>{props.children}</div>
+      <span onClick={toggle}>{props.trigger}</span>
-    </Show>
+      <Show when={isVisible()}>
+        <div
+          class={clsx(styles.popup, {
+            [styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
+            [styles.horizontalAnchorRight]: horizontalAnchor === 'right'
+          })}
+        >
+          {props.children}
+        </div>
+      </Show>
+    </span>
   )
 }

src/components/Nav/Private.module.scss

@@ -1,100 +0,0 @@
-.userControl {
-  align-items: baseline;
-  display: flex;
-
-  @include font-size(1.7rem);
-
-  justify-content: flex-end;
-
-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
-  .circlewrap {
-    margin-right: 0;
-  }
-}
-
-.userControlItem {
-  align-items: center;
-  border: 2px solid #f6f6f6;
-  border-radius: 100%;
-  display: flex;
-  height: 2.4em;
-  justify-content: center;
-  margin-left: divide($container-padding-x, 2);
-  position: relative;
-  width: 2.4em;
-
-  @include media-breakpoint-up(sm) {
-    margin-left: 1.2rem;
-  }
-
-  .circlewrap {
-    height: 23px;
-    min-width: 23px;
-    width: 23px;
-  }
-
-  a {
-    border: none;
-
-    &:hover {
-      background: none;
-
-      &::before {
-        background-color: #000;
-      }
-
-      img {
-        filter: invert(1);
-      }
-    }
-
-    img {
-      filter: invert(0);
-      transition: filter 0.3s;
-    }
-
-    &::before {
-      background-color: #fff;
-      border-radius: 100%;
-      content: '';
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      transition: background-color 0.3s;
-      width: 100%;
-    }
-  }
-
-  img {
-    height: 20px;
-    vertical-align: middle;
-    width: auto;
-  }
-
-  .textLabel {
-    display: none;
-  }
-}
-
-.userControlItemWritePost {
-  @include media-breakpoint-up(lg) {
-    .icon {
-      display: none;
-    }
-
-    .textLabel {
-      display: inline;
-    }
-  }
-}
-
-.userControlItemInbox,
-.userControlItemSearch {
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-}

src/components/Nav/Private.tsx

@@ -1,39 +0,0 @@
-import type { Author } from '../../graphql/types.gen'
-import Userpic from '../Author/Userpic'
-import { Icon } from './Icon'
-import styles from './Private.module.scss'
-import { useAuthStore } from '../../stores/auth'
-import { useRouter } from '../../stores/router'
-import { clsx } from 'clsx'
-
-export default () => {
-  const { session } = useAuthStore()
-  const { page } = useRouter()
-
-  return (
-    <div class={clsx(styles.userControl, 'col')}>
-      <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
-        <a href="/create">
-          <span class={styles.textLabel}>опубликовать материал</span>
-          <Icon name="pencil" />
-        </a>
-      </div>
-      <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
-        <a href="/inbox">
-          {/*FIXME: replace with route*/}
-          <div classList={{ entered: page().path === '/inbox' }}>
-            <Icon name="inbox-white" counter={session()?.news?.unread || 0} />
-          </div>
-        </a>
-      </div>
-      <div class={styles.userControlItem}>
-        <a href={`/${session().user?.slug}`}>
-          {/*FIXME: replace with route*/}
-          <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
-            <Userpic user={session().user as Author} />
-          </div>
-        </a>
-      </div>
-    </div>
-  )
-}

src/components/Nav/ProfileModal.tsx

@@ -1,10 +1,9 @@
-import { For } from 'solid-js/web'
 import { AuthorCard } from '../Author/Card'
 import type { Author } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { hideModal } from '../../stores/ui'
 import { useAuthStore, signOut } from '../../stores/auth'
-import { createMemo } from 'solid-js'
+import { createMemo, For } from 'solid-js'
 
 const quit = () => {
   signOut()

src/components/Nav/ProfilePopup.tsx

@@ -0,0 +1,44 @@
+import { Popup, PopupProps } from './Popup'
+import { signOut, useAuthStore } from '../../stores/auth'
+
+type ProfilePopupProps = Omit<PopupProps, 'children'>
+
+export const ProfilePopup = (props: ProfilePopupProps) => {
+  const { session } = useAuthStore()
+
+  return (
+    <Popup {...props} horizontalAnchor="right">
+      <ul class="nodash">
+        <li>
+          <a href={`/${session().user?.slug}`}>Профиль</a>
+        </li>
+        <li>
+          <a href="#">Черновики</a>
+        </li>
+        <li>
+          <a href="#">Подписки</a>
+        </li>
+        <li>
+          <a href="#">Комментарии</a>
+        </li>
+        <li>
+          <a href="#">Закладки</a>
+        </li>
+        <li>
+          <a href="#">Настройки</a>
+        </li>
+        <li>
+          <a
+            href="#"
+            onClick={(event) => {
+              event.preventDefault()
+              signOut()
+            }}
+          >
+            Выйти из&nbsp;аккаунта
+          </a>
+        </li>
+      </ul>
+    </Popup>
+  )
+}

src/components/Pages/AuthorPage.tsx

@@ -1,8 +1,8 @@
 import { MainLayout } from '../Layouts/MainLayout'
-import { AuthorView } from '../Views/Author'
+import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../Views/Author'
 import type { PageProps } from '../types'
 import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { loadArticlesForAuthors, resetSortedArticles } from '../../stores/zine/articles'
+import { loadAuthorArticles, resetSortedArticles } from '../../stores/zine/articles'
 import { useRouter } from '../../stores/router'
 import { loadAuthor } from '../../stores/zine/authors'
 import { Loading } from '../Loading'
@@ -27,7 +27,7 @@ export const AuthorPage = (props: PageProps) => {
       return
     }
 
-    await loadArticlesForAuthors({ authorSlugs: [slug()] })
+    await loadAuthorArticles({ authorSlug: slug(), limit: PRERENDERED_ARTICLES_COUNT })
     await loadAuthor({ slug: slug() })
 
     setIsLoaded(true)

src/components/Pages/FeedPage.tsx

@@ -1,30 +1,14 @@
 import { MainLayout } from '../Layouts/MainLayout'
 import { FeedView } from '../Views/Feed'
-import type { PageProps } from '../types'
+import { onCleanup } from 'solid-js'
-import { createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { resetSortedArticles } from '../../stores/zine/articles'
-import { loadRecentArticles, resetSortedArticles } from '../../stores/zine/articles'
-import { Loading } from '../Loading'
-
-export const FeedPage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.feedArticles))
-
-  onMount(async () => {
-    if (isLoaded()) {
-      return
-    }
-
-    await loadRecentArticles({ limit: 50, offset: 0 })
-
-    setIsLoaded(true)
-  })
 
+export const FeedPage = () => {
   onCleanup(() => resetSortedArticles())
 
   return (
     <MainLayout>
-      <Show when={isLoaded()} fallback={<Loading />}>
+      <FeedView />
-        <FeedView articles={props.feedArticles} />
-      </Show>
     </MainLayout>
   )
 }

src/components/Pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { HomeView } from '../Views/Home'
+import { HomeView, PRERENDERED_ARTICLES_COUNT } from '../Views/Home'
 import { MainLayout } from '../Layouts/MainLayout'
 import type { PageProps } from '../types'
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
@@ -14,7 +14,7 @@ export const HomePage = (props: PageProps) => {
       return
     }
 
-    await loadPublishedArticles({ limit: 5, offset: 0 })
+    await loadPublishedArticles({ limit: PRERENDERED_ARTICLES_COUNT, offset: 0 })
     await loadRandomTopics()
 
     setIsLoaded(true)

src/components/Pages/TopicPage.tsx

@@ -1,8 +1,8 @@
 import { MainLayout } from '../Layouts/MainLayout'
-import { TopicView } from '../Views/Topic'
+import { PRERENDERED_ARTICLES_COUNT, TopicView } from '../Views/Topic'
 import type { PageProps } from '../types'
 import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { loadArticlesForTopics, resetSortedArticles } from '../../stores/zine/articles'
+import { loadTopicArticles, resetSortedArticles } from '../../stores/zine/articles'
 import { useRouter } from '../../stores/router'
 import { loadTopic } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
@@ -27,7 +27,7 @@ export const TopicPage = (props: PageProps) => {
       return
     }
 
-    await loadArticlesForTopics({ topicSlugs: [slug()] })
+    await loadTopicArticles({ topicSlug: slug(), limit: PRERENDERED_ARTICLES_COUNT, offset: 0 })
     await loadTopic({ slug: slug() })
 
     setIsLoaded(true)

src/components/Pages/about/ManifestPage.tsx

@@ -54,28 +54,29 @@ export const ManifestPage = () => {
 
             <div class="col-lg-10 offset-md-1">
               <p>
-                Дискурс&nbsp;&mdash; независимый художественно-аналитический журнал с&nbsp;горизонтальной редакцией,
+                Дискурс&nbsp;&mdash; независимый художественно-аналитический журнал с&nbsp;горизонтальной
-                основанный на&nbsp;принципах свободы слова, прямой демократии и&nbsp;совместного редактирования.
+                редакцией, основанный на&nbsp;принципах свободы слова, прямой демократии и&nbsp;совместного
-                Дискурс создаётся открытым медиасообществом ученых, журналистов, музыкантов, писателей,
+                редактирования. Дискурс создаётся открытым медиасообществом ученых, журналистов, музыкантов,
-                предпринимателей, философов, инженеров, художников и&nbsp;специалистов со&nbsp;всего мира,
+                писателей, предпринимателей, философов, инженеров, художников и&nbsp;специалистов
-                объединившихся, чтобы вместе делать общий журнал и&nbsp;объяснять с&nbsp;разных точек
+                со&nbsp;всего мира, объединившихся, чтобы вместе делать общий журнал и&nbsp;объяснять
-                зрения мозаичную картину современности.
+                с&nbsp;разных точек зрения мозаичную картину современности.
               </p>
               <p>
-                Мы&nbsp;пишем о&nbsp;культуре, науке и&nbsp;обществе, рассказываем о&nbsp;новых идеях и&nbsp;современном искусстве,
+                Мы&nbsp;пишем о&nbsp;культуре, науке и&nbsp;обществе, рассказываем о&nbsp;новых идеях
-                публикуем статьи, исследования, репортажи, интервью людей, чью прямую речь стоит услышать,
+                и&nbsp;современном искусстве, публикуем статьи, исследования, репортажи, интервью людей, чью
-                и&nbsp;работы художников из&nbsp;разных стран&nbsp;&mdash; от&nbsp;фильмов и&nbsp;музыки
+                прямую речь стоит услышать, и&nbsp;работы художников из&nbsp;разных стран&nbsp;&mdash;
-                до&nbsp;живописи и&nbsp;фотографии. Помогая друг другу делать публикации качественнее
+                от&nbsp;фильмов и&nbsp;музыки до&nbsp;живописи и&nbsp;фотографии. Помогая друг другу делать
-                и&nbsp;общим голосованием выбирая лучшие материалы для журнала, мы&nbsp;создаём новую
+                публикации качественнее и&nbsp;общим голосованием выбирая лучшие материалы для журнала,
-                горизонтальную журналистику, чтобы честно рассказывать о&nbsp;важном и&nbsp;интересном.
+                мы&nbsp;создаём новую горизонтальную журналистику, чтобы честно рассказывать о&nbsp;важном
+                и&nbsp;интересном.
               </p>
               <p>
-                Редакция Дискурса открыта для всех: у&nbsp;нас нет цензуры, запретных тем и&nbsp;идеологических рамок.
+                Редакция Дискурса открыта для всех: у&nbsp;нас нет цензуры, запретных тем
-                Каждый может <a href="/create">прислать материал</a> в&nbsp;журнал
+                и&nbsp;идеологических рамок. Каждый может <a href="/create">прислать материал</a>{' '}
-                и&nbsp;<a href="/about/guide">присоединиться к&nbsp;редакции</a>. Предоставляя трибуну
+                в&nbsp;журнал и&nbsp;<a href="/about/guide">присоединиться к&nbsp;редакции</a>. Предоставляя
-                для независимой журналистики и&nbsp;художественных проектов, мы&nbsp;помогаем людям
+                трибуну для независимой журналистики и&nbsp;художественных проектов, мы&nbsp;помогаем людям
-                рассказывать свои истории так, чтобы они были услышаны. Мы&nbsp;убеждены: чем больше
+                рассказывать свои истории так, чтобы они были услышаны. Мы&nbsp;убеждены: чем больше голосов
-                голосов будет звучать на&nbsp;Дискурсе, тем громче в&nbsp;полифонии мнений будет слышна истина.
+                будет звучать на&nbsp;Дискурсе, тем громче в&nbsp;полифонии мнений будет слышна истина.
               </p>
             </div>
 
@@ -91,23 +92,26 @@ export const ManifestPage = () => {
               </p>
               <h3 id="contribute">Предлагать материалы</h3>
               <p>
-                <a href="/create">Создавайте</a> свои статьи и&nbsp;художественные работы&nbsp;&mdash; лучшие из них будут
+                <a href="/create">Создавайте</a> свои статьи и&nbsp;художественные работы&nbsp;&mdash;
-                опубликованы в&nbsp;журнале. Дискурс&nbsp;&mdash; некоммерческое издание, авторы публикуются
+                лучшие из них будут опубликованы в&nbsp;журнале. Дискурс&nbsp;&mdash; некоммерческое
-                в&nbsp;журнале на&nbsp;общественных началах, получая при этом <a href="/create?collab=true">поддержку</a> редакции,
+                издание, авторы публикуются в&nbsp;журнале на&nbsp;общественных началах, получая при этом{' '}
-                право голоса, множество других возможностей и&nbsp;читателей по&nbsp;всему миру.
+                <a href="/create?collab=true">поддержку</a> редакции, право голоса, множество других
+                возможностей и&nbsp;читателей по&nbsp;всему миру.
               </p>
               <h3 id="donate">Поддерживать проект</h3>
-              <p>Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,</p>
               <p>
-                <a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на&nbsp;выпуск новых
+                Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,
-                материалов, оплату серверов, труда программистов, дизайнеров и&nbsp;редакторов.
+              </p>
+              <p>
+                <a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на&nbsp;выпуск
+                новых материалов, оплату серверов, труда программистов, дизайнеров и&nbsp;редакторов.
               </p>
               <h3 id="cooperation">Сотрудничать с&nbsp;журналом</h3>
               <p>
                 Мы всегда открыты для сотрудничества и&nbsp;рады единомышленникам. Если вы хотите помогать
                 журналу с&nbsp;редактурой, корректурой, иллюстрациями, переводами, версткой, подкастами,
-                мероприятиями, фандрайзингом или как-то ещё&nbsp;&mdash; скорее пишите нам
+                мероприятиями, фандрайзингом или как-то ещё&nbsp;&mdash; скорее пишите нам на&nbsp;
-                на&nbsp;<a href="mailto:welcome@discours.io">welcome@discours.io</a>.
+                <a href="mailto:welcome@discours.io">welcome@discours.io</a>.
               </p>
               <p>
                 Если вы представляете некоммерческую организацию и&nbsp;хотите сделать с&nbsp;нами
@@ -116,25 +120,26 @@ export const ManifestPage = () => {
               </p>
               <p>
                 Если вы разработчик и&nbsp;хотите помогать с&nbsp;развитием сайта Дискурса,{' '}
-                <a href="mailto:services@discours.io">присоединяйтесь к&nbsp;IT-команде самиздата</a>. Открытый
+                <a href="mailto:services@discours.io">присоединяйтесь к&nbsp;IT-команде самиздата</a>.
-                код платформы для независимой журналистики, а&nbsp;также всех наших спецпроектов
+                Открытый код платформы для независимой журналистики, а&nbsp;также всех наших спецпроектов
-                и&nbsp;медиаинструментов находится <a href="https://github.com/Discours">в&nbsp;свободном доступе на&nbsp;GitHub</a>.
+                и&nbsp;медиаинструментов находится{' '}
+                <a href="https://github.com/Discours">в&nbsp;свободном доступе на&nbsp;GitHub</a>.
               </p>
               <h3 id="follow">Как еще можно помочь</h3>
               <p>
                 Советуйте Дискурс друзьям и&nbsp;знакомым. Обсуждайте и&nbsp;распространяйте наши
                 публикации&nbsp;&mdash; все материалы открытой редакции можно читать и&nbsp;перепечатывать
-                бесплатно. Подпишитесь на&nbsp;самиздат{' '}
+                бесплатно. Подпишитесь на&nbsp;самиздат <a href="https://vk.com/discoursio">ВКонтакте</a>,
-                <a href="https://vk.com/discoursio">ВКонтакте</a>,
                 в&nbsp;<a href="https://facebook.com/discoursio">Фейсбуке</a>
-                и&nbsp;в&nbsp;<a href="https://t.me/discoursio">Телеграме</a>, а&nbsp;также
+                и&nbsp;в&nbsp;<a href="https://t.me/discoursio">Телеграме</a>, а&nbsp;также на&nbsp;
-                на&nbsp;<Opener name="subscribe">рассылку лучших материалов</Opener>,
+                <Opener name="subscribe">рассылку лучших материалов</Opener>, чтобы не&nbsp;пропустить
-                чтобы не&nbsp;пропустить ничего интересного.
+                ничего интересного.
               </p>
               <p>
                 <a href="https://forms.gle/9UnHBAz9Q3tjH5dAA">Рассказывайте о&nbsp;впечатлениях</a>
                 от&nbsp;материалов открытой редакции, <Opener name="feedback">делитесь идеями</Opener>,
-                интересными темами, о&nbsp;которых хотели бы узнать больше, и&nbsp;историями, которые нужно рассказать.
+                интересными темами, о&nbsp;которых хотели бы узнать больше, и&nbsp;историями, которые нужно
+                рассказать.
               </p>
             </div>
 
@@ -145,9 +150,9 @@ export const ManifestPage = () => {
             <div class="col-lg-10 offset-md-1">
               Если вы хотите предложить материал, сотрудничать, рассказать о&nbsp;проблеме, которую нужно
               осветить, сообщить об&nbsp;ошибке или баге, что-то обсудить, уточнить или посоветовать,
-              пожалуйста, <Opener name="feedback">напишите нам здесь</Opener> или
+              пожалуйста, <Opener name="feedback">напишите нам здесь</Opener> или на&nbsp;почту{' '}
-              на&nbsp;почту <a href="mailto:welcome@discours.io">welcome@discours.io</a>. Мы обязательно
+              <a href="mailto:welcome@discours.io">welcome@discours.io</a>. Мы обязательно ответим
-              ответим и&nbsp;постараемся реализовать все хорошие задумки.
+              и&nbsp;постараемся реализовать все хорошие задумки.
             </div>
           </div>
         </div>

src/components/Root.tsx

@@ -1,10 +1,11 @@
 // FIXME: breaks on vercel, research
 // import 'solid-devtools'
 
-import { hideModal, MODALS, setLocale, showModal } from '../stores/ui'
+import { MODALS, setLocale, showModal } from '../stores/ui'
-import { Component, createEffect, createMemo } from 'solid-js'
+import { Component, createEffect, createMemo, onMount } from 'solid-js'
 import { Routes, useRouter } from '../stores/router'
 import { Dynamic, isServer } from 'solid-js/web'
+import { getLogger } from '../utils/logger'
 
 import type { PageProps } from './types'
 
@@ -26,6 +27,7 @@ import { ProjectsPage } from './Pages/about/ProjectsPage'
 import { TermsOfUsePage } from './Pages/about/TermsOfUsePage'
 import { ThanksPage } from './Pages/about/ThanksPage'
 import { CreatePage } from './Pages/CreatePage'
+import { renewSession } from '../stores/auth'
 
 // TODO: lazy load
 // const HomePage = lazy(() => import('./Pages/HomePage'))
@@ -47,6 +49,7 @@ import { CreatePage } from './Pages/CreatePage'
 // const ThanksPage = lazy(() => import('./Pages/about/ThanksPage'))
 // const CreatePage = lazy(() => import('./Pages/about/CreatePage'))
 
+const log = getLogger('root')
 
 type RootSearchParams = {
   modal: string
@@ -83,6 +86,10 @@ export const Root = (props: PageProps) => {
     }
   })
 
+  onMount(() => {
+    renewSession()
+  })
+
   const pageComponent = createMemo(() => {
     const result = pagesMap[page().route]
 

src/components/Topic/Card.tsx

@@ -1,13 +1,16 @@
 import { capitalize, plural } from '../../utils'
-import { Show } from 'solid-js/web'
 import style from './Card.module.scss'
-import { createMemo } from 'solid-js'
+import { createMemo, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { locale } from '../../stores/ui'
 import { useAuthStore } from '../../stores/auth'
 import { follow, unfollow } from '../../stores/zine/common'
+import { getLogger } from '../../utils/logger'
+
+const log = getLogger('TopicCard')
+
 interface TopicProps {
   topic: Topic
   compact?: boolean

src/components/Topic/Full.tsx

@@ -1,5 +1,4 @@
-import { createMemo } from 'solid-js'
+import { createMemo, Show } from 'solid-js'
-import { Show } from 'solid-js/web'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
 import './Full.scss'

src/components/Views/Author.tsx

@@ -1,17 +1,18 @@
-import { Show, createMemo } from 'solid-js'
+import { Show, createMemo, createSignal, For, onMount } from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
-import Row2 from '../Feed/Row2'
+import { Row2 } from '../Feed/Row2'
-import Row3 from '../Feed/Row3'
+import { Row3 } from '../Feed/Row3'
-// import Beside from '../Feed/Beside'
+import { AuthorFull } from '../Author/Full'
-import AuthorFull from '../Author/Full'
 import { t } from '../../utils/intl'
 import { useAuthorsStore } from '../../stores/zine/authors'
-import { useArticlesStore } from '../../stores/zine/articles'
+import { loadAuthorArticles, useArticlesStore } from '../../stores/zine/articles'
 
 import '../../styles/Topic.scss'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useRouter } from '../../stores/router'
-import Beside from '../Feed/Beside'
+import { Beside } from '../Feed/Beside'
+import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
+import { splitToPages } from '../../utils/splitToPages'
 
 // TODO: load reactions on client
 type AuthorProps = {
@@ -26,16 +27,37 @@ type AuthorPageSearchParams = {
   by: '' | 'viewed' | 'rating' | 'commented' | 'recent'
 }
 
+export const PRERENDERED_ARTICLES_COUNT = 12
+const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
+
 export const AuthorView = (props: AuthorProps) => {
   const { sortedArticles } = useArticlesStore({
     sortedArticles: props.authorArticles
   })
   const { authorEntities } = useAuthorsStore({ authors: [props.author] })
   const { topicsByAuthor } = useTopicsStore()
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
   const author = createMemo(() => authorEntities()[props.authorSlug])
   const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
 
+  const loadMore = async () => {
+    saveScrollPosition()
+    const { hasMore } = await loadAuthorArticles({
+      authorSlug: author().slug,
+      limit: LOAD_MORE_PAGE_SIZE,
+      offset: sortedArticles().length
+    })
+    setIsLoadMoreButtonVisible(hasMore)
+    restoreScrollPosition()
+  }
+
+  onMount(async () => {
+    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
+      loadMore()
+    }
+  })
+
   const title = createMemo(() => {
     const m = searchParams().by
     if (m === 'viewed') return t('Top viewed')
@@ -44,6 +66,10 @@ export const AuthorView = (props: AuthorProps) => {
     return t('Top recent')
   })
 
+  const pages = createMemo<Shout[][]>(() =>
+    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
+  )
+
   return (
     <div class="container author-page">
       <Show when={author()} fallback={<div class="center">{t('Loading')}</div>}>
@@ -83,31 +109,39 @@ export const AuthorView = (props: AuthorProps) => {
         </div>
 
         <h3 class="col-12">{title()}</h3>
+
         <div class="row">
-          <Show when={sortedArticles().length > 0}>
+          <Beside
-            <Beside
+            title={t('Topics which supported by author')}
-              title={t('Topics which supported by author')}
+            values={topicsByAuthor()[author().slug].slice(0, 5)}
-              values={topicsByAuthor()[author().slug].slice(0, 5)}
+            beside={sortedArticles()[0]}
-              beside={sortedArticles()[0]}
+            wrapper={'topic'}
-              wrapper={'topic'}
+            topicShortDescription={true}
-              topicShortDescription={true}
+            isTopicCompact={true}
-              isTopicCompact={true}
+            isTopicInRow={true}
-              isTopicInRow={true}
+            iconButton={true}
-              iconButton={true}
+          />
-            />
+          <Row3 articles={sortedArticles().slice(1, 4)} />
-            <Row3 articles={sortedArticles().slice(1, 4)} />
+          <Row2 articles={sortedArticles().slice(4, 6)} />
+          <Row3 articles={sortedArticles().slice(6, 9)} />
+          <Row3 articles={sortedArticles().slice(9, 12)} />
 
-            <Show when={sortedArticles().length > 4}>
+          <For each={pages()}>
-              <Row2 articles={sortedArticles().slice(4, 6)} />
+            {(page) => (
-            </Show>
+              <>
+                <Row3 articles={page.slice(0, 3)} />
+                <Row3 articles={page.slice(3, 6)} />
+                <Row3 articles={page.slice(6, 9)} />
+              </>
+            )}
+          </For>
 
-            <Show when={sortedArticles().length > 6}>
+          <Show when={isLoadMoreButtonVisible()}>
-              <Row3 articles={sortedArticles().slice(6, 9)} />
+            <p class="load-more-container">
-            </Show>
+              <button class="button" onClick={loadMore}>
-
+                {t('Load more')}
-            <Show when={sortedArticles().length > 9}>
+              </button>
-              <Row3 articles={sortedArticles().slice(9, 12)} />
+            </p>
-            </Show>
           </Show>
         </div>
       </Show>

src/components/Views/Feed.tsx

@@ -1,6 +1,6 @@
-import { createMemo, For, Show } from 'solid-js'
+import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
-import type { Shout, Reaction } from '../../graphql/types.gen'
 import '../../styles/Feed.scss'
+import stylesBeside from '../../components/Feed/Beside.module.scss'
 import { Icon } from '../Nav/Icon'
 import { byCreated, sortBy } from '../../utils/sortby'
 import { TopicCard } from '../Topic/Card'
@@ -16,11 +16,6 @@ import { useAuthorsStore } from '../../stores/zine/authors'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
 
-interface FeedProps {
-  articles: Shout[]
-  reactions?: Reaction[]
-}
-
 // const AUTHORSHIP_REACTIONS = [
 //   ReactionKind.Accept,
 //   ReactionKind.Reject,
@@ -28,9 +23,11 @@ interface FeedProps {
 //   ReactionKind.Ask
 // ]
 
-export const FeedView = (props: FeedProps) => {
+export const FEED_PAGE_SIZE = 20
+
+export const FeedView = () => {
   // state
-  const { sortedArticles } = useArticlesStore({ sortedArticles: props.articles })
+  const { sortedArticles } = useArticlesStore()
   const reactions = useReactionsStore()
   const { sortedAuthors } = useAuthorsStore()
   const { topTopics } = useTopicsStore()
@@ -39,6 +36,8 @@ export const FeedView = (props: FeedProps) => {
 
   const topReactions = createMemo(() => sortBy(reactions(), byCreated))
 
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+
   // const expectingFocus = createMemo<Shout[]>(() => {
   //   // 1 co-author notifications needs
   //   // TODO: list of articles where you are co-author
@@ -52,13 +51,15 @@ export const FeedView = (props: FeedProps) => {
   //   return []
   // })
 
-  // eslint-disable-next-line unicorn/consistent-function-scoping
+  const loadMore = async () => {
-  const loadMore = () => {
+    const { hasMore } = await loadRecentArticles({ limit: FEED_PAGE_SIZE, offset: sortedArticles().length })
-    // const limit = props.limit || 50
+    setIsLoadMoreButtonVisible(hasMore)
-    // const offset = props.offset || 0
-    // FIXME
-    loadRecentArticles({ limit: 50, offset: 0 })
   }
+
+  onMount(() => {
+    loadMore()
+  })
+
   return (
     <>
       <div class="container feed">
@@ -90,7 +91,7 @@ export const FeedView = (props: FeedProps) => {
                 {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
               </For>
 
-              <div class="beside-column-title">
+              <div class={stylesBeside.besideColumnTitle}>
                 <h4>{t('Popular authors')}</h4>
                 <a href="/user/list">
                   {t('All authors')}
@@ -98,7 +99,7 @@ export const FeedView = (props: FeedProps) => {
                 </a>
               </div>
 
-              <ul class="beside-column">
+              <ul class={stylesBeside.besideColumn}>
                 <For each={topAuthors().slice(0, 5)}>
                   {(author) => (
                     <li>
@@ -112,10 +113,6 @@ export const FeedView = (props: FeedProps) => {
                 {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
               </For>
             </Show>
-
-            <p class="load-more-container">
-              <button class="button">{t('Load more')}</button>
-            </p>
           </div>
 
           <aside class="col-md-3">
@@ -135,12 +132,13 @@ export const FeedView = (props: FeedProps) => {
             </Show>
           </aside>
         </div>
-
+        <Show when={isLoadMoreButtonVisible()}>
-        <p class="load-more-container">
+          <p class="load-more-container">
-          <button class="button" onClick={loadMore}>
+            <button class="button" onClick={loadMore}>
-            {t('Load more')}
+              {t('Load more')}
-          </button>
+            </button>
-        </p>
+          </p>
+        </Show>
       </div>
     </>
   )

src/components/Views/Home.tsx

@@ -1,12 +1,12 @@
-import { createMemo, For, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import Banner from '../Discours/Banner'
 import { NavTopics } from '../Nav/Topics'
 import { Row5 } from '../Feed/Row5'
-import Row3 from '../Feed/Row3'
+import { Row3 } from '../Feed/Row3'
-import Row2 from '../Feed/Row2'
+import { Row2 } from '../Feed/Row2'
-import Row1 from '../Feed/Row1'
+import { Row1 } from '../Feed/Row1'
 import Hero from '../Discours/Hero'
-import Beside from '../Feed/Beside'
+import { Beside } from '../Feed/Beside'
 import RowShort from '../Feed/RowShort'
 import Slider from '../Feed/Slider'
 import Group from '../Feed/Group'
@@ -23,12 +23,14 @@ import {
 import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
 import { locale } from '../../stores/ui'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
+import { splitToPages } from '../../utils/splitToPages'
 
 type HomeProps = {
   randomTopics: Topic[]
   recentPublishedArticles: Shout[]
 }
-const PRERENDERED_ARTICLES_COUNT = 5
+
+export const PRERENDERED_ARTICLES_COUNT = 5
 const CLIENT_LOAD_ARTICLES_COUNT = 29
 const LOAD_MORE_PAGE_SIZE = 16 // Row1 + Row3 + Row2 + Beside (3 + 1) + Row1 + Row 2 + Row3
 
@@ -46,14 +48,20 @@ export const HomeView = (props: HomeProps) => {
   const { randomTopics, topTopics } = useTopicsStore({
     randomTopics: props.randomTopics
   })
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
   const { topAuthors } = useTopAuthorsStore()
 
-  onMount(() => {
+  onMount(async () => {
     loadTopArticles()
     loadTopMonthArticles()
     if (sortedArticles().length < PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT) {
-      loadPublishedArticles({ limit: CLIENT_LOAD_ARTICLES_COUNT, offset: sortedArticles().length })
+      const { hasMore } = await loadPublishedArticles({
+        limit: CLIENT_LOAD_ARTICLES_COUNT,
+        offset: sortedArticles().length
+      })
+
+      setIsLoadMoreButtonVisible(hasMore)
     }
   })
 
@@ -82,22 +90,23 @@ export const HomeView = (props: HomeProps) => {
 
   const loadMore = async () => {
     saveScrollPosition()
-    await loadPublishedArticles({ limit: LOAD_MORE_PAGE_SIZE, offset: sortedArticles().length })
+
+    const { hasMore } = await loadPublishedArticles({
+      limit: LOAD_MORE_PAGE_SIZE,
+      offset: sortedArticles().length
+    })
+    setIsLoadMoreButtonVisible(hasMore)
+
     restoreScrollPosition()
   }
 
-  const pages = createMemo<Shout[][]>(() => {
+  const pages = createMemo<Shout[][]>(() =>
-    return sortedArticles()
+    splitToPages(
-      .slice(PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT)
+      sortedArticles(),
-      .reduce((acc, article, index) => {
+      PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT,
-        if (index % LOAD_MORE_PAGE_SIZE === 0) {
+      LOAD_MORE_PAGE_SIZE
-          acc.push([])
+    )
-        }
+  )
-
-        acc[acc.length - 1].push(article)
-        return acc
-      }, [] as Shout[][])
-  })
 
   return (
     <Show when={locale() && sortedArticles().length > 0}>
@@ -170,11 +179,13 @@ export const HomeView = (props: HomeProps) => {
         )}
       </For>
 
-      <p class="load-more-container">
+      <Show when={isLoadMoreButtonVisible()}>
-        <button class="button" onClick={loadMore}>
+        <p class="load-more-container">
-          {t('Load more')}
+          <button class="button" onClick={loadMore}>
-        </button>
+            {t('Load more')}
-      </p>
+          </button>
+        </p>
+      </Show>
     </Show>
   )
 }

src/components/Views/Topic.tsx

@@ -1,16 +1,18 @@
-import { For, Show, createMemo } from 'solid-js'
+import { For, Show, createMemo, onMount, createSignal } from 'solid-js'
 import type { Shout, Topic } from '../../graphql/types.gen'
-import Row3 from '../Feed/Row3'
+import { Row3 } from '../Feed/Row3'
-import Row2 from '../Feed/Row2'
+import { Row2 } from '../Feed/Row2'
-import Beside from '../Feed/Beside'
+import { Beside } from '../Feed/Beside'
 import { ArticleCard } from '../Feed/Card'
 import '../../styles/Topic.scss'
 import { FullTopic } from '../Topic/Full'
 import { t } from '../../utils/intl'
 import { useRouter } from '../../stores/router'
 import { useTopicsStore } from '../../stores/zine/topics'
-import { useArticlesStore } from '../../stores/zine/articles'
+import { loadPublishedArticles, useArticlesStore } from '../../stores/zine/articles'
 import { useAuthorsStore } from '../../stores/zine/authors'
+import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
+import { splitToPages } from '../../utils/splitToPages'
 
 type TopicsPageSearchParams = {
   by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
@@ -22,9 +24,14 @@ interface TopicProps {
   topicSlug: string
 }
 
+export const PRERENDERED_ARTICLES_COUNT = 21
+const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
+
 export const TopicView = (props: TopicProps) => {
   const { searchParams, changeSearchParam } = useRouter<TopicsPageSearchParams>()
 
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+
   const { sortedArticles } = useArticlesStore({ sortedArticles: props.topicArticles })
   const { topicEntities } = useTopicsStore({ topics: [props.topic] })
 
@@ -32,6 +39,24 @@ export const TopicView = (props: TopicProps) => {
 
   const topic = createMemo(() => topicEntities()[props.topicSlug])
 
+  const loadMore = async () => {
+    saveScrollPosition()
+
+    const { hasMore } = await loadPublishedArticles({
+      limit: LOAD_MORE_PAGE_SIZE,
+      offset: sortedArticles().length
+    })
+    setIsLoadMoreButtonVisible(hasMore)
+
+    restoreScrollPosition()
+  }
+
+  onMount(async () => {
+    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
+      loadMore()
+    }
+  })
+
   const title = createMemo(() => {
     const m = searchParams().by
     if (m === 'viewed') return t('Top viewed')
@@ -40,6 +65,10 @@ export const TopicView = (props: TopicProps) => {
     return t('Top recent')
   })
 
+  const pages = createMemo<Shout[][]>(() =>
+    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
+  )
+
   return (
     <div class="topic-page container">
       <Show when={topic()}>
@@ -110,6 +139,24 @@ export const TopicView = (props: TopicProps) => {
             <Row3 articles={sortedArticles().slice(15, 18)} />
             <Row3 articles={sortedArticles().slice(18, 21)} />
           </Show>
+
+          <For each={pages()}>
+            {(page) => (
+              <>
+                <Row3 articles={page.slice(0, 3)} />
+                <Row3 articles={page.slice(3, 6)} />
+                <Row3 articles={page.slice(6, 9)} />
+              </>
+            )}
+          </For>
+
+          <Show when={isLoadMoreButtonVisible()}>
+            <p class="load-more-container">
+              <button class="button" onClick={loadMore}>
+                {t('Load more')}
+              </button>
+            </p>
+          </Show>
         </div>
       </Show>
     </div>

src/components/types.ts

@@ -8,7 +8,6 @@ export type PageProps = {
   authorArticles?: Shout[]
   topicArticles?: Shout[]
   homeArticles?: Shout[]
-  feedArticles?: Shout[]
   author?: Author
   allAuthors?: Author[]
   topic?: Topic

src/graphql/mutation/article-create.ts

@@ -1,8 +1,7 @@
 import { gql } from '@urql/core'
 
-
 export default gql`
-  mutation CreateShoutMutations($shout: ShoutInput!) {
+  mutation CreateShoutMutation($shout: ShoutInput!) {
     createShout(input: $shout) {
       error
       shout {

src/graphql/mutation/article-destroy.ts

@@ -1,6 +1,5 @@
 import { gql } from '@urql/core'
 
-
 export default gql`
   mutation DeleteShoutMutation($shout: String!) {
     deleteShout(slug: $shout) {

src/graphql/mutation/auth-confirm-email.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  mutation ConfirmEmailMutation($code: String!) {
+  mutation ConfirmEmailMutation($token: String!) {
-    confirmEmail(code: $code) {
+    confirmEmail(token: $token) {
       error
       token
       user {

src/graphql/mutation/reaction-destroy.ts

@@ -1,6 +1,5 @@
 import { gql } from '@urql/core'
 
-
 export default gql`
   mutation DeleteReactionMutation($id: Int!) {
     deleteReaction(id: $id) {

src/graphql/types.gen.ts

@@ -171,7 +171,7 @@ export type Mutation = {
 }
 
 export type MutationConfirmEmailArgs = {
-  token: Scalars['String']
+  code: Scalars['String']
 }
 
 export type MutationCreateChatArgs = {

src/locales/ru.json

@@ -47,7 +47,7 @@
   "Horizontal collaborative journalistic platform": "Горизонтальная платформа для коллаборативной журналистики",
   "How it works": "Как это работает",
   "How to write an article": "Как написать статью",
-  "I have an account": "У меня есть аккаунт",
+  "I have an account": "У меня есть аккаунт!",
   "I have no account yet": "У меня еще нет аккаунта",
   "I know the password": "Я знаю пароль",
   "Join our maillist": "Чтобы получать рассылку лучших публикаций, просто укажите свою почту",
@@ -157,7 +157,13 @@
   "Restore password": "Восстановить пароль",
   "Hooray! Welcome!": "Ура! Добро пожаловать!",
   "You've confirmed email": "Вы подтвердили почту",
-  "You've confirmed your account": "Вы подтвердили свою учётную запись",
   "This email is already taken. If it's you": "Такой email уже зарегистрирован. Если это вы",
-  "enter": "войдите"
+  "enter": "войдите",
+  "Go to main page": "Перейти на главную",
+  "Back to main page": "Вернуться на главную",
+  "Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.",
+  "We've sent you a message with a link to enter our website.": "Мы выслали вам письмо с ссылкой на почту. Перейдите по ссылке в письме, чтобы войти на сайт.",
+  "Send link again": "Прислать ссылку ещё раз",
+  "Link sent, check your email": "Ссылка отправлена, проверьте почту",
+  "Create post": "Создать публикацию"
 }

src/pages/author/[slug]/index.astro

@@ -3,9 +3,10 @@ import { Root } from '../../../components/Root'
 import Zine from '../../../layouts/zine.astro'
 import { apiClient } from '../../../utils/apiClient'
 import { initRouter } from '../../../stores/router'
+import { PRERENDERED_ARTICLES_COUNT } from '../../../components/Views/Author'
 
 const slug = Astro.params.slug.toString()
-const articles = await apiClient.getArticlesForAuthors({ authorSlugs: [slug], limit: 50 })
+const articles = await apiClient.getArticlesForAuthors({ authorSlugs: [slug], limit: PRERENDERED_ARTICLES_COUNT })
 const author = articles[0].authors.find((a) => a.slug === slug)
 
 const { pathname, search } = Astro.url

src/pages/confirm/[token].astro

@@ -1,4 +1,12 @@
 ---
+import { Confirmed } from '../../components/Nav/Confirmed'
+import { t } from '../../utils/intl'
+
 const token = Astro.params.token?.toString() || ''
-return Astro.redirect('/?modal=confirm-oauth&token=' + token)
 ---
+<html>
+<head><title>{t('Discours')}</title></head>
+<body>
+  <Confirmed token={token} />
+</body>
+</html>

src/pages/confirm/index.astro

@@ -0,0 +1,10 @@
+---
+import { t } from '../../utils/intl'
+import { Confirmed } from '../../components/Nav/Confirmed'
+---
+<html>
+<head><title>{t('Discours')}</title></head>
+<body>
+    <Confirmed />
+</body>
+</html>

src/pages/feed/index.astro

@@ -1,16 +1,12 @@
 ---
 import { Root } from '../../components/Root'
 import Zine from '../../layouts/zine.astro'
-import { apiClient } from '../../utils/apiClient'
-
 import { initRouter } from '../../stores/router'
 
 const { pathname, search } = Astro.url
 initRouter(pathname, search)
-
-const articles = await apiClient.getRecentArticles({ limit: 50 })
 ---
 
 <Zine>
-  <Root feedArticles={articles} client:load />
+  <Root client:load />
 </Zine>

src/pages/index.astro

@@ -3,14 +3,14 @@ import Zine from '../layouts/zine.astro'
 import { Root } from '../components/Root'
 import { apiClient } from '../utils/apiClient'
 import { initRouter } from '../stores/router'
+import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Home'
 
 const randomTopics = await apiClient.getRandomTopics({ amount: 12 })
-const articles = await apiClient.getRecentPublishedArticles({ limit: 5 })
+const articles = await apiClient.getRecentPublishedArticles({ limit: PRERENDERED_ARTICLES_COUNT })
 
 const { pathname, search } = Astro.url
 initRouter(pathname, search)
 
-
 Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate')
 ---
 

src/pages/topic/[slug].astro

@@ -2,9 +2,10 @@
 import { Root } from '../../components/Root'
 import Zine from '../../layouts/zine.astro'
 import { apiClient } from '../../utils/apiClient'
+import { PRERENDERED_ARTICLES_COUNT } from '../../components/Views/Topic'
 
 const slug = Astro.params.slug?.toString() || ''
-const articles = await apiClient.getArticlesForTopics({ topicSlugs: [slug], limit: 50 })
+const articles = await apiClient.getArticlesForTopics({ topicSlugs: [slug], limit: PRERENDERED_ARTICLES_COUNT })
 const topic = articles[0].topics.find(({ slug: topicSlug }) => topicSlug === slug)
 
 import { initRouter } from '../../stores/router'

src/pages/welcome.astro

@@ -1,3 +1,3 @@
 ---
-return Astro.redirect('/?modal=auth&mode=welcome')
+return Astro.redirect('/?modal=auth&mode=register')
 ---

src/stores/auth.ts

@@ -11,7 +11,6 @@ export const signIn = async (params) => {
   setToken(authResult.token)
   console.debug('signed in')
 }
-
 export const signOut = () => {
   // TODO: call backend to revoke token
   setSession(null)
@@ -54,7 +53,7 @@ export const register = async ({
   })
 }
 
-export const signSendLink = async ({ email, lang }: { email: string, lang: string }) => {
+export const signSendLink = async ({ email, lang }: { email: string; lang: string }) => {
   await apiClient.authSendLink({ email, lang })
 }
 

src/stores/ui.ts

@@ -4,7 +4,7 @@ import { useRouter } from './router'
 
 //export const locale = persistentAtom<string>('locale', 'ru')
 export const [locale, setLocale] = createSignal('ru')
-export type ModalType = 'auth' | 'subscribe' | 'feedback' | 'share' | 'thank' | 'donate'
+export type ModalType = 'auth' | 'subscribe' | 'feedback' | 'thank' | 'donate'
 type WarnKind = 'error' | 'warn' | 'info'
 
 export interface Warning {
@@ -17,7 +17,6 @@ export const MODALS: Record<ModalType, ModalType> = {
   auth: 'auth',
   subscribe: 'subscribe',
   feedback: 'feedback',
-  share: 'share',
   thank: 'thank',
   donate: 'donate'
 }

src/stores/zine/articles.ts

@@ -123,40 +123,109 @@ const addSortedArticles = (articles: Shout[]) => {
   setSortedArticles((prevSortedArticles) => [...prevSortedArticles, ...articles])
 }
 
+export const loadFeed = async ({
+  limit,
+  offset
+}: {
+  limit: number
+  offset?: number
+}): Promise<{ hasMore: boolean }> => {
+  // TODO: load actual feed
+  return await loadRecentArticles({ limit, offset })
+}
+
 export const loadRecentArticles = async ({
   limit,
   offset
 }: {
-  limit?: number
+  limit: number
   offset?: number
-}): Promise<void> => {
+}): Promise<{ hasMore: boolean }> => {
-  const newArticles = await apiClient.getRecentArticles({ limit, offset })
+  const newArticles = await apiClient.getRecentArticles({ limit: limit + 1, offset })
+  const hasMore = newArticles.length === limit + 1
+
+  if (hasMore) {
+    newArticles.splice(-1)
+  }
+
   addArticles(newArticles)
   addSortedArticles(newArticles)
+
+  return { hasMore }
 }
 
 export const loadPublishedArticles = async ({
   limit,
-  offset
+  offset = 0
 }: {
-  limit?: number
+  limit: number
   offset?: number
-}): Promise<void> => {
+}): Promise<{ hasMore: boolean }> => {
-  const newArticles = await apiClient.getPublishedArticles({ limit, offset })
+  const newArticles = await apiClient.getPublishedArticles({ limit: limit + 1, offset })
+  const hasMore = newArticles.length === limit + 1
+
+  if (hasMore) {
+    newArticles.splice(-1)
+  }
+
   addArticles(newArticles)
   addSortedArticles(newArticles)
+
+  return { hasMore }
 }
 
-export const loadArticlesForAuthors = async ({ authorSlugs }: { authorSlugs: string[] }): Promise<void> => {
+export const loadAuthorArticles = async ({
-  const articles = await apiClient.getArticlesForAuthors({ authorSlugs, limit: 50 })
+  authorSlug,
-  addArticles(articles)
+  limit,
-  setSortedArticles(articles)
+  offset = 0
+}: {
+  authorSlug: string
+  limit: number
+  offset?: number
+}): Promise<{ hasMore: boolean }> => {
+  const newArticles = await apiClient.getArticlesForAuthors({
+    authorSlugs: [authorSlug],
+    limit: limit + 1,
+    offset
+  })
+
+  const hasMore = newArticles.length === limit + 1
+
+  if (hasMore) {
+    newArticles.splice(-1)
+  }
+
+  addArticles(newArticles)
+  addSortedArticles(newArticles)
+
+  return { hasMore }
 }
 
-export const loadArticlesForTopics = async ({ topicSlugs }: { topicSlugs: string[] }): Promise<void> => {
+export const loadTopicArticles = async ({
-  const articles = await apiClient.getArticlesForTopics({ topicSlugs, limit: 50 })
+  topicSlug,
-  addArticles(articles)
+  limit,
-  setSortedArticles(articles)
+  offset
+}: {
+  topicSlug: string
+  limit: number
+  offset: number
+}): Promise<{ hasMore: boolean }> => {
+  const newArticles = await apiClient.getArticlesForTopics({
+    topicSlugs: [topicSlug],
+    limit: limit + 1,
+    offset
+  })
+
+  const hasMore = newArticles.length === limit + 1
+
+  if (hasMore) {
+    newArticles.splice(-1)
+  }
+
+  addArticles(newArticles)
+  addSortedArticles(newArticles)
+
+  return { hasMore }
 }
 
 export const resetSortedArticles = () => {