Add volume settings

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>