Merge remote-tracking branch 'origin/dev' into prepare-inbox

# Conflicts:
#	src/components/Nav/AuthModal/ForgotPasswordForm.tsx
#	src/graphql/types.gen.ts
#	src/stores/auth.ts
#	src/utils/apiClient.ts
#	src/utils/config.ts

package.json

@@ -107,7 +107,6 @@
     "prosemirror-markdown": "^1.9.4",
     "prosemirror-menu": "^1.2.1",
     "prosemirror-model": "^1.16.0",
-    "prosemirror-schema-basic": "^1.2.0",
     "prosemirror-schema-list": "^1.2.2",
     "prosemirror-state": "^1.4.1",
     "prosemirror-view": "^1.28.1",

public/icons/content-index-control-expanded.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 8V5H0V3H10V0L14 4L10 8Z" fill="black"/>
+</svg>

public/icons/content-index-control.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0015 20.0284H9.89562V18.3692H22.0015V20.0284ZM9.89562 15.0517H22.0015V13.3925H9.89562V15.0517ZM9.89562 10.0741V8.41491H22.0015V10.0741H9.89562Z" fill="black"/>
+<rect x="1" y="1" width="26" height="26" stroke="black" stroke-width="2"/>
+</svg>

public/icons/expand.svg

@@ -0,0 +1,2 @@
+<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12.8999L0.100098 3L2.57507 0.525024L10.0002 7.95013L17.4246 0.525716L19.8996 3.00069L12.4747 10.4256L12.4745 10.4254L10 12.8999Z" fill="#000"/></svg>

src/components/Article/FullArticle.tsx

