Various QOL changes

src/lib/components/Settings/QuickAccess.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
   import { toggleFullScreen } from '$lib/panzoom';
   import { isReader } from '$lib/util';
 
@@ -10,7 +8,6 @@
 {#if isReader()}
   <div class="flex flex-col gap-2">
     <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
-    <Button color="alternative" on:click={() => goto(`/${$page.params.manga}`)}>Close reader</Button
-    >
+    <Button color="alternative" on:click={() => history.back()}>Close reader</Button>
   </div>
 {/if}

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

@@ -4,9 +4,14 @@
   import ReaderToggles from './ReaderToggles.svelte';
   import { settings, updateSetting } from '$lib/settings';
 
-  let value = $settings.swipeThreshold;
-  function onChange() {
-    updateSetting('swipeThreshold', value);
+  let swipeThresholdValue = $settings.swipeThreshold;
+  let edgeButtonWidthValue = $settings.edgeButtonWidth;
+  function onSwipeChange() {
+    updateSetting('swipeThreshold', swipeThresholdValue);
+  }
+
+  function onWidthChange() {
+    updateSetting('edgeButtonWidth', edgeButtonWidthValue);
   }
 </script>
 
@@ -18,7 +23,17 @@
     <ReaderToggles />
     <div>
       <Label>Swipe threshold</Label>
-      <Range on:change={onChange} min={20} max={90} disabled={!$settings.mobile} bind:value />
+      <Range
+        on:change={onSwipeChange}
+        min={20}
+        max={90}
+        disabled={!$settings.mobile}
+        bind:value={swipeThresholdValue}
+      />
+    </div>
+    <div>
+      <Label>Edge button width</Label>
+      <Range on:change={onWidthChange} min={1} max={100} bind:value={edgeButtonWidthValue} />
     </div>
   </div>
 </AccordionItem>

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

@@ -10,7 +10,8 @@
     { key: 'pageNum', text: 'Show page number', value: $settings.pageNum },
     { key: 'charCount', text: 'Show character count', value: $settings.charCount },
     { key: 'mobile', text: 'Mobile', value: $settings.mobile },
-    { key: 'showTimer', text: 'Show timer', value: $settings.showTimer }
+    { key: 'showTimer', text: 'Show timer', value: $settings.showTimer },
+    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions }
   ] as { key: SettingsKey; text: string; value: any }[];
 </script>
 

src/lib/components/Settings/Settings.svelte

@@ -13,6 +13,7 @@
   import VolumeSettings from './Volume/VolumeSettings.svelte';
   import About from './About.svelte';
   import QuickAccess from './QuickAccess.svelte';
+  import { beforeNavigate } from '$app/navigation';
 
   let transitionParams = {
     x: 320,
@@ -30,6 +31,13 @@
   function onClose() {
     hidden = true;
   }
+
+  beforeNavigate((nav) => {
+    if (!hidden) {
+      nav.cancel();
+      hidden = true;
+    }
+  });
 </script>
 
 <Drawer

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

@@ -3,13 +3,13 @@
   import { AccordionItem, Helper, Toggle } from 'flowbite-svelte';
 
   $: toggles = [
-    { key: 'rightToLeft', text: 'Right to left', value: $settings.volumeDefaults.rightToLeft },
+    { key: 'rightToLeft', text: 'Right to left', value: $settings.volumeDefaults?.rightToLeft },
     {
       key: 'singlePageView',
       text: 'Single page view',
-      value: $settings.volumeDefaults.singlePageView
+      value: $settings.volumeDefaults?.singlePageView
     },
-    { key: 'hasCover', text: 'First page is cover', value: $settings.volumeDefaults.hasCover }
+    { key: 'hasCover', text: 'First page is cover', value: $settings.volumeDefaults?.hasCover }
   ] as { key: VolumeDefaultsKey; text: string; value: any }[];
 </script>