Various styling updates

src/lib/components/VolumeItem.svelte

@@ -4,6 +4,7 @@
   import { 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';
 
   export let item: string | ListGroupItemType;
@@ -11,20 +12,24 @@
 
   const { volumeName, mokuroData } = volume as Volume;
 
-  function onClick() {
-    goto(`${$page.params.manga}/${mokuroData.volume_uuid}`);
-  }
-
   $: currentPage = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
-
   $: progressDisplay = `${currentPage} / ${volume.mokuroData.pages.length}`;
+  $: isComplete = currentPage === volume.mokuroData.pages.length;
 </script>
 
 <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
+      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}>{volumeName}</p>
+        <p>{progressDisplay}</p>
+      </div>
+      {#if isComplete}
+        <CheckCircleSolid />
+      {/if}
     </div>
   </ListgroupItem>
 </a>