[feat] splited accesiblity settings

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}