Settings cleanup

src/lib/components/Reader/Reader.svelte

@@ -16,6 +16,8 @@
   import { page as pageStore } from '$app/stores';
   import SettingsButton from './SettingsButton.svelte';
 
+  // TODO: Refactor this whole mess
+
   $: volume = $catalog
     ?.find((item) => item.id === $pageStore.params.manga)
     ?.manga.find((item) => item.mokuroData.volume_uuid === $pageStore.params.volume);

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

@@ -2,10 +2,10 @@
   import { AccordionItem } from 'flowbite-svelte';
   import ReaderSelects from './ReaderSelects.svelte';
   import ReaderToggles from './ReaderToggles.svelte';
-  import { page } from '$app/stores';
+  import { isReader } from '$lib/util';
 </script>
 
-<AccordionItem open={$page.route.id === '/[manga]/[volume]'}>
+<AccordionItem>
   <span slot="header">Reader</span>
   <div class="flex flex-col gap-5">
     <ReaderSelects />

src/lib/components/Settings/Settings.svelte

@@ -5,8 +5,9 @@
   import { resetSettings } from '$lib/settings';
   import { promptConfirmation } from '$lib/util';
   import AnkiConnectSettings from './AnkiConnectSettings.svelte';
-  import ReaderSettings from './ReaderSettings.svelte';
+  import ReaderSettings from './Reader/ReaderSettings.svelte';
-  import Profiles from './Profiles.svelte';
+  import VolumeSettings from './VolumeSettings.svelte';
+  // import Profiles from './Profiles.svelte';
 
   let transitionParams = {
     x: 320,
@@ -42,9 +43,10 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
+      <VolumeSettings />
       <ReaderSettings />
       <AnkiConnectSettings />
-      <Profiles />
+      <!-- <Profiles /> -->
     </Accordion>
     <div class="flex flex-col gap-2">
       <Button outline on:click={onReset}>Reset</Button>

src/lib/components/Settings/VolumeSettings.svelte

@@ -0,0 +1,14 @@
+<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}

src/lib/reader/index.ts

@@ -0,0 +1 @@
+// TODO: Make reader navigation less awful

src/lib/settings/index.ts

@@ -1,120 +1,2 @@
-import { browser } from '$app/environment';
+export * from './progress'
-import { zoomDefault } from '$lib/panzoom';
+export * from './settings'
-import { writable } from 'svelte/store';
-
-export type FontSize =
-  | 'auto'
-  | '9'
-  | '10'
-  | '11'
-  | '12'
-  | '14'
-  | '16'
-  | '18'
-  | '20'
-  | '24'
-  | '32'
-  | '40'
-  | '48'
-  | '60';
-
-export type ZoomModes =
-  | 'zoomFitToScreen'
-  | 'zoomFitToWidth'
-  | 'zoomOriginal'
-  | 'keepZoom'
-  | 'keepZoomStart';
-
-export type Settings = {
-  rightToLeft: boolean;
-  singlePageView: boolean;
-  textEditable: boolean;
-  textBoxBorders: boolean;
-  displayOCR: boolean;
-  boldFont: boolean;
-  pageNum: boolean;
-  charCount: boolean;
-  hasCover: boolean;
-  mobile: boolean;
-  backgroundColor: string;
-  fontSize: FontSize;
-  zoomDefault: ZoomModes;
-  ankiConnectSettings: AnkiConnectSettings;
-};
-
-export type SettingsKey = keyof Settings;
-
-export type AnkiConnectSettings = {
-  enabled: boolean;
-  pictureField: string;
-  sentenceField: string;
-  cropImage: boolean;
-  overwriteImage: boolean;
-  grabSentence: boolean;
-}
-
-export type AnkiSettingsKey = keyof AnkiConnectSettings;
-
-
-const defaultSettings: Settings = {
-  rightToLeft: true,
-  singlePageView: false,
-  hasCover: false,
-  displayOCR: true,
-  textEditable: false,
-  textBoxBorders: false,
-  boldFont: false,
-  pageNum: true,
-  charCount: false,
-  mobile: false,
-  backgroundColor: '#030712',
-  fontSize: 'auto',
-  zoomDefault: 'zoomFitToScreen',
-  ankiConnectSettings: {
-    enabled: false,
-    cropImage: false,
-    grabSentence: false,
-    overwriteImage: true,
-    pictureField: 'Picture',
-    sentenceField: 'Sentence'
-  }
-};
-
-const stored = browser ? window.localStorage.getItem('settings') : undefined;
-const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings;
-
-export * from './progress';
-
-export const settings = writable<Settings>(initialSettings);
-
-export function updateSetting(key: SettingsKey, value: any) {
-  settings.update((settings) => {
-    return {
-      ...settings,
-      [key]: value
-    };
-  });
-  zoomDefault();
-}
-
-export function updateAnkiSetting(key: AnkiSettingsKey, value: any) {
-  settings.update((settings) => {
-    return {
-      ...settings,
-      ankiConnectSettings: {
-        ...settings.ankiConnectSettings,
-        [key]: value
-      }
-    };
-  });
-}
-
-export function resetSettings() {
-  settings.set(defaultSettings);
-}
-
-settings.subscribe((settings) => {
-  if (browser) {
-    window.localStorage.setItem('settings', JSON.stringify(settings));
-  }
-});

