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>
-        {#if isComplete}
-          <CheckCircleSolid />
-        {/if}
+        <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}