From d0d269677e96a7338abeeb1861ff8d18caf066d8 Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Fri, 23 Jan 2026 21:55:10 -0500
Subject: [PATCH] refactor: rename mobileDevice to mediaQueryManager (#25464)

---
 .../components/album-page/album-viewer.svelte |  4 ++--
 .../asset-viewer/album-list-item.svelte       |  4 ++--
 .../assets/thumbnail/thumbnail.svelte         | 20 +++++++++----------
 .../individual-shared-viewer.svelte           |  4 ++--
 .../navigation-bar/navigation-bar.svelte      |  4 ++--
 .../lib/components/sidebar/sidebar.spec.ts    | 14 ++++++-------
 web/src/lib/components/sidebar/sidebar.svelte |  6 +++---
 .../lib/components/timeline/Scrubber.svelte   |  4 ++--
 .../lib/components/timeline/Timeline.svelte   |  6 +++---
 ...velte.ts => media-query-manager.svelte.ts} |  6 +++++-
 web/src/lib/stores/sidebar.svelte.ts          |  8 ++++----
 11 files changed, 41 insertions(+), 39 deletions(-)
 rename web/src/lib/stores/{mobile-device.svelte.ts => media-query-manager.svelte.ts} (68%)

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index b7fcaa88ec..6093340a19 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -13,7 +13,7 @@
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
@@ -114,7 +114,7 @@
     <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-          <Logo variant={mobileDevice.maxMd ? 'icon' : 'inline'} class="min-w-10" />
+          <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />
         </a>
       {/snippet}
 
diff --git a/web/src/lib/components/asset-viewer/album-list-item.svelte b/web/src/lib/components/asset-viewer/album-list-item.svelte
index 35b2ab99ff..8a616209fa 100644
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import { normalizeSearchString } from '$lib/utils/string-utils.js';
   import { type AlbumResponseDto } from '@immich/sdk';
@@ -54,7 +54,7 @@
     onMultiSelect();
   };
 