src/lib/settings/settings.ts

@@ -0,0 +1,119 @@
+import { browser } from '$app/environment';
+import { zoomDefault } from '$lib/panzoom';
+import { writable } from 'svelte/store';
+
+export type FontSize =
+  | 'auto'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '14'
+  | '16'
+  | '18'
+  | '20'
+  | '24'
+  | '32'
+  | '40'
+  | '48'
+  | '60';
+
+export type ZoomModes =
+  | 'zoomFitToScreen'
+  | 'zoomFitToWidth'
+  | 'zoomOriginal'
+  | 'keepZoom'
+  | 'keepZoomStart';
+
+export type Settings = {
+  rightToLeft: boolean;
+  singlePageView: boolean;
+  textEditable: boolean;
+  textBoxBorders: boolean;
+  displayOCR: boolean;
+  boldFont: boolean;
+  pageNum: boolean;
+  charCount: boolean;
+  hasCover: boolean;
+  mobile: boolean;
+  backgroundColor: string;
+  fontSize: FontSize;
+  zoomDefault: ZoomModes;
+  ankiConnectSettings: AnkiConnectSettings;
+};
+
+export type SettingsKey = keyof Settings;
+
+export type AnkiConnectSettings = {
+  enabled: boolean;
+  pictureField: string;
+  sentenceField: string;
+  cropImage: boolean;
+  overwriteImage: boolean;
+  grabSentence: boolean;
+}
+
+export type AnkiSettingsKey = keyof AnkiConnectSettings;
+
+
+const defaultSettings: Settings = {
+  rightToLeft: true,
+  singlePageView: false,
+  hasCover: false,
+  displayOCR: true,
+  textEditable: false,
+  textBoxBorders: false,
+  boldFont: false,
+  pageNum: true,
+  charCount: false,
+  mobile: false,
+  backgroundColor: '#030712',
+  fontSize: 'auto',
+  zoomDefault: 'zoomFitToScreen',
+  ankiConnectSettings: {
+    enabled: false,
+    cropImage: false,
+    grabSentence: false,
+    overwriteImage: true,
+    pictureField: 'Picture',
+    sentenceField: 'Sentence'
+  }
+};
+
+const stored = browser ? window.localStorage.getItem('settings') : undefined;
+const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings;
+
+
+export const settings = writable<Settings>(initialSettings);
+
+export function updateSetting(key: SettingsKey, value: any) {
+  settings.update((settings) => {
+    return {
+      ...settings,
+      [key]: value
+    };
+  });
+  zoomDefault();
+}
+
+export function updateAnkiSetting(key: AnkiSettingsKey, value: any) {
+  settings.update((settings) => {
+    return {
+      ...settings,
+      ankiConnectSettings: {
+        ...settings.ankiConnectSettings,
+        [key]: value
+      }
+    };
+  });
+}
+
+export function resetSettings() {
+  settings.set(defaultSettings);
+}
+
+settings.subscribe((settings) => {
+  if (browser) {
+    window.localStorage.setItem('settings', JSON.stringify(settings));
+  }
+});

src/lib/util/misc.ts

@@ -1,3 +1,10 @@
+import { page } from "$app/stores";
+import { get } from "svelte/store";
+
 export function clamp(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max);
 }
+
+export function isReader() {
+  return get(page).route.id === '/[manga]/[volume]'
+}