refactor: rename mobileDevice to mediaQueryManager (#25464)

web/src/lib/stores/media-query-manager.svelte.ts

@@ -3,8 +3,9 @@ import { MediaQuery } from 'svelte/reactivity';
 const pointerCoarse = new MediaQuery('pointer:coarse');
 const maxMd = new MediaQuery('max-width: 767px');
 const sidebar = new MediaQuery(`min-width: 850px`);
+const reducedMotion = new MediaQuery('prefers-reduced-motion: reduce');
 
-export const mobileDevice = {
+export const mediaQueryManager = {
   get pointerCoarse() {
     return pointerCoarse.current;
   },
@@ -14,4 +15,7 @@ export const mobileDevice = {
   get isFullSidebar() {
     return sidebar.current;
   },
+  get reducedMotion() {
+    return reducedMotion.current;
+  },
 };

web/src/lib/stores/sidebar.svelte.ts

@@ -1,20 +1,20 @@
-import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
 
 class SidebarStore {
-  isOpen = $derived.by(() => mobileDevice.isFullSidebar);
+  isOpen = $derived.by(() => mediaQueryManager.isFullSidebar);
 
   /**
    * Reset the sidebar visibility to the default, based on the current screen width.
    */
   reset() {
-    this.isOpen = mobileDevice.isFullSidebar;
+    this.isOpen = mediaQueryManager.isFullSidebar;
   }
 
   /**
    * Toggles the sidebar visibility, if available at the current screen width.
    */
   toggle() {
-    this.isOpen = mobileDevice.isFullSidebar ? true : !this.isOpen;
+    this.isOpen = mediaQueryManager.isFullSidebar ? true : !this.isOpen;
   }
 }