linted-update

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
   "files": {
     "include": ["*.tsx", "*.ts", "*.js", "*.json"],
     "ignore": ["./dist", "./node_modules", ".husky", "docs", "gen", "*.gen.ts", "*.d.ts"]
@@ -42,7 +42,9 @@
         "noExcessiveCognitiveComplexity": "off"
       },
       "correctness": {
-        "useHookAtTopLevel": "off"
+        "useHookAtTopLevel": "off",
+        "useImportExtensions": "off",
+        "noUndeclaredDependencies": "off"
       },
       "a11y": {
         "useHeadingContent": "off",
@@ -54,7 +56,8 @@
         "useAltText": "off",
         "useButtonType": "off",
         "noRedundantAlt": "off",
-        "noSvgWithoutTitle": "off"
+        "noSvgWithoutTitle": "off",
+        "noLabelWithoutControl": "off"
       },
       "nursery": {
         "useImportRestrictions": "off"
@@ -63,15 +66,18 @@
         "noBarrelFile": "off"
       },
       "style": {
+        "noNonNullAssertion": "off",
         "noNamespaceImport": "warn",
         "useBlockStatements": "off",
         "noImplicitBoolean": "off",
         "useNamingConvention": "off",
         "useImportType": "off",
         "noDefaultExport": "off",
-        "useFilenamingConvention": "off"
+        "useFilenamingConvention": "off",
+        "useExplicitLengthCheck": "off"
       },
       "suspicious": {
+        "noConsole": "off",
         "noConsoleLog": "off",
         "noAssignInExpressions": "off"
       }

package.json

@@ -22,13 +22,13 @@
   },
   "devDependencies": {
     "@authorizerdev/authorizer-js": "^2.0.3",
-    "@biomejs/biome": "^1.8.3",
+    "@biomejs/biome": "^1.9.1",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/typescript": "^4.0.9",
     "@graphql-codegen/typescript-operations": "^4.2.3",
     "@graphql-codegen/typescript-urql": "^4.0.0",
     "@hocuspocus/provider": "^2.13.5",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.47.1",
     "@popperjs/core": "^2.11.8",
     "@solid-primitives/media": "^2.2.9",
     "@solid-primitives/memo": "^1.3.9",
@@ -38,22 +38,22 @@
     "@solid-primitives/storage": "^3.8.0",
     "@solid-primitives/upload": "^0.0.117",
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.14.3",
+    "@solidjs/router": "^0.14.5",
     "@solidjs/start": "^1.0.6",
-    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.0",
-    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-actions": "^8.3.0",
-    "@storybook/addon-controls": "^8.2.9",
+    "@storybook/addon-controls": "^8.3.0",
-    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-links": "^8.3.0",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/addon-themes": "^8.3.0",
-    "@storybook/addon-viewport": "^8.2.9",
+    "@storybook/addon-viewport": "^8.3.0",
-    "@storybook/blocks": "^8.2.9",
+    "@storybook/blocks": "^8.3.0",
     "@storybook/builder-vite": "8.2.9",
     "@storybook/docs-tools": "8.2.9",
-    "@storybook/html": "^8.2.9",
+    "@storybook/html": "^8.3.0",
-    "@storybook/react": "^8.2.9",
+    "@storybook/react": "^8.3.0",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/testing-library": "^0.2.2",
     "@tiptap/core": "^2.6.6",
@@ -87,7 +87,7 @@
     "@tiptap/extension-youtube": "^2.6.6",
     "@types/cookie": "^0.6.0",
     "@types/cookie-signature": "^1.1.2",
-    "@types/node": "^22.5.2",
+    "@types/node": "^22.5.5",
     "@types/throttle-debounce": "^5.0.2",
     "@urql/core": "^5.0.6",
     "axe-playwright": "^2.0.2",
@@ -96,10 +96,10 @@
     "cookie": "^0.6.0",
     "cookie-signature": "^1.2.1",
     "cropperjs": "^1.6.2",
-    "extended-eventsource": "^1.4.9",
+    "extended-eventsource": "^1.6.4",
     "fast-deep-equal": "^3.1.3",
     "graphql": "^16.9.0",
-    "i18next": "^23.14.0",
+    "i18next": "^23.15.1",
     "i18next-http-backend": "^2.6.1",
     "i18next-icu": "^2.3.0",
     "intl-messageformat": "^10.5.14",
@@ -107,31 +107,31 @@
     "patch-package": "^8.0.0",
     "prosemirror-history": "^1.4.1",
     "prosemirror-trailing-node": "^2.0.9",
-    "prosemirror-view": "^1.34.1",
+    "prosemirror-view": "^1.34.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "1.76.0",
     "solid-js": "^1.8.22",
     "solid-popper": "^0.3.0",
     "solid-tiptap": "0.7.0",
     "solid-transition-group": "^0.2.3",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.0",
     "storybook-solidjs": "^1.0.0-beta.2",
     "storybook-solidjs-vite": "^1.0.0-beta.2",
     "stylelint": "^16.9.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.5.1",
+    "stylelint-scss": "^6.6.0",
-    "swiper": "^11.1.12",
+    "swiper": "^11.1.14",
     "throttle-debounce": "^5.0.2",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "typograf": "^7.4.1",
     "uniqolor": "^1.1.1",
-    "vinxi": "^0.4.2",
+    "vinxi": "^0.4.3",
     "vite-plugin-mkcert": "^1.17.6",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-sass-dts": "^1.3.25",
+    "vite-plugin-sass-dts": "^1.3.29",
     "y-prosemirror": "1.2.12",
     "yjs": "13.6.18"
   },

