From c7125a19ec783967b3757540f3debc088abba045 Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Fri, 26 May 2023 04:29:28 +0900
Subject: [PATCH] [feat] splited accesiblity settings

---
 src/lang/en.ts                                |  1 +
 src/lang/ko.ts                                |  1 +
 .../Pages/AccessibilitySettings.svelte        | 22 +++++++++++++++++++
 src/lib/Setting/Pages/DisplaySettings.svelte  | 20 -----------------
 src/lib/Setting/Pages/LanguageSettings.svelte | 12 ++++++++--
 src/lib/Setting/Settings.svelte               | 11 +++++++++-
 6 files changed, 44 insertions(+), 23 deletions(-)
 create mode 100644 src/lib/Setting/Pages/AccessibilitySettings.svelte

diff --git a/src/lang/en.ts b/src/lang/en.ts
index e9de7f78..ab3b2f57 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -278,4 +278,5 @@ export const languageEnglish = {
     charLoreBook: 'Character Lorebook',
     globalLoreBook: 'Global Lorebook',
     globalRegexScript: "Global Regex",
+    accessibility: "Accessibility"
 }
\ No newline at end of file
diff --git a/src/lang/ko.ts b/src/lang/ko.ts
index 5ebbd3ff..9cc0cf87 100644
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -257,4 +257,5 @@ export const languageKorean = {
     charLoreBook: '캐릭터 로어북',
     globalLoreBook: '글로벌 로어북',
     globalRegexScript: "글로별 정규식",
+    accessibility: "접근성"
 }
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/AccessibilitySettings.svelte b/src/lib/Setting/Pages/AccessibilitySettings.svelte
new file mode 100644
index 00000000..a45b17f8
--- /dev/null
+++ b/src/lib/Setting/Pages/AccessibilitySettings.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import Check from "src/lib/Others/Check.svelte";
+    import { language } from "src/lang";
+    import { DataBase } from "src/ts/database";
+
+</script>
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.accessibility}</h2>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.askRemoval}/>
+    <span>{language.askRemoval}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.swipe}/>
+    <span>{language.SwipeRegenerate}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.instantRemove}/>
+    <span>{language.instantRemove}</span>
+</div>
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index b3d27fc4..3d24eff6 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -61,10 +61,6 @@
 <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.iconsize}>
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.autoTranslate} />
-    <span>{language.autoTranslation}</span>
-</div>
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen}/>
     <span>{language.fullscreen}</span>
@@ -99,27 +95,11 @@
     <span>{language.playMessage} <Help key="msgSound"/></span>
 </div>
 
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.swipe}/>
-    <span>{language.SwipeRegenerate}</span>
-</div>
-
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.askRemoval}/>
-    <span>{language.askRemoval}</span>
-</div>
-
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.roundIcons}/>
     <span>{language.roundIcons}</span>
 </div>
 
-<div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.instantRemove}/>
-    <span>{language.instantRemove}</span>
-</div>
-
-
 {#if $DataBase.textScreenColor}
     <div class="flex items-center mt-2">
         <Check check={true} onChange={() => {
diff --git a/src/lib/Setting/Pages/LanguageSettings.svelte b/src/lib/Setting/Pages/LanguageSettings.svelte
index e81f2956..dfbf135c 100644
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { changeLanguage, language } from "src/lang";
+    import Check from "src/lib/Others/Check.svelte";
+import { changeLanguage, language } from "src/lang";
     import { DataBase } from "src/ts/database";
     import { sleep } from "src/ts/util";
     let langChanged = false
@@ -27,4 +28,11 @@
     <option value="ja" class="bg-darkbg appearance-none">Japanese</option>
     <option value="fr" class="bg-darkbg appearance-none">French</option>
     <option value="es" class="bg-darkbg appearance-none">Spanish</option>
-</select>
\ No newline at end of file
+</select>
+
+{#if $DataBase.translator}
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.autoTranslate} />
+        <span>{language.autoTranslation}</span>
+    </div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte
index 764e0eaa..f3f11252 100644
--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
+    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import DisplaySettings from "./Pages/DisplaySettings.svelte";
     import UserSettings from "./Pages/UserSettings.svelte";
@@ -15,6 +15,7 @@
     import Lorepreset from "./lorepreset.svelte";
   import GlobalRegex from "./Pages/GlobalRegex.svelte";
   import LanguageSettings from "./Pages/LanguageSettings.svelte";
+  import AccessibilitySettings from "./Pages/AccessibilitySettings.svelte";
     let selected = -1
     let openPresetList = false
     let openLoreList = false
@@ -58,6 +59,12 @@
                     <LanguagesIcon />
                     <span>{language.language}</span>
                 </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 11} on:click={() => {
+                    selected = 11
+                }}>
+                    <AccessibilityIcon />
+                    <span>{language.accessibility}</span>
+                </button>
                 <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 8} on:click={() => {
                     selected = 8
                 }}>
@@ -125,6 +132,8 @@
                     <GlobalRegex/>
                 {:else if selected === 10}
                     <LanguageSettings/>
+                {:else if selected === 11}
+                    <AccessibilitySettings/>
                 {/if}
                 <button class="absolute top-2 right-2 hover:text-green-500" on:click={() => {
                     if(window.innerWidth >= 700){