Refactor stats, add derived catalog stores, improve timer

src/lib/components/Settings/Reader/ReaderToggles.svelte

@@ -9,7 +9,8 @@
     { key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
     { key: 'pageNum', text: 'Show page number', value: $settings.pageNum },
     { key: 'charCount', text: 'Show character count', value: $settings.charCount },
-    { key: 'mobile', text: 'Mobile', value: $settings.mobile }
+    { key: 'mobile', text: 'Mobile', value: $settings.mobile },
+    { key: 'showTimer', text: 'Show timer', value: $settings.showTimer }
   ] as { key: SettingsKey; text: string; value: any }[];
 </script>
 

src/lib/components/Settings/Stats.svelte

@@ -1,44 +1,14 @@
 <script lang="ts">
-  import { volumes } from '$lib/settings';
-  import { AccordionItem, P } from 'flowbite-svelte';
-
-  $: completed = $volumes
-    ? Object.values($volumes).reduce((total: number, { completed }) => {
-        if (completed) {
-          total++;
-        }
-        return total;
-      }, 0)
-    : 0;
-
-  $: pagesRead = $volumes
-    ? Object.values($volumes).reduce((total: number, { progress }) => {
-        total += progress;
-        return total;
-      }, 0)
-    : 0;
-
-  $: charsRead = $volumes
-    ? Object.values($volumes).reduce((total: number, { chars }) => {
-        total += chars;
-        return total;
-      }, 0)
-    : 0;
-
-  $: minutesRead = $volumes
-    ? Object.values($volumes).reduce((total: number, { timeReadInMinutes }) => {
-        total += timeReadInMinutes;
-        return total;
-      }, 0)
-    : 0;
+  import { totalStats } from '$lib/settings';
+  import { AccordionItem } from 'flowbite-svelte';
 </script>
 
 <AccordionItem>
   <span slot="header">Stats</span>
   <div>
-    <p>Completed volumes: {completed}</p>
-    <p>Pages read: {pagesRead}</p>
-    <p>Characters read: {charsRead}</p>
-    <p>Minutes read: {minutesRead}</p>
+    <p>Completed volumes: {$totalStats?.completed || 0}</p>
+    <p>Pages read: {$totalStats?.pagesRead || 0}</p>
+    <p>Characters read: {$totalStats?.charsRead || 0}</p>
+    <p>Minutes read: {$totalStats?.minutesRead || 0}</p>
   </div>
 </AccordionItem>