Various styling updates

src/lib/components/CatalogItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
+  import { P } from 'flowbite-svelte';
 
   export let id: string;
 
@@ -8,15 +9,15 @@
 
 {#if manga}
   <a href={id}>
-    <div class="flex flex-col gap-[5px] text-center items-center">
-      {manga.mokuroData.title}
+    <div class="flex flex-col gap-[5px] text-center items-center bg-slate-900 pb-1">
       {#if manga.files}
         <img
           src={URL.createObjectURL(Object.values(manga.files)[0])}
           alt="img"
-          class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
+          class="object-contain sm:w-[250px] sm:h-[350px] bg-black border-gray-900 border"
         />
       {/if}
+      <p class="font-semibold">{manga.mokuroData.title}</p>
     </div>
   </a>
 {/if}

src/lib/components/Reader/Reader.svelte

@@ -22,7 +22,7 @@
     ?.find((item) => item.id === $pageStore.params.manga)
     ?.manga.find((item) => item.mokuroData.volume_uuid === $pageStore.params.volume);
 
-  $: pages = volume?.mokuroData.pages;
+  $: pages = volume?.mokuroData.pages || [];
 
   $: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
   $: index = page - 1;
@@ -166,6 +166,8 @@
   $: pages?.length, getMaxCharCount();
 
   function getMaxCharCount() {
+    maxCharCount = 0;
+
     if (pages && pages.length > 0) {
       for (let i = 0; i < pages.length; i++) {
         const blocks = pages[i].blocks;
@@ -188,14 +190,19 @@
 <SettingsButton />
 {#if volume && pages}
   <Cropper />
-  <Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
+  <Popover placement="bottom" trigger="click" triggeredBy="#page-num" class="z-20 w-full">
     <div class="flex flex-col gap-3">
       <div class="flex flex-row items-center gap-5 z-10">
         <ChervonDoubleLeftSolid
           on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
           class="hover:text-primary-600"
+          size="sm"
+        />
+        <ChevronLeftSolid
+          on:click={(e) => left(e, true)}
+          class="hover:text-primary-600"
+          size="sm"
         />
-        <ChevronLeftSolid on:click={(e) => left(e, true)} class="hover:text-primary-600" />
         <Input
           type="number"
           size="sm"
@@ -204,10 +211,15 @@
           on:click={onInputClick}
           on:change={onManualPageChange}
         />
-        <ChevronRightSolid on:click={(e) => right(e, true)} class="hover:text-primary-600" />
+        <ChevronRightSolid
+          on:click={(e) => right(e, true)}
+          class="hover:text-primary-600"
+          size="sm"
+        />
         <ChervonDoubleRightSolid
           on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
           class="hover:text-primary-600"
+          size="sm"
         />
       </div>
       <Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
@@ -217,7 +229,7 @@
     <p class="text-left" class:hidden={!$settings.charCount}>{charDisplay}</p>
     <p class="text-left" class:hidden={!$settings.pageNum}>{pageDisplay}</p>
   </button>
-  <div class="flex">
+  <div class="flex" style:background-color={$settings.backgroundColor}>
     <Panzoom>
       <button
         class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"

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
+      class:text-green-400={isComplete}
+      class="flex flex-row gap-5 items-center justify-between w-full"
+    >
       <div>
-      <h3 class="font-semibold">{volumeName}</h3>
+        <p class="font-semibold" class:text-white={!isComplete}>{volumeName}</p>
         <p>{progressDisplay}</p>
       </div>
+      {#if isComplete}
+        <CheckCircleSolid />
+      {/if}
+    </div>
   </ListgroupItem>
 </a>

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
   import { settings } from '$lib/settings';
 </script>
 
-<div class=" h-full min-h-[100svh] text-white" style:background-color={$settings.backgroundColor}>
+<div class=" h-full min-h-[100svh] text-white">
   <NavBar />
   <slot />
   <Snackbar />