web/settings: move accessibility settings to the accessibility page

also rearranged the nav bar a bit to make it look cleaner

... and also accommodated for the new location of accessibility settings (oops)

web/i18n/en/settings.json

@@ -8,6 +8,7 @@
     "page.debug": "info for nerds",
     "page.instances": "instances",
     "page.local": "local processing",
+    "page.accessibility": "accessibility",
 
     "section.general": "general",
     "section.save": "save",
@@ -87,7 +88,8 @@
     "saving.copy": "copy",
     "saving.description": "preferred way of saving the file or link from cobalt. if preferred method is unavailable or something goes wrong, cobalt will ask you what to do next.",
 
-    "accessibility": "accessibility",
+    "accessibility.visual": "visual",
+    "accessibility.haptics": "haptics",
     "accessibility.transparency.title": "reduce visual transparency",
     "accessibility.transparency.description": "transparency of surfaces will be reduced and all blur effects will be disabled. may also improve ui performance on less powerful devices.",
     "accessibility.motion.title": "reduce motion",

web/src/components/donate/DonateOptionsCard.svelte

@@ -75,7 +75,7 @@
         return window.open(donationMethods[processor](amount), "_blank");
     };
 
-    const scrollBehavior = $settings.appearance.reduceMotion
+    const scrollBehavior = $settings.accessibility.reduceMotion
         ? "instant"
         : "smooth";
 

web/src/routes/+layout.svelte

@@ -28,10 +28,10 @@
     import UpdateNotification from "$components/misc/UpdateNotification.svelte";
 
     $: reduceMotion =
-        $settings.appearance.reduceMotion || device.prefers.reducedMotion;
+        $settings.accessibility.reduceMotion || device.prefers.reducedMotion;
 
     $: reduceTransparency =
-        $settings.appearance.reduceTransparency ||
+        $settings.accessibility.reduceTransparency ||
         device.prefers.reducedTransparency;
 
     afterNavigate(async () => {

web/src/routes/settings/+layout.svelte

@@ -11,6 +11,7 @@
 
     import IconLock from "@tabler/icons-svelte/IconLock.svelte";
     import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
+    import IconAccessible from "@tabler/icons-svelte/IconAccessible.svelte";
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
@@ -39,13 +40,13 @@
                 path="/settings/appearance"
                 title={$t("settings.page.appearance")}
                 icon={IconSunHigh}
-                iconColor="purple"
+                iconColor="blue"
             />
             <PageNavTab
-                path="/settings/privacy"
-                title={$t("settings.page.privacy")}
-                icon={IconLock}
-                iconColor="blue"
+                path="/settings/accessibility"
+                title={$t("settings.page.accessibility")}
+                icon={IconAccessible}
+                iconColor="purple"
             />
         </PageNavSection>
 
@@ -86,6 +87,12 @@
         </PageNavSection>
 
         <PageNavSection>
+            <PageNavTab
+                path="/settings/privacy"
+                title={$t("settings.page.privacy")}
+                icon={IconLock}
+                iconColor="gray"
+            />
             <PageNavTab
                 path="/settings/advanced"
                 title={$t("settings.page.advanced")}

web/src/routes/settings/accessibility/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { device } from "$lib/device";
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+</script>
+
+<SettingsCategory
+    sectionId="visual"
+    title={$t("settings.accessibility.visual")}
+>
+    <SettingsToggle
+        settingContext="accessibility"
+        settingId="reduceMotion"
+        title={$t("settings.accessibility.motion.title")}
+        description={$t("settings.accessibility.motion.description")}
+    />
+    <SettingsToggle
+        settingContext="accessibility"
+        settingId="reduceTransparency"
+        title={$t("settings.accessibility.transparency.title")}
+        description={$t("settings.accessibility.transparency.description")}
+    />
+</SettingsCategory>
+
+{#if device.supports.haptics}
+    <SettingsCategory
+        sectionId="haptics"
+        title={$t("settings.accessibility.haptics")}
+    >
+        <SettingsToggle
+            settingContext="accessibility"
+            settingId="disableHaptics"
+            title={$t("settings.accessibility.haptics.title")}
+            description={$t("settings.accessibility.haptics.description")}
+        />
+    </SettingsCategory>
+{/if}

web/src/routes/settings/appearance/+page.svelte

@@ -53,29 +53,3 @@
         disabled={$settings.appearance.autoLanguage}
     />
 </SettingsCategory>
-
-<SettingsCategory
-    sectionId="accessibility"
-    title={$t("settings.accessibility")}
->
-    <SettingsToggle
-        settingContext="appearance"
-        settingId="reduceMotion"
-        title={$t("settings.accessibility.motion.title")}
-        description={$t("settings.accessibility.motion.description")}
-    />
-    <SettingsToggle
-        settingContext="appearance"
-        settingId="reduceTransparency"
-        title={$t("settings.accessibility.transparency.title")}
-        description={$t("settings.accessibility.transparency.description")}
-    />
-    {#if device.supports.haptics}
-        <SettingsToggle
-            settingContext="appearance"
-            settingId="disableHaptics"
-            title={$t("settings.accessibility.haptics.title")}
-            description={$t("settings.accessibility.haptics.description")}
-        />
-    {/if}
-</SettingsCategory>