web: add haptics to toggles & switchers

web/src/lib/device.ts

@@ -11,6 +11,7 @@ const device = {
         iPhone: false,
         iPad: false,
         iOS: false,
+        modernIOS: false,
         android: false,
         mobile: false,
     },
@@ -35,6 +36,9 @@ if (browser) {
     const iPhone = ua.includes("iphone os");
     const iPad = !iPhone && ua.includes("mac os") && navigator.maxTouchPoints > 0;
 
+    const iosVersion = Number(ua.match(/iphone os (\d+)_/)?.[1]);
+    const modernIOS = iPhone && iosVersion >= 18;
+
     const iOS = iPhone || iPad;
     const android = ua.includes("android") || ua.includes("diordna");
 
@@ -45,11 +49,13 @@ if (browser) {
     };
 
     device.is = {
+        mobile: iOS || android,
+        android,
+
         iPhone,
         iPad,
         iOS,
-        android,
-        mobile: iOS || android,
+        modernIOS,
     };
 
     device.browser = {

web/src/lib/haptics.ts

@@ -0,0 +1,26 @@
+import { device } from "$lib/device";
+
+// not sure if vibrations feel the same on android,
+// so they're enabled only on ios 18+ for now
+const shouldVibrate = device.is.modernIOS;
+
+export const hapticSwitch = () => {
+    if (!shouldVibrate) return;
+
+    try {
+        const label = document.createElement("label");
+        label.ariaHidden = "true";
+        label.style.display = "none";
+
+        const input = document.createElement("input");
+        input.type = "checkbox";
+        input.setAttribute("switch", "");
+        label.appendChild(input);
+
+        document.head.appendChild(label);
+        label.click();
+        document.head.removeChild(label);
+    } catch {
+        // ignore
+    }
+}