From 698905db2ee42f8b7ac192048a2e2fa4a502557a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 5 Mar 2025 21:46:27 +0600
Subject: [PATCH] web/settings/appearance: add a toggle for disabling haptics

also updated all descriptions for accessibility toggles
---
 web/i18n/en/settings.json                     |  6 +++--
 .../routes/settings/appearance/+page.svelte   | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 821fa5db..8eaf5837 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -89,9 +89,11 @@
 
     "accessibility": "accessibility",
     "accessibility.transparency.title": "reduce visual transparency",
-    "accessibility.transparency.description": "reduces transparency of surfaces and disables blur effects. may also improve ui performance on low performance devices.",
+    "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",
-    "accessibility.motion.description": "disables animations and transitions whenever possible.",
+    "accessibility.motion.description": "animations and transitions will be disabled whenever possible.",
+    "accessibility.haptics.title": "disable haptics",
+    "accessibility.haptics.description": "all haptic effects will be disabled.",
 
     "language": "language",
     "language.auto.title": "automatic selection",
diff --git a/web/src/routes/settings/appearance/+page.svelte b/web/src/routes/settings/appearance/+page.svelte
index 3f964e9b..e5cac992 100644
--- a/web/src/routes/settings/appearance/+page.svelte
+++ b/web/src/routes/settings/appearance/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { t, locales } from "$lib/i18n/translations";
+    import { device } from "$lib/device";
     import settings from "$lib/state/settings";
-
     import { themeOptions } from "$lib/types/settings";
+    import { t, locales } from "$lib/i18n/translations";
 
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
@@ -58,16 +58,24 @@
     sectionId="accessibility"
     title={$t("settings.accessibility")}
 >
-    <SettingsToggle
-        settingContext="appearance"
-        settingId="reduceTransparency"
-        title={$t("settings.accessibility.transparency.title")}
-        description={$t("settings.accessibility.transparency.description")}
-    />
     <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>