Merge pull request #9 from ZXY101/zxy101/improvements

Catalog search, sort, order + misc cleanup

src/lib/components/Catalog.svelte

@@ -1,17 +1,78 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
+  import { Button, Search, Listgroup } from 'flowbite-svelte';
   import CatalogItem from './CatalogItem.svelte';
   import Loader from './Loader.svelte';
+  import { GridOutline, SortOutline, ListOutline } from 'flowbite-svelte-icons';
+  import { miscSettings, updateMiscSetting } from '$lib/settings';
+  import CatalogListItem from './CatalogListItem.svelte';
+
+  $: sortedCatalog = $catalog
+    ?.sort((a, b) => {
+      if ($miscSettings.gallerySorting === 'ASC') {
+        return a.manga[0].mokuroData.title.localeCompare(b.manga[0].mokuroData.title);
+      } else {
+        return b.manga[0].mokuroData.title.localeCompare(a.manga[0].mokuroData.title);
+      }
+    })
+    .filter((item) => {
+      return item.manga[0].mokuroData.title.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+    });
+
+  let search = '';
+
+  function onLayout() {
+    if ($miscSettings.galleryLayout === 'list') {
+      updateMiscSetting('galleryLayout', 'grid');
+    } else {
+      updateMiscSetting('galleryLayout', 'list');
+    }
+  }
+
+  function onOrder() {
+    if ($miscSettings.gallerySorting === 'ASC') {
+      updateMiscSetting('gallerySorting', 'DESC');
+    } else {
+      updateMiscSetting('gallerySorting', 'ASC');
+    }
+  }
 </script>
 
 {#if $catalog}
   {#if $catalog.length > 0}
     <div class="flex flex-col gap-5">
+      <div class="flex gap-1 py-2">
+        <Search bind:value={search} />
+        <Button size="sm" color="alternative" on:click={onLayout}>
+          {#if $miscSettings.galleryLayout === 'list'}
+            <GridOutline />
+          {:else}
+            <ListOutline />
+          {/if}
+        </Button>
+        <Button size="sm" color="alternative" on:click={onOrder}>
+          <SortOutline />
+        </Button>
+      </div>
+      {#if search && sortedCatalog.length === 0}
+        <div class="text-center p-20">
+          <p>No results found.</p>
+        </div>
+      {:else}
         <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
-        {#each $catalog as { id } (id)}
+          {#if $miscSettings.galleryLayout === 'grid'}
+            {#each sortedCatalog as { id } (id)}
               <CatalogItem {id} />
             {/each}
+          {:else}
+            <Listgroup active class="w-full">
+              {#each sortedCatalog as { id } (id)}
+                <CatalogListItem {id} />
+              {/each}
+            </Listgroup>
+          {/if}
         </div>
+      {/if}
     </div>
   {:else}
     <div class="text-center p-20">

src/lib/components/CatalogListItem.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { catalog } from '$lib/catalog';
+  import { ListgroupItem } from 'flowbite-svelte';
+
+  export let id: string;
+
+  $: manga = $catalog?.find((item) => item.id === id)?.manga[0];
+</script>
+
+{#if manga}
+  <div>
+    <ListgroupItem>
+      <a href={id} class="h-full w-full">
+        <div class="flex justify-between items-center">
+          <p class="font-semibold text-white">{manga.mokuroData.title}</p>
+          <img
+            src={URL.createObjectURL(Object.values(manga.files)[0])}
+            alt="img"
+            class="object-contain w-[50px] h-[70px] bg-black border-gray-900 border"
+          />
+        </div>
+      </a>
+    </ListgroupItem>
+  </div>
+{/if}

src/lib/components/VolumeItem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { progress } from '$lib/settings';
   import type { Volume } from '$lib/types';
   import { ListgroupItem } from 'flowbite-svelte';
@@ -16,7 +15,7 @@
   $: isComplete = currentPage === volume.mokuroData.pages.length;
 </script>
 
-<a href={`${$page.params.manga}/${mokuroData.volume_uuid}`} class="h-full w-full">
+<a href={`${mokuroData.title_uuid}/${mokuroData.volume_uuid}`} class="h-full w-full">
   <ListgroupItem>
     <div
       class:text-green-400={isComplete}

src/lib/settings/index.ts

@@ -1,2 +1,3 @@
 export * from './volume-data'
 export * from './settings'
+export * from './misc'

src/lib/settings/misc.ts

@@ -0,0 +1,33 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+export type MiscSettings = {
+  galleryLayout: 'grid' | 'list';
+  gallerySorting: 'ASC' | 'DESC';
+};
+
+export type MiscSettingsKey = keyof MiscSettings;
+
+const defaultSettings: MiscSettings = {
+  galleryLayout: 'grid',
+  gallerySorting: 'ASC',
+}
+
+const stored = browser ? window.localStorage.getItem('miscSettings') : undefined;
+
+export const miscSettings = writable<MiscSettings>(stored ? JSON.parse(stored) : defaultSettings);
+
+miscSettings.subscribe((miscSettings) => {
+  if (browser) {
+    window.localStorage.setItem('miscSettings', JSON.stringify(miscSettings));
+  }
+});
+
+export function updateMiscSetting(key: MiscSettingsKey, value: any) {
+  miscSettings.update((miscSettings) => {
+    return {
+      ...miscSettings,
+      [key]: value
+    };
+  });
+}

src/lib/settings/settings.ts

@@ -1,5 +1,4 @@
 import { browser } from '$app/environment';
-import { zoomDefault } from '$lib/panzoom';
 import { derived, get, writable } from 'svelte/store';
 
 export type FontSize =

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Catalog from '$lib/components/Catalog.svelte';
-  import { createProfile, deleteProfile } from '$lib/settings';
 </script>
 
 <svelte:head>

src/routes/[manga]/+page.svelte

@@ -2,7 +2,7 @@
   import { catalog } from '$lib/catalog';
   import { goto } from '$app/navigation';
   import VolumeItem from '$lib/components/VolumeItem.svelte';
-  import { Button, Listgroup, Progressbar, Spinner } from 'flowbite-svelte';
+  import { Button, Listgroup } from 'flowbite-svelte';
   import { db } from '$lib/catalog/db';
   import { promptConfirmation, zipManga } from '$lib/util';
   import { page } from '$app/stores';
@@ -77,7 +77,7 @@
           <p>Minutes read: {stats.timeReadInMinutes}</p>
         </div>
       </div>
-      <div>
+      <div class="sm:block flex-col flex gap-2">
         <Button color="alternative" on:click={onDelete}>Remove manga</Button>
         <Button color="light" on:click={onExtract} disabled={loading}>
           {loading ? 'Extracting...' : 'Extract manga'}