Add volume settings

src/lib/components/Settings/Profiles/Profiles.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { changeProfile, currentProfile, profiles } from '$lib/settings';
-
-  import { AccordionItem, Button, Listgroup, Modal, Select } from 'flowbite-svelte';
+  import { AccordionItem, Button, Select } from 'flowbite-svelte';
   import ManageProfilesModal from './ManageProfilesModal.svelte';
 
+  export let onClose: () => void;
+
   $: items = Object.keys($profiles).map((id) => {
     return { value: id, name: id };
   });
@@ -12,6 +13,7 @@
 
   function onChange() {
     changeProfile(profile);
+    onClose();
   }
 
   let manageModalOpen = false;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { AccordionItem, Label, Range } from 'flowbite-svelte';
+  import { AccordionItem, Button, Label, Range } from 'flowbite-svelte';
   import ReaderSelects from './ReaderSelects.svelte';
   import ReaderToggles from './ReaderToggles.svelte';
-  import { isReader } from '$lib/util';
   import { settings, updateSetting } from '$lib/settings';
 
   let value = $settings.swipeThreshold;
@@ -11,7 +10,7 @@
   }
 </script>
 
-<AccordionItem open={isReader()}>
+<AccordionItem>
   <span slot="header">Reader</span>
   <div class="flex flex-col gap-5">
     <ReaderSelects />

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

@@ -3,9 +3,6 @@
   import { Toggle } from 'flowbite-svelte';
 
   $: toggles = [
-    { key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
-    { key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
-    { key: 'hasCover', text: 'First page is cover', value: $settings.hasCover },
     { key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
     { key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
     { key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },

src/lib/components/Settings/Settings.svelte

@@ -3,12 +3,14 @@
   import { UserSettingsSolid } from 'flowbite-svelte-icons';
   import { sineIn } from 'svelte/easing';
   import { resetSettings } from '$lib/settings';
-  import { promptConfirmation } from '$lib/util';
+  import { isReader, promptConfirmation } from '$lib/util';
   import AnkiConnectSettings from './AnkiConnectSettings.svelte';
   import ReaderSettings from './Reader/ReaderSettings.svelte';
   import Profiles from './Profiles/Profiles.svelte';
   import CatalogSettings from './CatalogSettings.svelte';
   import Stats from './Stats.svelte';
+  import VolumeDefaults from './Volume/VolumeDefaults.svelte';
+  import VolumeSettings from './Volume/VolumeSettings.svelte';
 
   let transitionParams = {
     x: 320,
@@ -44,9 +46,14 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
+      {#if isReader()}
+        <VolumeSettings />
+      {:else}
+        <VolumeDefaults />
+      {/if}
+      <Profiles {onClose} />
       <ReaderSettings />
       <AnkiConnectSettings />
-      <Profiles />
       <CatalogSettings />
       <Stats />
     </Accordion>

src/lib/components/Settings/Stats.svelte

@@ -2,22 +2,28 @@
   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);
+  $: completed = $volumes
+    ? Object.values($volumes).reduce((total: number, { completed }) => {
+        if (completed) {
+          total++;
+        }
+        return total;
+      }, 0)
+    : 0;
 
-  $: pagesRead = Object.values($volumes).reduce((total: number, { progress }) => {
-    total += progress;
-    return total;
-  }, 0);
+  $: pagesRead = $volumes
+    ? Object.values($volumes).reduce((total: number, { progress }) => {
+        total += progress;
+        return total;
+      }, 0)
+    : 0;
 
-  $: charsRead = Object.values($volumes).reduce((total: number, { chars }) => {
-    total += chars;
-    return total;
-  }, 0);
+  $: charsRead = $volumes
+    ? Object.values($volumes).reduce((total: number, { chars }) => {
+        total += chars;
+        return total;
+      }, 0)
+    : 0;
 </script>
 
 <AccordionItem>

src/lib/components/Settings/Volume/VolumeDefaults.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { settings, updateVolumeDefaults, type VolumeDefaultsKey } from '$lib/settings';
+  import { AccordionItem, Helper, Toggle } from 'flowbite-svelte';
+
+  $: toggles = [
+    { key: 'rightToLeft', text: 'Right to left', value: $settings.volumeDefaults.rightToLeft },
+    {
+      key: 'singlePageView',
+      text: 'Single page view',
+      value: $settings.volumeDefaults.singlePageView
+    },
+    { key: 'hasCover', text: 'First page is cover', value: $settings.volumeDefaults.hasCover }
+  ] as { key: VolumeDefaultsKey; text: string; value: any }[];
+</script>
+
+<AccordionItem open>
+  <span slot="header">Volume defaults</span>
+  <div class="flex flex-col gap-5">
+    <Helper>The default settings that are applied when you start a new volume</Helper>
+    {#each toggles as { key, text, value }}
+      <Toggle size="small" checked={value} on:change={() => updateVolumeDefaults(key, !value)}
+        >{text}</Toggle
+      >
+    {/each}
+  </div>
+</AccordionItem>

src/lib/components/Settings/Volume/VolumeSettings.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { toggleFullScreen } from '$lib/panzoom';
+  import { updateVolumeSetting, volumeSettings, type VolumeSettingsKey } from '$lib/settings';
+  import { AccordionItem, Button, Helper, Toggle } from 'flowbite-svelte';
+
+  $: settings = $volumeSettings[$page.params.volume];
+
+  $: toggles = [
+    { key: 'rightToLeft', text: 'Right to left', value: settings.rightToLeft },
+    { key: 'singlePageView', text: 'Single page view', value: settings.singlePageView },
+    { key: 'hasCover', text: 'First page is cover', value: settings.hasCover }
+  ] as { key: VolumeSettingsKey; text: string; value: any }[];
+</script>
+
+<AccordionItem open>
+  <span slot="header">Volume settings</span>
+  <div class="flex flex-col gap-5">
+    <Helper>These settings only apply to this volume</Helper>
+    {#each toggles as { key, text, value }}
+      <Toggle
+        size="small"
+        checked={value}
+        on:change={() => updateVolumeSetting($page.params.volume, key, !value)}>{text}</Toggle
+      >
+    {/each}
+    <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
+  </div>
+</AccordionItem>

src/lib/components/Settings/VolumeSettings.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { AccordionItem } from 'flowbite-svelte';
-  import { page } from '$app/stores';
-  import { isReader } from '$lib/util';
-</script>
-
-{#if isReader()}
-  <AccordionItem>
-    <span slot="header">Volume settings</span>
-    <div class="flex flex-col gap-5">sdafsd</div>
-    <div class="flex flex-col gap-5">sdafsd</div>
-    <div class="flex flex-col gap-5">sdafsd</div>
-  </AccordionItem>
-{/if}