-  let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
+  let usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
   let mouseOver = $state(false);
   const onMouseEnter = () => {
     if (usingMobileDevice) {
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index cd2bf1d670..8270646470 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
+  import { thumbhash } from '$lib/actions/thumbhash';
   import { ProjectionType } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl, getAssetPlaybackUrl } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
+  import { moveFocus } from '$lib/utils/focus-util';
+  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { TUNABLES } from '$lib/utils/tunables';
   import { AssetMediaSize, AssetVisibility, type UserResponseDto } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
   import {
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,
@@ -15,21 +23,11 @@
     mdiMotionPlayOutline,
     mdiRotate360,
   } from '@mdi/js';
-
-  import { thumbhash } from '$lib/actions/thumbhash';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { moveFocus } from '$lib/utils/focus-util';
-  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
-  import { TUNABLES } from '$lib/utils/tunables';
-  import { Icon } from '@immich/ui';
   import { onMount } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
-
   interface Props {
     asset: TimelineAsset;
     groupIndex?: number;
@@ -78,7 +76,7 @@
     IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
   } = TUNABLES;
 
-  let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
+  let usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
   let element: HTMLElement | undefined = $state();
   let mouseOver = $state(false);
   let loaded = $state(false);
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 12f52bcc5d..8ead288490 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -10,7 +10,7 @@
   import { Route } from '$lib/route';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -110,7 +110,7 @@
       <ControlAppBar onClose={() => goto(Route.photos())} backIcon={mdiArrowLeft} showBackButton={false}>
         {#snippet leading()}
           <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-            <Logo variant={mobileDevice.maxMd ? 'icon' : 'inline'} class="min-w-10" />
+            <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />
           </a>
         {/snippet}
 
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index aab52ecf64..c4d94bdf56 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -13,7 +13,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { user } from '$lib/stores/user.store';
@@ -79,7 +79,7 @@
         class="sidebar:hidden"
       />
       <a data-sveltekit-preload-data="hover" href={Route.photos()}>
-        <Logo variant={mobileDevice.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
+        <Logo variant={mediaQueryManager.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
       </a>
     </div>
     <div class="flex justify-between gap-4 lg:gap-8 pe-6">
diff --git a/web/src/lib/components/sidebar/sidebar.spec.ts b/web/src/lib/components/sidebar/sidebar.spec.ts
index 645816e460..51bb13fc80 100644
--- a/web/src/lib/components/sidebar/sidebar.spec.ts
+++ b/web/src/lib/components/sidebar/sidebar.spec.ts
@@ -5,14 +5,14 @@ import { vi } from 'vitest';
 
 const mocks = vi.hoisted(() => {
   return {
-    mobileDevice: {
+    mediaQueryManager: {
       isFullSidebar: false,
     },
   };
 });
 
-vi.mock('$lib/stores/mobile-device.svelte', () => ({
-  mobileDevice: mocks.mobileDevice,
+vi.mock('$lib/stores/media-query-manager.svelte', () => ({
+  mediaQueryManager: mocks.mediaQueryManager,
 }));
 
 vi.mock('$lib/stores/sidebar.svelte', () => ({
@@ -25,7 +25,7 @@ vi.mock('$lib/stores/sidebar.svelte', () => ({
 describe('Sidebar component', () => {
   beforeEach(() => {
     vi.resetAllMocks();
-    mocks.mobileDevice.isFullSidebar = false;
+    mocks.mediaQueryManager.isFullSidebar = false;
     sidebarStore.isOpen = false;
   });
 
@@ -39,7 +39,7 @@ describe('Sidebar component', () => {
     'inert is $expectedInert when isFullSidebar=$isFullSidebar and isSidebarOpen=$isSidebarOpen',
     ({ isFullSidebar, isSidebarOpen, expectedInert }) => {
       // setup
-      mocks.mobileDevice.isFullSidebar = isFullSidebar;
+      mocks.mediaQueryManager.isFullSidebar = isFullSidebar;
       sidebarStore.isOpen = isSidebarOpen;
 
       // when
@@ -53,7 +53,7 @@ describe('Sidebar component', () => {
 
   it('should set width when sidebar is expanded', () => {
     // setup
-    mocks.mobileDevice.isFullSidebar = false;
+    mocks.mediaQueryManager.isFullSidebar = false;
     sidebarStore.isOpen = true;
 
     // when
@@ -68,7 +68,7 @@ describe('Sidebar component', () => {
 
   it('should close the sidebar if it is open on initial render', () => {
     // setup
-    mocks.mobileDevice.isFullSidebar = false;
+    mocks.mediaQueryManager.isFullSidebar = false;
     sidebarStore.isOpen = true;
 
     // when
diff --git a/web/src/lib/components/sidebar/sidebar.svelte b/web/src/lib/components/sidebar/sidebar.svelte
index ecb2561a03..9630b6c024 100644
--- a/web/src/lib/components/sidebar/sidebar.svelte
+++ b/web/src/lib/components/sidebar/sidebar.svelte
@@ -2,7 +2,7 @@
   import { clickOutside } from '$lib/actions/click-outside';
   import { focusTrap } from '$lib/actions/focus-trap';
   import { menuButtonId } from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { onMount, type Snippet } from 'svelte';
 
@@ -13,8 +13,8 @@
 
   let { ariaLabel, children }: Props = $props();
 
-  const isHidden = $derived(!sidebarStore.isOpen && !mobileDevice.isFullSidebar);
-  const isExpanded = $derived(sidebarStore.isOpen && !mobileDevice.isFullSidebar);
+  const isHidden = $derived(!sidebarStore.isOpen && !mediaQueryManager.isFullSidebar);
+  const isExpanded = $derived(sidebarStore.isOpen && !mediaQueryManager.isFullSidebar);
 
   onMount(() => {
     closeSidebar();
diff --git a/web/src/lib/components/timeline/Scrubber.svelte b/web/src/lib/components/timeline/Scrubber.svelte
index 8aafbd80a1..17cde24a3f 100644
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { ScrubberMonth, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { getTabbable } from '$lib/utils/focus-util';
   import { type ScrubberListener } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
@@ -65,7 +65,7 @@
   const toScrollY = (percent: number) => percent * (height - (PADDING_TOP + PADDING_BOTTOM));
   const toTimelineY = (scrollY: number) => scrollY / (height - (PADDING_TOP + PADDING_BOTTOM));
 
-  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
+  const usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
 
   const MOBILE_WIDTH = 20;
   const DESKTOP_WIDTH = 60;
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index 8e2a9f0cb2..402acaaa67 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -21,7 +21,7 @@
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
   import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
@@ -106,8 +106,8 @@
   let scrubberWidth = $state(0);
 
   const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  const maxMd = $derived(mobileDevice.maxMd);
-  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
+  const maxMd = $derived(mediaQueryManager.maxMd);
+  const usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
 
   $effect(() => {
     const layoutOptions = maxMd
diff --git a/web/src/lib/stores/mobile-device.svelte.ts b/web/src/lib/stores/media-query-manager.svelte.ts
similarity index 68%
rename from web/src/lib/stores/mobile-device.svelte.ts
rename to web/src/lib/stores/media-query-manager.svelte.ts
index ee6fa87dab..b24a0f0492 100644
--- a/web/src/lib/stores/mobile-device.svelte.ts
+++ b/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;
+  },
 };
diff --git a/web/src/lib/stores/sidebar.svelte.ts b/web/src/lib/stores/sidebar.svelte.ts
index bebc9ca5b2..72bc37120d 100644
--- a/web/src/lib/stores/sidebar.svelte.ts
+++ b/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;
   }
 }