Add misc settings + misc cleanup

src/lib/components/Catalog.svelte

@@ -1,17 +1,41 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
-  import { Button, Search } from 'flowbite-svelte';
+  import { Button, Search, Listgroup } from 'flowbite-svelte';
   import CatalogItem from './CatalogItem.svelte';
   import Loader from './Loader.svelte';
-  import { GridOutline, SortOutline } from 'flowbite-svelte-icons';
+  import { GridOutline, SortOutline, ListOutline } from 'flowbite-svelte-icons';
+  import { miscSettings, updateMiscSetting } from '$lib/settings';
+  import CatalogListItem from './CatalogListItem.svelte';
 
   $: sortedCatalog = $catalog
-    ?.sort((a, b) => a.manga[0].mokuroData.title.localeCompare(b.manga[0].mokuroData.title))
+    ?.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}
@@ -19,8 +43,16 @@
     <div class="flex flex-col gap-5">
       <div class="flex gap-1 py-2">
         <Search bind:value={search} />
-        <!-- <Button size="sm" color="alternative"><GridOutline /></Button>
-        <Button size="sm" color="alternative"><SortOutline /></Button> -->
+        <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">
@@ -28,9 +60,17 @@
         </div>
       {:else}
         <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
-          {#each sortedCatalog as { id } (id)}
-            <CatalogItem {id} />
-          {/each}
+          {#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>