@@ -7,10 +7,10 @@ import { createMemo, For, onMount, Show } from 'solid-js'
 import type { Author, Reaction, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
-import { useAuthStore } from '../../stores/auth'
 import { incrementView } from '../../stores/zine/articles'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
+import { useSession } from '../../context/session'
 
 const MAX_COMMENT_LEVEL = 6
 
@@ -38,7 +38,7 @@ const formatDate = (date: Date) => {
 }
 
 export const FullArticle = (props: ArticleProps) => {
-  const { session } = useAuthStore()
+  const { session } = useSession()
 
   onMount(() => {
     incrementView({ articleSlug: props.article.slug })

src/components/Article/SharePopup.tsx

@@ -1,7 +1,9 @@
 import { Icon } from '../Nav/Icon'
-import styles from '../Nav/Popup.module.scss'
 import { t } from '../../utils/intl'
-import { Popup, PopupProps } from '../Nav/Popup'
+
+import styles from '../_shared/Popup.module.scss'
+import type { PopupProps } from '../_shared/Popup'
+import { Popup } from '../_shared/Popup'
 
 type SharePopupProps = Omit<PopupProps, 'children'>
 

src/components/Author/Card.module.scss

@@ -15,14 +15,27 @@
 .authorDetails {
   display: flex;
   flex: 1;
-  padding-right: 1.2rem;
   width: max-content;
+
+  // padding-right: 1.2rem;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+  }
 }
 
 .authorDetailsWrapper {
+  flex: 1 100%;
+
+  @include media-breakpoint-up(sm) {
     flex: 1;
   }
 
+  @include media-breakpoint-up(md) {
+    padding-right: 1.2rem;
+  }
+}
+
 .authorName {
   border: none !important;
   font-size: 1.7rem;
@@ -33,15 +46,13 @@
 .authorAbout {
   font-size: 1.5rem;
   color: rgb(0 0 0 / 60%);
+  word-break: break-word;
 }
 
 .authorSubscribe {
   align-items: center;
   display: flex;
-
-  @include media-breakpoint-down(lg) {
   padding: 0 0 0 42px;
-  }
 
   a {
     background: #f7f7f7;
@@ -118,6 +129,10 @@
 
   button {
     margin-right: 0.5em;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
@@ -221,3 +236,23 @@
     vertical-align: middle;
   }
 }
+
+.authorsListItem {
+  .authorName {
+    @include font-size(2.2rem);
+
+    font-weight: bold;
+  }
+
+  .authorSubscribe {
+    align-items: baseline;
+
+    @include media-breakpoint-down(sm) {
+      padding: 1rem 0 0;
+    }
+  }
+
+  .buttonLabel {
+    display: block;
+  }
+}

src/components/Author/Card.tsx

@@ -1,14 +1,14 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from './Userpic'
 import { Icon } from '../Nav/Icon'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { createMemo, For, Show } from 'solid-js'
 import { translit } from '../../utils/ru2en'
 import { t } from '../../utils/intl'
-import { useAuthStore } from '../../stores/auth'
 import { locale } from '../../stores/ui'
 import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
+import { useSession } from '../../context/session'
 
 interface AuthorCardProps {
   compact?: boolean
@@ -19,10 +19,11 @@ interface AuthorCardProps {
   author: Author
   isAuthorPage?: boolean
   noSocialButtons?: boolean
+  isAuthorsList?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
-  const { session } = useAuthStore()
+  const { session } = useSession()
 
   const subscribed = createMemo<boolean>(
     () => session()?.news?.authors?.some((u) => u === props.author.slug) || false
@@ -36,51 +37,81 @@ export const AuthorCard = (props: AuthorCardProps) => {
   }
   // TODO: reimplement AuthorCard
   return (
-    <div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}>
+    <div
-      <Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} />
+      class={clsx(styles.author)}
+      classList={{
+        [styles.authorPage]: props.isAuthorPage,
+        [styles.authorsListItem]: props.isAuthorsList
+      }}
+    >
+      <Userpic
+        user={props.author}
+        hasLink={props.hasLink}
+        isBig={props.isAuthorPage}
+        isAuthorsList={props.isAuthorsList}
+      />
 
-      <div class={style.authorDetails}>
+      <div class={styles.authorDetails}>
-        <div class={style.authorDetailsWrapper}>
+        <div class={styles.authorDetailsWrapper}>
           <Show when={props.hasLink}>
-            <a class={style.authorName} href={`/author/${props.author.slug}`}>
+            <a class={styles.authorName} href={`/author/${props.author.slug}`}>
               {name()}
             </a>
           </Show>
           <Show when={!props.hasLink}>
-            <div class={style.authorName}>{name()}</div>
+            <div class={styles.authorName}>{name()}</div>
           </Show>
 
           <Show when={!props.hideDescription}>
-            <div class={style.authorAbout}>{bio()}</div>
+            <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
+              {bio()}
+            </div>
           </Show>
         </div>
 
         <Show when={canFollow()}>
-          <div class={style.authorSubscribe}>
+          <div class={styles.authorSubscribe}>
             <Show
               when={subscribed()}
               fallback={
                 <button
                   onClick={() => follow}
-                  class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                  class={clsx('button', styles.button)}
+                  classList={{
+                    [styles.buttonSubscribe]: !props.isAuthorsList,
+                    'button--subscribe': !props.isAuthorsList,
+                    'button--subscribe-topic': props.isAuthorsList,
+                    [styles.buttonWrite]: props.isAuthorsList
+                  }}
                 >
-                  <Icon name="author-subscribe" class={style.icon} />
+                  <Show when={!props.isAuthorsList}>
-                  <span class={style.buttonLabel}>&nbsp;{t('Follow')}</span>
+                    <Icon name="author-subscribe" class={styles.icon} />
+                    &nbsp;
+                  </Show>
+                  <span class={styles.buttonLabel}>{t('Follow')}</span>
                 </button>
               }
             >
               <button
                 onClick={() => unfollow}
-                class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                classList={{
+                  [styles.buttonSubscribe]: !props.isAuthorsList,
+                  'button--subscribe': !props.isAuthorsList,
+                  'button--subscribe-topic': props.isAuthorsList,
+                  [styles.buttonWrite]: props.isAuthorsList
+                }}
               >
-                <Icon name="author-unsubscribe" class={style.icon} />
+                <Show when={!props.isAuthorsList}>
-                <span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span>
+                  <Icon name="author-unsubscribe" class={styles.icon} />
+                  &nbsp;
+                </Show>
+                <span class={styles.buttonLabel}>{t('Unfollow')}</span>
               </button>
             </Show>
 
-            <Show when={!props.compact}>
+            <Show when={!props.compact && !props.isAuthorsList}>
-              <button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
+              <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
-                <Icon name="edit" class={style.icon} />
+                <Icon name="edit" class={styles.icon} />
                 {t('Write')}
               </button>
 

src/components/Author/Userpic.module.scss

@@ -20,7 +20,7 @@
     border: 2px solid black;
     background-color: white;
     text-align: center;
-    line-height: 32px;
+    line-height: 28px;
   }
 
   .anonymous {
@@ -47,3 +47,15 @@
     width: 100%;
   }
 }
+
+.authorsList {
+  margin-right: 2.4rem;
+  max-height: 6.8rem;
+  min-width: 6.8rem;
+  height: 6.8rem;
+  width: 6.8rem;
+
+  .userpic {
+    line-height: 6.4rem;
+  }
+}

src/components/Author/Userpic.tsx

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

src/components/Discours/Footer.module.scss

@@ -39,6 +39,11 @@
       padding: 0 $container-padding-x;
     }
   }
+
+  ::selection {
+    background: #fff;
+    color: #000;
+  }
 }
 
 .discoursFooterContent {
@@ -56,7 +61,7 @@
   padding-top: 1.6rem;
 
   a {
-    color: rgba(255, 255, 255, 0.7);
+    color: rgb(255 255 255 / 70%);
 
     &:hover {
       color: #fff;

src/components/Discours/Hero.scss

@@ -19,6 +19,11 @@
   .wide-container {
     padding: 0;
   }
+
+  ::selection {
+    background: #fff;
+    color: #000;
+  }
 }
 
 .about-discours__actions {

src/components/Discours/Subscribe.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onMount } from 'solid-js'
+import { createSignal } from 'solid-js'
 import styles from './Subscribe.module.scss'
 import { t } from '../../utils/intl'
 import { clsx } from 'clsx'

src/components/EditorExample/components/Sidebar.tsx

@@ -9,7 +9,6 @@ import { clsx } from 'clsx'
 import styles from './Sidebar.module.scss'
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
-import { hideModal } from '../../../stores/ui'
 
 const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
 

src/components/EditorNew/Editor.tsx

@@ -0,0 +1,79 @@
+import { onMount } from 'solid-js'
+import { EditorState, Transaction } from 'prosemirror-state'
+import { EditorView, MarkViewConstructor, NodeViewConstructor } from 'prosemirror-view'
+import './prosemirror/styles/ProseMirror.scss'
+import type { Nodes, Marks } from './prosemirror/schema'
+import { createImageView } from './prosemirror/views/image'
+import { schema } from './prosemirror/schema'
+import { createPlugins } from './prosemirror/plugins'
+import { DOMSerializer } from 'prosemirror-model'
+import { clsx } from 'clsx'
+import { createArticle } from '../../stores/zine/articles'
+import type { ShoutInput } from '../../graphql/types.gen'
+import { Sidebar } from './Sidebar'
+
+const htmlContainer = typeof document === 'undefined' ? null : document.createElement('div')
+
+const getHtml = (state: EditorState) => {
+  const fragment = DOMSerializer.fromSchema(schema).serializeFragment(state.doc.content)
+  htmlContainer.replaceChildren(fragment)
+  return htmlContainer.innerHTML
+}
+
+export const Editor = () => {
+  const editorElRef: {
+    current: HTMLDivElement
+  } = {
+    current: null
+  }
+
+  const editorViewRef: { current: EditorView } = { current: null }
+
+  const dispatchTransaction = (tr: Transaction) => {
+    const newState = editorViewRef.current.state.apply(tr)
+    editorViewRef.current.updateState(newState)
+  }
+
+  onMount(async () => {
+    const plugins = createPlugins({ schema })
+
+    const nodeViews: Partial<Record<Nodes, NodeViewConstructor>> = {
+      image: createImageView
+    }
+
+    const markViews: Partial<Record<Marks, MarkViewConstructor>> = {}
+
+    editorViewRef.current = new EditorView(editorElRef.current, {
+      state: EditorState.create({
+        schema,
+        plugins
+      }),
+      nodeViews,
+      markViews,
+      dispatchTransaction
+    })
+
+    editorViewRef.current.focus()
+  })
+
+  const handleSaveButtonClick = () => {
+    const article: ShoutInput = {
+      body: getHtml(editorViewRef.current.state),
+      community: 'discours', // ?
+      slug: 'new-' + Math.floor(Math.random() * 1000000)
+    }
+    createArticle({ article })
+  }
+
+  return (
+    <div class="container" style={{ display: 'flex' }}>
+      <div style={{ flex: 1 }}>
+        <div ref={(el) => (editorElRef.current = el)} />
+        <button class={clsx('button')} onClick={handleSaveButtonClick}>
+          Опубликовать WIP
+        </button>
+      </div>
+      <Sidebar editorViewRef={editorViewRef} />
+    </div>
+  )
+}

src/components/EditorNew/Sidebar.module.scss

@@ -0,0 +1,221 @@
+.sidebarContainer {
+  color: rgb(255 255 255 / 50%);
+  @include font-size(1.6rem);
+
+  overflow: hidden;
+  position: relative;
+  top: 0;
+
+  p {
+    color: var(--foreground);
+  }
+
+  h4 {
+    @include font-size(120%);
+
+    margin-left: 1rem;
+  }
+
+  button {
+    height: auto;
+    min-height: 50px;
+    padding: 0 1rem;
+    width: 100%;
+  }
+}
+
+.sidebarOff {
+  background: #1f1f1f;
+  height: 100%;
+  min-height: 100vh;
+  padding: 40px 20px 20px;
+  top: 0;
+  transform: translateX(0);
+  transition: transform 0.3s;
+  overflow-y: auto;
+  scrollbar-width: none;
+  width: 350px;
+
+  .sidebarContainerHidden & {
+    transform: translateX(100%);
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.sidebarOpener {
+  color: #000;
+  cursor: pointer;
+  opacity: 1;
+  position: absolute;
+  top: 1em;
+  transition: opacity 0.3s;
+
+  &:hover {
+    opacity: 0.5;
+  }
+
+  &::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;
+    left: 100%;
+    margin-left: 0.3em;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 18px;
+  }
+}
+
+.sidebarCloser {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1517 0.423857L0.42375 13.1518L2.84812 15.5761L15.576 2.84822L13.1517 0.423857Z M15.576 13.1518L2.84812 0.423855L0.423751 2.84822L13.1517 15.5761L15.576 13.1518Z' fill='white'/%3E%3C/svg%3E%0A");
+  cursor: pointer;
+  height: 16px;
+  opacity: 1;
+  position: absolute;
+  transition: opacity 0.3s;
+  top: 20px;
+  width: 16px;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+.sidebarLabel {
+  color: var(--foreground);
+
+  > i {
+    text-transform: none;
+  }
+}
+
+.sidebarContainer button,
+.sidebarContainer a,
+.sidebarItem {
+  margin: 0;
+  outline: none;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+  text-align: left;
+}
+
+.sidebarContainer a,
+.sidebarItem {
+  font-size: 18px;
+  padding: 2px 0;
+  width: 100%;
+}
+
+.sidebarLink {
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  justify-content: flex-start;
+
+  &:hover {
+    color: #fff !important;
+  }
+
+  &:active {
+    > span i {
+      position: relative;
+      box-shadow: none;
+      top: 1px;
+    }
+  }
+
+  &[disabled] {
+    color: var(--foreground);
+    cursor: not-allowed;
+  }
+
+  &.draft {
+    color: rgb(255 255 255 / 50%);
+    line-height: 1.4;
+    margin: 0 0 1em 1.5em;
+    width: calc(100% - 2rem);
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  > span {
+    justify-self: flex-end;
+    margin-left: auto;
+
+    > i {
+      border: 1px solid;
+      border-bottom-width: 2px;
+      border-radius: 0.2rem;
+      display: inline-block;
+      color: inherit;
+      font-size: 13px;
+      line-height: 1.4;
+      margin: 0 0.5em 0 0;
+      padding: 1px 4px;
+
+      &:last-child {
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+
+.themeSwitcher {
+  border-bottom: 1px solid rgb(255 255 255 / 30%);
+  border-top: 1px solid rgb(255 255 255 / 30%);
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem;
+  padding: 1em 0;
+
+  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,
+        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;
+      height: 28px;
+      line-height: 10em;
+      overflow: hidden;
+      position: relative;
+      transition: background-color 0.3s;
+      width: 46px;
+
+      &::before {
+        background-color: #fff;
+        border-radius: 100%;
+        content: '';
+        height: 16px;
+        left: 6px;
+        position: absolute;
+        top: 6px;
+        transition: left 0.3s, color 0.3s;
+        width: 16px;
+      }
+    }
+
+    &:checked + label {
+      background-color: #fff;
+
+      &::before {
+        background-color: #1f1f1f;
+        left: 24px;
+      }
+    }
+  }
+}

src/components/EditorNew/Sidebar.tsx

@@ -0,0 +1,113 @@
+import { For, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import type { JSX } from 'solid-js'
+import { undo, redo } from 'prosemirror-history'
+import { clsx } from 'clsx'
+import styles from './Sidebar.module.scss'
+import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
+import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
+import type { EditorView } from 'prosemirror-view'
+
+const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
+
+const Link = (props: {
+  withMargin?: boolean
+  disabled?: boolean
+  title?: string
+  className?: string
+  children: JSX.Element
+  onClick?: () => void
+}) => (
+  <button
+    class={clsx(styles.sidebarLink, props.className, {
+      [styles.withMargin]: props.withMargin
+    })}
+    onClick={props.onClick}
+    disabled={props.disabled}
+    title={props.title}
+    data-testid={props['data-testid']}
+  >
+    {props.children}
+  </button>
+)
+
+const Keys = (props: { keys: string[] }) => (
+  <span>
+    <For each={props.keys}>{(k) => <i>{k}</i>}</For>
+  </span>
+)
+
+type SidebarProps = {
+  editorViewRef: {
+    current: EditorView
+  }
+}
+
+export const Sidebar = (props: SidebarProps) => {
+  const [lastAction, setLastAction] = createSignal<string | undefined>()
+
+  const { editorViewRef } = props
+
+  const onUndo = () => undo(editorViewRef.current.state, editorViewRef.current.dispatch)
+  const onRedo = () => redo(editorViewRef.current.state, editorViewRef.current.dispatch)
+
+  const [isHidden, setIsHidden] = createSignal(true)
+
+  const toggleSidebar = () => {
+    setIsHidden((oldIsHidden) => !oldIsHidden)
+  }
+
+  createEffect(() => {
+    setLastAction()
+  })
+
+  createEffect(() => {
+    if (!lastAction()) return
+    const id = setTimeout(() => {
+      setLastAction()
+    }, 1000)
+    onCleanup(() => clearTimeout(id))
+  })
+
+  const [mod, setMod] = createSignal<'Ctrl' | 'Cmd'>('Ctrl')
+
+  onMount(() => {
+    setMod(navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl')
+  })
+
+  const containerRef: { current: HTMLElement } = {
+    current: null
+  }
+
+  useEscKeyDownHandler(() => setIsHidden(true))
+  useOutsideClickHandler({
+    containerRef,
+    predicate: () => !isHidden(),
+    handler: () => setIsHidden(true)
+  })
+
+  return (
+    <div
+      class={clsx(styles.sidebarContainer, {
+        [styles.sidebarContainerHidden]: isHidden()
+      })}
+      ref={(el) => (containerRef.current = el)}
+    >
+      <span class={styles.sidebarOpener} onClick={toggleSidebar}>
+        Советы и&nbsp;предложения
+      </span>
+
+      <Off onClick={() => editorViewRef.current.focus()}>
+        <div class={styles.sidebarCloser} onClick={toggleSidebar} />
+
+        <div>
+          <Link onClick={onUndo}>
+            Undo <Keys keys={[mod(), 'z']} />
+          </Link>
+          <Link onClick={onRedo}>
+            Redo <Keys keys={[mod(), 'Shift', 'z']} />
+          </Link>
+        </div>
+      </Off>
+    </div>
+  )
+}

src/components/EditorNew/prosemirror/helpers/menu.ts

@@ -0,0 +1,215 @@
+import { toggleMark } from 'prosemirror-commands'
+import { wrapInList } from 'prosemirror-schema-list'
+import { blockTypeItem, icons, MenuItem, wrapItem, Dropdown } from 'prosemirror-menu'
+
+import type { NodeSelection } from 'prosemirror-state'
+
+import { TextField, openPrompt } from './prompt'
+
+import type { DiscoursSchema } from '../schema'
+
+function wrapListItem(nodeType, options) {
+  return cmdItem(wrapInList(nodeType, options.attrs), options)
+}
+
+function canInsert(state, nodeType) {
+  const $from = state.selection.$from
+
+  for (let d = $from.depth; d >= 0; d--) {
+    const index = $from.index(d)
+
+    if ($from.node(d).canReplaceWith(index, index, nodeType)) return true
+  }
+
+  return false
+}
+
+function insertImageItem(nodeType) {
+  return new MenuItem({
+    icon: icons.image,
+    label: 'image',
+    enable(state) {
+      return canInsert(state, nodeType)
+    },
+    run(state, _, view) {
+      const {
+        from,
+        to,
+        node: { attrs }
+      } = state.selection as NodeSelection
+
+      openPrompt({
+        title: 'Insert image',
+        fields: {
+          src: new TextField({
+            label: 'Location',
+            required: true,
+            value: attrs && attrs.src
+          }),
+          title: new TextField({ label: 'Title', value: attrs && attrs.title }),
+          alt: new TextField({
+            label: 'Description',
+            value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' ')
+          })
+        },
+        onSubmit(newAttrs) {
+          view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(newAttrs)))
+          view.focus()
+        }
+      })
+    }
+  })
+}
+
+function cmdItem(cmd, options) {
+  const passedOptions = {
+    label: options.title,
+    run: cmd
+  }
+
+  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)
+  }
+
+  return new MenuItem(passedOptions)
+}
+
+function markActive(state, type) {
+  const { from, $from, to, empty } = state.selection
+
+  if (empty) return type.isInSet(state.storedMarks || $from.marks())
+
+  return state.doc.rangeHasMark(from, to, type)
+}
+
+function markItem(markType, options) {
+  const passedOptions = {
+    active(state) {
+      return markActive(state, markType)
+    },
+    enable: true
+  }
+
+  for (const prop in options) passedOptions[prop] = options[prop]
+
+  return cmdItem(toggleMark(markType), passedOptions)
+}
+
+function linkItem(markType) {
+  return new MenuItem({
+    title: 'Add or remove link',
+    icon: {
+      width: 18,
+      height: 18,
+      path: 'M3.27177 14.7277C2.06258 13.5186 2.06258 11.5527 3.27177 10.3435L6.10029 7.51502L4.75675 6.17148L1.92823 9C-0.0234511 10.9517 -0.0234511 14.1196 1.92823 16.0713C3.87991 18.023 7.04785 18.023 8.99952 16.0713L11.828 13.2428L10.4845 11.8992L7.65598 14.7277C6.44679 15.9369 4.48097 15.9369 3.27177 14.7277ZM6.87756 12.536L12.5346 6.87895L11.1203 5.46469L5.4633 11.1217L6.87756 12.536ZM6.17055 4.75768L8.99907 1.92916C10.9507 -0.0225206 14.1187 -0.0225201 16.0704 1.92916C18.022 3.88084 18.022 7.04878 16.0704 9.00046L13.2418 11.829L11.8983 10.4854L14.7268 7.65691C15.936 6.44772 15.936 4.4819 14.7268 3.27271C13.5176 2.06351 11.5518 2.06351 10.3426 3.2727L7.51409 6.10122L6.17055 4.75768Z'
+    },
+    active(state) {
+      return markActive(state, markType)
+    },
+    enable(state) {
+      return !state.selection.empty
+    },
+    run(state, dispatch, view) {
+      if (markActive(state, markType)) {
+        toggleMark(markType)(state, dispatch)
+
+        return true
+      }
+
+      openPrompt({
+        fields: {
+          href: new TextField({
+            label: 'Link target',
+            required: true
+          })
+        },
+        onSubmit(attrs) {
+          toggleMark(markType, attrs)(view.state, view.dispatch)
+          view.focus()
+        }
+      })
+    }
+  })
+}
+
+export const buildMenuItems = (schema: DiscoursSchema) => {
+  const toggleStrong = markItem(schema.marks.strong, {
+    title: 'Toggle strong style',
+    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'
+    }
+  })
+
+  const toggleEm = markItem(schema.marks.em, {
+    title: 'Toggle emphasis',
+    icon: {
+      width: 14,
+      height: 16,
+      path: 'M4.39216 0V3.42857H6.81882L3.06353 12.5714H0V16H8.78431V12.5714H6.35765L10.1129 3.42857H13.1765V0H4.39216Z'
+    }
+  })
+
+  const toggleLink = linkItem(schema.marks.link)
+
+  const insertImage = insertImageItem(schema.nodes.image)
+
+  const wrapBlockQuote = wrapItem(schema.nodes.blockquote, {
+    title: 'Wrap in block quote',
+    icon: icons.blockquote
+  })
+
+  const headingIcons = [
+    'M0 12H2.57143V7.16571H7.95429V12H10.5257V0H7.95429V4.83429H2.57143V0H0V12Z M12.6801 12H19.3315V9.78857H17.3944V0.342858H15.5087L12.6801 1.42286V3.75429L14.8744 2.93143V9.78857H12.6801V12Z',
+    'M0 12H2.57143V7.16571H7.95429V12H10.5257V0H7.95429V4.83429H2.57143V0H0V12Z M12.4915 12H21.2515V9.78857H15.4229C15.4229 9.05143 16.6229 8.43429 17.9944 7.59429C19.5372 6.68571 21.1658 5.52 21.1658 3.54857C21.1658 1.16571 19.2458 0.102858 16.8972 0.102858C15.4744 0.102858 14.0858 0.48 12.8858 1.33714V3.73714C14.1201 2.79429 15.4915 2.36571 16.6744 2.36571C17.8229 2.36571 18.5772 2.79429 18.5772 3.65143C18.5772 4.76571 17.5487 5.22857 16.3315 5.93143C14.6172 6.94286 12.4915 8.02286 12.4915 10.8514V12Z',
+    'M0 11.7647H2.52101V7.02521H7.79832V11.7647H10.3193V0H7.79832V4.7395H2.52101V0H0V11.7647Z M16.3474 12C18.7004 12 20.9189 11.042 20.9189 8.63866C20.9189 6.95798 19.8936 6.06723 18.7172 5.71429C19.7928 5.34454 20.4483 4.43697 20.4483 3.2605C20.4483 1.17647 18.6836 0.100841 16.3138 0.100841C14.9189 0.100841 13.6079 0.436975 12.5827 0.991597V3.34454C13.7088 2.63865 14.9357 2.31933 15.9609 2.31933C17.339 2.31933 18.0617 2.78992 18.0617 3.61345C18.0617 4.40336 17.3558 4.82353 16.2466 4.80672L14.6668 4.78992L14.6499 6.97479H16.5323C17.6752 6.97479 18.5155 7.31092 18.5155 8.28571C18.5155 9.36134 17.4399 9.7647 16.1457 9.78151C14.8348 9.79832 13.692 9.59664 12.381 8.87395V11.2269C13.692 11.7647 14.8852 12 16.3474 12Z'
+  ]
+
+  // 3 is the max heading level mb move to constant
+  const headings: MenuItem[] = []
+
+  for (let i = 0; i < 3; i++) {
+    headings.push(
+      blockTypeItem(schema.nodes.heading, {
+        label: `H${i + 1}`,
+        attrs: { level: i + 1 },
+        icon: {
+          width: 22,
+          height: 12,
+          path: headingIcons[i]
+        }
+      })
+    )
+  }
+
+  const typeMenu = new Dropdown([...headings, wrapBlockQuote], {
+    label: 'Тт',
+    class: 'editor-dropdown'
+  })
+
+  const wrapBulletList = wrapListItem(schema.nodes.bullet_list, {
+    title: 'Wrap in bullet list',
+    icon: {
+      width: 20,
+      height: 16,
+      path: 'M0.000114441 1.6C0.000114441 0.714665 0.71478 0 1.60011 0C2.48544 0 3.20011 0.714665 3.20011 1.6C3.20011 2.48533 2.48544 3.19999 1.60011 3.19999C0.71478 3.19999 0.000114441 2.48533 0.000114441 1.6ZM0 8.00013C0 7.1148 0.714665 6.40014 1.6 6.40014C2.48533 6.40014 3.19999 7.1148 3.19999 8.00013C3.19999 8.88547 2.48533 9.60013 1.6 9.60013C0.714665 9.60013 0 8.88547 0 8.00013ZM1.6 12.8C0.714665 12.8 0 13.5254 0 14.4C0 15.2747 0.725332 16 1.6 16C2.47466 16 3.19999 15.2747 3.19999 14.4C3.19999 13.5254 2.48533 12.8 1.6 12.8ZM19.7333 15.4662H4.79999V13.3329H19.7333V15.4662ZM4.79999 9.06677H19.7333V6.93344H4.79999V9.06677ZM4.79999 2.66664V0.533307H19.7333V2.66664H4.79999Z'
+    }
+  })
+
+  const wrapOrderedList = wrapListItem(schema.nodes.ordered_list, {
+    title: 'Wrap in ordered list',
+    icon: {
+      width: 19,
+      height: 16,
+      path: 'M2.00002 4.00003H1.00001V1.00001H0V0H2.00002V4.00003ZM2.00002 13.5V13H0V12H3.00003V16H0V15H2.00002V14.5H1.00001V13.5H2.00002ZM0 6.99998H1.80002L0 9.1V10H3.00003V9H1.20001L3.00003 6.89998V5.99998H0V6.99998ZM4.9987 2.99967V0.999648H18.9988V2.99967H4.9987ZM4.9987 15.0001H18.9988V13.0001H4.9987V15.0001ZM18.9988 8.99987H4.9987V6.99986H18.9988V8.99987Z'
+    }
+  })
+
+  const listMenu = [wrapBulletList, wrapOrderedList]
+  const inlineMenu = [toggleStrong, toggleEm]
+
+  return [[typeMenu, ...inlineMenu, toggleLink, insertImage, ...listMenu]]
+}

src/components/EditorNew/prosemirror/helpers/prompt.ts

@@ -0,0 +1,197 @@
+const prefix = 'ProseMirror-prompt'
+
+const createButton = ({
+  textContent,
+  type = 'button',
+  className,
+  onClick
+}: {
+  textContent: string
+  type?: 'button' | 'submit'
+  className: string
+  onClick?: () => void
+}) => {
+  const button = document.createElement('button')
+  button.type = type
+  button.className = className
+  button.textContent = textContent
+
+  if (onClick) {
+    button.addEventListener('click', onClick)
+  }
+
+  return button
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function openPrompt(options: {
+  title?: string
+  fields: Record<string, Field>
+  onSubmit: (values: Record<string, string>) => void
+}) {
+  const wrapper = document.body.appendChild(document.createElement('div'))
+  wrapper.className = prefix
+
+  const mouseOutside = (ev: MouseEvent & { target: Node }) => {
+    if (!wrapper.contains(ev.target)) {
+      close()
+    }
+  }
+
+  setTimeout(() => window.addEventListener('mousedown', mouseOutside), 50)
+
+  const close = () => {
+    window.removeEventListener('mousedown', mouseOutside)
+    if (wrapper.parentNode) wrapper.remove()
+  }
+
+  const domFields: HTMLElement[] = []
+
+  Object.keys(options.fields).forEach((name) => {
+    domFields.push(options.fields[name].render())
+  })
+
+  const submitButton = createButton({ textContent: 'OK', type: 'submit', className: prefix + '-submit' })
+  const cancelButton = createButton({
+    className: prefix + '-cancel',
+    textContent: 'Cancel',
+    onClick: close
+  })
+
+  const form = wrapper.appendChild(document.createElement('form'))
+
+  if (options.title) {
+    form.appendChild(document.createElement('h5')).textContent = options.title
+  }
+
+  domFields.forEach((fieldEl: HTMLElement) => {
+    form.appendChild(document.createElement('div')).appendChild(fieldEl)
+  })
+
+  const buttons = form.appendChild(document.createElement('div'))
+  buttons.className = prefix + '-buttons'
+  buttons.appendChild(submitButton)
+  buttons.appendChild(document.createTextNode(' '))
+  buttons.appendChild(cancelButton)
+
+  const box = wrapper.getBoundingClientRect()
+  wrapper.style.top = (window.innerHeight - box.height) / 2 + 'px'
+  wrapper.style.left = (window.innerWidth - box.width) / 2 + 'px'
+
+  const submit = () => {
+    const values = getValues(options.fields, domFields)
+    if (values) {
+      close()
+      options.onSubmit(values)
+    }
+  }
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault()
+    submit()
+  })
+
+  form.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      close()
+    } else if (e.key === 'Enter' && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
+      e.preventDefault()
+      submit()
+    } else if (e.key === 'Tab') {
+      window.setTimeout(() => {
+        if (!wrapper.contains(document.activeElement)) close()
+      }, 500)
+    }
+  })
+
+  form.querySelector('input')?.focus()
+}
+
+function getValues(fields: Record<string, Field>, domFields: HTMLElement[]) {
+  const result = {}
+
+  // TODO: make field read its own value, maybe move to SolidJS
+  const fieldNames = Object.keys(fields)
+
+  for (const [i, fieldName] of fieldNames.entries()) {
+    const field = fields[fieldName]
+
+    const dom = domFields[i]
+    const value = field.read(dom)
+    const bad = field.validate(value)
+
+    if (bad) {
+      reportInvalid(dom, bad)
+      return null
+    }
+
+    result[fieldName] = field.clean(value)
+  }
+
+  return result
+}
+
+function reportInvalid(dom: HTMLElement, message: string) {
+  const msg: HTMLElement = dom.parentNode.appendChild(document.createElement('div'))
+  msg.style.left = dom.offsetLeft + dom.offsetWidth + 2 + 'px'
+  msg.style.top = dom.offsetTop - 5 + 'px'
+  msg.className = 'ProseMirror-invalid'
+  msg.textContent = message
+  setTimeout(msg.remove, 1500)
+}
+
+export abstract class Field {
+  options: any
+
+  constructor(options: any) {
+    this.options = options
+  }
+
+  read(dom: any) {
+    return dom.value
+  }
+
+  // :: (any) → ?string
+  // A field-type-specific validation function.
+  validateType(_value) {
+    return typeof _value === typeof ''
+  }
+
+  validate(value: any) {
+    if (!value && this.options.required) return 'Required field'
+
+    return this.validateType(value) || (this.options.validate && this.options.validate(value))
+  }
+
+  clean(value: any) {
+    return this.options.clean ? this.options.clean(value) : value
+  }
+
+  abstract render(): HTMLElement
+}
+
+export class TextField extends Field {
+  render() {
+    const input: HTMLInputElement = document.createElement('input')
+
+    input.type = 'text'
+    input.placeholder = this.options.label
+    input.value = this.options.value || ''
+    input.autocomplete = 'off'
+    return input
+  }
+}
+
+export class SelectField extends Field {
+  render() {
+    const select = document.createElement('select')
+    this.options.options.forEach((o: { value: string; label: string }) => {
+      const opt = select.appendChild(document.createElement('option'))
+      opt.value = o.value
+      opt.selected = o.value === this.options.value
+      opt.label = o.label
+    })
+    return select
+  }
+}

src/components/EditorNew/prosemirror/plugins/customKeymap.ts

@@ -0,0 +1,18 @@
+import { baseKeymap } from 'prosemirror-commands'
+import type { Command } from 'prosemirror-state'
+import { redo, undo } from 'prosemirror-history'
+import { keymap } from 'prosemirror-keymap'
+
+export const customKeymap = () => {
+  const bindings: {
+    [key: string]: Command
+  } = {
+    ...baseKeymap,
+    Tab: () => true,
+    // TODO: collab
+    [`Mod-z`]: undo,
+    [`Shift-Mod-z`]: redo
+  }
+
+  return keymap(bindings)
+}

src/components/EditorNew/prosemirror/plugins/dragHandle.ts

@@ -0,0 +1,48 @@
+import { Plugin, NodeSelection } from 'prosemirror-state'
+import { DecorationSet, Decoration } from 'prosemirror-view'
+
+const handleIcon = `
+  <svg viewBox="0 0 10 10" height="14" width="14">
+  <path d="M3 2a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm4-8a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2z"/>
+  </svg>`
+
+const createDragHandle = () => {
+  const handle = document.createElement('span')
+  handle.setAttribute('contenteditable', 'false')
+  const icon = document.createElement('span')
+  icon.innerHTML = handleIcon
+  handle.appendChild(icon)
+  handle.classList.add('handle')
+  return handle
+}
+
+export const dragHandle = () =>
+  new Plugin({
+    props: {
+      decorations(state) {
+        const decos = []
+        state.doc.forEach((node, pos) => {
+          decos.push(
+            Decoration.widget(pos + 1, createDragHandle),
+            Decoration.node(pos, pos + node.nodeSize, { class: 'draggable' })
+          )
+        })
+
+        return DecorationSet.create(state.doc, decos)
+      },
+      handleDOMEvents: {
+        mousedown: (editorView, event: MouseEvent & { target: Element }) => {
+          const target = event.target
+
+          if (target.classList.contains('handle')) {
+            const pos = editorView.posAtCoords({ left: event.x, top: event.y })
+            const resolved = editorView.state.doc.resolve(pos.pos)
+            const tr = editorView.state.tr
+            tr.setSelection(NodeSelection.create(editorView.state.doc, resolved.before()))
+            editorView.dispatch(tr)
+            return false
+          }
+        }
+      }
+    }
+  })

src/components/EditorNew/prosemirror/plugins/image.ts

@@ -0,0 +1,50 @@
+import { Plugin } from 'prosemirror-state'
+import type { DiscoursSchema } from '../schema'
+
+const REGEX = /^!\[([^[\]]*?)]\((.+?)\)\s+/
+const MAX_MATCH = 500
+
+const isUrl = (str: string) => {
+  try {
+    const url = new URL(str)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+const isBlank = (text: string) => text === ' ' || text === '\u00A0'
+
+export const imageInput = (schema: DiscoursSchema) =>
+  new Plugin({
+    props: {
+      handleTextInput(view, from, to, text) {
+        if (view.composing || !isBlank(text)) return false
+        const $from = view.state.doc.resolve(from)
+        if ($from.parent.type.spec.code) return false
+        const textBefore =
+          $from.parent.textBetween(
+            Math.max(0, $from.parentOffset - MAX_MATCH),
+            $from.parentOffset,
+            null,
+            '\uFFFC'
+          ) + text
+
+        const match = REGEX.exec(textBefore)
+        if (match) {
+          const [, title, src] = match
+          if (isUrl(src)) {
+            const node = schema.node('image', { src, title })
+            const start = from - (match[0].length - text.length)
+            const tr = view.state.tr
+            tr.delete(start, to)
+            tr.insert(start, node)
+            view.dispatch(tr)
+            return true
+          }
+
+          return false
+        }
+      }
+    }
+  })

src/components/EditorNew/prosemirror/plugins/index.ts

@@ -0,0 +1,24 @@
+import { history } from 'prosemirror-history'
+import { dropCursor } from 'prosemirror-dropcursor'
+import { placeholder } from './placeholder'
+import { t } from '../../../../utils/intl'
+import styles from '../styles/ProseMirror.module.scss'
+import type { DiscoursSchema } from '../schema'
+import { dragHandle } from './dragHandle'
+import { selectionMenu } from './selectionMenu'
+import { imageInput } from './image'
+import { customKeymap } from './customKeymap'
+
+export const createPlugins = ({ schema }: { schema: DiscoursSchema }) => {
+  return [
+    placeholder(t('Just start typing...')),
+    customKeymap(),
+    history(),
+    dropCursor({ class: styles.dropCursor }),
+    selectionMenu(schema),
+    dragHandle(),
+    imageInput(schema)
+    // TODO
+    // link(),
+  ]
+}

src/components/EditorNew/prosemirror/plugins/placeholder.ts

@@ -0,0 +1,23 @@
+import { Plugin } from 'prosemirror-state'
+import { DecorationSet, Decoration } from 'prosemirror-view'
+import styles from '../styles/ProseMirror.module.scss'
+
+export const placeholder = (text: string): Plugin =>
+  new Plugin({
+    props: {
+      decorations(state) {
+        const { doc } = state
+
+        if (doc.childCount > 1 || !doc.firstChild.isTextblock || doc.firstChild.content.size > 0) {
+          return
+        }
+
+        const div = document.createElement('div')
+        div.setAttribute('contenteditable', 'false')
+        div.classList.add(styles.placeholder)
+        div.textContent = text
+
+        return DecorationSet.create(doc, [Decoration.widget(1, div)])
+      }
+    }
+  })

src/components/EditorNew/prosemirror/plugins/selectionMenu.ts

@@ -0,0 +1,53 @@
+import { renderGrouped } from 'prosemirror-menu'
+import { EditorState, Plugin } from 'prosemirror-state'
+import styles from '../styles/ProseMirror.module.scss'
+import type { EditorView } from 'prosemirror-view'
+import type { DiscoursSchema } from '../schema'
+import { buildMenuItems } from '../helpers/menu'
+
+export class SelectionMenuView {
+  tooltip: HTMLDivElement
+
+  constructor(view: EditorView, schema: DiscoursSchema) {
+    this.tooltip = document.createElement('div')
+    this.tooltip.className = styles.selectionMenu
+    view.dom.parentNode.appendChild(this.tooltip)
+    const { dom } = renderGrouped(view, buildMenuItems(schema))
+    this.tooltip.appendChild(dom)
+    this.update(view, null)
+  }
+
+  update(view: EditorView, lastState: EditorState) {
+    const state = view.state
+
+    if (lastState && 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 = ''
+    const { from, to } = state.selection
+    const start = view.coordsAtPos(from)
+    const end = view.coordsAtPos(to)
+    const box = this.tooltip.offsetParent.getBoundingClientRect()
+    const width = this.tooltip.getBoundingClientRect().width
+    const left = (start.left + end.left - width) / 2
+    this.tooltip.style.left = `${left - box.left}px`
+    this.tooltip.style.bottom = `${box.bottom - start.top + 8}px`
+  }
+
+  destroy() {
+    this.tooltip.remove()
+  }
+}
+
+export const selectionMenu = (schema: DiscoursSchema) =>
+  new Plugin({
+    view(editorView: EditorView) {
+      return new SelectionMenuView(editorView, schema)
+    }
+  })

src/components/EditorNew/prosemirror/schema.ts

@@ -0,0 +1,172 @@
+import { Node, Schema, SchemaSpec } from 'prosemirror-model'
+
+export type Nodes =
+  | 'doc'
+  | 'paragraph'
+  | 'text'
+  | 'heading'
+  | 'ordered_list'
+  | 'bullet_list'
+  | 'list_item'
+  | 'blockquote'
+  | 'image'
+  | 'embed'
+
+export type Marks = 'strong' | 'em' | 'strikethrough' | 'note' | 'link' | 'highlight'
+
+export type DiscoursSchema = Schema<Nodes, Marks>
+
+export const schemaSpec: SchemaSpec<Nodes, Marks> = {
+  nodes: {
+    doc: {
+      content: 'block+'
+    },
+    paragraph: {
+      content: 'inline*',
+      group: 'block',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0]
+    },
+    text: {
+      group: 'inline'
+    },
+    heading: {
+      attrs: { level: { default: 1 } },
+      content: 'inline*',
+      group: 'block',
+      defining: true,
+      parseDOM: [
+        { tag: 'h1', attrs: { level: 1 } },
+        { tag: 'h2', attrs: { level: 2 } },
+        { tag: 'h3', attrs: { level: 3 } }
+      ],
+      toDOM(node) {
+        return ['h' + node.attrs.level, 0]
+      }
+    },
+    ordered_list: {
+      group: 'block',
+      content: 'list_item+',
+      attrs: { order: { default: 1 } },
+      parseDOM: [
+        {
+          tag: 'ol',
+          getAttrs(dom: HTMLElement) {
+            return { order: dom.hasAttribute('start') ? +dom.getAttribute('start') : 1 }
+          }
+        }
+      ],
+      toDOM(node) {
+        return node.attrs.order === 1 ? ['ol', 0] : ['ol', { start: node.attrs.order }, 0]
+      }
+    },
+    bullet_list: {
+      group: 'block',
+      content: 'list_item+',
+      parseDOM: [{ tag: 'ul' }],
+      toDOM() {
+        return ['ul', 0]
+      }
+    },
+    list_item: {
+      content: 'paragraph block*',
+      parseDOM: [{ tag: 'li' }],
+      toDOM() {
+        return ['li', 0]
+      },
+      defining: true
+    },
+    blockquote: {
+      content: 'block+',
+      group: 'block',
+      defining: true,
+      parseDOM: [{ tag: 'blockquote' }],
+      toDOM() {
+        return ['blockquote', 0]
+      }
+    },
+    embed: {},
+    ///
+    image: {
+      inline: true,
+      attrs: {
+        src: {},
+        alt: { default: null },
+        title: { default: null },
+        path: { default: null },
+        width: { default: null }
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: (dom: HTMLElement) => ({
+            src: dom.getAttribute('src'),
+            title: dom.getAttribute('title'),
+            alt: dom.getAttribute('alt'),
+            path: dom.dataset.path
+          })
+        }
+      ],
+      toDOM: (node: Node) => [
+        'img',
+        {
+          src: node.attrs.src,
+          title: node.attrs.title,
+          alt: node.attrs.alt,
+          'data-path': node.attrs.path
+        }
+      ]
+    }
+  },
+  marks: {
+    strong: {
+      parseDOM: [
+        { tag: 'strong' },
+        // This works around a Google Docs misbehavior where
+        // pasted content will be inexplicably wrapped in `<b>`
+        // tags with a font-weight normal.
+        { tag: 'b', getAttrs: (node: HTMLElement) => node.style.fontWeight !== 'normal' && null },
+        {
+          style: 'font-weight',
+          getAttrs: (value: string) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+        }
+      ],
+      toDOM() {
+        return ['strong', 0]
+      }
+    },
+    em: {
+      parseDOM: [{ tag: 'i' }, { tag: 'em' }, { style: 'font-style=italic' }],
+      toDOM() {
+        return ['em', 0]
+      }
+    },
+    link: {
+      attrs: {
+        href: {},
+        title: { default: null }
+      },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: 'a[href]',
+          getAttrs(dom: HTMLElement) {
+            return { href: dom.getAttribute('href'), title: dom.getAttribute('title') }
+          }
+        }
+      ],
+      toDOM(node) {
+        const { href, title } = node.attrs
+        return ['a', { href, title }, 0]
+      }
+    },
+    // TODO:
+    highlight: {},
+    strikethrough: {},
+    note: {}
+  }
+}
+
+export const schema = new Schema(schemaSpec)

src/components/EditorNew/prosemirror/styles/ProseMirror.module.scss

@@ -0,0 +1,21 @@
+.dropCursor {
+  // TODO check why important
+  height: 2px !important;
+  opacity: 0.5;
+}
+
+.selectionMenu {
+  background: #fff;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
+  color: #000;
+  display: flex;
+  position: absolute;
+  z-index: 100;
+}
+
+.placeholder {
+  opacity: 0.3;
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+}

src/components/EditorNew/prosemirror/styles/ProseMirror.scss

@@ -0,0 +1,329 @@
+.ProseMirror {
+  color: var(--foreground);
+  background-color: var(--background);
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  font-variant-ligatures: none;
+  outline: none;
+  margin: 1em 1em 1em 0;
+
+  .dark & {
+    color: var(--background);
+    background-color: var(--foreground);
+  }
+
+  .draggable {
+    position: relative;
+    margin-left: -30px;
+    padding-left: 30px;
+  }
+
+  .handle {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: calc(var(--font-fize) * 1.6px);
+    opacity: 0;
+    cursor: move;
+    transition: opacity 0.3s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 3px;
+      padding: 6px;
+      fill: var(--foreground);
+      pointer-events: none;
+      user-select: none;
+    }
+
+    &:hover > span {
+      background: var(--foreground);
+    }
+  }
+
+  h1 .handle {
+    height: calc(var(--font-size) * 2.3px);
+  }
+
+  .draggable:hover .handle {
+    opacity: 1;
+  }
+
+  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 {
+    > * {
+      background: #eee;
+    }
+
+    .ProseMirror-menu-disabled {
+      background: inherit;
+    }
+  }
+
+  > * {
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    padding: 0.8rem 1em;
+  }
+}
+
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-menu {
+  margin: 0 -4px;
+  line-height: 1;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: fit-content;
+  white-space: pre;
+}
+
+.ProseMirror-menuseparator {
+  border-right: 1px solid #ddd;
+}
+
+.ProseMirror-menu-dropdown,
+.ProseMirror-menu-dropdown-menu {
+  padding: 4px;
+  white-space: nowrap;
+}
+
+.ProseMirror-menu-dropdown {
+  vertical-align: 1px;
+  cursor: pointer;
+  position: relative;
+  padding-right: 15px;
+}
+
+.ProseMirror-menu-dropdown-wrap {
+  padding: 1px 0 1px 4px;
+  display: inline-block;
+  position: relative;
+}
+
+.ProseMirror-menu-dropdown::after {
+  content: '';
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentcolor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 2px);
+}
+
+.ProseMirror-menu-dropdown-menu,
+.ProseMirror-menu-submenu {
+  position: absolute;
+  background: white;
+  color: #666;
+  border: 1px solid #aaa;
+  padding: 2px;
+}
+
+.ProseMirror-menu-dropdown-menu {
+  z-index: 15;
+
+  /* min-width: 6em; */
+}
+
+.ProseMirror-menu-dropdown-item {
+  cursor: pointer;
+  padding: 2px 8px 2px 4px;
+}
+
+.ProseMirror-menu-dropdown-item:hover {
+  background: #f2f2f2;
+}
+
+.ProseMirror-menu-submenu-wrap {
+  position: relative;
+  margin-right: -4px;
+}
+
+.ProseMirror-menu-submenu-label::after {
+  content: '';
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid currentcolor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 4px);
+}
+
+.ProseMirror-menu-submenu {
+  display: none;
+  left: 100%;
+  top: -3px;
+}
+
+.ProseMirror-menu-active {
+  background: #eee;
+}
+
+.ProseMirror-menu-disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
+.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
+.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
+  display: block;
+}
+
+.ProseMirror-menubar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  display: flex;
+  position: relative;
+  min-height: 1em;
+  color: #666;
+  padding: 0 1.5em;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid silver;
+  background: white;
+  z-index: 10;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ProseMirror-icon {
+  cursor: pointer;
+  line-height: 0.8;
+}
+
+.ProseMirror-menu-disabled.ProseMirror-icon {
+  cursor: default;
+}
+
+.ProseMirror-icon svg {
+  fill: currentcolor;
+  height: 1em;
+}
+
+.ProseMirror-icon span {
+  vertical-align: text-top;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+/* Make sure li selections wrap around markers */
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode::after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+
+.ProseMirror .empty-node::before {
+  position: absolute;
+  color: #aaa;
+  cursor: text;
+}
+
+.ProseMirror .empty-node:hover::before {
+  color: #777;
+}
+
+.ProseMirror.editor_empty::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  pointer-events: none;
+  color: var(--ui-color-placeholder);
+}
+
+.ProseMirror-prompt {
+  background: #fff;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
+  font-size: 0.7em;
+  position: absolute;
+}
+
+.ProseMirror-prompt input[type='text'] {
+  border: none;
+  font-size: 100%;
+  margin-bottom: 0;
+  padding: 0.5em 7.5em 0.5em 0.5em;
+}
+
+.ProseMirror-prompt-buttons {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100%;
+}
+
+.ProseMirror-prompt-buttons button {
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 90%;
+  height: 100%;
+  line-height: 10em;
+  margin-bottom: 0;
+  overflow: hidden;
+  vertical-align: top;
+  width: 2.5em;
+}
+
+.ProseMirror-prompt-submit {
+  background: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 2.73787L16.2621 0L6.78964 9.47248L2.73787 5.42071L0 8.15858L6.78964 14.9482L19 2.73787Z' fill='%23393840'/%3E%3C/svg%3E")
+    center no-repeat;
+}
+
+.ProseMirror-prompt-cancel {
+  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1512 0.423856L0.423263 13.1518L2.84763 15.5761L15.5756 2.84822L13.1512 0.423856Z M15.5755 13.1518L2.84763 0.423855L0.423263 2.84822L13.1512 15.5761L15.5755 13.1518Z' fill='%23393840'/%3E%3C/svg%3E%0A")
+    center no-repeat;
+}

