From 1b0be14175566c39cdf96151e93e5a7d05b5a77a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 7 Mar 2025 21:43:03 +0600
Subject: [PATCH] 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                     |  4 +-
 .../donate/DonateOptionsCard.svelte           |  2 +-
 web/src/routes/+layout.svelte                 |  4 +-
 web/src/routes/settings/+layout.svelte        | 17 +++++---
 .../settings/accessibility/+page.svelte       | 39 +++++++++++++++++++
 .../routes/settings/appearance/+page.svelte   | 26 -------------
 6 files changed, 57 insertions(+), 35 deletions(-)
 create mode 100644 web/src/routes/settings/accessibility/+page.svelte

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 8eaf5837..6de39773 100644
--- a/web/i18n/en/settings.json
+++ b/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",
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 90e1c749..0af9c2fd 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/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";
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 44ec8594..722634fa 100644
--- a/web/src/routes/+layout.svelte
+++ b/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 () => {
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 78d0228c..078e5e70 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/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")}
diff --git a/web/src/routes/settings/accessibility/+page.svelte b/web/src/routes/settings/accessibility/+page.svelte
new file mode 100644
index 00000000..e30af1b9
--- /dev/null
+++ b/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}
diff --git a/web/src/routes/settings/appearance/+page.svelte b/web/src/routes/settings/appearance/+page.svelte
index e5cac992..497da41c 100644
--- a/web/src/routes/settings/appearance/+page.svelte
+++ b/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>