web: add haptics to toggles & switchers

web/src/components/buttons/SettingsButton.svelte

@@ -6,6 +6,8 @@
         Value extends CobaltSettings[Context][Id]
     "
 >
+    import { hapticSwitch } from "$lib/haptics";
+
     import settings, { updateSetting } from "$lib/state/settings";
     import type { CobaltSettings } from "$lib/types/settings";
 
@@ -22,12 +24,14 @@
     class="button"
     class:active={isActive}
     aria-pressed={isActive}
-    on:click={() =>
+    on:click={() => {
+        hapticSwitch();
         updateSetting({
             [settingContext]: {
                 [settingId]: settingValue,
             },
-        })}
+        });
+    }}
 >
     <slot></slot>
 </button>

web/src/components/buttons/SettingsToggle.svelte

@@ -5,6 +5,7 @@
         Id extends keyof CobaltSettings[Context]
     "
 >
+    import { hapticSwitch } from "$lib/haptics";
     import settings, { updateSetting } from "$lib/state/settings";
     import type { CobaltSettings } from "$lib/types/settings";
 
@@ -34,14 +35,15 @@
         class="button toggle-container"
         role="switch"
         aria-checked={isEnabled}
-        disabled={disabled}
-        on:click={() =>
+        {disabled}
+        on:click={() => {
+            hapticSwitch();
             updateSetting({
                 [settingContext]: {
                     [settingId]: !isEnabled,
-                }
-            })
-        }
+                },
+            });
+        }}
     >
         <h4 class="toggle-title">{title}</h4>
         <Toggle enabled={isEnabled} />
@@ -82,10 +84,14 @@
         border-radius: var(--border-radius);
         overflow: scroll;
 
-        transition: background 0.1s, box-shadow 0.1s;
+        transition:
+            background 0.1s,
+            box-shadow 0.1s;
     }
 
     .toggle-container:active {
-        box-shadow: var(--button-box-shadow), 0 0 0 1.5px var(--button-stroke) inset;
+        box-shadow:
+            var(--button-box-shadow),
+            0 0 0 1.5px var(--button-stroke) inset;
     }
 </style>