src/components/EditorNew/prosemirror/views/image.ts

@@ -0,0 +1,68 @@
+import type { EditorView, NodeView, NodeViewConstructor } from 'prosemirror-view'
+import type { Node } from 'prosemirror-model'
+
+class ImageView implements NodeView {
+  node: Node
+  view: EditorView
+  getPos: () => number
+  dom: Element
+  container: HTMLElement
+  handle: HTMLElement
+  onResizeFn: any
+  onResizeEndFn: any
+  width: number
+  updating: number
+
+  constructor(node: Node, view: EditorView, getPos: () => number) {
+    this.node = node
+    this.view = view
+    this.getPos = getPos
+    this.onResizeFn = this.onResize.bind(this)
+    this.onResizeEndFn = this.onResizeEnd.bind(this)
+
+    this.container = document.createElement('span')
+    this.container.className = 'image-container'
+    if (node.attrs.width) this.setWidth(node.attrs.width)
+
+    const image = document.createElement('img')
+    image.setAttribute('title', node.attrs.title ?? '')
+    image.setAttribute('src', node.attrs.src)
+
+    this.handle = document.createElement('span')
+    this.handle.className = 'resize-handle'
+    this.handle.addEventListener('mousedown', (e) => {
+      e.preventDefault()
+      window.addEventListener('mousemove', this.onResizeFn)
+      window.addEventListener('mouseup', this.onResizeEndFn)
+    })
+
+    this.container.appendChild(image)
+    this.container.appendChild(this.handle)
+    this.dom = this.container
+  }
+
+  onResize(e: MouseEvent) {
+    this.width = e.pageX - this.container.getBoundingClientRect().left
+    this.setWidth(this.width)
+  }
+
+  onResizeEnd() {
+    window.removeEventListener('mousemove', this.onResizeFn)
+    if (this.updating === this.width) return
+    this.updating = this.width
+    const tr = this.view.state.tr
+    tr.setNodeMarkup(this.getPos(), undefined, {
+      ...this.node.attrs,
+      width: this.width
+    })
+
+    this.view.dispatch(tr)
+  }
+
+  setWidth(width: number) {
+    this.container.style.width = width + 'px'
+  }
+}
+
+export const createImageView: NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number) =>
+  new ImageView(node, view, getPos)

