lint & build

.stylelintrc

@@ -12,12 +12,16 @@
     "selector-class-pattern": null,
     "no-descending-specificity": null,
     "scss/function-no-unknown": null,
+    "scss/no-global-function-names": null,
     "function-url-quotes": null,
     "font-family-no-missing-generic-family-keyword": null,
     "order/order": [
       "custom-properties",
       "declarations"
-    ]
+    ],
+    "scss/dollar-variable-pattern": ["^[a-z][a-zA-Z]+$", {
+      "ignore": "global"
+    }]
   },
   "defaultSeverity": "warning"
 }

api/newsletter.js

@@ -13,7 +13,7 @@ export default async (req, res) => {
   const client = mailgun.client(mgOptions)
 
   try {
-    const response = await client.lists.members.createMember(mgOptions.domain, {
+    await client.lists.members.createMember(mgOptions.domain, {
       address: email,
       subscribed: true,
       upsert: 'yes'

astro.config.ts

@@ -1,10 +1,9 @@
 import { defineConfig, AstroUserConfig } from 'astro/config'
 import vercel from '@astrojs/vercel/serverless'
 import solidJs from '@astrojs/solid-js'
-import type { CSSOptions } from 'vite'
 import defaultGenerateScopedName from 'postcss-modules/build/generateScopedName'
 import { isDev } from './src/utils/config'
-import { visualizer } from 'rollup-plugin-visualizer'
+// import { visualizer } from 'rollup-plugin-visualizer'
 
 const PATH_PREFIX = '/src/'
 
@@ -18,18 +17,6 @@ const getDevCssClassPrefix = (filename: string): string => {
 const devGenerateScopedName = (name: string, filename: string, css: string) =>
   getDevCssClassPrefix(filename) + '_' + defaultGenerateScopedName(name, filename, css)
 
-const css: CSSOptions = {
-  preprocessorOptions: {
-    scss: {
-      additionalData: '@import "src/styles/imports";\n'
-    }
-  },
-  modules: {
-    generateScopedName: isDev ? devGenerateScopedName : defaultGenerateScopedName,
-    localsConvention: null
-  }
-}
-
 const astroConfig: AstroUserConfig = {
   site: 'https://new.discours.io',
   integrations: [solidJs()],
@@ -39,7 +26,7 @@ const astroConfig: AstroUserConfig = {
     build: {
       chunkSizeWarningLimit: 777,
       rollupOptions: {
-        plugins: [visualizer()],
+        // plugins: [visualizer()],
         output: {
           // eslint-disable-next-line sonarjs/cognitive-complexity
           /*
@@ -71,7 +58,17 @@ const astroConfig: AstroUserConfig = {
         external: []
       }
     },
-    css
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@import "src/styles/imports";\n'
+        }
+      },
+      modules: {
+        generateScopedName: isDev ? devGenerateScopedName : defaultGenerateScopedName,
+        localsConvention: null
+      }
+    }
   }
 }
 

src/components/Article/Comment.module.scss

@@ -13,13 +13,14 @@
   }
 
   .comment {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: '';
       left: 0;
       position: absolute;
     }
-    &:before {
+
+    &::before {
       border-bottom: 2px solid #ccc;
       border-left: 2px solid #ccc;
       border-radius: 0 0 0 1.2rem;
@@ -27,20 +28,24 @@
       height: 2.4rem;
       width: 1.2rem;
     }
-    &:after {
+
+    &::after {
       background: #ccc;
       height: 100%;
       top: 0;
       width: 2px;
     }
-    &:last-child:after {
+
+    &:last-child::after {
       display: none;
     }
   }
 
   .shout-body {
     @include font-size(1.5rem);
+
     margin-bottom: 1em;
+
     *:last-child {
       margin-bottom: 0;
     }
@@ -76,7 +81,7 @@
 .commentControlEdit,
 .commentControlComplain {
   @include media-breakpoint-up(md) {
-    //opacity: 0;
+    // opacity: 0;
     transition: opacity 0.3s;
   }
 }
@@ -105,6 +110,7 @@
   &:hover {
     background: #000;
     color: #fff;
+
     .icon {
       filter: invert(1);
       opacity: 1;
@@ -116,6 +122,7 @@
     margin-right: 0.3em;
     opacity: 0.6;
     transition: filter 0.3s, opacity 0.2s;
+
     img {
       margin-bottom: -0.1em;
     }
@@ -166,7 +173,6 @@
   gap: 1rem;
   align-items: center;
   justify-content: flex-start;
-  color: rgba(0, 0, 0, 0.3);
   font-size: 1.2rem;
   margin-bottom: 4px;
   color: rgb(0 0 0 / 30%);

src/components/Article/CommentsTree.tsx

@@ -1,5 +1,5 @@
 import { Show, createMemo, createSignal, onMount, For } from 'solid-js'
-import Comment from './Comment'
+import { Comment } from './Comment'
 import { t } from '../../utils/intl'
 import styles from '../../styles/Article.module.scss'
 import { createReaction, useReactionsStore } from '../../stores/zine/reactions'
@@ -14,7 +14,6 @@ import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import Button from '../_shared/Button'
 
 const ARTICLE_COMMENTS_PAGE_SIZE = 50
-const MAX_COMMENT_LEVEL = 6
 
 type Props = {
   commentAuthors: Author[]
@@ -48,13 +47,7 @@ export const CommentsTree = (props: Props) => {
       setIsCommentsLoading(false)
     }
   }
-  const getCommentById = (cid: number) => reactions().find((r: Reaction) => r.id === cid)
-  const getCommentLevel = (c: Reaction, level = 0) => {
-    if (c && c.replyTo && level < MAX_COMMENT_LEVEL) {
-      return getCommentLevel(getCommentById(c.replyTo), level + 1)
-    }
-    return level
-  }
+
   onMount(async () => await loadMore())
 
   const [submitted, setSubmitted] = createSignal<boolean>(false)

src/components/Article/FullArticle.tsx

@@ -6,7 +6,7 @@ import { createMemo, For, Match, onMount, Show, Switch } from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import MD from './MD'
-import { getShareUrl, SharePopup } from './SharePopup'
+import { SharePopup } from './SharePopup'
 import { getDescription } from '../../utils/meta'
 import stylesHeader from '../Nav/Header.module.scss'
 import styles from '../../styles/Article.module.scss'

src/components/Author/Card.module.scss

@@ -201,6 +201,7 @@
 
   .authorName {
     @include font-size(3.4rem);
+
     font-weight: 500;
     margin-bottom: 0.2em;
   }
@@ -313,6 +314,7 @@
 
   .authorName {
     @include font-size(1.2rem);
+
     margin-bottom: 0;
   }
 

src/components/Author/Card.tsx

@@ -39,8 +39,6 @@ export const AuthorCard = (props: AuthorCardProps) => {
     actions: { loadSession }
   } = useSession()
 
-  if (!props.author) return false // FIXME: с сервера должен приходить автор реакции (ApiClient.CreateReaction)
-
   const [isSubscribing, setIsSubscribing] = createSignal(false)
 
   const subscribed = createMemo<boolean>(() => {

src/components/Author/Full.scss

@@ -17,6 +17,7 @@
 .author-page {
   .view-switcher {
     @include font-size(1.5rem);
+
     margin-top: 0;
 
     button {

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

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { inputRules } from 'prosemirror-inputrules'
 import type { Mark, MarkType } from 'prosemirror-model'
 import type { EditorState, Transaction } from 'prosemirror-state'

src/components/EditorExample/prosemirror/extension/link.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { Plugin, PluginKey, TextSelection, Transaction } from 'prosemirror-state'
 import type { EditorView } from 'prosemirror-view'
 import type { Mark, Node, Schema } from 'prosemirror-model'

src/components/EditorExample/prosemirror/extension/scroll.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { Plugin } from 'prosemirror-state'
 import type { EditorView } from 'prosemirror-view'
 import type { ProseMirrorExtension } from '../helpers'

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

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { renderGrouped } from 'prosemirror-menu'
 import { EditorState, Plugin } from 'prosemirror-state'
 import styles from '../styles/ProseMirror.module.scss'

src/components/Feed/Card.module.scss

@@ -411,12 +411,13 @@
 }
 
 .shoutCardDetails {
+  @include font-size(1.5rem);
+
   align-items: flex-start;
   border-top: 2px solid #141414;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  @include font-size(1.5rem);
   margin-top: 1em;
   padding: 1em 0 0;
   position: relative;

src/components/Feed/FeedArticlePopup.module.scss

@@ -1,6 +1,6 @@
 .feedArticlePopup {
   box-shadow: none !important;
-  border: 1px solid rgb(0 0 0 / 0.15);
+  border: 1px solid rgb(0 0 0 / 15%);
   border-radius: 1.6rem;
   padding: 1.6rem !important;
 

src/components/Feed/Sidebar.module.scss

@@ -7,12 +7,13 @@
 }
 
 .counter {
+  @include font-size(1.2rem);
+
   align-items: center;
   align-self: flex-start;
   background: #f6f6f6;
   border-radius: 0.8rem;
   display: flex;
-  @include font-size(1.2rem);
   font-weight: 500;
   padding: 0.2em 0.5em;
 }

src/components/Inbox/DialogCard.module.scss

@@ -73,6 +73,7 @@
   &.opened,
   &.opened:hover {
     background: #000;
+
     .name,
     .message,
     .time {

src/components/Inbox/Message.module.scss

@@ -51,10 +51,12 @@ $actionsWidth: 32px * 2;
       z-index: -1;
       transition: 0.3s ease-in-out;
     }
+
     &.popupVisible {
       position: relative;
       z-index: 100;
     }
+
     &.popupVisible,
     &:hover {
       .actions {
@@ -101,6 +103,7 @@ $actionsWidth: 32px * 2;
         right: unset;
         left: -$actionsWidth/2;
         flex-direction: row-reverse;
+
         .reply {
           transform: scaleX(-1);
         }

src/components/Nav/Header.tsx

@@ -4,7 +4,7 @@ import { Modal } from './Modal'
 import { AuthModal } from './AuthModal'
 import { t } from '../../utils/intl'
 import { useModalStore } from '../../stores/ui'
-import { router, Routes, useRouter } from '../../stores/router'
+import { router, useRouter } from '../../stores/router'
 import styles from './Header.module.scss'
 import { getPagePath } from '@nanostores/router'
 import { clsx } from 'clsx'
@@ -13,7 +13,7 @@ import { getShareUrl, SharePopup } from '../Article/SharePopup'
 import { getDescription } from '../../utils/meta'
 import { Snackbar } from './Snackbar'
 
-const resources: { name: string; route: keyof Routes }[] = [
+const resources: { name: string; route: 'home' | 'feed' | 'topics' }[] = [
   { name: t('zine'), route: 'home' },
   { name: t('feed'), route: 'feed' },
   { name: t('topics'), route: 'topics' }
@@ -111,7 +111,7 @@ export const Header = (props: Props) => {
               <For each={resources}>
                 {(r) => (
                   <li classList={{ [styles.selected]: r.route === page().route }}>
-                    <a href={getPagePath(router, r.route, null)}>{r.name}</a>
+                    <a href={getPagePath(router, r.route)}>{r.name}</a>
                   </li>
                 )}
               </For>

src/components/Nav/Snackbar.module.scss

@@ -1,13 +1,14 @@
 .snackbar {
   min-height: 4px;
   background-color: #141414;
-  color: #ffffff;
+  color: #fff;
   transition: background-color 0.3s;
 
   &.error {
     background-color: #d00820;
   }
 }
+
 .content {
   transition: height 0.3s, color 0.3s;
   height: 60px;

src/components/Pages/about/TermsOfUsePage.tsx

@@ -1,7 +1,6 @@
 import { createSignal, Show } from 'solid-js'
 import { PageWrap } from '../../_shared/PageWrap'
 import { Icon } from '../../_shared/Icon'
-import { showModal } from '../../../stores/ui'
 
 // const title = t('Terms of use')
 

src/components/Pages/profile/ProfileSecurityPage.tsx

@@ -1,11 +1,10 @@
 import { PageWrap } from '../../_shared/PageWrap'
-import type { PageProps } from '../../types'
 import styles from './Settings.module.scss'
 import { Icon } from '../../_shared/Icon'
 import { clsx } from 'clsx'
 import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
 
-export const ProfileSecurityPage = (props: PageProps) => {
+export const ProfileSecurityPage = () => {
   return (
     <PageWrap>
       <div class="wide-container">

src/components/Pages/profile/ProfileSettingsPage.tsx

@@ -2,7 +2,7 @@ import { PageWrap } from '../../_shared/PageWrap'
 import { t } from '../../../utils/intl'
 import { Icon } from '../../_shared/Icon'
 import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
-import { For, createSignal, Show, onMount, createEffect } from 'solid-js'
+import { For, createSignal, Show, onMount } from 'solid-js'
 import { clsx } from 'clsx'
 import styles from './Settings.module.scss'
 import { useProfileForm } from '../../../context/profile'
@@ -13,6 +13,16 @@ import { useSession } from '../../../context/session'
 import Button from '../../_shared/Button'
 import { useSnackbar } from '../../../context/snackbar'
 
+const handleFileUpload = async (uploadFile: UploadFile) => {
+  const formData = new FormData()
+  formData.append('file', uploadFile.file, uploadFile.name)
+  const response = await fetch('/api/upload', {
+    method: 'POST',
+    body: formData
+  })
+  return response.json()
+}
+
 export const ProfileSettingsPage = () => {
   const [addLinkForm, setAddLinkForm] = createSignal(false)
   const [incorrectUrl, setIncorrectUrl] = createSignal(false)
@@ -54,16 +64,6 @@ export const ProfileSettingsPage = () => {
 
   const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' })
 
-  const handleFileUpload = async (uploadFile: UploadFile) => {
-    const formData = new FormData()
-    formData.append('file', uploadFile.file, uploadFile.name)
-    const response = await fetch('/api/upload', {
-      method: 'POST',
-      body: formData
-    })
-    return response.json()
-  }
-
   const handleAvatarClick = async () => {
     await selectFiles(async ([uploadFile]) => {
       try {

src/components/Pages/profile/ProfileSubscriptionsPage.tsx

@@ -1,12 +1,11 @@
 import { PageWrap } from '../../_shared/PageWrap'
-import type { PageProps } from '../../types'
 import styles from './Settings.module.scss'
 import stylesSettings from '../../../styles/FeedSettings.module.scss'
 import { clsx } from 'clsx'
 import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
 import { SearchField } from '../../_shared/SearchField'
 
-export const ProfileSubscriptionsPage = (props: PageProps) => {
+export const ProfileSubscriptionsPage = () => {
   return (
     <PageWrap>
       <div class="wide-container">

src/components/Pages/profile/Settings.module.scss

@@ -28,9 +28,6 @@ h5 {
   top: 0;
   width: 100%;
   cursor: pointer;
-}
-
-.avatar {
   background: #ccc;
   border: none;
   object-fit: cover;

src/components/Root.tsx

@@ -3,7 +3,7 @@
 
 import { MODALS, setLocale, showModal } from '../stores/ui'
 import { Component, createEffect, createMemo } from 'solid-js'
-import { Routes, useRouter } from '../stores/router'
+import { ROUTES, useRouter } from '../stores/router'
 import { Dynamic, isServer } from 'solid-js/web'
 
 import type { PageProps, RootSearchParams } from './types'
@@ -35,13 +35,13 @@ import { SessionProvider } from '../context/session'
 import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage'
 import { ProfileSecurityPage } from './Pages/profile/ProfileSecurityPage'
 import { ProfileSubscriptionsPage } from './Pages/profile/ProfileSubscriptionsPage'
-import CreateSettingsPage from './Pages/CreateSettingsPage'
+import { CreateSettingsPage } from './Pages/CreateSettingsPage'
 import { SnackbarProvider } from '../context/snackbar'
 
 // TODO: lazy load
 // const SomePage = lazy(() => import('./Pages/SomePage'))
 
-const pagesMap: Record<keyof Routes, Component<PageProps>> = {
+const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
   inbox: InboxPage,
   expo: LayoutShoutsPage,
   connect: ConnectPage,

src/components/Topic/Card.tsx

@@ -5,7 +5,6 @@ import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { follow, unfollow } from '../../stores/zine/common'
-import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'

src/components/Views/AllAuthors.tsx

@@ -11,7 +11,6 @@ import { translit } from '../../utils/ru2en'
 import styles from '../../styles/AllTopics.module.scss'
 import { SearchField } from '../_shared/SearchField'
 import { scrollHandler } from '../../utils/scroll'
-import { StatMetrics } from '../_shared/StatMetrics'
 
 type AllAuthorsPageSearchParams = {
   by: '' | 'name' | 'shouts' | 'followers'

src/components/Views/Author.module.scss

@@ -1,11 +1,13 @@
 .ratingContainer {
   @include font-size(1.5rem);
+
   display: inline-block;
   vertical-align: top;
 }
 
 .ratingControl {
   @include font-size(1.5rem);
+
   display: inline-flex;
   margin-left: 1em;
   vertical-align: middle;
@@ -35,10 +37,11 @@
 }
 
 .subscribersCounter {
+  @include font-size(1rem);
+
   background: #fff;
   border: 2px solid #000;
   border-radius: 100%;
-  @include font-size(1rem);
   font-weight: bold;
   height: 32px;
   line-height: 30px;

src/components/Views/Author.tsx

@@ -6,8 +6,6 @@ import { AuthorFull } from '../Author/Full'
 import { t } from '../../utils/intl'
 import { useAuthorsStore } from '../../stores/zine/authors'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
-
-import { useTopicsStore } from '../../stores/zine/topics'
 import { useRouter } from '../../stores/router'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
@@ -18,7 +16,6 @@ import { clsx } from 'clsx'
 import Userpic from '../Author/Userpic'
 import { Popup } from '../_shared/Popup'
 import { AuthorCard } from '../Author/Card'
-import { loadReactionsBy, REACTIONS_AMOUNT_PER_PAGE } from '../../stores/zine/reactions'
 import { apiClient } from '../../utils/apiClient'
 import { Comment } from '../Article/Comment'
 
@@ -43,7 +40,6 @@ export const AuthorView = (props: AuthorProps) => {
     shouts: props.shouts
   })
   const { authorEntities } = useAuthorsStore({ authors: [props.author] })
-  const { topicsByAuthor } = useTopicsStore()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
   const author = createMemo(() => authorEntities()[props.authorSlug])

src/components/Views/Feed.module.scss

@@ -1,5 +1,6 @@
 .feedNavigation {
   @include font-size(1.5rem);
+
   font-weight: 500;
 
   h4 {
@@ -40,6 +41,7 @@
 .feedAside {
   h4 {
     @include font-size(2.2rem);
+
     font-weight: bold;
     margin-bottom: 2.4rem;
     text-transform: lowercase;
@@ -69,7 +71,7 @@
   a {
     position: static;
 
-    &:before {
+    &::before {
       content: '';
       height: 100%;
       left: 0;
@@ -88,6 +90,7 @@
 
   ul {
     @include font-size(1.4rem);
+
     font-weight: bold;
     margin: 1rem 0 0;
     line-height: 1.4;
@@ -106,6 +109,7 @@
 
 .comment {
   @include font-size(1.5rem);
+
   line-height: 1.4;
   margin-bottom: 2.4rem;
 
@@ -126,6 +130,7 @@
 
 .commentArticleTitle {
   @include font-size(1.2rem);
+
   line-clamp: 1;
   -webkit-line-clamp: 1;
 }

src/components/Views/Feed.tsx

@@ -2,7 +2,6 @@ import { createEffect, createMemo, createSignal, For, onMount, Show } from 'soli
 import '../../styles/Feed.scss'
 import stylesBeside from '../../components/Feed/Beside.module.scss'
 import { Icon } from '../_shared/Icon'
-import { TopicCard } from '../Topic/Card'
 import { ArticleCard } from '../Feed/Card'
 import { AuthorCard } from '../Author/Card'
 import { t } from '../../utils/intl'
@@ -14,12 +13,9 @@ import { useAuthorsStore } from '../../stores/zine/authors'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
 import { useSession } from '../../context/session'
-import stylesArticle from '../../styles/Article.module.scss'
 import stylesTopic from '../Feed/CardTopic.module.scss'
 import styles from './Feed.module.scss'
 import { clsx } from 'clsx'
-import Userpic from '../Author/Userpic'
-import type { Author } from '../../graphql/types.gen'
 
 // const AUTHORSHIP_REACTIONS = [
 //   ReactionKind.Accept,

src/components/Views/Inbox.tsx

@@ -22,12 +22,12 @@ type InboxSearchParams = {
   initChat: string
   chat: string
 }
-const userSearch = (array: Author[], keyword: string) => {
-  const searchTerm = keyword.toLowerCase()
-  return array.filter((value) => {
-    return value.name.toLowerCase().match(new RegExp(searchTerm, 'g'))
-  })
-}
+// const userSearch = (array: Author[], keyword: string) => {
+//   const searchTerm = keyword.toLowerCase()
+//   return array.filter((value) => {
+//     return value.name.toLowerCase().match(new RegExp(searchTerm, 'g'))
+//   })
+// }
 
 export const InboxView = () => {
   const {

src/components/_shared/CommentEditor/menu/index.ts

@@ -1,4 +1,4 @@
-import { blockTypeItem, icons, MenuItem, wrapItem } from 'prosemirror-menu'
+import { icons, MenuItem, wrapItem } from 'prosemirror-menu'
 import { toggleMark } from 'prosemirror-commands'
 
 const markActive = (state, type) => {

src/components/_shared/CommentEditor/schema.ts

@@ -12,7 +12,7 @@ export const schema = new Schema({
     paragraph: {
       content: 'inline*',
       group: 'block',
-      toDOM: function toDOM(node) {
+      toDOM: function toDOM() {
         return ['p', { class: 'paragraph' }, 0]
       }
     },

src/components/_shared/CommentEditor/styles/CommentEditor.module.scss

@@ -18,6 +18,7 @@
       display: flex;
       flex-direction: row;
     }
+
     .buttons {
       gap: 10px;
     }

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

@@ -27,6 +27,7 @@
 
   &.bordered {
     @include font-size(1.6rem);
+
     border: 2px solid #000;
     padding: 2.4rem;
 
@@ -41,7 +42,8 @@
 
   &.tiny {
     @include font-size(1.4rem);
-    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.1);
+
+    box-shadow: 0 4px 60px rgb(0 0 0 / 10%);
     padding: 1rem;
 
     ul li {

src/components/_shared/Popup/Popup.tsx

@@ -2,7 +2,6 @@ import { createEffect, createSignal, JSX, Show } from 'solid-js'
 import styles from './Popup.module.scss'
 import { clsx } from 'clsx'
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
-import { set } from 'husky'
 
 type HorizontalAnchor = 'center' | 'right'
 

src/context/inbox.tsx

@@ -1,5 +1,5 @@
-import { Accessor, createMemo, JSX } from 'solid-js'
-import { createContext, createSignal, useContext } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
+import { createContext, createSignal, useContext, createMemo } from 'solid-js'
 import { createChatClient } from '../graphql/privateGraphQLClient'
 import type { Chat, Message, MutationCreateMessageArgs } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'

src/stores/router.ts

@@ -3,71 +3,40 @@ import { createRouter, createSearchParams } from '@nanostores/router'
 import { isServer } from 'solid-js/web'
 import { useStore } from '@nanostores/solid'
 
-// TODO: more
-export interface Routes {
-  home: void
-  connect: void
-  create: void
-  createSettings: void
-  topics: void
-  topic: 'slug'
-  authors: void
-  author: 'slug'
-  feed: void
-  article: 'slug'
-  search: 'q'
-  dogma: void
-  discussionRules: void
-  guide: void
-  help: void
-  manifest: void
-  partners: void
-  principles: void
-  projects: void
-  termsOfUse: void
-  thanks: void
-  expo: 'layout'
-  inbox: void // TODO: добавить ID текущего юзера
-  profileSettings: void
-  profileSecurity: void
-  profileSubscriptions: void
-}
+export const ROUTES = {
+  home: '/',
+  inbox: '/inbox',
+  connect: '/connect',
+  create: '/create',
+  createSettings: '/create/settings',
+  topics: '/topics',
+  topic: '/topic/:slug',
+  authors: '/authors',
+  author: '/author/:slug',
+  feed: '/feed',
+  search: '/search/:q?',
+  article: '/:slug',
+  dogma: '/about/dogma',
+  discussionRules: '/about/discussion-rules',
+  guide: '/about/guide',
+  help: '/about/help',
+  manifest: '/about/manifest',
+  partners: '/about/partners',
+  principles: '/about/principles',
+  projects: '/about/projects',
+  termsOfUse: '/about/terms-of-use',
+  thanks: '/about/thanks',
+  expo: '/expo/:layout',
+  profileSettings: '/profile/settings',
+  profileSecurity: '/profile/security',
+  profileSubscriptions: '/profile/subscriptions'
+} as const
 
 const searchParamsStore = createSearchParams()
-const routerStore = createRouter<Routes>(
-  {
-    home: '/',
-    inbox: '/inbox',
-    connect: '/connect',
-    create: '/create',
-    createSettings: '/create/settings',
-    topics: '/topics',
-    topic: '/topic/:slug',
-    authors: '/authors',
-    author: '/author/:slug',
-    feed: '/feed',
-    search: '/search/:q?',
-    article: '/:slug',
-    dogma: '/about/dogma',
-    discussionRules: '/about/discussion-rules',
-    guide: '/about/guide',
-    help: '/about/help',
-    manifest: '/about/manifest',
-    partners: '/about/partners',
-    principles: '/about/principles',
-    projects: '/about/projects',
-    termsOfUse: '/about/terms-of-use',
-    thanks: '/about/thanks',
-    expo: '/expo/:layout',
-    profileSettings: '/profile/settings',
-    profileSecurity: '/profile/security',
-    profileSubscriptions: '/profile/subscriptions'
-  },
-  {
-    search: false,
-    links: false
-  }
-)
+const routerStore = createRouter(ROUTES, {
+  search: false,
+  links: false
+})
 
 export const router = routerStore
 

src/stores/zine/reactions.ts

@@ -1,6 +1,6 @@
 import type { Reaction, ReactionInput } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 // TODO: import { roomConnect } from '../../utils/p2p'
 
 export const REACTIONS_AMOUNT_PER_PAGE = 100

src/styles/Feed.scss

@@ -56,9 +56,10 @@
 }
 
 .feed-filter {
+  @include font-size(1.7rem);
+
   display: flex;
   flex-wrap: wrap;
-  @include font-size(1.7rem);
   font-weight: 500;
   list-style: none;
   margin: 0 0 1.6rem;

src/styles/Inbox.module.scss

@@ -38,7 +38,7 @@ main {
   padding: 10px;
   height: calc(100% - 10px);
 
-  $fade-height: 10px;
+  $fadeHeight: 10px;
 
   .sidebarHeader {
     display: flex;
@@ -50,7 +50,7 @@ main {
     overflow: hidden;
     flex: 1;
     position: relative;
-    padding: $fade-height 0;
+    padding: $fadeHeight 0;
 
     &::before,
     &::after {
@@ -59,17 +59,17 @@ main {
       width: 100%;
       right: 0;
       z-index: 1;
-      height: $fade-height;
+      height: $fadeHeight;
     }
 
     &::before {
       top: 0;
-      background: linear-gradient(white, transparent $fade-height);
+      background: linear-gradient(white, transparent $fadeHeight);
     }
 
     &::after {
       bottom: 0;
-      background: linear-gradient(transparent, white $fade-height);
+      background: linear-gradient(transparent, white $fadeHeight);
     }
 
     .dialogs {
@@ -207,6 +207,7 @@ main {
   flex: 1;
   overflow: auto;
   position: relative;
+
   .messagesContainer {
     left: 0;
     height: 100%;
@@ -216,6 +217,7 @@ main {
     width: 100%;
     scroll-behavior: smooth;
   }
+
   .conversation__date {
     position: relative;
     text-align: center;