Settings cleanup

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Select, Input, Label } from 'flowbite-svelte';
+  import { settings, updateSetting } from '$lib/settings';
+  import type { SettingsKey } from '$lib/settings';
+
+  $: zoomModeValue = $settings.zoomDefault;
+  $: fontSizeValue = $settings.fontSize;
+
+  let zoomModes = [
+    { value: 'zoomFitToScreen', name: 'Fit to screen' },
+    { value: 'zoomFitToWidth', name: 'Fit to width' },
+    { value: 'zoomOriginal', name: 'Original size' },
+    { value: 'keepZoom', name: 'Keep zoom' },
+    { value: 'keepZoomStart', name: 'Keep zoom, pan to top' }
+  ];
+
+  let fontSizes = [
+    { value: 'auto', name: 'auto' },
+    { value: '9', name: '9' },
+    { value: '10', name: '10' },
+    { value: '11', name: '11' },
+    { value: '12', name: '12' },
+    { value: '14', name: '14' },
+    { value: '16', name: '16' },
+    { value: '18', name: '18' },
+    { value: '20', name: '20' },
+    { value: '24', name: '24' },
+    { value: '32', name: '32' },
+    { value: '40', name: '40' },
+    { value: '48', name: '48' },
+    { value: '60', name: '60' }
+  ];
+
+  function onBackgroundColor(event: Event) {
+    updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
+  }
+
+  function onSelectChange(event: Event, setting: SettingsKey) {
+    updateSetting(setting, (event.target as HTMLInputElement).value);
+  }
+</script>
+
+<div>
+  <Label>On page zoom:</Label>
+  <Select
+    items={zoomModes}
+    value={zoomModeValue}
+    on:change={(e) => onSelectChange(e, 'zoomDefault')}
+  />
+</div>
+<div>
+  <Label>Fontsize:</Label>
+  <Select
+    items={fontSizes}
+    value={fontSizeValue}
+    on:change={(e) => onSelectChange(e, 'fontSize')}
+  />
+</div>
+<div>
+  <Label>Background color:</Label>
+  <Input type="color" on:change={onBackgroundColor} value={$settings.backgroundColor} />
+</div>