🎉 feat: restructure

src/components/icons/index.ts

@@ -0,0 +1 @@
+export { default as TranslateIcon } from './translate.svelte'

src/lib/organisms/comment.svelte → src/components/modules/comment.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
-    import Comment from '$lib/atoms/comment.svelte'
-    import SkeletonComment from '$lib/skeletons/comment.svelte'
-
-    import intersect from '$lib/use/intersect'
-
-    import nhqlComment from '$lib/gql/nhqlComment'
-    import Dropdown from '$lib/atoms/dropdown.svelte'
-    import type { Comment as IComment } from '$lib/gql/nhqlComment'
+    import { commentById, type Comment as CommentData } from '@gql'
+    import { Comment, Dropdown } from '@shared'
+    import { SkeletonComment } from '@skeletons'
+    import { intersect } from '@services'
 
     export let id: number
 
-    let comments: IComment[] | null = null
+    let comments: CommentData[] | null = null
     let allLoaded = false
     let batch = 1
     let total = 0
@@ -21,7 +17,7 @@
 
         isLoading = true
 
-        const response = await nhqlComment({ id, batch, orderBy })
+        const response = await commentById({ id, batch, orderBy })
 
         if (!response.comments || !response?.comments.data.length)
             allLoaded = true

src/components/modules/index.ts

@@ -0,0 +1,5 @@
+export { SettingLayout, SettingNavigation, SettingRow } from './settings'
+
+export { default as Comment } from './comment.svelte'
+export { default as ReaderMode } from './reader-mode.svelte'
+export { default as Related } from './related.svelte'

src/lib/molecules/reader-mode.svelte → src/components/modules/reader-mode.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-    import { ReaderType } from '$lib/stores/settings'
+    import { ReaderType } from '@stores'
+    import { ReaderButton } from '@shared'
 
     import { ColumnsIcon, MousePointerIcon } from 'svelte-feather-icons'
-
-    import ReaderButton from '../atoms/reader-button.svelte'
 </script>
 
-<section class="flex justify-end items-center max-w-2xl w-full my-3 mx-auto px-2 md:px-0">
+<section
+    class="flex justify-end items-center max-w-2xl w-full my-3 mx-auto px-2 md:px-0"
+>
     <div class="flex items-center gap-1 text-gray-400">
         <ReaderButton type={ReaderType.scroll} label="Scroll">
             <ColumnsIcon class="w-8 transform rotate-90" />

src/lib/molecules/related.svelte → src/components/modules/related.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-    import SkeletonCover from '$lib/skeletons/cover.svelte'
-
-    import intersect from '$lib/use/intersect'
-    import getRelatedHentai, { type RelatedHentaiData } from '$lib/gql/related'
-
-    import Cover from '$lib/atoms/cover.svelte'
+    import { relatedById, type Cover as CoverData } from '@gql'
+    import { Cover } from '@shared'
+    import { SkeletonCover } from '@skeletons'
+    import { intersect } from '@services'
 
     export let id: number
 
-    let related: RelatedHentaiData[] | null
+    let related: CoverData[] | null
 
     $: {
         id
@@ -17,7 +15,7 @@
     }
 
     const loadRelated = async () => {
-        related = await getRelatedHentai(id)
+        related = await relatedById(id)
     }
 </script>
 

src/components/modules/settings/index.ts

@@ -0,0 +1,3 @@
+export { default as SettingLayout } from './layout.svelte'
+export { default as SettingNavigation } from './navigation.svelte'
+export { default as SettingRow } from './row.svelte'

src/lib/providers/authProvider.svelte → src/components/providers/auth.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
     import { onMount } from 'svelte'
+    import { browser } from '$app/env'
 