src/components/Article/AudioPlayer/PlayerHeader.tsx

@@ -74,7 +74,7 @@ export const PlayerHeader = (props: Props) => {
               onChange={({ target }) => props.onVolumeChange(Number(target.value))}
             />
           </Show>
-          <button onClick={toggleVolumeBar} class={styles.volumeButton} role="button" aria-label="Volume">
+          <button onClick={toggleVolumeBar} class={styles.volumeButton} aria-label="Volume">
             <Icon name="volume" />
           </button>
         </div>

src/components/Article/CommentRatingControl.tsx

@@ -84,7 +84,6 @@ export const CommentRatingControl = (props: Props) => {
   return (
     <div class={styles.commentRating}>
       <button
-        role="button"
         disabled={!(canVote() && uid())}
         onClick={() => handleRatingChange(true)}
         class={clsx(styles.commentRatingControl, styles.commentRatingControlUp, {
@@ -110,7 +109,6 @@ export const CommentRatingControl = (props: Props) => {
         />
       </Popup>
       <button
-        role="button"
         disabled={!(canVote() && uid())}
         onClick={() => handleRatingChange(false)}
         class={clsx(styles.commentRatingControl, styles.commentRatingControlDown, {

src/components/Article/FullArticle.tsx

@@ -112,7 +112,7 @@ export const FullArticle = (props: Props) => {
     const mainTopicSlug = (props.article.topics?.length || 0) > 0 ? props.article.main_topic : null
     const mt = props.article.topics?.find((tpc: Maybe<Topic>) => tpc?.slug === mainTopicSlug)
     if (mt) {
-      mt.title = lang() === 'en' ? capitalize(mt.slug.replace(/-/, ' ')) : mt.title
+      mt.title = lang() === 'en' ? capitalize(mt.slug.replaceAll('-', ' ')) : mt.title
       return mt
     }
     return props.article.topics?.[0]
@@ -326,7 +326,7 @@ export const FullArticle = (props: Props) => {
 
   const shareUrl = createMemo(() => getShareUrl({ pathname: `/${props.article.slug || ''}` }))
   const getAuthorName = (a: Author) =>
-    lang() === 'en' && isCyrillic(a.name || '') ? capitalize(a.slug.replace(/-/, ' ')) : a.name
+    lang() === 'en' && isCyrillic(a.name || '') ? capitalize(a.slug.replaceAll('-', ' ')) : a.name
   return (
     <>
       <For each={imageUrls()}>{(imageUrl) => <Link rel="preload" as="image" href={imageUrl} />}</For>

src/components/Author/Userpic/Userpic.tsx

@@ -22,7 +22,7 @@ export const Userpic = (props: Props) => {
   const letters = () => {
     if (!props.name) return
     const names = props.name ? props.name.split(' ') : []
-    return `${names[0][0 ?? names[0][0]]}.${names.length > 1 ? `${names[1][0]}.` : ''}`
+    return `${names[0][0] ? names[0][0] : ''}.${names.length > 1 ? `${names[1][0]}.` : ''}`
   }
 
   const avatarSize = createMemo(() => {

src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx

@@ -22,7 +22,7 @@ export const BlockquoteBubbleMenu = (props: Props) => {
             type="button"
             class={styles.bubbleMenuButton}
             onClick={() => {
-              props.editor.chain().focus().setBlockQuoteFloat('left').run()
+              props.editor?.chain().focus().setBlockQuoteFloat('left').run()
             }}
           >
             <Icon name="editor-image-align-left" />
@@ -35,7 +35,7 @@ export const BlockquoteBubbleMenu = (props: Props) => {
             ref={triggerRef}
             type="button"
             class={styles.bubbleMenuButton}
-            onClick={() => props.editor.chain().focus().setBlockQuoteFloat(null).run()}
+            onClick={() => props.editor?.chain().focus().setBlockQuoteFloat(null).run()}
           >
             <Icon name="editor-image-align-center" />
           </button>
@@ -47,7 +47,7 @@ export const BlockquoteBubbleMenu = (props: Props) => {
             ref={triggerRef}
             type="button"
             class={styles.bubbleMenuButton}
-            onClick={() => props.editor.chain().focus().setBlockQuoteFloat('right').run()}
+            onClick={() => props.editor?.chain().focus().setBlockQuoteFloat('right').run()}
           >
             <Icon name="editor-image-align-right" />
           </button>

src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx

@@ -33,7 +33,7 @@ export const FigureBubbleMenu = (props: Props) => {
             ref={triggerRef}
             type="button"
             class={styles.bubbleMenuButton}
-            onClick={() => props.editor.chain().focus().setFigureFloat('left').run()}
+            onClick={() => props.editor?.chain().focus().setFigureFloat('left').run()}
           >
             <Icon name="editor-image-align-left" />
           </button>
@@ -45,7 +45,7 @@ export const FigureBubbleMenu = (props: Props) => {
             ref={triggerRef}
             type="button"
             class={styles.bubbleMenuButton}
-            onClick={() => props.editor.chain().focus().setFigureFloat(null).run()}
+            onClick={() => props.editor?.chain().focus().setFigureFloat(null).run()}
           >
             <Icon name="editor-image-align-center" />
           </button>
@@ -57,7 +57,7 @@ export const FigureBubbleMenu = (props: Props) => {
             ref={triggerRef}
             type="button"
             class={styles.bubbleMenuButton}
-            onClick={() => props.editor.chain().focus().setFigureFloat('right').run()}
+            onClick={() => props.editor?.chain().focus().setFigureFloat('right').run()}
           >
             <Icon name="editor-image-align-right" />
           </button>
@@ -67,7 +67,7 @@ export const FigureBubbleMenu = (props: Props) => {
       <button
         type="button"
         class={styles.bubbleMenuButton}
-        onClick={() => props.editor.chain().focus().setFigcaptionFocus(true).run()}
+        onClick={() => props.editor?.chain().focus().setFigcaptionFocus(true).run()}
       >
         <span style={{ color: 'white' }}>{t('Add signature')}</span>
       </button>

src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx

@@ -19,7 +19,7 @@ export const IncutBubbleMenu = (props: Props) => {
   const { t } = useLocalize()
   const [substratBubbleOpen, setSubstratBubbleOpen] = createSignal(false)
   const handleChangeBg = (bg: string | null) => {
-    props.editor.chain().focus().setArticleBg(bg).run()
+    props.editor?.chain().focus().setArticleBg(bg).run()
     setSubstratBubbleOpen(false)
   }
   return (
@@ -27,14 +27,14 @@ export const IncutBubbleMenu = (props: Props) => {
       <button
         type="button"
         class={styles.bubbleMenuButton}
-        onClick={() => props.editor.chain().focus().setArticleFloat('half-left').run()}
+        onClick={() => props.editor?.chain().focus().setArticleFloat('half-left').run()}
       >
         <Icon name="editor-image-half-align-left" />
       </button>
       <button
         type="button"
         class={styles.bubbleMenuButton}
-        onClick={() => props.editor.chain().focus().setArticleFloat(null).run()}
+        onClick={() => props.editor?.chain().focus().setArticleFloat(null).run()}
       >
         <Icon name="editor-image-align-center" />
       </button>
@@ -42,7 +42,7 @@ export const IncutBubbleMenu = (props: Props) => {
       <button
         type="button"
         class={styles.bubbleMenuButton}
-        onClick={() => props.editor.chain().focus().setArticleFloat('half-right').run()}
+        onClick={() => props.editor?.chain().focus().setArticleFloat('half-right').run()}
       >
         <Icon name="editor-image-half-align-right" />
       </button>

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -77,16 +77,14 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   }
 
   createEffect(() => {
-    switch (selectedMenuItem()) {
+    if (selectedMenuItem() === 'image') {
-      case 'image': {
+      showModal('uploadImage')
-        showModal('uploadImage')
+      return
-        return
+    }
-      }
+    if (selectedMenuItem() === 'horizontal-rule') {
-      case 'horizontal-rule': {
+      props.editor?.chain().focus().setHorizontalRule().run()
-        props.editor?.chain().focus().setHorizontalRule().run()
+      setSelectedMenuItem()
-        setSelectedMenuItem()
+      return
-        return
-      }
     }
   })
 

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -91,9 +91,9 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
 
   const handleAddFootnote = (footnote: string) => {
     if (footNote()) {
-      props.editor.chain().focus().updateFootnote({ value: footnote }).run()
+      props.editor?.chain().focus().updateFootnote({ value: footnote }).run()
     } else {
-      props.editor.chain().focus().setFootnote({ value: footnote }).run()
+      props.editor?.chain().focus().setFootnote({ value: footnote }).run()
     }
     setFootNote()
     setLinkEditorOpen(false)
@@ -108,16 +108,16 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
 
   const handleSetPunchline = () => {
     if (isPunchLine()) {
-      props.editor.chain().focus().toggleBlockquote('punchline').run()
+      props.editor?.chain().focus().toggleBlockquote('punchline').run()
     }
-    props.editor.chain().focus().toggleBlockquote('quote').run()
+    props.editor?.chain().focus().toggleBlockquote('quote').run()
     toggleTextSizePopup()
   }
   const handleSetQuote = () => {
     if (isQuote()) {
-      props.editor.chain().focus().toggleBlockquote('quote').run()
+      props.editor?.chain().focus().toggleBlockquote('quote').run()
     }
-    props.editor.chain().focus().toggleBlockquote('punchline').run()
+    props.editor?.chain().focus().toggleBlockquote('punchline').run()
     toggleTextSizePopup()
   }
 
@@ -130,13 +130,13 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
   })
 
   const handleOpenLinkForm = () => {
-    props.editor.chain().focus().addTextWrap({ class: 'highlight-fake-selection' }).run()
+    props.editor?.chain().focus().addTextWrap({ class: 'highlight-fake-selection' }).run()
     setLinkEditorOpen(true)
   }
 
   const handleCloseLinkForm = () => {
     setLinkEditorOpen(false)
-    props.editor.chain().focus().removeTextWrap({ class: 'highlight-fake-selection' }).run()
+    props.editor?.chain().focus().removeTextWrap({ class: 'highlight-fake-selection' }).run()
   }
 
   return (
@@ -188,7 +188,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                                 [styles.bubbleMenuButtonActive]: isH1()
                               })}
                               onClick={() => {
-                                props.editor.chain().focus().toggleHeading({ level: 2 }).run()
+                                props.editor?.chain().focus().toggleHeading({ level: 2 }).run()
                                 toggleTextSizePopup()
                               }}
                             >
@@ -205,7 +205,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                                 [styles.bubbleMenuButtonActive]: isH2()
                               })}
                               onClick={() => {
-                                props.editor.chain().focus().toggleHeading({ level: 3 }).run()
+                                props.editor?.chain().focus().toggleHeading({ level: 3 }).run()
                                 toggleTextSizePopup()
                               }}
                             >
@@ -222,7 +222,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                                 [styles.bubbleMenuButtonActive]: isH3()
                               })}
                               onClick={() => {
-                                props.editor.chain().focus().toggleHeading({ level: 4 }).run()
+                                props.editor?.chain().focus().toggleHeading({ level: 4 }).run()
                                 toggleTextSizePopup()
                               }}
                             >
@@ -273,7 +273,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                                 [styles.bubbleMenuButtonActive]: isIncut()
                               })}
                               onClick={() => {
-                                props.editor.chain().focus().toggleArticle().run()
+                                props.editor?.chain().focus().toggleArticle().run()
                                 toggleTextSizePopup()
                               }}
                             >
@@ -296,7 +296,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   class={clsx(styles.bubbleMenuButton, {
                     [styles.bubbleMenuButtonActive]: isBold()
                   })}
-                  onClick={() => props.editor.chain().focus().toggleBold().run()}
+                  onClick={() => props.editor?.chain().focus().toggleBold().run()}
                 >
                   <Icon name="editor-bold" />
                 </button>
@@ -310,7 +310,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   class={clsx(styles.bubbleMenuButton, {
                     [styles.bubbleMenuButtonActive]: isItalic()
                   })}
-                  onClick={() => props.editor.chain().focus().toggleItalic().run()}
+                  onClick={() => props.editor?.chain().focus().toggleItalic().run()}
                 >
                   <Icon name="editor-italic" />
                 </button>
@@ -326,7 +326,9 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                     class={clsx(styles.bubbleMenuButton, {
                       [styles.bubbleMenuButtonActive]: isHighlight()
                     })}
-                    onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#f6e3a1' }).run()}
+                    onClick={() =>
+                      props.editor?.chain().focus().toggleHighlight({ color: '#f6e3a1' }).run()
+                    }
                   >
                     <div class={styles.toggleHighlight} />
                   </button>
@@ -389,7 +391,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                                 [styles.bubbleMenuButtonActive]: isBulletList()
                               })}
                               onClick={() => {
-                                props.editor.chain().focus().toggleBulletList().run()
+                                props.editor?.chain().focus().toggleBulletList().run()
                                 toggleListPopup()
                               }}
                             >
@@ -406,7 +408,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                                 [styles.bubbleMenuButtonActive]: isOrderedList()
                               })}
                               onClick={() => {
-                                props.editor.chain().focus().toggleOrderedList().run()
+                                props.editor?.chain().focus().toggleOrderedList().run()
                                 toggleListPopup()
                               }}
                             >

src/components/Editor/extensions/Figure.ts

@@ -38,7 +38,7 @@ export const Figure = Node.create({
           }
           const img = node.querySelector('img')
           const iframe = node.querySelector('iframe')
-          let dataType = null
+          let dataType: string | undefined
           if (img) {
             dataType = 'image'
           } else if (iframe) {

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -7,6 +7,7 @@ import { Popover } from '~/components/_shared/Popover'
 import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'
 import type { Author, Maybe, Shout, Topic } from '~/graphql/schema/core.gen'
+import { sentenceSeparator } from '~/intl/chars'
 import { capitalize } from '~/utils/capitalize'
 import { descFromBody } from '~/utils/meta'
 import { CoverImage } from '../../Article/CoverImage'
@@ -69,7 +70,7 @@ const getTitleAndSubtitle = (
     let titleParts = article.title?.split('. ') || []
 
     if (titleParts?.length === 1) {
-      titleParts = article.title?.split(/{!|\?|:|;}\s/) || []
+      titleParts = article.title?.split(sentenceSeparator) || []
     }
 
     if (titleParts && titleParts.length > 1) {
@@ -88,7 +89,7 @@ const getMainTopicTitle = (article: Shout, lng: string) => {
   const mainTopicSlug = article.main_topic || ''
   const mainTopic = (article.topics || []).find((tpc: Maybe<Topic>) => tpc?.slug === mainTopicSlug)
   const mainTopicTitle =
-    mainTopicSlug && lng === 'en' ? mainTopicSlug.replace(/-/, ' ') : mainTopic?.title || ''
+    mainTopicSlug && lng === 'en' ? mainTopicSlug.replaceAll('-', ' ') : mainTopic?.title || ''
 
   return [mainTopicTitle, mainTopicSlug]
 }

src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx

@@ -33,7 +33,6 @@ export const FeedArticlePopup = (props: Props) => {
           <li>
             <button
               class={styles.action}
-              role="button"
               onClick={() => {
                 props.onShareClick()
                 setHidePopup(true)
@@ -47,7 +46,6 @@ export const FeedArticlePopup = (props: Props) => {
             <li>
               <button
                 class={styles.action}
-                role="button"
                 onClick={() => {
                   alert('Help to edit')
                   setHidePopup(true)
@@ -61,7 +59,6 @@ export const FeedArticlePopup = (props: Props) => {
           <li>
             <button
               class={styles.action}
-              role="button"
               onClick={() => {
                 props.onInviteClick()
                 setHidePopup(false)
@@ -73,7 +70,7 @@ export const FeedArticlePopup = (props: Props) => {
           </li>
           <Show when={!props.canEdit}>
             <li>
-              <button class={clsx(styles.action, styles.soon)} role="button">
+              <button class={clsx(styles.action, styles.soon)}>
                 <Icon name="bell-white" class={styles.icon} />
                 <div class={styles.title}>{t('Subscribe to comments')}</div>
                 <SoonChip />
@@ -81,7 +78,7 @@ export const FeedArticlePopup = (props: Props) => {
             </li>
           </Show>
           <li>
-            <button class={clsx(styles.action, styles.soon)} role="button">
+            <button class={clsx(styles.action, styles.soon)}>
               <Icon name="bookmark" class={styles.icon} />
               <div class={styles.title}>{t('Add to bookmarks')}</div>
               <SoonChip />
@@ -91,7 +88,7 @@ export const FeedArticlePopup = (props: Props) => {
           {/*  <li>*/}
           {/*    <button*/}
           {/*      class={styles.action}*/}
-          {/*      role="button"*/}
+          {/*      */}
           {/*      onClick={() => {*/}
           {/*        alert('Complain')*/}
           {/*      }}*/}
@@ -103,7 +100,7 @@ export const FeedArticlePopup = (props: Props) => {
           {/*<li>*/}
           {/*  <button*/}
           {/*    class={styles.action}*/}
-          {/*    role="button"*/}
+          {/*    */}
           {/*    onClick={() => {*/}
           {/*      alert('Get notifications')*/}
           {/*    }}*/}

src/components/SearchModal/SearchModal.module.scss

@@ -1,6 +1,4 @@
 @mixin search-filter-control {
-  @include font-size(1.4rem);
-
   height: 4rem;
   padding: 0 2rem;
   background: rgb(64 64 64 / 50%);
@@ -9,6 +7,8 @@
   font-weight: 500;
   white-space: nowrap;
 
+  @include font-size(1.4rem);
+
   &:hover {
     background: #404040;
   }
@@ -23,8 +23,6 @@
 }
 
 .searchInput {
-  @include font-size(4.8rem);
-
   width: 100%;
   padding: 0 0 0.5rem;
   background: none;
@@ -34,6 +32,8 @@
   font-weight: bold;
   outline: none;
 
+  @include font-size(4.8rem);
+
   &::placeholder {
     color: rgb(255 255 255 / 32%);
   }
@@ -60,10 +60,10 @@
 }
 
 .searchDescription {
-  @include font-size(1.6rem);
-
   margin-bottom: 44px;
   color: rgb(255 255 255 / 64%);
+
+  @include font-size(1.6rem);
 }
 
 .topicsList {

src/components/Topic/Full.tsx

@@ -35,7 +35,7 @@ export const FullTopic = (props: Props) => {
         /* FIXME: use title translation*/
         setTitle((_) => tpc?.title || '')
         return `#${capitalize(
-          lang() === 'en' ? tpc.slug.replace(/-/, ' ') : tpc.title || tpc.slug.replace(/-/, ' '),
+          lang() === 'en' ? tpc.slug.replaceAll('-', ' ') : tpc.title || tpc.slug.replaceAll('-', ' '),
           true
         )}`
       },

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -72,7 +72,7 @@
 
       line-height: 1.4;
       margin: 0.8rem 0;
-      -webkit-line-clamp: 2;
+      line-clamp: 2;
     }
   }
 

src/components/TopicsNav/TopicsNav.tsx

@@ -5,6 +5,7 @@ import { Icon } from '~/components/_shared/Icon'
 import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
 import type { Topic } from '~/graphql/schema/core.gen'
+import { ruChars } from '~/intl/chars'
 import { getRandomItemsFromArray } from '~/utils/random'
 import styles from './TopicsNav.module.scss'
 
@@ -12,7 +13,7 @@ export const RandomTopics = () => {
   const { sortedTopics } = useTopics()
   const { lang, t } = useLocalize()
   const tag = (topic: Topic) =>
-    /[ЁА-яё]/.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
+    ruChars.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
   const [randomTopics, setRandomTopics] = createSignal<Topic[]>([])
   createEffect(
     on(sortedTopics, (ttt: Topic[]) => {

src/components/Views/AllTopics/AllTopics.tsx

@@ -6,6 +6,7 @@ import { SearchField } from '~/components/_shared/SearchField'
 import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
 import type { Topic } from '~/graphql/schema/core.gen'
+import { enChars, ruChars } from '~/intl/chars'
 import { dummyFilter } from '~/intl/dummyFilter'
 import { scrollHandler } from '~/utils/scroll'
 import { TopicBadge } from '../../Topic/TopicBadge'
@@ -35,8 +36,8 @@ export const AllTopics = (props: Props) => {
     return topics().reduce(
       (acc, topic) => {
         let letter = lang() === 'en' ? topic.slug[0].toUpperCase() : (topic?.title?.[0] || '').toUpperCase()
-        if (/[^ËА-яё]/.test(letter) && lang() === 'ru') letter = '#'
+        if (enChars.test(letter) && lang() === 'ru') letter = '#'
-        if (/[^A-z]/.test(letter) && lang() === 'en') letter = '#'
+        if (ruChars.test(letter) && lang() === 'en') letter = '#'
         if (!acc[letter]) acc[letter] = []
         acc[letter].push(topic)
         return acc

src/components/Views/Profile/ProfileSecurity.tsx

@@ -250,7 +250,7 @@ export const ProfileSecurityView = (_props: any) => {
                           class={clsx(
                             styles.socialButton,
                             styles.socialButtonApple,
-                            'button' + ' button--light'
+                            'button button--light'
                           )}
                           type="button"
                         >

src/components/Views/Profile/ProfileSettings.tsx

@@ -339,15 +339,15 @@ export const ProfileSettings = () => {
                       maxLength={120}
                     />
 
-                    <h4>{t('About the author')}</h4>
+                    <h4>{t('About')}</h4>
                     <SimplifiedEditor
                       resetToInitial={clearAbout()}
                       noLimits={true}
                       variant="bordered"
                       onlyBubbleControls={true}
                       smallHeight={true}
-                      placeholder={t('About the author')}
+                      placeholder={t('About')}
-                      label={t('About the author')}
+                      label={t('About')}
                       initialContent={form.about || ''}
                       autoFocus={false}
                       onChange={(value) => updateFormField('about', value)}

src/components/_shared/DropArea/DropArea.tsx

@@ -37,14 +37,12 @@ export const DropArea = (props: Props) => {
   const runUpload = async (files: UploadFile[]) => {
     try {
       setLoading(true)
-
+      const tkn = session()?.access_token as string
-      const results = []
+      const handler = props.fileType === 'image' ? handleImageUpload : handleFileUpload
-      for (const file of files) {
+      tkn &&
-        const handler = props.fileType === 'image' ? handleImageUpload : handleFileUpload
+        Promise.all(files.map((file) => handler(file, tkn)))
-        const result = await handler(file, session()?.access_token as string)
+          .then(props.onUpload)
-        results.push(result)
+          .catch(console.error)
-      }
-      props.onUpload(results)
       setLoading(false)
     } catch (error) {
       setLoading(false)

src/components/_shared/Popover/Popover.tsx

@@ -61,7 +61,7 @@ export const Popover = (props: Props) => {
     <>
       {props.children(setAnchor)}
       <Show when={show() && !props.disabled}>
-        <div ref={setPopper} class={styles.tooltip} role="tooltip">
+        <div ref={setPopper} class={styles.tooltip}>
           {props.content}
           <div class={styles.arrow} data-popper-arrow={true} />
         </div>

src/components/_shared/ShareLinks/ShareLinks.tsx

@@ -55,7 +55,6 @@ export const ShareLinks = (props: Props) => {
       <ul class="nodash">
         <li>
           <button
-            role="button"
             class={clsx(styles.shareControl, popupStyles.action)}
             onClick={() => handleShare(FACEBOOK)}
           >
@@ -65,7 +64,6 @@ export const ShareLinks = (props: Props) => {
         </li>
         <li>
           <button
-            role="button"
             class={clsx(styles.shareControl, popupStyles.action)}
             onClick={() => handleShare(TWITTER)}
           >
@@ -75,7 +73,6 @@ export const ShareLinks = (props: Props) => {
         </li>
         <li>
           <button
-            role="button"
             class={clsx(styles.shareControl, popupStyles.action)}
             onClick={() => handleShare(TELEGRAM)}
           >
@@ -84,11 +81,7 @@ export const ShareLinks = (props: Props) => {
           </button>
         </li>
         <li>
-          <button
+          <button class={clsx(styles.shareControl, popupStyles.action)} onClick={() => handleShare(VK)}>
-            role="button"
-            class={clsx(styles.shareControl, popupStyles.action)}
-            onClick={() => handleShare(VK)}
-          >
             <Icon name="vk-white" class={clsx(styles.icon, popupStyles.icon)} />
             VK
           </button>
@@ -97,11 +90,7 @@ export const ShareLinks = (props: Props) => {
           <Show
             when={props.variant === 'inModal'}
             fallback={
-              <button
+              <button class={clsx(styles.shareControl, popupStyles.action)} onClick={copyLink}>
-                role="button"
-                class={clsx(styles.shareControl, popupStyles.action)}
-                onClick={copyLink}
-              >
                 <Icon name="link-white" class={clsx(styles.icon, popupStyles.icon)} />
                 {t('Copy link')}
               </button>

src/components/_shared/VideoPlayer/VideoPlayer.tsx

@@ -16,7 +16,9 @@ type Props = {
   onVideoDelete?: () => void
   articleView?: boolean
 }
-
+const watchPattern = /watch=(\w+)/
+const ytPattern = /(youtu.be)\/(\w+)/
+const vimeoPattern = /vimeo.com\/(\d+)/
 export const VideoPlayer = (props: Props) => {
   const { t } = useLocalize()
   const [videoId, setVideoId] = createSignal<string | undefined>()
@@ -27,14 +29,14 @@ export const VideoPlayer = (props: Props) => {
     setIsVimeo(!isYoutube)
     if (isYoutube) {
       if (props.videoUrl.includes('youtube.com')) {
-        const videoIdMatch = props.videoUrl.match(/watch=(\w+)/)
+        const videoIdMatch = props.videoUrl.match(watchPattern)
         setVideoId(videoIdMatch?.[1])
       } else {
-        const videoIdMatch = props.videoUrl.match(/youtu.be\/(\w+)/)
+        const videoIdMatch = props.videoUrl.match(ytPattern)
         setVideoId(videoIdMatch?.[1])
       }
     } else {
-      const videoIdMatch = props.videoUrl.match(/vimeo.com\/(\d+)/)
+      const videoIdMatch = props.videoUrl.match(vimeoPattern)
       setVideoId(videoIdMatch?.[1])
     }
   })

src/context/following.tsx

@@ -151,16 +151,6 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     setFollows((prevFollows: AuthorFollowsResult) => {
       const updatedFollows = { ...prevFollows }
       switch (what) {
-        case 'AUTHOR': {
-          if (value) {
-            if (!updatedFollows.authors?.some((author) => author.slug === slug)) {
-              updatedFollows.authors = [...(updatedFollows.authors || []), { slug } as Author]
-            }
-          } else {
-            updatedFollows.authors = updatedFollows.authors?.filter((author) => author.slug !== slug) || []
-          }
-          break
-        }
         case 'TOPIC': {
           if (value) {
             if (!updatedFollows.topics?.some((topic) => topic.slug === slug)) {
@@ -182,6 +172,17 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
           }
           break
         }
+        // case 'AUTHOR': {
+        default: {
+          if (value) {
+            if (!updatedFollows.authors?.some((author) => author.slug === slug)) {
+              updatedFollows.authors = [...(updatedFollows.authors || []), { slug } as Author]
+            }
+          } else {
+            updatedFollows.authors = updatedFollows.authors?.filter((author) => author.slug !== slug) || []
+          }
+          break
+        }
       }
       return updatedFollows
     })

src/intl/chars.ts

@@ -0,0 +1,6 @@
+export const allChars = /[^\dA-zА-я]/
+export const slugChars = /[^\da-z]/g
+export const enChars = /[^A-z]/
+export const ruChars = /[^ËА-яё]/
+export const sentenceSeparator = /{!|\?|:|;}\s/
+export const cyrillicRegex = /[\u0400-\u04FF]/ // Range for Cyrillic characters

src/intl/translate.ts

@@ -1,16 +1,18 @@
 import { Author } from '~/graphql/schema/core.gen'
 import { capitalize } from '~/utils/capitalize'
+import { allChars, cyrillicRegex, enChars, ruChars } from './chars'
 import { translit } from './translit'
 
 export const isCyrillic = (s: string): boolean => {
-  const cyrillicRegex = /[\u0400-\u04FF]/ // Range for Cyrillic characters
-
   return cyrillicRegex.test(s)
 }
 
 export const translateAuthor = (author: Author, lng: string) =>
   lng === 'en' && isCyrillic(author?.name || '')
-    ? capitalize(translit((author?.name || '').replace(/ё/, 'e').replace(/ь/, '')).replace(/-/, ' '), true)
+    ? capitalize(
+        translit((author?.name || '').replaceAll('ё', 'e').replaceAll('ь', '')).replaceAll('-', ' '),
+        true
+      )
     : author.name
 
 export const authorLetterReduce = (acc: { [x: string]: Author[] }, author: Author, lng: string) => {
@@ -18,7 +20,7 @@ export const authorLetterReduce = (acc: { [x: string]: Author[] }, author: Autho
   if (!letter && author && author.name) {
     const name =
       translateAuthor(author, lng || 'ru')
-        ?.replace(/[^\dA-zА-я]/, ' ')
+        ?.replace(allChars, ' ')
         .trim() || ''
     const nameParts = name.trim().split(' ')
     const found = nameParts.filter(Boolean).pop()
@@ -26,8 +28,8 @@ export const authorLetterReduce = (acc: { [x: string]: Author[] }, author: Autho
       letter = found[0].toUpperCase()
     }
   }
-  if (/[^ËА-яё]/.test(letter) && lng === 'ru') letter = '@'
+  if (ruChars.test(letter) && lng === 'ru') letter = '@'
-  if (/[^A-z]/.test(letter) && lng === 'en') letter = '@'
+  if (enChars.test(letter) && lng === 'en') letter = '@'
 
   if (!acc[letter]) acc[letter] = []
   author.name = translateAuthor(author, lng)

src/intl/translit.ts

@@ -1,4 +1,5 @@
 import translitConfig from './abc-translit.json'
+import { ruChars, slugChars } from './chars'
 
 const ru2en: { [key: string]: string } = translitConfig
 
@@ -7,7 +8,7 @@ export const translit = (str: string) => {
     return ''
   }
 
-  const isCyrillic = /[ЁА-яё]/.test(str)
+  const isCyrillic = ruChars.test(str)
 
   if (!isCyrillic) {
     return str
@@ -17,7 +18,5 @@ export const translit = (str: string) => {
 }
 
 export const slugify = (text: string) => {
-  return translit(text.toLowerCase())
+  return translit(text.toLowerCase()).replaceAll(' ', '-').replaceAll(slugChars, '')
-    .replaceAll(' ', '-')
-    .replaceAll(/[^\da-z]/g, '')
 }

src/lib/composeMediaItems.ts

@@ -1,5 +1,7 @@
+const audioExts = /\.(wav|flac|mp3|aac|jpg|jpeg|png|gif)$/i
+
 const removeMediaFileExtension = (fileName: string) => {
-  return fileName.replace(/\.(wav|flac|mp3|aac|jpg|jpeg|png|gif)$/i, '')
+  return fileName.replace(audioExts, '')
 }
 
 export const composeMediaItems = (

src/routes/feed/[...order].tsx

@@ -13,6 +13,8 @@ import { loadShouts } from '~/graphql/api/public'
 import { LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen'
 import { SHOUTS_PER_PAGE } from '../(main)'
 
+const paramPattern = /^(hot|likes)$/
+
 export type FeedPeriod = 'week' | 'month' | 'year'
 
 export type PeriodItem = {
@@ -32,14 +34,15 @@ const getFromDate = (period: FeedPeriod): number => {
       d = new Date(now.setDate(now.getDate() - 7))
       break
     }
-    case 'month': {
-      d = new Date(now.setMonth(now.getMonth() - 1))
-      break
-    }
     case 'year': {
       d = new Date(now.setFullYear(now.getFullYear() - 1))
       break
     }
+    // case 'month': {
+    default: {
+      d = new Date(now.setMonth(now.getMonth() - 1))
+      break
+    }
   }
   return Math.floor(d.getTime() / 1000)
 }
@@ -71,7 +74,6 @@ export default (props: RouteSectionProps<{ shouts: Shout[]; topics: Topic[] }>)
   // load more feed
   const loadMoreFeed = async (offset?: number) => {
     // /feed/:order: - select order setting
-    const paramPattern = /^(hot|likes)$/
     const order =
       (props.params.order && paramPattern.test(props.params.order)
         ? props.params.order === 'hot'
@@ -107,9 +109,8 @@ export default (props: RouteSectionProps<{ shouts: Shout[]; topics: Topic[] }>)
   })
 
   const order = createMemo(() => {
-    const paramOrderPattern = /^(hot|likes)$/
     return (
-      (paramOrderPattern.test(props.params.order)
+      (paramPattern.test(props.params.order)
         ? props.params.order === 'hot'
           ? 'last_comment'
           : props.params.order

src/routes/feed/my/[...mode]/[...order].tsx

@@ -30,6 +30,8 @@ const feeds = {
 export type FeedPeriod = 'week' | 'month' | 'year'
 export type FeedSearchParams = { period?: FeedPeriod }
 
+const paramModePattern = /^(followed|discussed|liked|coauthored|unrated)$/
+const paramPattern = /(hot|likes)/
 const getFromDate = (period: FeedPeriod): number => {
   const now = new Date()
   let d: Date = now
@@ -38,14 +40,15 @@ const getFromDate = (period: FeedPeriod): number => {
       d = new Date(now.setDate(now.getDate() - 7))
       break
     }
-    case 'month': {
-      d = new Date(now.setMonth(now.getMonth() - 1))
-      break
-    }
     case 'year': {
       d = new Date(now.setFullYear(now.getFullYear() - 1))
       break
     }
+    // case 'month':
+    default: {
+      d = new Date(now.setMonth(now.getMonth() - 1))
+      break
+    }
   }
   return Math.floor(d.getTime() / 1000)
 }
@@ -67,14 +70,12 @@ export default (props: RouteSectionProps<{ shouts: Shout[]; topics: Topic[] }>)
 
   // /feed/my/:mode:
   const mode = createMemo(() => {
-    const paramModePattern = /^(followed|discussed|liked|coauthored|unrated)$/
     return props.params.mode && paramModePattern.test(props.params.mode) ? props.params.mode : 'followed'
   })
 
   const order = createMemo(() => {
-    const paramOrderPattern = /^(hot|likes)$/
     return (
-      (paramOrderPattern.test(props.params.order)
+      (paramPattern.test(props.params.order)
         ? props.params.order === 'hot'
           ? 'last_comment'
           : props.params.order

src/utils/validate.ts

@@ -1,7 +1,9 @@
+const emailPattern = /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/i
+
 export const validateEmail = (email: string) => {
   if (!email) return false
 
-  return /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/i.test(email)
+  return emailPattern.test(email)
 }
 
 export const validateUrl = (value: string) => {

tests/1-page-sections.spec.ts

@@ -50,6 +50,7 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   test.setTimeout(150000)
   await page.goto(baseURL)
+  // biome-ignore lint/performance/useTopLevelRegex: <explanation>
   await expect(page).toHaveTitle(/Дискурс/)
   console.log('Localhost server started successfully!')
 })

tests/2-auth-topic-actions.spec.ts

@@ -50,6 +50,7 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   test.setTimeout(150000)
   await page.goto(baseURL)
+  // biome-ignore lint/performance/useTopLevelRegex: <explanation>
   await expect(page).toHaveTitle(/Дискурс/)
   await page.getByRole('link', { name: 'Войти' }).click()
   console.log('Localhost server started successfully!')

tests/3-auth-drafts-actions.spec.ts

@@ -50,6 +50,7 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   test.setTimeout(150000)
   await page.goto(baseURL)
+  // biome-ignore lint/performance/useTopLevelRegex: <explanation>
   await expect(page).toHaveTitle(/Дискурс/)
   console.log('Localhost server started successfully!')
   await page.close()

tests/4-auth-author-actions.spec.ts

@@ -54,6 +54,7 @@ test.beforeAll(async ({ browser }) => {
   page = await context.newPage()
   test.setTimeout(150000)
   await page.goto(baseURL)
+  // biome-ignore lint/performance/useTopLevelRegex: <explanation>
   await expect(page).toHaveTitle(/Дискурс/)
   await page.getByRole('link', { name: 'Войти' }).click()
   console.log('Localhost server started successfully!')