web/settings/appearance: add a toggle for disabling haptics

also updated all descriptions for accessibility toggles

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>