-    import { galahad } from '$lib/api'
-
-    import user, { isAuthed } from '$lib/stores/user'
-    import { isServer } from '$lib/utils'
+    import user, { isAuthed } from '@stores/user'
+    import { galahad } from '@services'
 
     import Cookie from 'js-cookie'
 
     onMount(async () => {
-        if (isServer) return
+        if (!browser) return
 
         try {
             /**
@@ -46,7 +45,7 @@
             $user = {
                 name
             }
-        } catch (_error) {
+        } catch (_) {
         } finally {
             $isAuthed = true
         }

src/components/providers/index.ts

@@ -0,0 +1,2 @@
+export { default as AuthProvider } from './auth.svelte'
+export { default as ThemeProvider } from './theme.svelte'

src/lib/providers/theme.svelte → src/components/providers/theme.svelte

@@ -1,10 +1,10 @@
 <script>
-    import { darkTheme } from '$lib/stores/settings'
+    import { browser } from '$app/env'
 
-    import { isServer } from '$lib/utils'
+    import { darkTheme } from '@stores'
 
     darkTheme.subscribe((isDark) => {
-        if (isServer) return
+        if (!browser) return
 
         if (isDark) document.documentElement.classList.add('dark')
         else document.documentElement.classList.remove('dark')

src/lib/atoms/comment.svelte → src/components/shared/comment.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
     import dayjs from 'dayjs'
 
-    import Image from '$lib/atoms/image.svelte'
-
-    import type { Comment } from '$lib/gql/nhqlComment'
+    import { Image } from '@shared'
+    import type { Comment } from '@gql'
 
     export let comment: Comment
 
@@ -27,13 +26,19 @@
         />
     </div>
     <section class="flex flex-col gap-0.5 text-sm break-words w-full">
-        <div class="flex gap-2 text-xs text-gray-400 dark:text-gray-500 font-light">
+        <div
+            class="flex gap-2 text-xs text-gray-400 dark:text-gray-500 font-light"
+        >
             <h6 class="text-gray-800 dark:text-gray-400 font-medium">
                 {username}
             </h6>
             {' • '}
             <time>{dayjs(created * 1000).format('D MMM YY')}</time>
         </div>
-        <p class="text-gray-600 dark:text-gray-300 overflow-hidden text-ellipsis">{body}</p>
+        <p
+            class="text-gray-600 dark:text-gray-300 overflow-hidden text-ellipsis"
+        >
+            {body}
+        </p>
     </section>
 </article>

src/lib/atoms/cover.svelte → src/components/shared/cover.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
-    import type { NhqlSearchData } from '$lib/gql/nhqlSearch'
-
+    import type { Cover } from '@gql'
     import Image from './image.svelte'
 
-    export let hentai: NhqlSearchData
+    export let hentai: Cover
+    $: ({
+        title: { display },
+        images: {
+            cover: {
+                link,
+                info: { width, height }
+            }
+        },
+        metadata: { language },
+        info: { favorite, amount }
+    } = hentai)
 
     const languageMap = {
         english: 'EN',
@@ -24,18 +34,14 @@
     <article class="article flex flex-col gap-2 w-full">
         <div class="cover rounded-2xl border dark:border-gray-700 liftable">
             <div class="image overflow-hidden">
-                <Image
-                    src={hentai.images.cover.link}
-                    width={hentai.images.cover.info.width}
-                    height={hentai.images.cover.info.height}
-                />
+                <Image src={link} {width} {height} />
             </div>
         </div>
 
         <header class="flex flex-1 flex-col gap-1 text-gray-400 text-sm w-full">
             <div class="flex flex-row w-full">
                 <h5 class="inline-flex items-center flex-1 text-base">
-                    {hentai.title.display}
+                    {display}
                 </h5>
             </div>
 
@@ -48,19 +54,19 @@
                         src="/icons/language.svg"
                         alt="Add"
                     />
-                    {mapLanguage(hentai.metadata.language)}
+                    {mapLanguage(language)}
                 </p>
                 <p class="flex flex-[4] items-center gap-1 capitalize">
                     <img
                         class="w-3.5 h-3.5"
                         src="/icons/book-open.svg"
                         alt="Add"
                     />
-                    {hentai.info.amount}
+                    {amount}
                 </p>
                 <p class="flex flex-[4] items-center gap-1 capitalize">
                     <img class="w-3.5 h-3.5" src="/icons/heart.svg" alt="Add" />
-                    {reduceNumber(hentai.info.favorite)}
+                    {reduceNumber(favorite)}
                 </p>
             </div>
         </header>

src/lib/atoms/image.svelte → src/components/shared/image.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import intersect from '$lib/use/intersect'
-
-    import settings, { SafeMode } from '$lib/stores/settings'
+    import { settings, SafeMode } from '@stores'
+    import { intersect } from '@services'
 
     import { RefreshCwIcon } from 'svelte-feather-icons'
 

src/components/shared/index.ts

@@ -0,0 +1,16 @@
+export { default as Analytic } from './analytic.svelte'
+export { default as Chip } from './chip.svelte'
+export { default as Comment } from './comment.svelte'
+export { default as Cover } from './cover.svelte'
+export { default as Dropdown } from './dropdown.svelte'
+export { default as Image } from './image.svelte'
+export { default as Maintainance } from './maintainance.svelte'
+export { default as MemberOnly } from './member-only.svelte'
+export { default as NotFound } from './not-found.svelte'
+export { default as OpenGraph } from './open-graph.svelte'
+export { default as ProgressIndicator } from './progress-indicator.svelte'
+export { default as ReaderButton } from './reader-button.svelte'
+export { default as ReaderHeader } from './reader-header.svelte'
+export { default as SearchNotFound } from './search-not-found.svelte'
+export { default as TextField } from './textfield.svelte'
+export { default as Toggle } from './toggle.svelte'

src/lib/atoms/open-graph.svelte → src/components/shared/open-graph.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores'
 
-    import { darkTheme } from '$lib/stores/settings'
+    import { darkTheme } from '@stores/settings'
 
     let asPath = $page.url.pathname
 

src/lib/atoms/progress-indicator.svelte → src/components/shared/progress-indicator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { darkTheme } from '$lib/stores/settings'
+    import { darkTheme } from '@stores'
 
     export let stroke = $darkTheme ? '#fff' : '#000'
 </script>

src/lib/atoms/reader-button.svelte → src/components/shared/reader-button.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-    import settings, { ReaderType } from '$lib/stores/settings'
+    import { settings, ReaderType } from '@stores'
 
     export let type: ReaderType
     export let label: string
 
     $: isActive = $settings.reader === type
-    $: active = isActive ? 'text-blue-500 bg-gray-100 dark:bg-gray-700 pr-2' : ''
+    $: active = isActive
+        ? 'text-blue-500 bg-gray-100 dark:bg-gray-700 pr-2'
+        : ''
 
     const saveType = () => {
         settings.update((v) => ({