web: respect reduced motion & transparency preferences

also cleaned up settings & device libs

web/src/routes/+layout.svelte

@@ -1,12 +1,20 @@
-<script>
+<script lang="ts">
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
+    import settings from "$lib/settings";
     import { device, app } from "$lib/device";
     import currentTheme, { statusBarColors } from "$lib/state/theme";
 
     import Sidebar from "$components/sidebar/Sidebar.svelte";
     import NotchSticker from "$components/misc/NotchSticker.svelte";
+
+    $: reduceMotion =
+        $settings.appearance.reduceMotion
+        || device.prefers.reducedMotion;
+    $: reduceTransparency =
+        $settings.appearance.reduceTransparency
+        || device.prefers.reducedTransparency;
 </script>
 
 <svelte:head>
@@ -16,7 +24,12 @@
 </svelte:head>
 
 <div style="display: contents" data-theme={$currentTheme}>
-    <div id="cobalt" class:on-iPhone={device.is.iPhone}>
+    <div
+        id="cobalt"
+        class:on-iPhone={device.is.iPhone}
+        class:reduce-motion={reduceMotion}
+        class:reduce-transparency={reduceTransparency}
+    >
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
         {/if}
@@ -75,7 +88,7 @@
         );
     }
 
-    :global([data-theme=dark]) {
+    :global([data-theme="dark"]) {
         --primary: #000000;
         --secondary: #e1e1e1;
 
@@ -131,7 +144,8 @@
     @media screen and (orientation: landscape) {
         #cobalt.on-iPhone {
             grid-template-columns:
-                calc(var(--sidebar-width) + env(safe-area-inset-left) + 8px) 1fr;
+                calc(var(--sidebar-width) + env(safe-area-inset-left) + 8px)
+                1fr;
         }
 
         #cobalt.on-iPhone #content {
@@ -164,7 +178,8 @@
     }
 
     :global(*) {
-        font-family: "IBM Plex Mono", "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
+        font-family: "IBM Plex Mono", "Noto Sans Mono Variable",
+            "Noto Sans Mono", monospace;
         user-select: none;
         scrollbar-width: none;
         -webkit-user-select: none;
@@ -281,4 +296,9 @@
         padding: 0 var(--padding);
         white-space: pre-line;
     }
+
+    .reduce-motion :global(*) {
+        animation: none !important;
+        transition: none !important;
+    }
 </style>

web/src/routes/+layout.ts

@@ -17,7 +17,7 @@ export const load: Load = async ({ url }) => {
     if (browser) {
         const device = (await import('$lib/device')).device;
         const settings = get((await import('$lib/settings')).default);
-        const deviceLanguage = device.preferredLocale;
+        const deviceLanguage = device.prefers.language;
         const settingsLanguage = settings.appearance.language;
 
         const isValid = (lang: string) => (

web/src/routes/settings/advanced/debug/+page.svelte

@@ -15,23 +15,25 @@
 
 {#if $settings.advanced.debug}
     <div id="advanced-page">
-        device:
+        <h3>device:</h3>
         <div class="message-container subtext">
             is.iPad: {device.is.iPad}
             is.iPhone: {device.is.iPhone}
             is.iOS: {device.is.iOS}
             is.android: {device.is.android}
             is.mobile: {device.is.mobile}
-            preferredLocale: {device.preferredLocale}
+            prefers.language: {device.prefers.language}
+            prefers.reducedMotion: {device.prefers.reducedMotion}
+            prefers.reducedTransparency: {device.prefers.reducedTransparency}
             userAgent: {device.userAgent}
         </div>
 
-        app:
+        <h3>app:</h3>
         <div class="message-container subtext">
             is.installed: {app.is.installed}
         </div>
 
-        version:
+        <h3>version:</h3>
         <div class="message-container subtext">
             version: {version.version}
             commit: {version.commit.slice(0, 7)}

web/src/routes/settings/general/appearance/+page.svelte

@@ -39,15 +39,15 @@
     title={$t("settings.accessibility")}
 >
     <SettingsToggle
-        settingContext="accessibility"
+        settingContext="appearance"
         settingId="reduceTransparency"
         title={$t("settings.accessibility.transparency.title")}
         description={$t("settings.accessibility.transparency.description")}
     />
     <SettingsToggle
-        settingContext="accessibility"
-        settingId="reduceAnimations"
-        title={$t("settings.accessibility.animations.title")}
-        description={$t("settings.accessibility.animations.description")}
+        settingContext="appearance"
+        settingId="reduceMotion"
+        title={$t("settings.accessibility.motion.title")}
+        description={$t("settings.accessibility.motion.description")}
     />
 </SettingsCategory>