src/components/Feed/Beside.module.scss

@@ -12,6 +12,8 @@
   }
 
   li {
+    margin-bottom: 1em;
+
     &.top {
       border-bottom: 1px solid #e1e1e1;
       display: flex;

src/components/Feed/Row2.tsx

@@ -8,7 +8,7 @@ const x = [
   ['8', '4']
 ]
 
-export const Row2 = (props: { articles: Shout[] }) => {
+export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
   const [y, setY] = createSignal(0)
 
   createComputed(() => setY(Math.floor(Math.random() * x.length)))
@@ -20,8 +20,11 @@ export const Row2 = (props: { articles: Shout[] }) => {
           {(a, i) => {
             return (
               <Show when={!!a}>
-                <div class={`col-md-${x[y()][i()]}`}>
+                <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
-                  <ArticleCard article={a} settings={{ isWithCover: x[y()][i()] === '8' }} />
+                  <ArticleCard
+                    article={a}
+                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8' }}
+                  />
                 </div>
               </Show>
             )

src/components/Feed/Sidebar.tsx

@@ -1,12 +1,12 @@
 import { For } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
-import { useAuthStore } from '../../stores/auth'
 import { useAuthorsStore } from '../../stores/zine/authors'
 import { t } from '../../utils/intl'
 import { Icon } from '../Nav/Icon'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useArticlesStore } from '../../stores/zine/articles'
 import { useSeenStore } from '../../stores/zine/seen'
+import { useSession } from '../../context/session'
 
 type FeedSidebarProps = {
   authors: Author[]
@@ -14,7 +14,7 @@ type FeedSidebarProps = {
 
 export const FeedSidebar = (props: FeedSidebarProps) => {
   const { getSeen: seen } = useSeenStore()
-  const { session } = useAuthStore()
+  const { session } = useSession()
   const { authorEntities } = useAuthorsStore({ authors: props.authors })
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()

src/components/Feed/Slider.scss

@@ -1,7 +1,9 @@
 .swiper-slide {
-  height: 0 !important;
   min-height: 0 !important;
   margin-bottom: 0 !important;
+
+  .cards-with-cover & {
+    height: 0 !important;
     padding-top: 100%;
 
     @include media-breakpoint-up(sm) {
@@ -12,6 +14,7 @@
       padding-top: 35% !important;
     }
   }
+}
 
 .slider-arrow-prev,
 .slider-arrow-next {

src/components/Feed/Slider.tsx

@@ -12,6 +12,8 @@ import { Icon } from '../Nav/Icon'
 interface SliderProps {
   title?: string
   articles: Shout[]
+  slidesPerView?: number
+  isCardsWithCover?: boolean
 }
 
 export default (props: SliderProps) => {
@@ -19,11 +21,14 @@ export default (props: SliderProps) => {
   let pagEl: HTMLDivElement | undefined
   let nextEl: HTMLDivElement | undefined
   let prevEl: HTMLDivElement | undefined
+
+  const isCardsWithCover = typeof props.isCardsWithCover === 'boolean' ? props.isCardsWithCover : true
+
   const opts: SwiperOptions = {
+    roundLengths: true,
     loop: true,
     centeredSlides: true,
     slidesPerView: 1,
-    spaceBetween: 8,
     modules: [Navigation, Pagination],
     speed: 500,
     navigation: { nextEl, prevEl },
@@ -34,7 +39,12 @@ export default (props: SliderProps) => {
     },
     breakpoints: {
       768: {
-        slidesPerView: 1.66666
+        slidesPerView: props.slidesPerView > 0 ? props.slidesPerView : 1.66666,
+        spaceBetween: isCardsWithCover ? 8 : 26
+      },
+      992: {
+        slidesPerView: props.slidesPerView > 0 ? props.slidesPerView : 1.66666,
+        spaceBetween: isCardsWithCover ? 8 : 52
       }
     }
   }
@@ -48,12 +58,13 @@ export default (props: SliderProps) => {
     }
   })
   const articles = createMemo(() => props.articles)
+
   return (
     <div class="floor floor--important">
       <div class="wide-container row">
         <h2 class="col-12">{props.title}</h2>
         <Show when={!!articles()}>
-          <div class="swiper" ref={el}>
+          <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
             <div class="swiper-wrapper">
               <For each={articles()}>
                 {(a: Shout) => (
@@ -62,7 +73,7 @@ export default (props: SliderProps) => {
                     settings={{
                       additionalClass: 'swiper-slide',
                       isFloorImportant: true,
-                      isWithCover: true,
+                      isWithCover: isCardsWithCover,
                       nodate: true
                     }}
                   />
@@ -70,10 +81,10 @@ export default (props: SliderProps) => {
               </For>
             </div>
             <div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
-              <Icon name="slider-arrow" />
+              <Icon name="slider-arrow" class={'icon'} />
             </div>
             <div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
-              <Icon name="slider-arrow" />
+              <Icon name="slider-arrow" class={'icon'} />
             </div>
             <div class="slider-pagination" ref={pagEl} />
           </div>

src/components/Nav/AuthModal/EmailConfirm.tsx

@@ -2,16 +2,20 @@ 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 { createMemo, createSignal, onMount, Show } from 'solid-js'
-import { useRouter } from '../../../stores/router'
+import { handleClientRouteLinkClick, useRouter } from '../../../stores/router'
-import { confirmEmail, useAuthStore } from '../../../stores/auth'
+import type { ConfirmEmailSearchParams } from './types'
-
+import { ApiError } from '../../../utils/apiClient'
-type ConfirmEmailSearchParams = {
+import { useSession } from '../../../context/session'
-  token: string
-}
 
 export const EmailConfirm = () => {
-  const { session } = useAuthStore()
+  const {
+    session,
+    actions: { confirmEmail }
+  } = useSession()
+
+  const [isTokenExpired, setIsTokenExpired] = createSignal(false)
+  const [isTokenInvalid, setIsTokenInvalid] = createSignal(false)
 
   const confirmedEmail = createMemo(() => session()?.user?.email || '')
 
@@ -22,23 +26,54 @@ export const EmailConfirm = () => {
     try {
       await confirmEmail(token)
     } catch (error) {
+      if (error instanceof ApiError) {
+        if (error.code === 'token_expired') {
+          setIsTokenExpired(true)
+          return
+        }
+
+        if (error.code === 'token_invalid') {
+          setIsTokenInvalid(true)
+          return
+        }
+      }
+
       console.log(error)
     }
   })
 
   return (
     <div>
-      <div class={styles.title}>{t('Hooray! Welcome!')}</div>
+      {/* TODO: texts */}
+      <Show when={isTokenExpired()}>
+        <div class={styles.title}>Ссылка больше не действительна</div>
+        <div class={styles.text}>
+          <a href="/?modal=auth&mode=login" class={styles.sendLink} onClick={handleClientRouteLinkClick}>
+            {/*TODO: temp solution, should be send link again, but we don't have email here*/}
+            Вход
+          </a>
+        </div>
+      </Show>
+      <Show when={isTokenInvalid()}>
+        <div class={styles.title}>Неправильная ссылка</div>
+        <div class={styles.text}>
+          <a href="/?modal=auth&mode=login" class={styles.sendLink} onClick={handleClientRouteLinkClick}>
+            {/*TODO: temp solution, should be send link again, but we don't have email here*/}
+            Вход
+          </a>
+        </div>
+      </Show>
       <Show when={Boolean(confirmedEmail())}>
+        <div class={styles.title}>{t('Hooray! Welcome!')}</div>
         <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>
+      </Show>
     </div>
   )
 }

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -6,8 +6,9 @@ import { useRouter } from '../../../stores/router'
 import { email, setEmail } from './sharedLogic'
 import type { AuthModalSearchParams } from './types'
 import { isValidEmail } from './validators'
-import { signSendLink } from '../../../stores/auth'
 import { locale } from '../../../stores/ui'
+import { ApiError } from '../../../utils/apiClient'
+import { signSendLink } from '../../../stores/auth'
 
 type FormFields = {
   email: string
@@ -22,15 +23,17 @@ export const ForgotPasswordForm = () => {
     setValidationErrors(({ email: _notNeeded, ...rest }) => rest)
     setEmail(newEmail)
   }
-  const [sended, setSended] = createSignal(false)
+
   const [submitError, setSubmitError] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
+  const [isUserNotFount, setIsUserNotFound] = createSignal(false)
 
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
 
     setSubmitError('')
+    setIsUserNotFound(false)
 
     const newValidationErrors: ValidationErrors = {}
 
@@ -51,10 +54,12 @@ export const ForgotPasswordForm = () => {
     setIsSubmitting(true)
 
     try {
-      const result = await signSendLink({ email: email(), lang: locale() })
+      await signSendLink({ email: email(), lang: locale() })
-      if (result.error) setSubmitError(result.error)
-      else setSended(true)
     } catch (error) {
+      if (error instanceof ApiError && error.code === 'user_not_found') {
+        setIsUserNotFound(true)
+        return
+      }
       setSubmitError(error.message)
     } finally {
       setIsSubmitting(false)
@@ -64,12 +69,7 @@ export const ForgotPasswordForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <h4>{t('Forgot password?')}</h4>
-      <Show
-        when={!sended()}
-        fallback={<div class={styles.authInfo}>{t('Link sent, check your email')}</div>}
-      >
       <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
-      </Show>
       <Show when={submitError()}>
         <div class={styles.authInfo}>
           <ul>
@@ -77,6 +77,21 @@ export const ForgotPasswordForm = () => {
           </ul>
         </div>
       </Show>
+      <Show when={isUserNotFount()}>
+        <div class={styles.authSubtitle}>
+          {/*TODO: text*/}
+          {t("We can't find you, check email or")}{' '}
+          <a
+            href="#"
+            onClick={(event) => {
+              event.preventDefault()
+              changeSearchParam('mode', 'register')
+            }}
+          >
+            {t('register')}
+          </a>
+        </div>
+      </Show>
       <Show when={validationErrors().email}>
         <div class={styles.validationError}>{validationErrors().email}</div>
       </Show>

src/components/Nav/AuthModal/LoginForm.tsx

@@ -2,7 +2,6 @@ import { t } from '../../../utils/intl'
 import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { SocialProviders } from './SocialProviders'
-import { signIn, signSendLink } from '../../../stores/auth'
 import { ApiError } from '../../../utils/apiClient'
 import { createSignal, Show } from 'solid-js'
 import { isValidEmail } from './validators'
@@ -10,6 +9,8 @@ import { email, setEmail } from './sharedLogic'
 import { useRouter } from '../../../stores/router'
 import type { AuthModalSearchParams } from './types'
 import { hideModal, locale } from '../../../stores/ui'
+import { useSession } from '../../../context/session'
+import { signSendLink } from '../../../stores/auth'
 
 type FormFields = {
   email: string
@@ -26,6 +27,10 @@ export const LoginForm = () => {
   const [isEmailNotConfirmed, setIsEmailNotConfirmed] = createSignal(false)
   const [isLinkSent, setIsLinkSent] = createSignal(false)
 
+  const {
+    actions: { signIn }
+  } = useSession()
+
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
 
   const [password, setPassword] = createSignal('')
@@ -53,6 +58,7 @@ export const LoginForm = () => {
     event.preventDefault()
 
     setIsLinkSent(false)
+    setIsEmailNotConfirmed(false)
     setSubmitError('')
 
     const newValidationErrors: ValidationErrors = {}

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -4,13 +4,14 @@ 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 { 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'
+import { checkEmail, useEmailChecks } from '../../../stores/emailChecks'
+import { register } from '../../../stores/auth'
 
 type FormFields = {
   name: string
@@ -23,7 +24,7 @@ type ValidationErrors = Partial<Record<keyof FormFields, string | JSX.Element>>
 export const RegisterForm = () => {
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
 
-  const { emailChecks } = useAuthStore()
+  const { emailChecks } = useEmailChecks()
 
   const [submitError, setSubmitError] = createSignal('')
   const [name, setName] = createSignal('')
@@ -60,11 +61,14 @@ export const RegisterForm = () => {
 
     const newValidationErrors: ValidationErrors = {}
 
-    if (!name()) {
+    const clearName = name().trim()
+    const clearEmail = email().trim()
+
+    if (!clearName) {
       newValidationErrors.name = t('Please enter a name to sign your comments and publication')
     }
 
-    if (!email()) {
+    if (!clearEmail) {
       newValidationErrors.email = t('Please enter email')
     } else if (!isValidEmail(email())) {
       newValidationErrors.email = t('Invalid email')
@@ -76,7 +80,7 @@ export const RegisterForm = () => {
 
     setValidationErrors(newValidationErrors)
 
-    const emailCheckResult = await checkEmail(email())
+    const emailCheckResult = await checkEmail(clearEmail)
 
     const isValid = Object.keys(newValidationErrors).length === 0 && !emailCheckResult
 
@@ -88,8 +92,8 @@ export const RegisterForm = () => {
 
     try {
       await register({
-        name: name(),
+        name: clearName,
-        email: email(),
+        email: clearEmail,
         password: password()
       })
 

src/components/Nav/AuthModal/index.tsx

@@ -39,7 +39,7 @@ export const AuthModal = () => {
       class={clsx('row', styles.view)}
       classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }}
     >
-      <div class={clsx('col-sm-6', 'd-md-none', styles.authImage)}>
+      <div class={clsx('col-md-6 d-none d-md-block', styles.authImage)}>
         <div
           class={styles.authImageText}
           classList={{ [styles.hidden]: mode() !== 'register' && mode() !== 'confirm-email' }}
@@ -68,7 +68,7 @@ export const AuthModal = () => {
           </p>
         </div>
       </div>
-      <div class={clsx('col-sm-6', styles.auth)}>
+      <div class={clsx('col-md-6', styles.auth)}>
         <Dynamic component={AUTH_MODAL_MODES[mode()]} />
       </div>
     </div>

src/components/Nav/AuthModal/types.ts

@@ -3,3 +3,7 @@ export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'forgot-pas
 export type AuthModalSearchParams = {
   mode: AuthModalMode
 }
+
+export type ConfirmEmailSearchParams = {
+  token: string
+}

src/components/Nav/Header.module.scss

@@ -71,12 +71,16 @@
   align-items: center;
   display: inline-flex;
   height: 56px;
-  padding: 0 $container-padding-x 0 0;
+  padding: 0;
   position: relative;
   transition: height 0.2s;
   text-align: center;
   z-index: 9;
 
+  @include media-breakpoint-up(sm) {
+    padding: 0 6rem 0 0;
+  }
+
   @include media-breakpoint-up(md) {
     height: 70px;
   }
@@ -114,6 +118,7 @@
 
 .usernav {
   display: inline-flex;
+  font-weight: 500;
   padding-right: 0;
   position: relative;
   width: auto;
@@ -130,6 +135,10 @@
   position: relative;
   @include font-size(1.7rem);
 
+  @include media-breakpoint-down(lg) {
+    margin-right: 7rem;
+  }
+
   @include media-breakpoint-down(md) {
     display: none;
   }
@@ -141,6 +150,7 @@
 
 .mainNavigation {
   display: inline-flex;
+  font-weight: 500;
   list-style: none;
   margin: 0;
   opacity: 1;
@@ -204,10 +214,14 @@
   box-sizing: content-box;
   display: inline-flex;
   float: right;
+  padding-left: 0;
   padding-right: 0;
-  padding-left: divide($container-padding-x, 2);
   width: 2.2rem;
 
+  @include media-breakpoint-up(sm) {
+    padding-left: divide($container-padding-x, 2);
+  }
+
   @include media-breakpoint-up(md) {
     display: none;
   }
@@ -290,7 +304,7 @@
   @include font-size(1.4rem);
 
   left: 0;
-  margin: 0.2em;
+  margin: 0.2em 0;
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -318,12 +332,24 @@
 .articleControls {
   display: flex;
   justify-content: flex-end;
-  left: 0;
   position: absolute;
+  right: 5rem;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
 
+  @include media-breakpoint-up(sm) {
+    right: 6rem;
+  }
+
+  @include media-breakpoint-up(md) {
+    right: 1.5rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 1.5rem;
+  }
+
   .control {
     cursor: pointer;
     border: 0;
@@ -344,7 +370,11 @@
   }
 
   .control + .control {
-    margin-left: 1.6rem;
+    margin-left: 1.2rem;
+
+    @include media-breakpoint-up(sm) {
+      margin-left: 2rem;
+    }
   }
 
   img {
@@ -385,17 +415,21 @@
 
 .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;
+  transition: margin-left 0.3s;
   width: 2.4em;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-down(sm) {
-    margin-left: 1.2rem;
+    margin-left: 0.4rem !important;
+  }
+
+  .headerScrolledTop &,
+  .headerScrolledBottom & {
+    transition: none;
   }
 
   .circlewrap {
@@ -459,10 +493,10 @@
   }
 }
 
-.userControlItemWritePost {
+.userControlItemVerbose {
+  @include media-breakpoint-up(lg) {
     width: auto;
 
-  @include media-breakpoint-up(lg) {
     .icon {
       display: none;
     }

src/components/Nav/Header.tsx

@@ -1,22 +1,15 @@
-import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
+import { For, Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
-import Notifications from './Notifications'
 import { Icon } from './Icon'
 import { Modal } from './Modal'
 import { AuthModal } from './AuthModal'
 import { t } from '../../utils/intl'
-import { useModalStore, showModal, useWarningsStore } from '../../stores/ui'
+import { useModalStore } from '../../stores/ui'
-import { useAuthStore } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
 import styles from './Header.module.scss'
 import { getPagePath } from '@nanostores/router'
-import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
+import { HeaderAuth } from './HeaderAuth'
 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' },
@@ -34,40 +27,37 @@ export const Header = (props: Props) => {
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
   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()
   const { modal } = useModalStore()
 
   const { page } = useRouter()
 
   // methods
-  const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
+
   const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
   // effects
+
+  let windowScrollTop = 0
+
   createEffect(() => {
+    const mainContent = document.querySelector('.main-content') as HTMLDivElement
+
+    if (fixed() || modal() !== null) {
+      windowScrollTop = window.scrollY
+      mainContent.style.marginTop = `-${windowScrollTop}px`
+    }
+
     document.body.classList.toggle('fixed', fixed() || modal() !== null)
     document.body.classList.toggle(styles.fixed, fixed() && !modal())
+
+    if (!fixed() && !modal()) {
+      mainContent.style.marginTop = ''
+      window.scrollTo(0, windowScrollTop)
+    }
   })
 
-  // derived
-  const authorized = createMemo(() => session()?.user?.slug)
-
-  const handleBellIconClick = (event: Event) => {
-    event.preventDefault()
-
-    if (!authorized()) {
-      showModal('auth')
-      return
-    }
-
-    toggleWarnings()
-  }
-
   onMount(() => {
     let scrollTop = window.scrollY
 
@@ -131,64 +121,7 @@ export const Header = (props: Props) => {
               </li>
             </ul>
           </div>
-          <div class={styles.usernav}>
+          <HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
-            <div class={clsx(styles.userControl, styles.userControl, 'col')}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
-                <a href="/create" onClick={handleClientRouteLinkClick}>
-                  <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} />
-                  </div>
-                </a>
-              </div>
-
-              <Show when={visibleWarnings()}>
-                <div class={clsx(styles.userControlItem, 'notifications')}>
-                  <Notifications />
-                </div>
-              </Show>
-
-              <Show
-                when={authorized()}
-                fallback={
-                  <div class={clsx(styles.userControlItem, 'loginbtn')}>
-                    <a href="?modal=auth&mode=login" onClick={handleClientRouteLinkClick}>
-                      <Icon name="user-anonymous" />
-                    </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>
-                <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}>
               <SharePopup
@@ -209,7 +142,6 @@ export const Header = (props: Props) => {
               </a>
             </div>
           </Show>
-          </div>
           <div class={styles.burgerContainer}>
             <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
               <div />

src/components/Nav/HeaderAuth.tsx

@@ -0,0 +1,107 @@
+import styles from './Header.module.scss'
+import { clsx } from 'clsx'
+import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
+import { t } from '../../utils/intl'
+import { Icon } from './Icon'
+import { createSignal, onMount, Show } from 'solid-js'
+import Notifications from './Notifications'
+import { ProfilePopup } from './ProfilePopup'
+import Userpic from '../Author/Userpic'
+import type { Author } from '../../graphql/types.gen'
+import { showModal, useWarningsStore } from '../../stores/ui'
+import { ClientContainer } from '../_shared/ClientContainer'
+import { useSession } from '../../context/session'
+
+type HeaderAuthProps = {
+  setIsProfilePopupVisible: (value: boolean) => void
+}
+
+export const HeaderAuth = (props: HeaderAuthProps) => {
+  const { page } = useRouter()
+  const [visibleWarnings, setVisibleWarnings] = createSignal(false)
+  const { warnings } = useWarningsStore()
+
+  const { session, isAuthenticated } = useSession()
+
+  const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
+
+  const handleBellIconClick = (event: Event) => {
+    event.preventDefault()
+
+    if (!isAuthenticated()) {
+      showModal('auth')
+      return
+    }
+
+    toggleWarnings()
+  }
+
+  return (
+    <ClientContainer>
+      <Show when={!session.loading}>
+        <div class={styles.usernav}>
+          <div class={clsx(styles.userControl, styles.userControl, 'col')}>
+            <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <a href="/create" onClick={handleClientRouteLinkClick}>
+                <span class={styles.textLabel}>{t('Create post')}</span>
+                <Icon name="pencil" class={styles.icon} />
+              </a>
+            </div>
+
+            <Show when={isAuthenticated()}>
+              <div class={styles.userControlItem}>
+                <a href="#" onClick={handleBellIconClick}>
+                  <div>
+                    <Icon name="bell-white" counter={isAuthenticated() ? warnings().length : 1} />
+                  </div>
+                </a>
+              </div>
+            </Show>
+
+            <Show when={visibleWarnings()}>
+              <div class={clsx(styles.userControlItem, 'notifications')}>
+                <Notifications />
+              </div>
+            </Show>
+
+            <Show
+              when={isAuthenticated()}
+              fallback={
+                <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
+                  <a href="?modal=auth&mode=login" onClick={handleClientRouteLinkClick}>
+                    <span class={styles.textLabel}>{t('Enter')}</span>
+                    <Icon name="user-anonymous" class={styles.icon} />
+                  </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>
+              <ProfilePopup
+                onVisibilityChange={(isVisible) => {
+                  props.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>
+        </div>
+      </Show>
+    </ClientContainer>
+  )
+}

src/components/Nav/Icon.module.scss

@@ -8,17 +8,19 @@ img {
   height: 100%;
 }
 
-.notifications-counter {
+.notificationsCounter {
-  background-color: red;
+  background-color: #d00820;
-  border-radius: 1rem;
+  border: 2px solid #fff;
+  border-radius: 2em;
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
-  height: 1.5em;
+  height: 1.6em;
-  line-height: 1.5em;
+  left: 1.1em;
+  line-height: 1.25em;
+  padding: 0 0.25em;
   position: absolute;
-  right: -0.5rem;
   text-align: center;
   top: -0.5rem;
-  width: 1.5em;
+  min-width: 1.5em;
 }

src/components/Nav/Icon.tsx

@@ -1,7 +1,7 @@
 import { mergeProps, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { clsx } from 'clsx'
-import './Icon.css'
+import styles from './Icon.module.scss'
 
 type IconProps = {
   class?: string
@@ -16,10 +16,10 @@ export const Icon = (passedProps: IconProps) => {
   const props = mergeProps({ title: '', counter: 0 }, passedProps)
 
   return (
-    <div class={clsx('icon', props.class)} style={props.style}>
+    <div class={clsx('icon', styles.icon, props.class)} style={props.style}>
       <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
       <Show when={props.counter}>
-        <div class="notifications-counter">{props.counter}</div>
+        <div class={styles.notificationsCounter}>{props.counter}</div>
       </Show>
     </div>
   )

src/components/Nav/Modal.scss

@@ -1,11 +1,12 @@
 .modalwrap {
-  pointer-events: all;
   align-items: center;
   background: rgb(20 20 20 / 70%);
   display: flex;
   justify-content: center;
   height: 100%;
   left: 0;
+  overflow: auto;
+  pointer-events: all;
   position: fixed;
   top: 0;
   width: 100%;

src/components/Nav/Modal.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { getLogger } from '../../utils/logger'
 import './Modal.scss'

src/components/Nav/ProfileModal.tsx

@@ -2,19 +2,23 @@ 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, For } from 'solid-js'
+import { useSession } from '../../context/session'
+
+export const ProfileModal = () => {
+  const {
+    session,
+    actions: { signOut }
+  } = useSession()
 
   const quit = () => {
     signOut()
     hideModal()
   }
 
-export default () => {
-  const { session } = useAuthStore()
-
   const author = createMemo<Author>(() => {
     const a: Author = {
+      id: null,
       name: 'anonymous',
       userpic: '',
       slug: ''

src/components/Nav/ProfilePopup.tsx

@@ -1,17 +1,21 @@
-import { Popup, PopupProps } from './Popup'
+import { useSession } from '../../context/session'
-import { signOut, useAuthStore } from '../../stores/auth'
+import type { PopupProps } from '../_shared/Popup'
-import styles from './Popup.module.scss'
+import { Popup } from '../_shared/Popup'
+import styles from '../_shared/Popup.module.scss'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
 export const ProfilePopup = (props: ProfilePopupProps) => {
-  const { session } = useAuthStore()
+  const {
+    session,
+    actions: { signOut }
+  } = useSession()
 
   return (
     <Popup {...props} horizontalAnchor="right">
       <ul class="nodash">
         <li>
-          <a href={`/${session().user?.slug}`}>Профиль</a>
+          <a href={`/author/${session().user?.slug}`}>Профиль</a>
         </li>
         <li>
           <a href="#">Черновики</a>

src/components/Nav/Topics.tsx

@@ -4,6 +4,7 @@ import { Icon } from './Icon'
 import './Topics.scss'
 import { t } from '../../utils/intl'
 import { locale } from '../../stores/ui'
+import { handleClientRouteLinkClick } from '../../stores/router'
 
 export const NavTopics = (props: { topics: Topic[] }) => {
   const tag = (topic: Topic) =>
@@ -17,7 +18,7 @@ export const NavTopics = (props: { topics: Topic[] }) => {
           <For each={props.topics}>
             {(topic) => (
               <li class="item">
-                <a href={`/topic/${topic.slug}`}>
+                <a href={`/topic/${topic.slug}`} onClick={handleClientRouteLinkClick}>
                   <span>#{tag(topic)}</span>
                 </a>
               </li>

src/components/Pages/ConnectPage.tsx

@@ -5,10 +5,11 @@ export const ConnectPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <h1 class="col-md-8 offset-md-2">
+          <div class="col-sm-10 col-md-8 col-lg-7 col-xl-6 shift-content">
+            <h1>
               <span class="wrapped">Предложить идею</span>
             </h1>
-          <div class="col-md-8 col-lg-6 offset-md-3">
+
             <p>
               Хотите что-то предложить, обсудить или посоветовать? Поделиться темой или идеей? Напишите нам
               скорее! Если укажете свою почту, мы&nbsp;обязательно ответим.

src/components/Pages/TopicPage.tsx

@@ -8,7 +8,7 @@ import { loadTopic } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
 
 export const TopicPage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.authorArticles) && Boolean(props.author))
+  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.topicArticles) && Boolean(props.topic))
 
   const slug = createMemo(() => {
     const { page: getPage } = useRouter()

src/components/Pages/about/DiscussionRulesPage.tsx

@@ -7,12 +7,11 @@ export const DiscussionRulesPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped" innerHTML={title} />
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Открытая редакция существует благодаря дружному сообществу авторов
               и&nbsp;читателей&nbsp;&mdash; вдумчивых и&nbsp;сознательных людей, приверженных ценностям
@@ -30,9 +29,9 @@ export const DiscussionRulesPage = () => {
             <ol>
               <li>
                 <p>
-                    Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного
+                  Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного человека
-                    человека или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход
+                  или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход на&nbsp;личности
-                    на&nbsp;личности и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
+                  и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
                 </p>
               </li>
 
@@ -46,19 +45,19 @@ export const DiscussionRulesPage = () => {
               <li>
                 <p>
                   Спам, реклама, фейкньюз, ссылки на&nbsp;пропагандистские СМИ, вбросы дезинформации,
-                    специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный
+                  специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный срыв
-                    срыв дискуссий.
+                  дискуссий.
                 </p>
               </li>
 
               <li>
                 <p>
                   Неаргументированная критика и&nbsp;комментарии вроде &laquo;отстой&raquo;, &laquo;зачем
-                    я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;,
+                  я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;, &laquo;либераху
-                    &laquo;либераху порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;,
+                  порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;, &laquo;первый нах&raquo;
-                    &laquo;первый нах&raquo; и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают
+                  и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают возможность обогащающего
-                    возможность обогащающего диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают
+                  диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают авторам делать материалы лучше,
-                    авторам делать материалы лучше, а&nbsp;читателям&nbsp;&mdash; разобраться.
+                  а&nbsp;читателям&nbsp;&mdash; разобраться.
                 </p>
               </li>
             </ol>
@@ -114,7 +113,6 @@ export const DiscussionRulesPage = () => {
             </ol>
           </div>
         </div>
-        </div>
       </article>
     </MainLayout>
   )

src/components/Pages/about/DogmaPage.tsx

@@ -7,8 +7,8 @@ export const DogmaPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <h4 class="col-md-8 offset-md-2">Редакционные принципы</h4>
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
-          <div class="col-md-8 col-lg-6 offset-md-3">
+            <h4>Редакционные принципы</h4>
             <p>
               Дискурс - журнал с открытой горизонтальной редакцией. Содержание журнала определяется прямым
               голосованием его авторов. Мы нередко занимаем различные позиции по разным проблемам, но

src/components/Pages/about/GuidePage.tsx

@@ -1,9 +1,15 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { t } from '../../../utils/intl'
+import { Icon } from '../../Nav/Icon'
 
 export const GuidePage = () => {
   const title = t('How it works')
 
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       {/*<Meta name="description" content={title} />*/}
@@ -16,8 +22,20 @@ export const GuidePage = () => {
 
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
+              <Show when={!indexExpanded()}>
+                <Icon name="content-index-control" />
+              </Show>
+              <Show when={indexExpanded()}>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
+              </Show>
+            </button>
+
+            <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#how-it-works">{title}</a>
@@ -39,38 +57,38 @@ export const GuidePage = () => {
                   </li>
                 </ul>
               </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="about">
               <span class="wrapped">Как устроен Дискурс</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Дискурс&nbsp;&mdash; независимый журнал о&nbsp;культуре, науке, искусстве и&nbsp;обществе
               с&nbsp;<a href="/about/manifest">открытой редакцией</a>. У&nbsp;нас нет главного редактора,
-                инвестора и&nbsp;вообще никого, кто&nbsp;бы принимал единоличные решения. Вместо
+              инвестора и&nbsp;вообще никого, кто&nbsp;бы принимал единоличные решения. Вместо традиционных
-                традиционных иерархий Дискурс основан на&nbsp;принципах прямой демократии: в&nbsp;нашем
+              иерархий Дискурс основан на&nbsp;принципах прямой демократии: в&nbsp;нашем горизонтальном
-                горизонтальном сообществе все редакционные вопросы решаются открытым голосованием авторов
+              сообществе все редакционные вопросы решаются открытым голосованием авторов журнала. Вот как
-                журнала. Вот как это работает.
+              это работает.
             </p>
             <h3 id="how-it-works">Как устроен сайт Дискурса</h3>
             <p>Дискурс состоит из&nbsp;четырех основных разделов:</p>
             <ul>
               <li>
                 <p>
-                    <a href="/topics">Темы</a>&nbsp;&mdash; у&nbsp;нас публикуются исследования, обзоры,
+                  <a href="/topics">Темы</a>&nbsp;&mdash; у&nbsp;нас публикуются исследования, обзоры, эссе,
-                    эссе, интервью, репортажи, аналитика и&nbsp;другие материалы о&nbsp;культуре, науке,
+                  интервью, репортажи, аналитика и&nbsp;другие материалы о&nbsp;культуре, науке, искусстве
-                    искусстве и&nbsp;обществе.
+                  и&nbsp;обществе.
                 </p>
               </li>
               <li>
                 <p>
                   <a href="/topic/art">Искусство</a>&nbsp;&mdash; здесь, например, представлены
-                    художественные произведения: литература, живопись, музыка, фотографии, видео. Этот
+                  художественные произведения: литература, живопись, музыка, фотографии, видео. Этот раздел
-                    раздел помогает прозвучать новому искусству, которое создают российские художники,
+                  помогает прозвучать новому искусству, которое создают российские художники, писатели,
-                    писатели, режиссёры и&nbsp;музыканты.
+                  режиссёры и&nbsp;музыканты.
                 </p>
               </li>
               {/*
@@ -105,31 +123,31 @@ export const GuidePage = () => {
               <a href="/topic/history">история</a>, <a href="/topic/absurdism">абсурдизм</a>,{' '}
               <a href="/topic/sex">секс</a> и&nbsp;т.д.) или в&nbsp;серии (как &laquo;
               <a href="/topic/zakony-mira">Законы мира</a>&raquo; или &laquo;
-                <a href="/topic/za-liniey-mannergeyma">За&nbsp;линией Маннергейма</a>&raquo;). Темы
+              <a href="/topic/za-liniey-mannergeyma">За&nbsp;линией Маннергейма</a>&raquo;). Темы объединяют
-                объединяют сотни публикаций, помогают ориентироваться в&nbsp;журнале и&nbsp;следить
+              сотни публикаций, помогают ориентироваться в&nbsp;журнале и&nbsp;следить за&nbsp;интересными
-                за&nbsp;интересными материалами.
+              материалами.
             </p>
 
             <section>
               <h3 id="become-author">Как стать автором журнала</h3>
               <p>
-                  Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов,
+                Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов, режиссеров,
-                  режиссеров, философов, ученых и&nbsp;других замечательных людей. Каждый может{' '}
+                философов, ученых и&nbsp;других замечательных людей. Каждый может{' '}
                 <a href="/create">прислать</a>
                 свой материал в&nbsp;журнал. Формат и&nbsp;тематика не&nbsp;имеют значения, единственное,
-                  что важно &mdash; <a href="/how-to-write-a-good-article">хороший</a> ли&nbsp;материал.
+                что важно &mdash; <a href="/how-to-write-a-good-article">хороший</a> ли&nbsp;материал. Если
-                  Если сообщество поддержит вашу публикацию, она выйдет в&nbsp;журнале и&nbsp;станет
+                сообщество поддержит вашу публикацию, она выйдет в&nbsp;журнале и&nbsp;станет доступна
-                  доступна тысячам наших читателей.
+                тысячам наших читателей.
               </p>
             </section>
 
             <h3 id="voting">Как проходит голосование</h3>
             <p>
               Все присылаемые в&nbsp;Дискурс материалы попадают в&nbsp;
-                <strong>&laquo;Редакцию&raquo;</strong>. Это внутренний раздел сайта, где участники
+              <strong>&laquo;Редакцию&raquo;</strong>. Это внутренний раздел сайта, где участники сообщества
-                сообщества решают, что будет опубликовано в&nbsp;Дискурсе. Как только работа получает
+              решают, что будет опубликовано в&nbsp;Дискурсе. Как только работа получает одобрение как
-                одобрение как минимум пятерых авторов открытой редакции, она немедленно публикуется
+              минимум пятерых авторов открытой редакции, она немедленно публикуется в&nbsp;журнале.
-                в&nbsp;журнале. Если&nbsp;же материал набирает более&nbsp;20% голосов &laquo;против&raquo;,
+              Если&nbsp;же материал набирает более&nbsp;20% голосов &laquo;против&raquo;,
               он&nbsp;не&nbsp;выходит и&nbsp;может быть отправлен на&nbsp;доработку. Жестких сроков
               рассмотрения материалов у&nbsp;нас нет, иногда это занимает час, иногда месяц,
               обычно&nbsp;&mdash; несколько дней.
@@ -145,17 +163,17 @@ export const GuidePage = () => {
             <p>
               Дискурс&nbsp;&mdash; журнал с&nbsp;совместным редактированием. Совершенствовать тексты нам
               помогает <b>система ремарок</b>. Вы&nbsp;можете выделить часть текста в&nbsp;любой статье
-                и&nbsp;оставить к&nbsp;ней замечание, вопрос или предложение&nbsp;&mdash; автор текста
+              и&nbsp;оставить к&nbsp;ней замечание, вопрос или предложение&nbsp;&mdash; автор текста получит
-                получит совет на&nbsp;почту и&nbsp;сможет его учесть. Так мы&nbsp;устраняем опечатки,
+              совет на&nbsp;почту и&nbsp;сможет его учесть. Так мы&nbsp;устраняем опечатки, неточности
-                неточности и&nbsp;советуем друг другу, как сделать тексты качественнее и&nbsp;интереснее.
+              и&nbsp;советуем друг другу, как сделать тексты качественнее и&nbsp;интереснее.
             </p>
             <p>
               Среди участников сообщества есть профессиональные редакторы, которые помогают авторам делать
-                тексты лучше. Если вашему материалу потребуется доработка, они помогут отредактировать
+              тексты лучше. Если вашему материалу потребуется доработка, они помогут отредактировать текст,
-                текст, подобрать иллюстрации, придумать заголовок и&nbsp;красиво сверстать публикацию. Если
+              подобрать иллюстрации, придумать заголовок и&nbsp;красиво сверстать публикацию. Если
-                вы&nbsp;хотите обсудить текст, прежде чем загрузить материал в
+              вы&nbsp;хотите обсудить текст, прежде чем загрузить материал в интернет-редакцию&nbsp;&mdash;
-                интернет-редакцию&nbsp;&mdash; разместите его в&nbsp;google-документе, откройте доступ
+              разместите его в&nbsp;google-документе, откройте доступ к&nbsp;редактированию по&nbsp;ссылке
-                к&nbsp;редактированию по&nbsp;ссылке и&nbsp;напишите нам на&nbsp;
+              и&nbsp;напишите нам на&nbsp;
               <a href="mailto:welcome@discours.io" target="_blank">
                 welcome@discours.io
               </a>
@@ -180,10 +198,9 @@ export const GuidePage = () => {
                 <p>
                   <strong>Право определять, каким будет журнал</strong>. Дискурс&nbsp;&mdash; это
                   общественная институция, созданная людьми и&nbsp;ради людей, функционирующая
-                    на&nbsp;условиях прямой демократии. Авторы публикуют статьи и&nbsp;художественные
+                  на&nbsp;условиях прямой демократии. Авторы публикуют статьи и&nbsp;художественные проекты,
-                    проекты, участвуют в&nbsp;обсуждениях, голосуют за&nbsp;работы коллег и&nbsp;таким
+                  участвуют в&nbsp;обсуждениях, голосуют за&nbsp;работы коллег и&nbsp;таким образом вносят
-                    образом вносят свой вклад в&nbsp;развитие проекта, определяя содержание
+                  свой вклад в&nbsp;развитие проекта, определяя содержание и&nbsp;направление журнала.
-                    и&nbsp;направление журнала.
                 </p>
               </li>
               <li>
@@ -195,9 +212,9 @@ export const GuidePage = () => {
               <li>
                 <p>
                   <strong>Поддержка редакции</strong>. Дискурс предоставляет авторам аккредитацию
-                    на&nbsp;мероприятия, базу контактов, юридическую поддержку, ознакомление
+                  на&nbsp;мероприятия, базу контактов, юридическую поддержку, ознакомление с&nbsp;книжными,
-                    с&nbsp;книжными, кино- и&nbsp;музыкальными новинками до&nbsp;их&nbsp;выхода в&nbsp;свет.
+                  кино- и&nbsp;музыкальными новинками до&nbsp;их&nbsp;выхода в&nbsp;свет. Если что-то
-                    Если что-то из&nbsp;этого вам понадобится, пишите на&nbsp;почту{' '}
+                  из&nbsp;этого вам понадобится, пишите на&nbsp;почту{' '}
                   <a href="mailto:welcome@discours.io" target="_blank">
                     welcome@discours.io
                   </a>
@@ -209,29 +226,29 @@ export const GuidePage = () => {
                   <strong>Пресс-карты для корреспондентов</strong>. Три опубликованные статьи позволяют
                   авторам Дискурса получить официальные удостоверения журналистов (пресс-карты)
                   на&nbsp;следующий год. Пресс-карты удостоверяют, что вы&nbsp;журналист и&nbsp;можете
-                    пользоваться всеми теми правами, которые гарантирует Закон о&nbsp;СМИ. Кроме того,
+                  пользоваться всеми теми правами, которые гарантирует Закон о&nbsp;СМИ. Кроме того, многие
-                    многие культурные институции (музеи, галереи и&nbsp;др.) предоставляют журналистам право
+                  культурные институции (музеи, галереи и&nbsp;др.) предоставляют журналистам право
                   свободного входа.
                 </p>
               </li>
               <li>
                 <p>
-                    <strong>Помощь сотен специалистов в&nbsp;разных областях</strong>. В&nbsp;основе
+                  <strong>Помощь сотен специалистов в&nbsp;разных областях</strong>. В&nbsp;основе Дискурса
-                    Дискурса лежит идея совместного редактирования. Участники редакционного
+                  лежит идея совместного редактирования. Участники редакционного сообщества&nbsp;&mdash;
-                    сообщества&nbsp;&mdash; несколько сотен журналистов, исследователей, художников,
+                  несколько сотен журналистов, исследователей, художников, литераторов из&nbsp;разных стран
-                    литераторов из&nbsp;разных стран &mdash; изучают материалы друг друга до&nbsp;публикации
+                  &mdash; изучают материалы друг друга до&nbsp;публикации и&nbsp;помогают сделать
-                    и&nbsp;помогают сделать их&nbsp;качественнее и&nbsp;интереснее. Так, в&nbsp;редакции
+                  их&nbsp;качественнее и&nbsp;интереснее. Так, в&nbsp;редакции нередко складываются
-                    нередко складываются творческие союзы: например, авторов текстов и&nbsp;художников,
+                  творческие союзы: например, авторов текстов и&nbsp;художников, создающих для них
-                    создающих для них иллюстрации.
+                  иллюстрации.
                 </p>
               </li>
               <li>
                 <p>
                   <strong>Пространство общения полное выдающихся людей</strong>. Дискурс&nbsp;&mdash;
-                    большое живое сообщество интеллектуалов, разбросанных по&nbsp;всему земному шару.
+                  большое живое сообщество интеллектуалов, разбросанных по&nbsp;всему земному шару. Вступив
-                    Вступив в&nbsp;редакцию, вы&nbsp;сможете познакомиться со&nbsp;множеством интересных
+                  в&nbsp;редакцию, вы&nbsp;сможете познакомиться со&nbsp;множеством интересных людей,
-                    людей, которые определяют повестку завтрашнего дня, вдохновляют окружающих, создают
+                  которые определяют повестку завтрашнего дня, вдохновляют окружающих, создают новое
-                    новое и&nbsp;изучают старое, ищут знания и&nbsp;готовы ими делиться, чтобы менять мир
+                  и&nbsp;изучают старое, ищут знания и&nbsp;готовы ими делиться, чтобы менять мир
                   в&nbsp;соответствии со&nbsp;своими идеалами.
                 </p>
               </li>
@@ -265,7 +282,6 @@ export const GuidePage = () => {
             </p>
           </div>
         </div>
-        </div>
       </article>
     </MainLayout>
   )

src/components/Pages/about/HelpPage.tsx

@@ -1,9 +1,15 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { Donate } from '../../Discours/Donate'
+import { Icon } from '../../Nav/Icon'
 
 // const title = t('Support us')
 
 export const HelpPage = () => {
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       {/*<Meta name="description">Здесь можно поддержать Дискурс материально.</Meta>*/}
@@ -13,8 +19,20 @@ export const HelpPage = () => {
 
       <article class="container container--static-page discours-help">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
+              <Show when={!indexExpanded()}>
+                <Icon name="content-index-control" />
+              </Show>
+              <Show when={indexExpanded()}>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
+              </Show>
+            </button>
+
+            <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
@@ -30,14 +48,14 @@ export const HelpPage = () => {
                   </li>
                 </ul>
               </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="help-us">
               <span class="wrapped">Как вы&nbsp;можете поддержать Дискурс?</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Дискурс&nbsp;&mdash; уникальное независимое издание с&nbsp;горизонтальной редакцией,
               существующее в&nbsp;интересах своих читателей. Ваша поддержка действительно много
@@ -65,9 +83,9 @@ export const HelpPage = () => {
             <p>
               Ваши пожертвования пойдут на&nbsp;оплату серверов, содержание офиса, зарплату редакции
               и&nbsp;налоги, оплату юридического сопровождения и&nbsp;труда бухгалтера, совершенствование
-                сайта, аренду помещения для открытой редакции, на&nbsp;печать альманаха Дискурс
+              сайта, аренду помещения для открытой редакции, на&nbsp;печать альманаха Дискурс с&nbsp;лучшими
-                с&nbsp;лучшими текстами авторов за&nbsp;полгода, а&nbsp;также на&nbsp;другие редакционные
+              текстами авторов за&nbsp;полгода, а&nbsp;также на&nbsp;другие редакционные и&nbsp;технические
-                и&nbsp;технические расходы.
+              расходы.
             </p>
             <h3>Ваша помощь позволит нам</h3>
             <ul>
@@ -142,7 +160,6 @@ export const HelpPage = () => {
             </p>
           </div>
         </div>
-        </div>
       </article>
     </MainLayout>
   )

src/components/Pages/about/ManifestPage.tsx

@@ -1,12 +1,18 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { Modal } from '../../Nav/Modal'
 import { Feedback } from '../../Discours/Feedback'
 import Subscribe from '../../Discours/Subscribe'
 import Opener from '../../Nav/Opener'
+import { Icon } from '../../Nav/Icon'
 
 // title={t('Manifest')}
 
 export const ManifestPage = () => {
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       <Modal name="feedback">
@@ -17,8 +23,20 @@ export const ManifestPage = () => {
       </Modal>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
+              <Show when={!indexExpanded()}>
+                <Icon name="content-index-control" />
+              </Show>
+              <Show when={indexExpanded()}>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
+              </Show>
+            </button>
+
+            <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#manifest">Манифест</a>
@@ -45,14 +63,14 @@ export const ManifestPage = () => {
                   </li>
                 </ul>
               </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="manifest">
               <span class="wrapped">Манифест</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Дискурс&nbsp;&mdash; независимый художественно-аналитический журнал с&nbsp;горизонтальной
               редакцией, основанный на&nbsp;принципах свободы слова, прямой демократии и&nbsp;совместного
@@ -78,19 +96,20 @@ export const ManifestPage = () => {
               рассказывать свои истории так, чтобы они были услышаны. Мы&nbsp;убеждены: чем больше голосов
               будет звучать на&nbsp;Дискурсе, тем громче в&nbsp;полифонии мнений будет слышна истина.
             </p>
-            </div>
 
             <h2 class="h2" id="participation">
               <span class="wrapped">Как участвовать в&nbsp;самиздате</span>
             </h2>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Дискурс создается <a href="/about/guide">открытым сообществом</a> энтузиастов новой
               независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
               следующими способами:
             </p>
+            <details open>
+              <summary>
                 <h3 id="contribute">Предлагать материалы</h3>
+              </summary>
               <p>
                 <a href="/create">Создавайте</a> свои статьи и&nbsp;художественные работы&nbsp;&mdash;
                 лучшие из них будут опубликованы в&nbsp;журнале. Дискурс&nbsp;&mdash; некоммерческое
@@ -98,7 +117,12 @@ export const ManifestPage = () => {
                 <a href="/create?collab=true">поддержку</a> редакции, право голоса, множество других
                 возможностей и&nbsp;читателей по&nbsp;всему миру.
               </p>
+            </details>
+
+            <details>
+              <summary>
                 <h3 id="donate">Поддерживать проект</h3>
+              </summary>
               <p>
                 Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,
               </p>
@@ -106,7 +130,12 @@ export const ManifestPage = () => {
                 <a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на&nbsp;выпуск
                 новых материалов, оплату серверов, труда программистов, дизайнеров и&nbsp;редакторов.
               </p>
+            </details>
+
+            <details>
+              <summary>
                 <h3 id="cooperation">Сотрудничать с&nbsp;журналом</h3>
+              </summary>
               <p>
                 Мы всегда открыты для сотрудничества и&nbsp;рады единомышленникам. Если вы хотите помогать
                 журналу с&nbsp;редактурой, корректурой, иллюстрациями, переводами, версткой, подкастами,
@@ -125,7 +154,12 @@ export const ManifestPage = () => {
                 и&nbsp;медиаинструментов находится{' '}
                 <a href="https://github.com/Discours">в&nbsp;свободном доступе на&nbsp;GitHub</a>.
               </p>
+            </details>
+
+            <details>
+              <summary>
                 <h3 id="follow">Как еще можно помочь</h3>
+              </summary>
               <p>
                 Советуйте Дискурс друзьям и&nbsp;знакомым. Обсуждайте и&nbsp;распространяйте наши
                 публикации&nbsp;&mdash; все материалы открытой редакции можно читать и&nbsp;перепечатывать
@@ -141,19 +175,19 @@ export const ManifestPage = () => {
                 интересными темами, о&nbsp;которых хотели бы узнать больше, и&nbsp;историями, которые нужно
                 рассказать.
               </p>
-            </div>
+            </details>
 
             <h2 class="h2" id="connection">
               <span class="wrapped">Будем на&nbsp;связи</span>
             </h2>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
               Если вы хотите предложить материал, сотрудничать, рассказать о&nbsp;проблеме, которую нужно
               осветить, сообщить об&nbsp;ошибке или баге, что-то обсудить, уточнить или посоветовать,
               пожалуйста, <Opener name="feedback">напишите нам здесь</Opener> или на&nbsp;почту{' '}
               <a href="mailto:welcome@discours.io">welcome@discours.io</a>. Мы обязательно ответим
               и&nbsp;постараемся реализовать все хорошие задумки.
-            </div>
+            </p>
           </div>
         </div>
       </article>

src/components/Pages/about/PartnersPage.tsx

@@ -8,8 +8,9 @@ export const PartnersPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">{t('Partners')}</div>
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
-          <div class="col-md-8 col-lg-6 offset-md-3" />
+            <h1>{t('Partners')}</h1>
+          </div>
         </div>
       </article>
     </MainLayout>

src/components/Pages/about/PrinciplesPage.tsx

@@ -7,20 +7,19 @@ export const PrinciplesPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped">{title}</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
             <ol>
               <li>
                 <p>
                   <strong>Горизонтальность</strong>. Мы&nbsp;все разные, и&nbsp;это классно. Вертикалей
                   в&nbsp;мире достаточно, мы&nbsp;&mdash; горизонтальное сообщество и&nbsp;ценим наши
-                    различия, потому что знаем&nbsp;&mdash; в&nbsp;них наша сила. Благодаря разнообразию
+                  различия, потому что знаем&nbsp;&mdash; в&nbsp;них наша сила. Благодаря разнообразию сотен
-                    сотен голосов, усиливающих друг друга, в&nbsp;сообществе складывается неповторимая
+                  голосов, усиливающих друг друга, в&nbsp;сообществе складывается неповторимая синергия,
-                    синергия, которая помогает вместе достигать большего.
+                  которая помогает вместе достигать большего.
                 </p>
               </li>
               <li>
@@ -36,34 +35,32 @@ export const PrinciplesPage = () => {
                   в&nbsp;мире было еще больше хорошего. Обсуждая что-то, мы&nbsp;всегда интересуемся, чем
                   можем помочь. В&nbsp;самиздате можно найти специалистов практически в&nbsp;любых сферах
                   и&nbsp;получить поддержку от&nbsp;сотен людей. Благодаря коллективной экспертизе
-                    глобального сообщества в&nbsp;самиздате выходят крутейшие публикации, которыми можно
+                  глобального сообщества в&nbsp;самиздате выходят крутейшие публикации, которыми можно вечно
-                    вечно гордиться.
+                  гордиться.
                 </p>
               </li>
               <li>
                 <p>
-                    <strong>Взаимоуважение</strong>. Мы&nbsp;ценим, искренне уважаем друг друга
+                  <strong>Взаимоуважение</strong>. Мы&nbsp;ценим, искренне уважаем друг друга и&nbsp;вместо
-                    и&nbsp;вместо борщевиков враждебности культивируем цветы добра, мира, знания
+                  борщевиков враждебности культивируем цветы добра, мира, знания и&nbsp;юмора. Нам некогда
-                    и&nbsp;юмора. Нам некогда доказывать друг другу, кто круче. Гораздо приятнее
+                  доказывать друг другу, кто круче. Гораздо приятнее сотрудничать, помогать и&nbsp;создавать
-                    сотрудничать, помогать и&nbsp;создавать что-то важное, интересное и&nbsp;полезное.
+                  что-то важное, интересное и&nbsp;полезное.
                 </p>
               </li>
               <li>
                 <p>
                   <strong>Созидание</strong>. Мы&nbsp;создаем, потому что любим создавать. Мы&nbsp;открыто
                   делимся опытом, дарим идеи, обмениваемся мнениями и&nbsp;благодарим за&nbsp;критику,
-                    используя ее&nbsp;для совершенствования мастерства и&nbsp;саморазвития. Мы&nbsp;знаем,
+                  используя ее&nbsp;для совершенствования мастерства и&nbsp;саморазвития. Мы&nbsp;знаем, что
-                    что мир не&nbsp;идеальное место, и&nbsp;делаем всё возможное, чтобы он&nbsp;стал лучше.
+                  мир не&nbsp;идеальное место, и&nbsp;делаем всё возможное, чтобы он&nbsp;стал лучше.
                 </p>
               </li>
             </ol>
-            </div>
 
             <h2 class="h2" id="participation">
               <span class="wrapped">Как участвовать в&nbsp;самиздате</span>
             </h2>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Открытая редакция объединяет сотни потрясающих людей со&nbsp;всего мира, которые делают
               крутейшие вещи. Это пространство, где доверяют, вдохновляют, исследуют и&nbsp;создают новое
@@ -75,21 +72,21 @@ export const PrinciplesPage = () => {
             <ol>
               <li>
                 <p>
-                    <strong>Действуем, помогаем и&nbsp;делимся</strong>. В&nbsp;редакции мы&nbsp;создаем
+                  <strong>Действуем, помогаем и&nbsp;делимся</strong>. В&nbsp;редакции мы&nbsp;создаем свои
-                    свои проекты и&nbsp;помогаем другим создавать свои&nbsp;&mdash; советами, делом,
+                  проекты и&nbsp;помогаем другим создавать свои&nbsp;&mdash; советами, делом, участием,
-                    участием, вовлеченностью. Мы&nbsp;открыто делимся опытом, мнениями и&nbsp;идеями, потому
+                  вовлеченностью. Мы&nbsp;открыто делимся опытом, мнениями и&nbsp;идеями, потому что ценим
-                    что ценим силу сотрудничества и&nbsp;знаем, что идеи реализуются скорее, лучше
+                  силу сотрудничества и&nbsp;знаем, что идеи реализуются скорее, лучше и&nbsp;веселее, если
-                    и&nbsp;веселее, если над ними трудиться сообща.
+                  над ними трудиться сообща.
                 </p>
               </li>
 
               <li>
                 <p>
-                    <strong>Общаемся дружелюбно</strong>. Помните, по&nbsp;ту&nbsp;сторону монитора
+                  <strong>Общаемся дружелюбно</strong>. Помните, по&nbsp;ту&nbsp;сторону монитора находятся
-                    находятся реальные люди. Неуважение ранит других так&nbsp;же, как ранило&nbsp;бы вас
+                  реальные люди. Неуважение ранит других так&nbsp;же, как ранило&nbsp;бы вас самих. Поэтому
-                    самих. Поэтому не&nbsp;стоит кричать (даже капслоком), заполнять эфир желчью
+                  не&nbsp;стоит кричать (даже капслоком), заполнять эфир желчью и&nbsp;бросаться
-                    и&nbsp;бросаться грубостями&nbsp;&mdash; так вы&nbsp;рискуете не&nbsp;только растерять
+                  грубостями&nbsp;&mdash; так вы&nbsp;рискуете не&nbsp;только растерять доверие окружающих,
-                    доверие окружающих, но&nbsp;и&nbsp;остаться непонятым.
+                  но&nbsp;и&nbsp;остаться непонятым.
                 </p>
               </li>
 
@@ -109,22 +106,21 @@ export const PrinciplesPage = () => {
 
               <li>
                 <p>
-                    <strong>Решаем трудности не&nbsp;агрессией, а&nbsp;диалогом</strong>. Обесценивать
+                  <strong>Решаем трудности не&nbsp;агрессией, а&nbsp;диалогом</strong>. Обесценивать мнения
-                    мнения и&nbsp;оскорблять других людей только потому, что вы&nbsp;с&nbsp;ними
+                  и&nbsp;оскорблять других людей только потому, что вы&nbsp;с&nbsp;ними
                   не&nbsp;согласны,&nbsp;&mdash; не&nbsp;лучший способ донести свою точку зрения. Конечно,
                   важно высказаться, если вас что-то не&nbsp;устраивает и&nbsp;откровенно бесит.
                   Но&nbsp;прежде чем сжигать оппонента гневом, попробуйте понять, почему этот
                   &laquo;нехороший человек&raquo; так поступает. Возможно, аргументы собеседника окажутся
-                    убедительными или вам удастся изменить его мнение. В&nbsp;любом случае конфликты
+                  убедительными или вам удастся изменить его мнение. В&nbsp;любом случае конфликты решаются
-                    решаются в&nbsp;диалогах и&nbsp;проходят, а&nbsp;налаженное взаимопонимание останется
+                  в&nbsp;диалогах и&nbsp;проходят, а&nbsp;налаженное взаимопонимание останется надолго.
-                    надолго.
                 </p>
               </li>
 
               <li>
                 <p>
-                    <strong>Не&nbsp;переходим на&nbsp;личности&nbsp;&mdash; это признак токсичности</strong>
+                  <strong>Не&nbsp;переходим на&nbsp;личности&nbsp;&mdash; это признак токсичности</strong>.
-                    . Всегда мудрее обсуждать точку зрения человека, а&nbsp;не&nbsp;его самого, даже если
+                  Всегда мудрее обсуждать точку зрения человека, а&nbsp;не&nbsp;его самого, даже если
                   он&nbsp;вам не&nbsp;импонирует. Предвзятое отношение ограничивает кругозор, добавляет
                   преждевременные морщины и&nbsp;не&nbsp;помогает окружающим стать лучше. Вежливость
                   и&nbsp;взаимоуважение&nbsp;&mdash; краеугольная основа вдумчивых и&nbsp;осмысленных
@@ -168,14 +164,13 @@ export const PrinciplesPage = () => {
                   не&nbsp;хватает, мы&nbsp;начинаем действовать&nbsp;&mdash; рассказываем об&nbsp;идее,
                   находим единомышленников, готовим и&nbsp;запускаем проект. Так в&nbsp;сообществе
                   становится на&nbsp;одну крутую активность больше. Так появилось наше сообщество. Так
-                    появился самиздат и&nbsp;все проекты открытой редакции. Чтобы в&nbsp;сообществе
+                  появился самиздат и&nbsp;все проекты открытой редакции. Чтобы в&nbsp;сообществе случилось
-                    случилось что-то прекрасное, достаточно просто положить этому начало.
+                  что-то прекрасное, достаточно просто положить этому начало.
                 </p>
               </li>
             </ol>
           </div>
         </div>
-        </div>
       </article>
     </MainLayout>
   )

src/components/Pages/about/ProjectsPage.tsx

@@ -8,8 +8,9 @@ export const ProjectsPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">{t('Projects')}</div>
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
-          <div class="col-md-8 col-lg-6 offset-md-3" />
+            <h1>{t('Projects')}</h1>
+          </div>
         </div>
       </article>
     </MainLayout>

src/components/Pages/about/TermsOfUsePage.tsx

@@ -1,8 +1,14 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
+import { Icon } from '../../Nav/Icon'
 
 // const title = t('Terms of use')
 
 export const TermsOfUsePage = () => {
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       {/*<Meta name="description" content={title} />*/}
@@ -11,8 +17,20 @@ export const TermsOfUsePage = () => {
       {/*<Meta property="og:description" content={title} />*/}
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
+              <Show when={!indexExpanded()}>
+                <Icon name="content-index-control" />
+              </Show>
+              <Show when={indexExpanded()}>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
+              </Show>
+            </button>
+
+            <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#terms-of-use">Пользовательское соглашение</a>
@@ -34,14 +52,14 @@ export const TermsOfUsePage = () => {
                   </li>
                 </ul>
               </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="terms-of-use">
               <span class="wrapped">Пользовательское соглашение</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
             <p>
               Дискурс&nbsp;&mdash; это сообщество творческих людей, объединенных идеей делать интересный
               журнал для всех желающих. Авторы Дискурса сообща посредством прямого голосования определяют
@@ -61,10 +79,9 @@ export const TermsOfUsePage = () => {
               объектов авторских прав и&nbsp;другой информации для других пользователей.
             </p>
             <p>
-                <strong>Издательство</strong>&nbsp;&mdash; администрация сайта, которая занимается
+              <strong>Издательство</strong>&nbsp;&mdash; администрация сайта, которая занимается технической
-                технической и&nbsp;издательской деятельностью для обеспечения функционирования Сайта
+              и&nbsp;издательской деятельностью для обеспечения функционирования Сайта и&nbsp;Альманаха.
-                и&nbsp;Альманаха. Издательство не&nbsp;вмешивается в&nbsp;принятие редакционных решений
+              Издательство не&nbsp;вмешивается в&nbsp;принятие редакционных решений авторским сообществом.
-                авторским сообществом.
             </p>
             <p>
               <strong>Альманах &laquo;Дискурс&raquo;</strong> (свидетельство о&nbsp;регистрации СМИ: ПИ
@@ -105,8 +122,7 @@ export const TermsOfUsePage = () => {
                     Creative Commons BY-NC-ND 4.0
                   </a>
                   . Все материалы сайта предназначены исключительно для личного некоммерческого
-                    использования. Права на&nbsp;дизайн и&nbsp;программный код сайта принадлежат
+                  использования. Права на&nbsp;дизайн и&nbsp;программный код сайта принадлежат Издательству.
-                    Издательству.
                 </p>
               </li>
               <li>
@@ -134,9 +150,9 @@ export const TermsOfUsePage = () => {
             <ol>
               <li>
                 <p>
-                    Находясь на&nbsp;Сайте, Пользователь подтверждает свое совершеннолетие,
+                  Находясь на&nbsp;Сайте, Пользователь подтверждает свое совершеннолетие, правоспособность,
-                    правоспособность, а&nbsp;также согласие с&nbsp;настоящими Правилами и&nbsp;политикой
+                  а&nbsp;также согласие с&nbsp;настоящими Правилами и&nbsp;политикой конфиденциальности
-                    конфиденциальности и&nbsp;готовность нести полную ответственность за&nbsp;их соблюдение.
+                  и&nbsp;готовность нести полную ответственность за&nbsp;их соблюдение.
                 </p>
               </li>
               <li>
@@ -162,21 +178,21 @@ export const TermsOfUsePage = () => {
               <li>
                 <p>
                   Пользователь несет всю ответственность за&nbsp;содержание публикуемого контента
-                    и&nbsp;свое взаимодействие с&nbsp;другими пользователями, и&nbsp;обязуется возместить
+                  и&nbsp;свое взаимодействие с&nbsp;другими пользователями, и&nbsp;обязуется возместить все
-                    все расходы в&nbsp;случае предъявления каких-либо претензий третьими лицами.
+                  расходы в&nbsp;случае предъявления каких-либо претензий третьими лицами. Издательство
-                    Издательство не&nbsp;несет ответственности за&nbsp;содержание публикуемой пользователями
+                  не&nbsp;несет ответственности за&nbsp;содержание публикуемой пользователями информации,
-                    информации, в&nbsp;том числе за&nbsp;размещенные на&nbsp;сайте комментарии. Переписка
+                  в&nbsp;том числе за&nbsp;размещенные на&nbsp;сайте комментарии. Переписка между
-                    между Пользователем и&nbsp;Издательством считается юридически значимой. Настоящие
+                  Пользователем и&nbsp;Издательством считается юридически значимой. Настоящие Правила могут
-                    Правила могут быть изменены Издательством, изменения вступают в&nbsp;силу с&nbsp;момента
+                  быть изменены Издательством, изменения вступают в&nbsp;силу с&nbsp;момента публикации
-                    публикации на&nbsp;Сайте.
+                  на&nbsp;Сайте.
                 </p>
               </li>
               <li>
                 <p>
                   Если Пользователь очевидно и&nbsp;целенаправленно нарушает правила, Издательство может
                   и&nbsp;принять в&nbsp;отношении автора следующие меры: вынести предупреждение
-                    и&nbsp;обязать автора устранить допущенное нарушение, удалить контент, нарушающий
+                  и&nbsp;обязать автора устранить допущенное нарушение, удалить контент, нарушающий правила,
-                    правила, заблокировать или удалить аккаунт нарушителя.
+                  заблокировать или удалить аккаунт нарушителя.
                 </p>
               </li>
             </ol>
@@ -187,13 +203,13 @@ export const TermsOfUsePage = () => {
                 <ul>
                   <li>
                     <p>
-                        Данные, которые пользователи сообщают о&nbsp;себе сами при подаче заявки,
+                      Данные, которые пользователи сообщают о&nbsp;себе сами при подаче заявки, регистрации,
-                        регистрации, авторизации или заполнения профиля, в&nbsp;том числе ФИО
+                      авторизации или заполнения профиля, в&nbsp;том числе ФИО и&nbsp;контактную информацию.
-                        и&nbsp;контактную информацию. Конфиденциальные данные, такие как идентификатор
+                      Конфиденциальные данные, такие как идентификатор и&nbsp;электронный адрес,
-                        и&nbsp;электронный адрес, используются для идентификации пользователя. Данные
+                      используются для идентификации пользователя. Данные профиля, размещённые публично
-                        профиля, размещённые публично по&nbsp;желанию пользователя, которое выражается
+                      по&nbsp;желанию пользователя, которое выражается фактом их&nbsp;предоставления,
-                        фактом их&nbsp;предоставления, используется для демонстрации другим пользователям
+                      используется для демонстрации другим пользователям той информации о&nbsp;себе, которую
-                        той информации о&nbsp;себе, которую пользователь готов предоставить.
+                      пользователь готов предоставить.
                     </p>
                   </li>
                   <li>
@@ -214,8 +230,7 @@ export const TermsOfUsePage = () => {
               <li>
                 <p class="ng-binding">
                   По&nbsp;желанию пользователя Издательство готово удалить любую информацию о&nbsp;нем,
-                    собранную автоматическим путем. Для этого следует написать на&nbsp;адрес электронной
+                  собранную автоматическим путем. Для этого следует написать на&nbsp;адрес электронной почты{' '}
-                    почты{' '}
                   <a href="mailto:welcome@discours.io" target="_blank">
                     welcome@discours.io
                   </a>
@@ -229,8 +244,7 @@ export const TermsOfUsePage = () => {
                   на&nbsp;их&nbsp;обработку любым способом, не&nbsp;запрещенным законодательством РФ.
                 </p>
                 <p class="ng-binding">
-                    Общедоступные видео на&nbsp;сайте могут транслироваться с&nbsp;YouTube
+                  Общедоступные видео на&nbsp;сайте могут транслироваться с&nbsp;YouTube и&nbsp;регулируются{' '}
-                    и&nbsp;регулируются{' '}
                   <a href="https://policies.google.com/privacy" target="_blank">
                     политикой конфиденциальности Google
                   </a>
@@ -244,8 +258,7 @@ export const TermsOfUsePage = () => {
               <li>
                 <p>
                   Данные, которые мы&nbsp;получаем от&nbsp;вас, мы&nbsp;используем только
-                    в&nbsp;соответствии с&nbsp;принципами обработки данных, указанными в&nbsp;этом
+                  в&nbsp;соответствии с&nbsp;принципами обработки данных, указанными в&nbsp;этом документе.
-                    документе.
                 </p>
               </li>
             </ol>
@@ -260,7 +273,6 @@ export const TermsOfUsePage = () => {
             </p>
           </div>
         </div>
-        </div>
       </article>
     </MainLayout>
   )

src/components/Pages/about/ThanksPage.tsx

@@ -12,12 +12,10 @@ export const ThanksPage = () => {
 
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped">{title}</span>
             </h1>
-          </div>
-          <div class="col-md-8 col-lg-6 offset-md-3">
             {/*
                 <h3><b>Команда</b></h3>
                   <p>

src/components/Root.tsx

@@ -2,12 +2,11 @@
 // import 'solid-devtools'
 
 import { MODALS, setLocale, showModal } from '../stores/ui'
-import { Component, createEffect, createMemo, onMount } from 'solid-js'
+import { Component, createEffect, createMemo } 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'
+import type { PageProps, RootSearchParams } from './types'
 
 import { HomePage } from './Pages/HomePage'
 import { AllTopicsPage } from './Pages/AllTopicsPage'
@@ -30,7 +29,7 @@ import { TermsOfUsePage } from './Pages/about/TermsOfUsePage'
 import { ThanksPage } from './Pages/about/ThanksPage'
 import { CreatePage } from './Pages/CreatePage'
 import { ConnectPage } from './Pages/ConnectPage'
-import { renewSession } from '../stores/auth'
+import { SessionProvider } from '../context/session'
 
 // TODO: lazy load
 // const HomePage = lazy(() => import('./Pages/HomePage'))
@@ -52,13 +51,6 @@ import { renewSession } from '../stores/auth'
 // const ThanksPage = lazy(() => import('./Pages/about/ThanksPage'))
 // const CreatePage = lazy(() => import('./Pages/about/CreatePage'))
 
-const log = getLogger('root')
-
-type RootSearchParams = {
-  modal: string
-  lang: string
-}
-
 const pagesMap: Record<keyof Routes, Component<PageProps>> = {
   connect: ConnectPage,
   create: CreatePage,
@@ -92,10 +84,6 @@ export const Root = (props: PageProps) => {
     }
   })
 
-  onMount(() => {
-    renewSession()
-  })
-
   const pageComponent = createMemo(() => {
     const result = pagesMap[page().route]
 
@@ -114,5 +102,9 @@ export const Root = (props: PageProps) => {
     })
   }
 
-  return <Dynamic component={pageComponent()} {...props} />
+  return (
+    <SessionProvider>
+      <Dynamic component={pageComponent()} {...props} />
+    </SessionProvider>
+  )
 }

src/components/Topic/Card.module.scss

@@ -3,16 +3,8 @@
   margin-top: 3.2rem;
 
   .stats & {
-    @include media-breakpoint-down(sm) {
-      margin-left: 0;
-    }
-
     .topicDetailsItem {
       margin-bottom: 1.2rem;
-
-      @include media-breakpoint-up(md) {
-        margin-bottom: 3.2rem;
-      }
     }
   }
 }
@@ -33,9 +25,9 @@
 
 .topicTitle {
   font-weight: bold;
-  @include font-size(1.7rem);
+  @include font-size(2.2rem);
 
-  margin-bottom: 0.8rem;
+  margin-bottom: 1.2rem;
 }
 
 .topicAvatar {
@@ -56,10 +48,10 @@
 }
 
 .topicDescription {
-  @include font-size(1.5rem);
+  @include font-size(1.6rem);
 
   color: #696969;
-  margin: 0 0 0.8rem;
+  margin: 0 0 1.6rem;
 
   &.compact {
     font-size: medium;
@@ -85,6 +77,8 @@
 }
 
 .topicDetailsItem {
+  @include font-size(1.5rem);
+
   margin-right: 1.6rem;
   white-space: nowrap;
 
@@ -104,3 +98,9 @@
     float: right;
   }
 }
+
+.controlContainer {
+  @include media-breakpoint-up(md) {
+    text-align: right;
+  }
+}