Add single volume deletion

src/lib/components/VolumeItem.svelte

@@ -1,40 +1,72 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { progress } from '$lib/settings';
+  import { deleteVolume, progress } from '$lib/settings';
   import type { Volume } from '$lib/types';
-  import { ListgroupItem } from 'flowbite-svelte';
-  import { CheckCircleSolid } from 'flowbite-svelte-icons';
-  import type { ListGroupItemType } from 'flowbite-svelte/dist/types';
+  import { promptConfirmation } from '$lib/util';
+  import { ListgroupItem, Frame } from 'flowbite-svelte';
+  import { CheckCircleSolid, TrashBinSolid } from 'flowbite-svelte-icons';
+  import { goto } from '$app/navigation';
+  import { db } from '$lib/catalog/db';
 
-  export let item: string | ListGroupItemType;
-  const volume = item as Volume;
+  export let volume: Volume;
 
   const { volumeName, mokuroData } = volume as Volume;
+  const { title_uuid, volume_uuid } = mokuroData;
+  const volName = decodeURI(volumeName);
 
-  $: currentPage = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
+  $: currentPage = $progress?.[volume_uuid || 0] || 1;
   $: progressDisplay = `${
     currentPage === volume.mokuroData.pages.length - 1 ? currentPage + 1 : currentPage
   } / ${volume.mokuroData.pages.length}`;
   $: isComplete =
     currentPage === volume.mokuroData.pages.length ||
     currentPage === volume.mokuroData.pages.length - 1;
+
+  async function onDeleteClicked(e: Event) {
+    e.stopPropagation();
+
+    promptConfirmation(`Delete ${volName}?`, async () => {
+      const existingCatalog = await db.catalog.get(title_uuid);
+      const updated = existingCatalog?.manga.filter(({ mokuroData }) => {
+        return mokuroData.volume_uuid !== volume_uuid;
+      });
+
+      deleteVolume(volume_uuid);
+      if (updated && updated.length > 0) {
+        await db.catalog.update(title_uuid, { manga: updated });
+        goto(`/${$page.params.manga}`);
+      } else {
+        db.catalog.delete(title_uuid);
+        goto('/');
+      }
+    });
+  }
 </script>
 
 {#if $page.params.manga}
-  <a href={`/${$page.params.manga}/${mokuroData.volume_uuid}`} class="h-full w-full">
-    <ListgroupItem>
+  <Frame rounded border class="divide-y divide-gray-200 dark:divide-gray-600">
+    <ListgroupItem
+      on:click={() => goto(`/${$page.params.manga}/${volume_uuid}`)}
+      normalClass="py-4"
+    >
       <div
         class:text-green-400={isComplete}
         class="flex flex-row gap-5 items-center justify-between w-full"
       >
         <div>
-          <p class="font-semibold" class:text-white={!isComplete}>{decodeURI(volumeName)}</p>
+          <p class="font-semibold" class:text-white={!isComplete}>{volName}</p>
           <p>{progressDisplay}</p>
         </div>
+        <div class="flex gap-2">
+          <TrashBinSolid
+            class="text-red-400 hover:text-red-500 z-10 poin"
+            on:click={onDeleteClicked}
+          />
           {#if isComplete}
             <CheckCircleSolid />
           {/if}
         </div>
+      </div>
     </ListgroupItem>
-  </a>
+  </Frame>
 {/if}

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

@@ -21,23 +21,6 @@
 
   $: manga = $catalog?.find((item) => item.id === $page.params.manga)?.manga.sort(sortManga);
 
-  $: stats = manga
-    ?.map((vol) => vol.mokuroData.volume_uuid)
-    ?.reduce(
-      (stats: any, volumeId) => {
-        const timeReadInMinutes = $volumes[volumeId]?.timeReadInMinutes || 0;
-        const chars = $volumes[volumeId]?.chars || 0;
-        const completed = $volumes[volumeId]?.completed || 0;
-
-        stats.timeReadInMinutes = stats.timeReadInMinutes + timeReadInMinutes;
-        stats.chars = stats.chars + chars;
-        stats.completed = stats.completed + completed;
-
-        return stats;
-      },
-      { timeReadInMinutes: 0, chars: 0, completed: 0 }
-    );
-
   $: loading = false;
 
   async function confirmDelete() {
@@ -84,8 +67,10 @@
         </Button>
       </div>
     </div>
-    <Listgroup items={manga} let:item active class="flex-1 h-full w-full">
-      <VolumeItem {item} />
+    <Listgroup active class="flex-1 h-full w-full">
+      {#each manga as volume (volume.mokuroData.volume_uuid)}
+        <VolumeItem {volume} />
+      {/each}
     </Listgroup>
   </div>
 {:else}