views-refactored

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
   "files": {
     "include": ["*.tsx", "*.ts", "*.js", "*.json"],
     "ignore": ["./dist", "./node_modules", ".husky", "docs", "gen", "*.gen.ts", "*.d.ts"]

package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@authorizerdev/authorizer-js": "^2.0.3",
-    "@biomejs/biome": "^1.9.2",
+    "@biomejs/biome": "^1.9.3",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/typescript": "^4.0.9",
     "@graphql-codegen/typescript-operations": "^4.2.3",
@@ -38,56 +38,56 @@
     "@solid-primitives/storage": "^4.2.1",
     "@solid-primitives/upload": "^0.0.117",
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.14.5",
-    "@solidjs/start": "^1.0.6",
-    "@storybook/addon-a11y": "^8.3.2",
-    "@storybook/addon-actions": "^8.3.2",
-    "@storybook/addon-controls": "^8.3.2",
-    "@storybook/addon-essentials": "^8.3.2",
-    "@storybook/addon-interactions": "^8.3.2",
-    "@storybook/addon-links": "^8.3.2",
-    "@storybook/addon-themes": "^8.3.2",
-    "@storybook/addon-viewport": "^8.3.2",
-    "@storybook/builder-vite": "^8.3.2",
-    "@storybook/docs-tools": "^8.3.2",
-    "@storybook/test": "^8.3.2",
+    "@solidjs/router": "^0.14.7",
+    "@solidjs/start": "^1.0.8",
+    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-actions": "^8.3.4",
+    "@storybook/addon-controls": "^8.3.4",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/addon-themes": "^8.3.4",
+    "@storybook/addon-viewport": "^8.3.4",
+    "@storybook/builder-vite": "^8.3.4",
+    "@storybook/docs-tools": "^8.3.4",
+    "@storybook/test": "^8.3.4",
     "@storybook/test-runner": "^0.19.1",
-    "@tiptap/core": "^2.7.2",
-    "@tiptap/extension-blockquote": "^2.7.2",
-    "@tiptap/extension-bold": "^2.7.2",
-    "@tiptap/extension-bubble-menu": "^2.7.2",
-    "@tiptap/extension-bullet-list": "^2.7.2",
-    "@tiptap/extension-character-count": "^2.7.2",
-    "@tiptap/extension-collaboration": "^2.7.2",
-    "@tiptap/extension-collaboration-cursor": "^2.7.2",
-    "@tiptap/extension-document": "^2.7.2",
-    "@tiptap/extension-dropcursor": "^2.7.2",
-    "@tiptap/extension-floating-menu": "^2.7.2",
-    "@tiptap/extension-focus": "^2.7.2",
-    "@tiptap/extension-gapcursor": "^2.7.2",
-    "@tiptap/extension-hard-break": "^2.7.2",
-    "@tiptap/extension-heading": "^2.7.2",
-    "@tiptap/extension-highlight": "^2.7.2",
-    "@tiptap/extension-history": "^2.7.2",
-    "@tiptap/extension-horizontal-rule": "^2.7.2",
-    "@tiptap/extension-image": "^2.7.2",
-    "@tiptap/extension-italic": "^2.7.2",
-    "@tiptap/extension-link": "^2.7.2",
-    "@tiptap/extension-list-item": "^2.7.2",
-    "@tiptap/extension-ordered-list": "^2.7.2",
-    "@tiptap/extension-paragraph": "^2.7.2",
-    "@tiptap/extension-placeholder": "^2.7.2",
-    "@tiptap/extension-strike": "^2.7.2",
-    "@tiptap/extension-text": "^2.7.2",
-    "@tiptap/extension-underline": "^2.7.2",
-    "@tiptap/extension-youtube": "^2.7.2",
-    "@tiptap/starter-kit": "^2.7.2",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-blockquote": "^2.8.0",
+    "@tiptap/extension-bold": "^2.8.0",
+    "@tiptap/extension-bubble-menu": "^2.8.0",
+    "@tiptap/extension-bullet-list": "^2.8.0",
+    "@tiptap/extension-character-count": "^2.8.0",
+    "@tiptap/extension-collaboration": "^2.8.0",
+    "@tiptap/extension-collaboration-cursor": "^2.8.0",
+    "@tiptap/extension-document": "^2.8.0",
+    "@tiptap/extension-dropcursor": "^2.8.0",
+    "@tiptap/extension-floating-menu": "^2.8.0",
+    "@tiptap/extension-focus": "^2.8.0",
+    "@tiptap/extension-gapcursor": "^2.8.0",
+    "@tiptap/extension-hard-break": "^2.8.0",
+    "@tiptap/extension-heading": "^2.8.0",
+    "@tiptap/extension-highlight": "^2.8.0",
+    "@tiptap/extension-history": "^2.8.0",
+    "@tiptap/extension-horizontal-rule": "^2.8.0",
+    "@tiptap/extension-image": "^2.8.0",
+    "@tiptap/extension-italic": "^2.8.0",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-list-item": "^2.8.0",
+    "@tiptap/extension-ordered-list": "^2.8.0",
+    "@tiptap/extension-paragraph": "^2.8.0",
+    "@tiptap/extension-placeholder": "^2.8.0",
+    "@tiptap/extension-strike": "^2.8.0",
+    "@tiptap/extension-text": "^2.8.0",
+    "@tiptap/extension-underline": "^2.8.0",
+    "@tiptap/extension-youtube": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
     "@types/cookie": "^0.6.0",
     "@types/cookie-signature": "^1.1.2",
-    "@types/node": "^22.6.1",
+    "@types/node": "^22.7.4",
     "@types/throttle-debounce": "^5.0.2",
     "@urql/core": "^5.0.6",
-    "axe-playwright": "^2.0.2",
+    "axe-playwright": "^2.0.3",
     "bootstrap": "^5.3.3",
     "clsx": "^2.1.1",
     "cookie": "^0.6.0",
@@ -107,11 +107,11 @@
     "prosemirror-view": "^1.34.3",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "1.77.6",
-    "solid-js": "^1.8.23",
+    "solid-js": "^1.9.1",
     "solid-popper": "^0.3.0",
     "solid-tiptap": "0.7.0",
     "solid-transition-group": "^0.2.3",
-    "storybook": "^8.3.2",
+    "storybook": "^8.3.4",
     "storybook-addon-sass-postcss": "^0.3.2",
     "storybook-solidjs": "^1.0.0-beta.2",
     "storybook-solidjs-vite": "^1.0.0-beta.2",

src/components/Draft/PublishSettings.tsx

@@ -13,13 +13,13 @@ import { useTopics } from '~/context/topics'
 import { useSnackbar, useUI } from '~/context/ui'
 import { Topic } from '~/graphql/schema/core.gen'
 import { UploadedFile } from '~/types/upload'
-import { Modal } from '../../_shared/Modal'
-import { TopicSelect } from './TopicSelect'
+import { Modal } from '../_shared/Modal'
+import { TopicSelect } from '../_shared/TopicSelect'
 
-import stylesBeside from '../../Feed/Beside.module.scss'
-import styles from './PublishSettings.module.scss'
+import styles from '~/styles/views/PublishSettings.module.scss'
+import stylesBeside from '../Feed/Beside.module.scss' // TODO: should not be here, implement more components
 
-const MicroEditor = lazy(() => import('../../Editor/MicroEditor'))
+const MicroEditor = lazy(() => import('../Editor/MicroEditor'))
 const GrowingTextarea = lazy(() => import('~/components/_shared/GrowingTextarea/GrowingTextarea'))
 const DESCRIPTION_MAX_LENGTH = 400
 

src/components/SearchModal/SearchModal.tsx

@@ -7,10 +7,11 @@ import { useLocalize } from '~/context/localize'
 import type { Shout } from '~/graphql/schema/core.gen'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { byScore } from '~/utils/sort'
-import { FEED_PAGE_SIZE } from '../Views/Feed/Feed'
-import styles from './SearchModal.module.scss'
+import { FEED_PAGE_SIZE } from '../Views/FeedView'
 import { SearchResultItem } from './SearchResultItem'
 
+import styles from './SearchModal.module.scss'
+
 // @@TODO handle empty article options after backend support (subtitle, cover, etc.)
 // @@TODO implement load more
 // @@TODO implement FILTERS & TOPICS

src/components/Views/AllAuthors/AuthorsList.module.scss

@@ -1,26 +0,0 @@
-.AuthorsList {
-  .action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 8rem;
-  }
-
-  .loading {
-    @include font-size(1.4rem);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    width: 100%;
-    flex-direction: row;
-    opacity: 0.5;
-
-    .icon {
-      position: relative;
-      width: 18px;
-      height: 18px;
-    }
-  }
-}

