[feat] splited accesiblity settings

src/lang/en.ts

@@ -278,4 +278,5 @@ export const languageEnglish = {
     charLoreBook: 'Character Lorebook',
     globalLoreBook: 'Global Lorebook',
     globalRegexScript: "Global Regex",
+    accessibility: "Accessibility"
 }

src/lang/ko.ts

@@ -257,4 +257,5 @@ export const languageKorean = {
     charLoreBook: '캐릭터 로어북',
     globalLoreBook: '글로벌 로어북',
     globalRegexScript: "글로별 정규식",
+    accessibility: "접근성"
 }

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>

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={() => {

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>
+</select>
+
+{#if $DataBase.translator}
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.autoTranslate} />
+        <span>{language.autoTranslation}</span>
+    </div>
+{/if}

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){