Refactor catalog

src/lib/components/VolumeItem.svelte

@@ -1,25 +1,30 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { currentVolume } from '$lib/catalog';
+  import { progress } from '$lib/settings';
   import type { Volume } from '$lib/types';
+  import { ListgroupItem } from 'flowbite-svelte';
+  import type { ListGroupItemType } from 'flowbite-svelte/dist/types';
 
-  export let volume: Volume;
-  const { volumeName, files } = volume;
+  export let item: string | ListGroupItemType;
+  const volume = item as Volume;
+
+  const { volumeName, mokuroData } = volume as Volume;
 
   function onClick() {
-    currentVolume.set(volume);
+    goto(`${$page.params.manga}/${mokuroData.volume_uuid}`);
   }
+
+  $: currentPage = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
+
+  $: progressDisplay = `${currentPage} / ${volume.mokuroData.pages.length}`;
 </script>
 
-<a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
-  <div class="flex flex-col gap-[5px] text-center items-center">
-    {volumeName}
-    {#if files}
-      <img
-        src={URL.createObjectURL(Object.values(files)[0])}
-        alt="img"
-        class="object-contain sm:w-[250px] h-[350px] bg-black border-gray-900 border"
-      />
-    {/if}
-  </div>
+<a href={`${$page.params.manga}/${mokuroData.volume_uuid}`} class="h-full w-full">
+  <ListgroupItem>
+    <div>
+      <h3 class="font-semibold">{volumeName}</h3>
+      <p>{progressDisplay}</p>
+    </div>
+  </ListgroupItem>
 </a>