Adjust settings buttons

src/lib/components/Settings/QuickAccess.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { toggleFullScreen } from '$lib/panzoom';
+  import { isReader } from '$lib/util';
+
+  import { Button } from 'flowbite-svelte';
+</script>
+
+{#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
+    >
+  </div>
+{/if}

src/lib/components/Settings/Settings.svelte

@@ -12,6 +12,7 @@
   import VolumeDefaults from './Volume/VolumeDefaults.svelte';
   import VolumeSettings from './Volume/VolumeSettings.svelte';
   import About from './About.svelte';
+  import QuickAccess from './QuickAccess.svelte';
 
   let transitionParams = {
     x: 320,
@@ -47,6 +48,7 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
+      <QuickAccess />
       {#if isReader()}
         <VolumeSettings />
       {:else}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { toggleFullScreen, zoomDefault } from '$lib/panzoom';
+  import { zoomDefault } from '$lib/panzoom';
   import {
     updateProgress,
     updateVolumeSetting,
@@ -8,7 +8,7 @@
     volumeSettings,
     type VolumeSettingsKey
   } from '$lib/settings';
-  import { AccordionItem, Button, Helper, Toggle } from 'flowbite-svelte';
+  import { AccordionItem, Helper, Toggle } from 'flowbite-svelte';
 
   const volumeId = $page.params.volume;
 
@@ -37,6 +37,5 @@
     {#each toggles as { key, text, value }}
       <Toggle size="small" checked={value} on:change={() => onChange(key, value)}>{text}</Toggle>
     {/each}
-    <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
   </div>
 </AccordionItem>