Flesh out volume data

src/lib/components/Settings/Settings.svelte

@@ -8,6 +8,7 @@
   import ReaderSettings from './Reader/ReaderSettings.svelte';
   import Profiles from './Profiles/Profiles.svelte';
   import CatalogSettings from './CatalogSettings.svelte';
+  import Stats from './Stats.svelte';
 
   let transitionParams = {
     x: 320,
@@ -47,6 +48,7 @@
       <AnkiConnectSettings />
       <Profiles />
       <CatalogSettings />
+      <Stats />
     </Accordion>
     <div class="flex flex-col gap-2">
       <Button outline on:click={onReset}>Reset</Button>

src/lib/components/Settings/Stats.svelte

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