src/components/Views/AllAuthors/index.ts

@@ -1 +0,0 @@
-export { AllAuthors } from './AllAuthors'

src/components/Views/AllAuthorsView.tsx

@@ -12,8 +12,8 @@ import type { Author } from '~/graphql/schema/core.gen'
 import { dummyFilter } from '~/intl/dummyFilter'
 import { authorLetterReduce, translateAuthor } from '~/intl/translate'
 import { scrollHandler } from '~/utils/scroll'
-import styles from './AllAuthors.module.scss'
-import stylesAuthorList from './AuthorsList.module.scss'
+
+import styles from '~/styles/views/AllAuthors.module.scss'
 
 type Props = {
   authors: Author[]
@@ -30,7 +30,7 @@ export const ABC = {
 
 // useAuthors sorted from context, set filter/sort
 
-export const AllAuthors = (props: Props) => {
+export const AllAuthorsView = (props: Props) => {
   const { t, lang } = useLocalize()
   const alphabet = createMemo(() => ABC[lang()] || ABC['ru'])
   const [searchParams] = useSearchParams<{ by?: string }>()
@@ -195,7 +195,7 @@ export const AllAuthors = (props: Props) => {
   )
 
   const AuthorsSortedList = () => (
-    <div class={clsx(stylesAuthorList.AuthorsList)}>
+    <div class={clsx(styles.AuthorsList)}>
       <For each={authorsSorted?.()}>
         {(author) => (
           <div class="row">
@@ -207,7 +207,7 @@ export const AllAuthors = (props: Props) => {
       </For>
       <div class="row">
         <div class="col-lg-20 col-xl-18">
-          <div class={stylesAuthorList.action}>
+          <div class={styles.action}>
             <Show
               when={
                 searchParams.by !== 'name' &&

src/components/Views/AllTopics/index.ts

@@ -1 +0,0 @@
-export { AllTopics } from './AllTopics'

src/components/Views/AllTopicsView.tsx

@@ -10,8 +10,9 @@ import { findFirstReadableCharIndex, notLatin, notRus } from '~/intl/chars'
 import { dummyFilter } from '~/intl/dummyFilter'
 import { capitalize } from '~/utils/capitalize'
 import { scrollHandler } from '~/utils/scroll'
-import { TopicBadge } from '../../Topic/TopicBadge'
-import styles from './AllTopics.module.scss'
+import { TopicBadge } from '../Topic/TopicBadge'
+
+import styles from '~/styles/views/AllTopics.module.scss'
 
 type Props = {
   topics: Topic[]
@@ -23,7 +24,7 @@ export const ABC = {
   en: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'
 }
 
-export const AllTopics = (props: Props) => {
+export const AllTopicsView = (props: Props) => {
   const { t, lang } = useLocalize()
   const alphabet = createMemo(() => ABC[lang()])
   const { setTopicsSort, sortedTopics } = useTopics()

src/components/Views/Author/index.ts

@@ -1 +0,0 @@
-export { AuthorView, PRERENDERED_ARTICLES_COUNT } from './Author'

src/components/Views/AuthorView.tsx

@@ -15,15 +15,16 @@ import getAuthorFollowsQuery from '~/graphql/query/core/author-follows'
 import type { Author, Reaction, Shout, Topic } from '~/graphql/schema/core.gen'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { byCreated } from '~/utils/sort'
-import stylesArticle from '../../Article/Article.module.scss'
-import { Comment } from '../../Article/Comment'
-import { AuthorCard } from '../../Author/AuthorCard'
-import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
-import { Placeholder } from '../../Feed/Placeholder'
-import { Row1 } from '../../Feed/Row1'
-import { Row2 } from '../../Feed/Row2'
-import { Row3 } from '../../Feed/Row3'
-import styles from './Author.module.scss'
+import { Comment } from '../Article/Comment'
+import { AuthorCard } from '../Author/AuthorCard'
+import { AuthorShoutsRating } from '../Author/AuthorShoutsRating'
+import { Placeholder } from '../Feed/Placeholder'
+import { Row1 } from '../Feed/Row1'
+import { Row2 } from '../Feed/Row2'
+import { Row3 } from '../Feed/Row3'
+
+import styles from '~/styles/views/Author.module.scss'
+import stylesArticle from '../Article/Article.module.scss'
 
 type AuthorViewProps = {
   authorSlug: string

src/components/Views/EditSettingsView.tsx

@@ -13,11 +13,12 @@ import getMyShoutQuery from '~/graphql/query/core/article-my'
 import type { Shout, Topic } from '~/graphql/schema/core.gen'
 import { isDesktop } from '~/lib/mediaQuery'
 import { clone } from '~/utils/clone'
-import { AutoSaveNotice } from '../../Editor/AutoSaveNotice'
-import { Modal } from '../../_shared/Modal'
-import { TableOfContents } from '../../_shared/TableOfContents'
-import { PublishSettings } from '../PublishSettings'
-import styles from './EditView.module.scss'
+import { PublishSettings } from '../Draft/PublishSettings'
+import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
+import { Modal } from '../_shared/Modal'
+import { TableOfContents } from '../_shared/TableOfContents'
+
+import styles from '~/styles/views/EditView.module.scss'
 
 type Props = {
   shout: Shout

src/components/Views/EditView.tsx

@@ -22,14 +22,15 @@ import { isDesktop } from '~/lib/mediaQuery'
 import { LayoutType } from '~/types/common'
 import { MediaItem } from '~/types/mediaitem'
 import { clone } from '~/utils/clone'
-import { AutoSaveNotice } from '../../Editor/AutoSaveNotice'
-import { AudioUploader } from '../../Upload/AudioUploader'
-import { VideoUploader } from '../../Upload/VideoUploader'
-import { Modal } from '../../_shared/Modal'
-import { TableOfContents } from '../../_shared/TableOfContents'
-import styles from './EditView.module.scss'
+import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
+import { AudioUploader } from '../Upload/AudioUploader'
+import { VideoUploader } from '../Upload/VideoUploader'
+import { Modal } from '../_shared/Modal'
+import { TableOfContents } from '../_shared/TableOfContents'
 
-const MicroEditor = lazy(() => import('../../Editor/MicroEditor'))
+import styles from '~/styles/views/EditView.module.scss'
+
+const MicroEditor = lazy(() => import('../Editor/MicroEditor'))
 const GrowingTextarea = lazy(() => import('~/components/_shared/GrowingTextarea/GrowingTextarea'))
 
 type Props = {

src/components/Views/EditView/index.ts

@@ -1 +0,0 @@
-export { EditView } from './EditView'

src/components/Views/Expo/ExpoNav.tsx

@@ -1,34 +0,0 @@
-import { A } from '@solidjs/router'
-import { clsx } from 'clsx'
-import { For } from 'solid-js'
-
-import { ConditionalWrapper } from '~/components/_shared/ConditionalWrapper'
-import { EXPO_LAYOUTS, EXPO_TITLES } from '~/context/feed'
-import { useLocalize } from '~/context/localize'
-import { ExpoLayoutType } from '~/types/common'
-
-export const ExpoNav = (props: { layout: ExpoLayoutType | '' }) => {
-  const { t } = useLocalize()
-  return (
-    <div class="wide-container">
-      <ul class={clsx('view-switcher')}>
-        <For each={[...EXPO_LAYOUTS, '']}>
-          {(layoutKey) => (
-            <li class={clsx({ 'view-switcher__item--selected': props.layout === layoutKey })}>
-              <ConditionalWrapper
-                condition={props.layout !== layoutKey}
-                wrapper={(children) => <A href={`/expo/${layoutKey}`}>{children}</A>}
-              >
-                <span class="linkReplacement">
-                  {layoutKey in EXPO_TITLES ? t(EXPO_TITLES[layoutKey as ExpoLayoutType]) : t('All')}
-                </span>
-              </ConditionalWrapper>
-            </li>
-          )}
-        </For>
-      </ul>
-    </div>
-  )
-}
-
-export default ExpoNav

src/components/Views/Expo/index.ts

@@ -1 +0,0 @@
-export { Expo } from './Expo'

src/components/Views/ExpoView.tsx

@@ -1,17 +1,44 @@
+import { A } from '@solidjs/router'
+import clsx from 'clsx'
 import { For, Show, createEffect, createSignal, on } from 'solid-js'
-
+import { ConditionalWrapper } from '~/components/_shared/ConditionalWrapper'
 import { Loading } from '~/components/_shared/Loading'
 import { ArticleCardSwiper } from '~/components/_shared/SolidSwiper/ArticleCardSwiper'
 import { EXPO_LAYOUTS, SHOUTS_PER_PAGE } from '~/context/feed'
+import { EXPO_TITLES } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'
 import getRandomTopShoutsQuery from '~/graphql/query/core/articles-load-random-top'
 import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
 import { ExpoLayoutType } from '~/types/common'
 import { getUnixtime } from '~/utils/date'
-import { ArticleCard } from '../../Feed/ArticleCard'
+import { ArticleCard } from '../Feed/ArticleCard'
 
-import styles from './Expo.module.scss'
+import styles from '~/styles/views/Expo.module.scss'
+
+export const ExpoNav = (props: { layout: ExpoLayoutType | '' }) => {
+  const { t } = useLocalize()
+  return (
+    <div class="wide-container">
+      <ul class={clsx('view-switcher')}>
+        <For each={[...EXPO_LAYOUTS, '']}>
+          {(layoutKey) => (
+            <li class={clsx({ 'view-switcher__item--selected': props.layout === layoutKey })}>
+              <ConditionalWrapper
+                condition={props.layout !== layoutKey}
+                wrapper={(children) => <A href={`/expo/${layoutKey}`}>{children}</A>}
+              >
+                <span class="linkReplacement">
+                  {layoutKey in EXPO_TITLES ? t(EXPO_TITLES[layoutKey as ExpoLayoutType]) : t('All')}
+                </span>
+              </ConditionalWrapper>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  )
+}
 
 type Props = {
   shouts: Shout[]

src/components/Views/Feed/index.ts

@@ -1 +0,0 @@
-export { FeedView as Feed } from './Feed'

src/components/Views/FeedSettings.tsx

@@ -1,6 +1,6 @@
 import { useLocalize } from '~/context/localize'
 
-import styles from '../../styles/FeedSettings.module.scss'
+import styles from '~/styles/views/FeedSettings.module.scss'
 
 // type FeedSettingsSearchParams = {
 //   by: '' | 'topics' | 'authors' | 'shouts'

src/components/Views/FeedView.tsx

@@ -17,17 +17,18 @@ import { loadUnratedShouts } from '~/graphql/api/private'
 import type { Author, Reaction, Shout } from '~/graphql/schema/core.gen'
 import { FeedSearchParams } from '~/routes/feed/[...order]'
 import { byCreated } from '~/utils/sort'
-import { CommentDate } from '../../Article/CommentDate'
-import { getShareUrl } from '../../Article/SharePopup'
-import { AuthorBadge } from '../../Author/AuthorBadge'
-import { AuthorLink } from '../../Author/AuthorLink'
-import { ArticleCard } from '../../Feed/ArticleCard'
-import stylesBeside from '../../Feed/Beside.module.scss'
-import stylesTopic from '../../Feed/CardTopic.module.scss'
-import { Placeholder } from '../../Feed/Placeholder'
-import { Sidebar } from '../../Feed/Sidebar'
-import { Modal } from '../../_shared/Modal'
-import styles from './Feed.module.scss'
+import { CommentDate } from '../Article/CommentDate'
+import { getShareUrl } from '../Article/SharePopup'
+import { AuthorBadge } from '../Author/AuthorBadge'
+import { AuthorLink } from '../Author/AuthorLink'
+import { ArticleCard } from '../Feed/ArticleCard'
+import { Placeholder } from '../Feed/Placeholder'
+import { Sidebar } from '../Feed/Sidebar'
+import { Modal } from '../_shared/Modal'
+
+import styles from '~/styles/views/Feed.module.scss'
+import stylesBeside from '../Feed/Beside.module.scss'
+import stylesTopic from '../Feed/CardTopic.module.scss'
 
 export const FEED_PAGE_SIZE = 20
 export type PeriodType = 'week' | 'month' | 'year'

src/components/Views/FourOuFour.tsx

@@ -1,10 +1,9 @@
+import { useNavigate } from '@solidjs/router'
 import { clsx } from 'clsx'
-
 import { useLocalize } from '~/context/localize'
 import { Icon } from '../_shared/Icon'
 
-import { useNavigate } from '@solidjs/router'
-import styles from '../../styles/FourOuFour.module.scss'
+import styles from '~/styles/views/FourOuFour.module.scss'
 
 type EvType = Event & { submitter: HTMLElement } & { currentTarget: HTMLFormElement; target: Element }
 

src/components/Views/InboxView.tsx

@@ -16,16 +16,16 @@ import type {
   MutationCreate_MessageArgs
 } from '~/graphql/schema/chat.gen'
 import type { Author } from '~/graphql/schema/core.gen'
+import styles from '~/styles/views/Inbox.module.scss'
 import { getShortDate } from '~/utils/date'
-import DialogCard from '../../Inbox/DialogCard'
-import DialogHeader from '../../Inbox/DialogHeader'
-import { Message } from '../../Inbox/Message'
-import MessagesFallback from '../../Inbox/MessagesFallback'
-import Search from '../../Inbox/Search'
-import { Modal } from '../../_shared/Modal'
-import styles from './Inbox.module.scss'
+import DialogCard from '../Inbox/DialogCard'
+import DialogHeader from '../Inbox/DialogHeader'
+import { Message } from '../Inbox/Message'
+import MessagesFallback from '../Inbox/MessagesFallback'
+import Search from '../Inbox/Search'
+import { Modal } from '../_shared/Modal'
 
-const MiniEditor = lazy(() => import('../../Editor/MiniEditor'))
+const MiniEditor = lazy(() => import('../Editor/MiniEditor'))
 
 const userSearch = (array: Author[], keyword: string) => {
   return array.filter((value) => new RegExp(keyword.trim(), 'gi').test(value.name || ''))

src/components/Views/Profile/ProfileSubscriptions.module.scss

@@ -1,3 +0,0 @@
-.ProfileSubscriptions {
-  display: block;
-}

src/components/Views/ProfileSecurity.tsx

@@ -11,7 +11,8 @@ import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'
 import { DEFAULT_HEADER_OFFSET, useSnackbar, useUI } from '~/context/ui'
 import { validateEmail } from '~/utils/validate'
-import styles from './Settings.module.scss'
+
+import styles from '~/styles/views/ProfileSettings.module.scss'
 
 type FormField = 'oldPassword' | 'newPassword' | 'newPasswordConfirm' | 'email'
 type FormData = Record<FormField, string | undefined>

src/components/Views/ProfileSettings.tsx

@@ -21,20 +21,21 @@ import { useSnackbar, useUI } from '~/context/ui'
 import { InputMaybe, ProfileInput } from '~/graphql/schema/core.gen'
 import { getImageUrl } from '~/lib/getThumbUrl'
 import { handleImageUpload } from '~/lib/handleImageUpload'
+import { profileSocialLinks } from '~/lib/profileSocialLinks'
 import { clone } from '~/utils/clone'
 import { validateUrl } from '~/utils/validate'
-import { ProfileSettingsNavigation } from '../../ProfileNav'
-import { Button } from '../../_shared/Button'
-import { Icon } from '../../_shared/Icon'
-import { ImageCropper } from '../../_shared/ImageCropper'
-import { Loading } from '../../_shared/Loading'
-import { Modal } from '../../_shared/Modal'
-import { Popover } from '../../_shared/Popover'
-import { SocialNetworkInput } from '../../_shared/SocialNetworkInput'
-import styles from './Settings.module.scss'
-import { profileSocialLinks } from './profileSocialLinks'
+import { ProfileSettingsNavigation } from '../ProfileNav'
+import { Button } from '../_shared/Button'
+import { Icon } from '../_shared/Icon'
+import { ImageCropper } from '../_shared/ImageCropper'
+import { Loading } from '../_shared/Loading'
+import { Modal } from '../_shared/Modal'
+import { Popover } from '../_shared/Popover'
+import { SocialNetworkInput } from '../_shared/SocialNetworkInput'
 
-const MicroEditor = lazy(() => import('../../Editor/MicroEditor'))
+import styles from '~/styles/views/ProfileSettings.module.scss'
+
+const MicroEditor = lazy(() => import('../Editor/MicroEditor'))
 const GrowingTextarea = lazy(() => import('~/components/_shared/GrowingTextarea/GrowingTextarea'))
 
 function filterNulls(arr: InputMaybe<string>[]): string[] {

src/components/Views/ProfileSubscriptions.tsx

@@ -6,11 +6,12 @@ import { FollowsFilter, useFollowing } from '~/context/following'
 import { useLocalize } from '~/context/localize'
 import { Author, Topic } from '~/graphql/schema/core.gen'
 import { dummyFilter } from '~/intl/dummyFilter'
-import stylesSettings from '../../../styles/FeedSettings.module.scss'
-import { AuthorBadge } from '../../Author/AuthorBadge'
-import { ProfileSettingsNavigation } from '../../ProfileNav'
-import { TopicBadge } from '../../Topic/TopicBadge'
-import styles from '../Profile/Settings.module.scss'
+import { AuthorBadge } from '../Author/AuthorBadge'
+import { ProfileSettingsNavigation } from '../ProfileNav'
+import { TopicBadge } from '../Topic/TopicBadge'
+
+import stylesSettings from '~/styles/views/FeedSettings.module.scss'
+import styles from '~/styles/views/ProfileSettings.module.scss'
 
 export const ProfileSubscriptions = () => {
   const { t, lang } = useLocalize()

src/components/Views/PublishSettings/index.ts

@@ -1 +0,0 @@
-export { PublishSettings } from './PublishSettings'

src/components/Views/SearchView.tsx

@@ -7,7 +7,7 @@ import type { SearchResult } from '~/graphql/schema/core.gen'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { ArticleCard } from '../Feed/ArticleCard'
 
-import '../../styles/Search.scss'
+import '~/styles/views/Search.module.scss'
 
 type Props = {
   query: string

src/components/Views/TopicView.tsx

@@ -9,7 +9,6 @@ import { Author, AuthorsBy, LoadShoutsOptions, Shout, Topic } from '~/graphql/sc
 import { getUnixtime } from '~/utils/date'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { byPublished, byStat } from '~/utils/sort'
-import styles from '../../styles/Topic.module.scss'
 import { Beside } from '../Feed/Beside'
 import { Row1 } from '../Feed/Row1'
 import { Row2 } from '../Feed/Row2'
@@ -19,6 +18,8 @@ import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper'
 import { Loading } from '../_shared/Loading'
 import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
 
+import styles from '~/styles/views/Topic.module.scss'
+
 export type TopicFeedSortBy = 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'last_comment'
 
 interface Props {

src/routes/(main).tsx

@@ -1,9 +1,9 @@
 import { type RouteDefinition, type RouteSectionProps, createAsync } from '@solidjs/router'
+import { HomeView, HomeViewProps } from '~/components/Views/HomeView'
 import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { SHOUTS_PER_PAGE, useFeed } from '~/context/feed'
 import { loadShouts, loadTopics } from '~/graphql/api/public'
 import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
-import { HomeView, HomeViewProps } from '../components/Views/Home'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { useLocalize } from '../context/localize'
 

src/routes/(static)/debate.tsx

@@ -1,4 +1,4 @@
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage

src/routes/(static)/dogma.tsx

@@ -1,4 +1,4 @@
-import { StaticPage } from '../../components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage title={'Dogma'}>

src/routes/(static)/guide.tsx

@@ -1,4 +1,4 @@
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage

src/routes/(static)/manifest.tsx

@@ -1,5 +1,5 @@
 import { Feedback } from '~/components/Discours/Feedback'
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 import { Modal } from '~/components/_shared/Modal'
 import { Opener } from '~/components/_shared/Modal/Opener'
 import { Newsletter } from '~/components/_shared/Newsletter'

src/routes/(static)/partners.tsx

@@ -1,3 +1,3 @@
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => <StaticPage title={'Partners'}>{''}</StaticPage>

src/routes/(static)/principles.tsx

@@ -1,4 +1,4 @@
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage

src/routes/(static)/support.tsx

@@ -1,5 +1,5 @@
 import { Donate } from '~/components/Discours/Donate'
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage

src/routes/(static)/terms.tsx

@@ -1,4 +1,4 @@
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage title={'Terms of use'} desc={'Rules of the journal Discours'}>

src/routes/(static)/thanks.tsx

@@ -1,4 +1,4 @@
-import { StaticPage } from '~/components/Views/StaticPage'
+import { StaticPage } from '~/components/Views/StaticPageView'
 
 export default () => (
   <StaticPage

src/routes/author/(all-authors).tsx

@@ -1,7 +1,6 @@
 import { RouteDefinition, RouteLoadFuncArgs, type RouteSectionProps, createAsync } from '@solidjs/router'
 import { Suspense, createEffect, on } from 'solid-js'
-import { AllAuthors } from '~/components/Views/AllAuthors'
-import { AUTHORS_PER_PAGE } from '~/components/Views/AllAuthors/AllAuthors'
+import { AUTHORS_PER_PAGE, AllAuthorsView } from '~/components/Views/AllAuthorsView'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useAuthors } from '~/context/authors'
@@ -70,7 +69,7 @@ export default function AllAuthorsPage(props: RouteSectionProps<AllAuthorsData>)
       desc="List of authors of the open editorial community"
     >
       <Suspense fallback={<Loading />}>
-        <AllAuthors
+        <AllAuthorsView
           isLoaded={Boolean(data()?.authors)}
           authors={data()?.authors || []}
           authorsByFollowers={data()?.authorsByFollowers}

src/routes/author/[slug]/[...tab].tsx

@@ -1,7 +1,7 @@
 import { RouteSectionProps, createAsync } from '@solidjs/router'
 import { ErrorBoundary, Suspense, createEffect, createSignal, on } from 'solid-js'
 import { COMMENTS_PER_PAGE } from '~/components/Article/FullArticle'
-import { AuthorView } from '~/components/Views/Author'
+import { AuthorView } from '~/components/Views/AuthorView'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'

src/routes/edit/[id]/(draft).tsx

@@ -9,7 +9,7 @@ import getShoutDraft from '~/graphql/query/core/article-my'
 import { Shout } from '~/graphql/schema/core.gen'
 import { LayoutType } from '~/types/common'
 
-const EditView = lazy(() => import('~/components/Views/EditView/EditView'))
+const EditView = lazy(() => import('~/components/Views/EditView'))
 
 export default (props: RouteSectionProps) => {
   const { t } = useLocalize()

src/routes/edit/[id]/settings.tsx

@@ -2,7 +2,7 @@ import { AuthToken } from '@authorizerdev/authorizer-js'
 import { RouteSectionProps } from '@solidjs/router'
 import { createEffect, createSignal, on } from 'solid-js'
 import { AuthGuard } from '~/components/AuthGuard'
-import EditSettingsView from '~/components/Views/EditView/EditSettingsView'
+import { EditSettingsView } from '~/components/Views/EditSettingsView'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'

src/routes/expo/[...layout].tsx

@@ -1,8 +1,7 @@
 import { Params, RouteSectionProps, createAsync } from '@solidjs/router'
 import { Show, createEffect, createSignal, on } from 'solid-js'
 import { TopicsNav } from '~/components/HeaderNav/TopicsNav'
-import { Expo } from '~/components/Views/Expo'
-import ExpoNav from '~/components/Views/Expo/ExpoNav'
+import { Expo, ExpoNav } from '~/components/Views/ExpoView'
 import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { EXPO_LAYOUTS, EXPO_TITLES, SHOUTS_PER_PAGE, useFeed } from '~/context/feed'

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

@@ -1,8 +1,8 @@
 import { RouteSectionProps, createAsync, useSearchParams } from '@solidjs/router'
 import { Client } from '@urql/core'
 import { createEffect, createMemo } from 'solid-js'
-import { Feed } from '~/components/Views/Feed'
-import { FeedProps } from '~/components/Views/Feed/Feed'
+import { FeedView } from '~/components/Views/FeedView'
+import { FeedProps } from '~/components/Views/FeedView'
 import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { SHOUTS_PER_PAGE, useFeed } from '~/context/feed'
@@ -104,7 +104,7 @@ export default (props: RouteSectionProps<{ shouts: Shout[]; topics: Topic[] }>)
     >
       <LoadMoreWrapper loadFunction={loadMoreFeed} pageSize={SHOUTS_PER_PAGE}>
         <ReactionsProvider>
-          <Feed shouts={feed() || (shouts() as Shout[])} order={order() as FeedProps['order']} />
+          <FeedView shouts={feed() || (shouts() as Shout[])} order={order() as FeedProps['order']} />
         </ReactionsProvider>
       </LoadMoreWrapper>
     </PageLayout>

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

@@ -1,9 +1,8 @@
 import { RouteSectionProps, useSearchParams } from '@solidjs/router'
 import { createEffect, createMemo } from 'solid-js'
 
-import { AUTHORS_PER_PAGE } from '~/components/Views/AllAuthors/AllAuthors'
-import { Feed } from '~/components/Views/Feed'
-import { FeedProps } from '~/components/Views/Feed/Feed'
+import { AUTHORS_PER_PAGE } from '~/components/Views/AllAuthorsView'
+import { FeedProps, FeedView } from '~/components/Views/FeedView'
 import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useFeed } from '~/context/feed'
@@ -92,7 +91,7 @@ export default (props: RouteSectionProps<{ shouts: Shout[]; topics: Topic[] }>)
     >
       <LoadMoreWrapper loadFunction={loadMoreMyFeed} pageSize={AUTHORS_PER_PAGE}>
         <ReactionsProvider>
-          <Feed
+          <FeedView
             shouts={feed() || []}
             mode={(mode() || 'all') as FeedProps['mode']}
             order={order() as FeedProps['order']}

src/routes/inbox/(chats).tsx

@@ -1,5 +1,5 @@
 import { RouteDefinition, RouteSectionProps, createAsync } from '@solidjs/router'
-import { InboxView } from '~/components/Views/Inbox/Inbox'
+import { InboxView } from '~/components/Views/InboxView'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { ShowOnlyOnClient } from '~/components/_shared/ShowOnlyOnClient'
 import { useAuthors } from '~/context/authors'

src/routes/inbox/[chat].tsx

@@ -1,6 +1,6 @@
 import { RouteDefinition, RouteSectionProps, createAsync, useParams } from '@solidjs/router'
 import { createSignal, onMount } from 'solid-js'
-import { InboxView } from '~/components/Views/Inbox/Inbox'
+import { InboxView } from '~/components/Views/InboxView'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { ShowOnlyOnClient } from '~/components/_shared/ShowOnlyOnClient'
 import { useInbox } from '~/context/inbox'

src/routes/search/(search).tsx

@@ -1,7 +1,6 @@
 import { action, useSearchParams } from '@solidjs/router'
 import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
-
-import { SearchView } from '~/components/Views/Search'
+import { SearchView } from '~/components/Views/SearchView'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'

src/routes/settings/(settings).tsx

@@ -1,5 +1,5 @@
 import { AuthGuard } from '~/components/AuthGuard'
-import { ProfileSettings } from '~/components/Views/Profile/ProfileSettings'
+import { ProfileSettings } from '~/components/Views/ProfileSettings'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
 import { ProfileProvider } from '~/context/profile'

src/routes/settings/security.tsx

@@ -1,5 +1,5 @@
 import { AuthGuard } from '~/components/AuthGuard'
-import { ProfileSecurityView } from '~/components/Views/Profile/ProfileSecurity'
+import { ProfileSecurityView } from '~/components/Views/ProfileSecurity'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
 import { ProfileProvider } from '~/context/profile'

src/routes/settings/subs.tsx

@@ -1,5 +1,5 @@
 import { AuthGuard } from '~/components/AuthGuard'
-import { ProfileSubscriptions } from '~/components/Views/Profile/ProfileSubscriptions'
+import { ProfileSubscriptions } from '~/components/Views/ProfileSubscriptions'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
 

src/routes/topic/(all-topics).tsx

@@ -1,6 +1,6 @@
 import { type RouteDefinition, type RouteSectionProps, createAsync } from '@solidjs/router'
 import { Suspense, createEffect, on } from 'solid-js'
-import { AllTopics } from '~/components/Views/AllTopics'
+import { AllTopicsView } from '~/components/Views/AllTopicsView'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { useLocalize } from '~/context/localize'
@@ -35,7 +35,7 @@ export default (props: RouteSectionProps<{ topics: Topic[] }>) => {
       desc="Thematic table of contents of the magazine. Here you can find all the topics that the community authors wrote about"
     >
       <Suspense fallback={<Loading />}>
-        <AllTopics topics={topics() as Topic[]} />
+        <AllTopicsView topics={topics() as Topic[]} />
       </Suspense>
     </PageLayout>
   )

src/routes/topic/[slug]/[...tab].tsx

@@ -2,7 +2,7 @@ import { RouteSectionProps, createAsync } from '@solidjs/router'
 import { HttpStatusCode } from '@solidjs/start'
 import { Show, Suspense, createEffect, createSignal, on } from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
-import { TopicFeedSortBy, TopicView } from '~/components/Views/Topic'
+import { TopicFeedSortBy, TopicView } from '~/components/Views/TopicView'
 import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { SHOUTS_PER_PAGE } from '~/context/feed'

src/styles/views/AllAuthors.module.scss

@@ -81,3 +81,29 @@
 }
 
 
+.AuthorsList {
+  .action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 8rem;
+  }
+
+  .loading {
+    @include font-size(1.4rem);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 100%;
+    flex-direction: row;
+    opacity: 0.5;
+
+    .icon {
+      position: relative;
+      width: 18px;
+      height: 18px;
+    }
+  }
+}