From a2f59640af68d52cbb1c369deaca15151ec784f7 Mon Sep 17 00:00:00 2001
From: Shaun <zxy101@Shauns-MacBook-Pro.local>
Date: Mon, 13 Nov 2023 15:20:00 +0900
Subject: [PATCH] Adjust settings buttons

---
 src/lib/components/Settings/QuickAccess.svelte   | 16 ++++++++++++++++
 src/lib/components/Settings/Settings.svelte      |  2 ++
 .../Settings/Volume/VolumeSettings.svelte        |  5 ++---
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/Settings/QuickAccess.svelte

diff --git a/src/lib/components/Settings/QuickAccess.svelte b/src/lib/components/Settings/QuickAccess.svelte
new file mode 100644
index 0000000..072bb65
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/Settings/Settings.svelte b/src/lib/components/Settings/Settings.svelte
index a4944cc..bdbf34c 100644
--- a/src/lib/components/Settings/Settings.svelte
+++ b/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}
diff --git a/src/lib/components/Settings/Volume/VolumeSettings.svelte b/src/lib/components/Settings/Volume/VolumeSettings.svelte
index be12206..45aea61 100644
--- a/src/lib/components/Settings/Volume/VolumeSettings.svelte
+++ b/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>