web: respect reduced motion & transparency preferences

also cleaned up settings & device libs

web/src/lib/device.ts

@@ -8,10 +8,13 @@ const android = ua.includes("android") || ua.includes("diordna");
 
 const mobile = iOS || android;
 
-const preferredLocale = navigator.language.toLowerCase().slice(0, 2);
+const language = navigator.language.toLowerCase().slice(0, 2);
 
 const installed = window.matchMedia('(display-mode: standalone)').matches;
 
+const reducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+const reducedTransparency = window.matchMedia(`(prefers-reduced-transparency: reduce)`).matches;
+
 const device = {
     is: {
         iPhone,
@@ -20,7 +23,11 @@ const device = {
         android,
         mobile,
     },
-    preferredLocale,
+    prefers: {
+        language,
+        reducedMotion,
+        reducedTransparency,
+    },
     userAgent: navigator.userAgent,
 }