refactor: asset viewing store (#27204)

web/src/lib/components/album-page/album-map.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import MapModal from '$lib/modals/MapModal.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
@@ -14,7 +14,6 @@
 
   let { album }: Props = $props();
   let abortController: AbortController;
-  let { setAssetId } = assetViewingStore;
 
   let mapMarkers: MapMarkerResponseDto[] = $state([]);
 
@@ -24,7 +23,7 @@
 
   onDestroy(() => {
     abortController?.abort();
-    assetViewingStore.showAssetViewer(false);
+    assetViewerManager.showAssetViewer(false);
   });
 
   async function loadMapMarkers() {
@@ -52,13 +51,12 @@
     return markers;
   }
 
-  async function openMap() {
+  const onClick = async () => {
     const assetIds = await modalManager.show(MapModal, { mapMarkers });
-
     if (assetIds) {
-      await setAssetId(assetIds[0]);
+      await assetViewerManager.setAssetId(assetIds[0]);
     }
-  }
+  };
 </script>
 
 <IconButton
@@ -66,6 +64,6 @@
   shape="round"
   color="secondary"
   icon={mdiMapOutline}
-  onclick={openMap}
+  onclick={onClick}
   aria-label={$t('map')}
 />

web/src/lib/components/album-page/album-viewer.svelte

@@ -5,12 +5,12 @@
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { handleDownloadAlbum } from '$lib/services/album.service';
   import { getGlobalActions } from '$lib/services/app.service';
   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 { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
@@ -34,7 +34,6 @@
 
   const album = sharedLink.album as AlbumResponseDto;
 
-  let { isViewing: showAssetViewer, setAssetId } = assetViewingStore;
   let { slideshowState, slideshowNavigation } = slideshowStore;
 
   const options = $derived({ albumId: album.id, order: album.order });
@@ -55,7 +54,9 @@
         ? await timelineManager.getRandomAsset()
         : timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
     if (asset) {
-      handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
+      handlePromiseError(
+        assetViewerManager.setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)),
+      );
     }
   };
 
@@ -66,7 +67,7 @@
   use:shortcut={{
     shortcut: { key: 'Escape' },
     onShortcut: () => {
-      if (!$showAssetViewer && assetInteraction.selectionActive) {
+      if (!assetViewerManager.isViewing && assetInteraction.selectionActive) {
         cancelMultiselect(assetInteraction);
       }
     },

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -14,7 +14,6 @@
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { getAssetActions } from '$lib/services/asset.service';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
@@ -91,7 +90,6 @@
     onRandom,
   }: Props = $props();
 
-  const { setAssetId } = assetViewingStore;
   const {
     restartProgress: restartSlideshowProgress,
     stopProgress: stopSlideshowProgress,
@@ -190,7 +188,7 @@
     if (editManager.hasAppliedEdits) {
       const refreshedAsset = await getAssetInfo({ id: asset.id });
       onAssetChange?.(refreshedAsset);
-      assetViewingStore.setAsset(refreshedAsset);
+      assetViewerManager.setAsset(refreshedAsset);
     }
     assetViewerManager.closeEditor();
   };
@@ -241,7 +239,7 @@
       }
 
       if ($slideshowRepeat && slideshowStartAssetId) {
-        await setAssetId(slideshowStartAssetId);
+        await assetViewerManager.setAssetId(slideshowStartAssetId);
         $restartSlideshowProgress = true;
         return;
       }
@@ -257,7 +255,7 @@
   let assetViewerHtmlElement = $state<HTMLElement>();
 
   const slideshowHistory = new SlideshowHistory((asset) => {
-    handlePromiseError(setAssetId(asset.id).then(() => ($restartSlideshowProgress = true)));
+    handlePromiseError(assetViewerManager.setAssetId(asset.id).then(() => ($restartSlideshowProgress = true)));
   });
 
   const handleVideoStarted = () => {

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { shortcut } from '$lib/actions/shortcut';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { clamp } from 'lodash-es';
@@ -287,7 +287,7 @@
         },
       });
 
-      await assetViewingStore.setAssetId(assetId);
+      await assetViewerManager.setAssetId(assetId);
     } catch (error) {
       handleError(error, 'Error tagging face');
     } finally {

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -3,7 +3,6 @@
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -179,7 +178,7 @@
 
       peopleWithFaces = peopleWithFaces.filter((f) => f.id !== face.id);
 
-      await assetViewingStore.setAssetId(assetId);
+      await assetViewerManager.setAssetId(assetId);
     } catch (error) {
       handleError(error, $t('error_delete_face'));
     }

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -19,12 +19,12 @@
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { QueryParameter } from '$lib/constants';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { memoryStore, type MemoryAsset } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
@@ -77,7 +77,6 @@
   let isSaved = $derived(current?.memory.isSaved);
   let viewerHeight = $state(0);
 
-  const { isViewing } = assetViewingStore;
   const viewport: Viewport = $state({ width: 0, height: 0 });
   // need to include padding in the viewport for gallery
   const galleryViewport: Viewport = $derived({ height: viewport.height, width: viewport.width - 32 });
@@ -87,7 +86,7 @@
   const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
 
   const handleNavigate = async (asset?: { id: string }) => {
-    if ($isViewing) {
+    if (assetViewerManager.isViewing) {
       return asset;
     }
 
@@ -281,7 +280,7 @@
     if (playerInitialized || isVideoAssetButPlayerHasNotLoadedYet) {
       return;
     }
-    if ($isViewing) {
+    if (assetViewerManager.isViewing) {
       handlePromiseError(handleAction('initPlayer[AssetViewOpen]', 'pause'));
     } else if (isVideo) {
       // Image assets will start playing when the image is loaded. Only autostart video assets.
@@ -326,7 +325,7 @@
 </script>
 
 <svelte:document
-  use:shortcuts={$isViewing
+  use:shortcuts={assetViewerManager.isViewing
     ? []
     : [
         { shortcut: { key: 'ArrowRight' }, onShortcut: () => handleNextAsset() },

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -3,7 +3,7 @@
   import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { user } from '$lib/stores/user.store';
   import { setSharedLink } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -31,7 +31,6 @@
 
   const { data }: Props = $props();
 
-  let { gridScrollTarget } = assetViewingStore;
   let { sharedLink, passwordRequired, key, slug, meta } = $state(data);
   let { title, description } = $state(meta);
   let isOwned = $derived($user ? $user.id === sharedLink?.userId : false);
@@ -48,7 +47,7 @@
         $t('shared_photos_and_videos_count', { values: { assetCount: sharedLink.assets.length } });
       await tick();
       await navigate(
-        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
+        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: assetViewerManager.gridScrollTarget },
         { forceNavigate: true, replaceState: true },
       );
     } catch (error) {

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -2,16 +2,17 @@
   import { goto } from '$app/navigation';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { Route } from '$lib/route';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
@@ -64,7 +65,6 @@
     allowDeletion = true,
   }: Props = $props();
 
-  let { isViewing: isViewerOpen, asset: viewingAsset } = assetViewingStore;
   const navigationAssets = $derived(viewerAssets ?? assets);
 
   const geometry = $derived(
@@ -256,7 +256,7 @@
 
   const shortcutList = $derived(
     (() => {
-      if ($isViewerOpen) {
+      if (assetViewerManager.isViewing) {
         return [];
       }
 
@@ -351,10 +351,10 @@
     }
   });
 
-  const assetCursor = $derived({
+  const assetCursor = $derived<AssetCursor>({
-    current: $viewingAsset,
+    current: assetViewerManager.asset!,
-    nextAsset: getNextAsset(navigationAssets, $viewingAsset),
+    nextAsset: getNextAsset(navigationAssets, assetViewerManager.asset),
-    previousAsset: getPreviousAsset(navigationAssets, $viewingAsset),
+    previousAsset: getPreviousAsset(navigationAssets, assetViewerManager.asset),
   });
 </script>
 
@@ -408,7 +408,7 @@
 {/if}
 
 <!-- Overlay Asset Viewer -->
-{#if $isViewerOpen}
+{#if assetViewerManager.isViewing}
   <Portal target="body">
     {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
       <AssetViewer
@@ -417,7 +417,7 @@
         onRandom={handleRandom}
         onAssetChange={updateCurrentAsset}
         onClose={() => {
-          assetViewingStore.showAssetViewer(false);
+          assetViewerManager.showAssetViewer(false);
           handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
         }}
       />

web/src/lib/components/timeline/Timeline.svelte

@@ -11,6 +11,7 @@
   import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import Skeleton from '$lib/elements/Skeleton.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
@@ -18,7 +19,6 @@
   import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   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';
@@ -88,10 +88,7 @@
   onDestroy(() => timelineManager.destroy());
   $effect(() => options && void timelineManager.updateOptions(options));
 
-  let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
-
   let scrollableElement: HTMLElement | undefined = $state();
-
   let timelineElement: HTMLElement | undefined = $state();
   let invisible = $state(true);
   // The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
@@ -209,7 +206,7 @@
         timelineManager.viewportWidth = rect.width;
       }
     }
-    const scrollTarget = $gridScrollTarget?.at;
+    const scrollTarget = assetViewerManager.gridScrollTarget?.at;
     let scrolled = false;
     if (scrollTarget) {
       scrolled = await scrollAndLoadAsset(scrollTarget);
@@ -518,8 +515,8 @@
   });
 
   $effect(() => {
-    if ($showAssetViewer) {
+    if (assetViewerManager.asset && assetViewerManager.isViewing) {
-      const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
+      const { localDateTime } = getTimes(assetViewerManager.asset.fileCreatedAt, DateTime.local().offset / 60);
       void timelineManager.loadMonthGroup({ year: localDateTime.year, month: localDateTime.month });
     }
   });
@@ -565,7 +562,7 @@
   onAfterUpdate={() => {
     const asset = page.url.searchParams.get('at');
     if (asset) {
-      $gridScrollTarget = { at: asset };
+      assetViewerManager.gridScrollTarget = { at: asset };
     }
     void scrollAfterNavigate();
   }}
@@ -722,7 +719,7 @@
 </section>
 
 <Portal target="body">
-  {#if $showAssetViewer}
+  {#if assetViewerManager.isViewing}
     <TimelineAssetViewer bind:invisible {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
   {/if}
 </Portal>

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -2,11 +2,11 @@
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
   import { AssetAction } from '$lib/constants';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { handlePromiseError } from '$lib/utils';
   import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
@@ -18,8 +18,6 @@
   import { onDestroy, onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  let { asset: viewingAsset, gridScrollTarget } = assetViewingStore;
-
   interface Props {
     timelineManager: TimelineManager;
     invisible: boolean;
@@ -65,7 +63,7 @@
   };
 
   let assetCursor = $state<AssetCursor>({
-    current: $viewingAsset,
+    current: assetViewerManager.asset!,
     previousAsset: undefined,
     nextAsset: undefined,
   });
@@ -82,9 +80,10 @@
 
   //TODO: replace this with async derived in svelte 6
   $effect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    const asset = assetViewerManager.asset;
-    $viewingAsset;
+    if (asset) {
-    untrack(() => handlePromiseError(loadCloseAssets($viewingAsset)));
+      untrack(() => handlePromiseError(loadCloseAssets(asset)));
+    }
   });
 
   const handleRandom = async () => {
@@ -99,8 +98,12 @@
 
   const handleClose = async (asset: { id: string }) => {
     invisible = true;
-    $gridScrollTarget = { at: asset.id };
+    assetViewerManager.gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
+    await navigate({
+      targetRoute: 'current',
+      assetId: null,
+      assetGridRouteSearchParams: assetViewerManager.gridScrollTarget,
+    });
   };
 
   const handleRemoveFromAlbum = async (assetIds: string[]) => {
@@ -202,7 +205,7 @@
 
     const restoredAsset = assets[0];
     const asset = await getAssetInfo({ ...authManager.params, id: restoredAsset.id });
-    assetViewingStore.setAsset(asset);
+    assetViewerManager.setAsset(asset);
     await navigate({ targetRoute: 'current', assetId: restoredAsset.id });
   };
 

web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte

@@ -5,6 +5,7 @@
     setFocusToAsset as setFocusAssetInit,
     setFocusTo as setFocusToInit,
   } from '$lib/components/timeline/actions/focus-actions';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -14,7 +15,6 @@
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { Route } from '$lib/route';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { searchStore } from '$lib/stores/search.svelte';
   import { handlePromiseError } from '$lib/utils';
@@ -32,8 +32,6 @@
 
   let { timelineManager = $bindable(), assetInteraction, onEscape, scrollToAsset }: Props = $props();
 
-  const { isViewing: showAssetViewer } = assetViewingStore;
-
   const trashOrDelete = async (forceRequested?: boolean) => {
     const force = forceRequested || !featureFlagsManager.value.trash;
     const selectedAssets = assetInteraction.selectedAssets;
@@ -142,7 +140,7 @@
   };
 
   const shortcutList = $derived.by(() => {
-    if (searchStore.isSearchEnabled || $showAssetViewer || isModalOpen()) {
+    if (searchStore.isSearchEnabled || assetViewerManager.isViewing || isModalOpen()) {
       return [];
     }
 

web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte

@@ -2,8 +2,8 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import DuplicateAsset from '$lib/components/utilities-page/duplicates/duplicate-asset.svelte';
   import Portal from '$lib/elements/Portal.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { handlePromiseError } from '$lib/utils';
   import { getNextAsset, getPreviousAsset } from '$lib/utils/asset-utils';
   import { suggestDuplicate } from '$lib/utils/duplicate-utils';
@@ -22,8 +22,6 @@
   }
 
   let { assets, onResolve, onStack }: Props = $props();
-  const { isViewing: showAssetViewer, asset: viewingAsset, setAsset } = assetViewingStore;
-
   // eslint-disable-next-line svelte/no-unnecessary-state-wrap
   let selectedAssetIds = $state(new SvelteSet<string>());
   let trashCount = $derived(assets.length - selectedAssetIds.size);
@@ -40,7 +38,7 @@
   });
 
   onDestroy(() => {
-    assetViewingStore.showAssetViewer(false);
+    assetViewerManager.showAssetViewer(false);
   });
 
   const onRandom = async () => {
@@ -71,7 +69,7 @@
 
   const onViewAsset = async ({ id }: AssetResponseDto) => {
     const asset = await getAssetInfo({ ...authManager.params, id });
-    setAsset(asset);
+    assetViewerManager.setAsset(asset);
     await navigate({ targetRoute: 'current', assetId: asset.id });
   };
 
@@ -86,9 +84,9 @@
   };
 
   const assetCursor = $derived({
-    current: $viewingAsset,
+    current: assetViewerManager.asset!,
-    nextAsset: getNextAsset(assets, $viewingAsset),
+    nextAsset: getNextAsset(assets, assetViewerManager.asset),
-    previousAsset: getPreviousAsset(assets, $viewingAsset),
+    previousAsset: getPreviousAsset(assets, assetViewerManager.asset),
   });
 </script>
 
@@ -166,7 +164,7 @@
   </div>
 </div>
 
-{#if $showAssetViewer}
+{#if assetViewerManager.isViewing}
   {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
@@ -174,7 +172,7 @@
         showNavigation={assets.length > 1}
         {onRandom}
         onClose={() => {
-          assetViewingStore.showAssetViewer(false);
+          assetViewerManager.showAssetViewer(false);
           handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
         }}
       />

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -1,7 +1,10 @@
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import type { ImageLoaderStatus } from '$lib/utils/adaptive-image-loader.svelte';
 import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
 import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
+import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
+import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
 import type { ZoomImageWheelState } from '@zoom-image/core';
 import { cubicOut } from 'svelte/easing';
 
@@ -21,7 +24,7 @@ export type Events = {
   Copy: [];
 };
 
-export class AssetViewerManager extends BaseEventManager<Events> {
+class AssetViewerManager extends BaseEventManager<Events> {
   #zoomState = $state(createDefaultZoomState());
   #animationFrameId: number | null = null;
 
@@ -40,6 +43,18 @@ export class AssetViewerManager extends BaseEventManager<Events> {
   isPlayingMotionPhoto = $state(false);
   isShowEditor = $state(false);
 
+  #viewingAssetStoreState = $state<AssetResponseDto>();
+  #viewState = $state<boolean>(false);
+  gridScrollTarget = $state<AssetGridRouteSearchParams | null | undefined>();
+
+  get asset() {
+    return this.#viewingAssetStoreState;
+  }
+
+  get isViewing() {
+    return this.#viewState;
+  }
+
   get isImageLoading() {
     return this.#isImageLoading;
   }
@@ -145,6 +160,21 @@ export class AssetViewerManager extends BaseEventManager<Events> {
   closeEditor() {
     this.isShowEditor = false;
   }
+
+  setAsset(asset: AssetResponseDto) {
+    this.#viewingAssetStoreState = asset;
+    this.#viewState = true;
+  }
+
+  async setAssetId(id: string): Promise<AssetResponseDto> {
+    const asset = await getAssetInfo({ ...authManager.params, id });
+    this.setAsset(asset);
+    return asset;
+  }
+
+  showAssetViewer(show: boolean) {
+    this.#viewState = show;
+  }
 }
 
 export const assetViewerManager = new AssetViewerManager();

web/src/lib/stores/asset-viewing.store.ts

@@ -1,36 +0,0 @@
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { type AssetGridRouteSearchParams } from '$lib/utils/navigation';
-import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-import { readonly, writable } from 'svelte/store';
-
-function createAssetViewingStore() {
-  const viewingAssetStoreState = writable<AssetResponseDto>();
-  const viewState = writable<boolean>(false);
-  const gridScrollTarget = writable<AssetGridRouteSearchParams | null | undefined>();
-
-  const setAsset = (asset: AssetResponseDto) => {
-    viewingAssetStoreState.set(asset);
-    viewState.set(true);
-  };
-
-  const setAssetId = async (id: string): Promise<AssetResponseDto> => {
-    const asset = await getAssetInfo({ ...authManager.params, id });
-    setAsset(asset);
-    return asset;
-  };
-
-  const showAssetViewer = (show: boolean) => {
-    viewState.set(show);
-  };
-
-  return {
-    asset: readonly(viewingAssetStoreState),
-    isViewing: viewState,
-    gridScrollTarget,
-    setAsset,
-    setAssetId,
-    showAssetViewer,
-  };
-}
-
-export const assetViewingStore = createAssetViewingStore();

web/src/routes/(user)/+layout.svelte

@@ -1,30 +1,28 @@
 <script lang="ts">
   import { page } from '$app/state';
   import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
-
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { Snippet } from 'svelte';
   interface Props {
     children?: Snippet;
   }
 
   let { children }: Props = $props();
-  let { isViewing: showAssetViewer, setAsset, gridScrollTarget } = assetViewingStore;
 
   // $page.data.asset is loaded by route specific +page.ts loaders if that
   // route contains the assetId path.
   $effect.pre(() => {
     if (page.data.asset) {
-      setAsset(page.data.asset);
+      assetViewerManager.setAsset(page.data.asset);
     } else {
-      $showAssetViewer = false;
+      assetViewerManager.showAssetViewer(false);
     }
     const asset = page.url.searchParams.get('at');
-    $gridScrollTarget = { at: asset };
+    assetViewerManager.gridScrollTarget = { at: asset };
   });
 </script>
 
-<div class:display-none={$showAssetViewer}>
+<div class:display-none={assetViewerManager.isViewing}>
   {@render children?.()}
 </div>
 <UploadCover />

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -46,7 +46,6 @@
   import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { preferences, user } from '$lib/stores/user.store';
   import { handlePromiseError } from '$lib/utils';
@@ -86,14 +85,9 @@
   }
 
   let { data = $bindable() }: Props = $props();
-
-  let { isViewing: showAssetViewer, setAssetId, gridScrollTarget } = assetViewingStore;
   let { slideshowState, slideshowNavigation } = slideshowStore;
-
   let oldAt: AssetGridRouteSearchParams | null | undefined = $state();
-
   let viewMode: AlbumPageViewMode = $state(AlbumPageViewMode.VIEW);
-
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   let showAlbumUsers = $derived(timelineManager?.showAssetOwners ?? false);
 
@@ -114,7 +108,9 @@
         ? await timelineManager.getRandomAsset()
         : timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
     if (asset) {
-      handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
+      handlePromiseError(
+        assetViewerManager.setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)),
+      );
     }
   };
 
@@ -128,7 +124,7 @@
       await handleCloseSelectAssets();
       return;
     }
-    if ($showAssetViewer) {
+    if (assetViewerManager.isViewing) {
       return;
     }
     if (assetInteraction.selectionActive) {
@@ -240,7 +236,7 @@
   const isShared = $derived(viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : album.albumUsers.length > 0);
 
   $effect(() => {
-    if ($showAssetViewer || !isShared) {
+    if (assetViewerManager.isViewing || !isShared) {
       return;
     }
 
@@ -252,7 +248,9 @@
   let isOwned = $derived($user.id == album.ownerId);
 
   let showActivityStatus = $derived(
-    album.albumUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || activityManager.commentCount > 0),
+    album.albumUsers.length > 0 &&
+      !assetViewerManager.isViewing &&
+      (album.isActivityEnabled || activityManager.commentCount > 0),
   );
   let isEditor = $derived(
     album.albumUsers.find(({ user: { id } }) => id === $user.id)?.role === AlbumUserRole.Editor ||
@@ -322,7 +320,7 @@
     type: $t('command'),
     icon: mdiArrowLeft,
     onAction: handleEscape,
-    $if: () => !$showAssetViewer,
+    $if: () => !assetViewerManager.isViewing,
     shortcuts: { key: 'Escape' },
   });
 </script>
@@ -518,7 +516,7 @@
                 onclick={async () => {
                   timelineManager.suspendTransitions = true;
                   viewMode = AlbumPageViewMode.SELECT_ASSETS;
-                  oldAt = { at: $gridScrollTarget?.at };
+                  oldAt = { at: assetViewerManager.gridScrollTarget?.at };
                   await navigate(
                     { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
                     { replaceState: true },
@@ -621,7 +619,7 @@
       {/if}
     {/if}
   </div>
-  {#if album.albumUsers.length > 0 && album && assetViewerManager.isShowActivityPanel && $user && !$showAssetViewer}
+  {#if album.albumUsers.length > 0 && album && assetViewerManager.isShowActivityPanel && $user && !assetViewerManager.isViewing}
     <div class="flex">
       <div
         transition:fly={{ duration: 150 }}

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -5,9 +5,9 @@
   import type { SelectionBBox } from '$lib/components/shared-components/map/types';
   import { timeToLoadTheMap } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { handlePromiseError } from '$lib/utils';
   import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
@@ -20,9 +20,6 @@
   }
 
   let { data }: Props = $props();
-
-  let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;
-
   let selectedClusterIds = $state.raw(new Set<string>());
   let selectedClusterBBox = $state.raw<SelectionBBox>();
   let isTimelinePanelVisible = $state(false);
@@ -34,7 +31,7 @@
   }
 
   onDestroy(() => {
-    assetViewingStore.showAssetViewer(false);
+    assetViewerManager.showAssetViewer(false);
   });
 
   if (!featureFlagsManager.value.map) {
@@ -42,7 +39,7 @@
   }
 
   async function onViewAssets(assetIds: string[]) {
-    await setAssetId(assetIds[0]);
+    await assetViewerManager.setAssetId(assetIds[0]);
     closeTimelinePanel();
   }
 
@@ -50,7 +47,7 @@
     selectedClusterIds = new Set(assetIds);
     selectedClusterBBox = bbox;
     isTimelinePanelVisible = true;
-    assetViewingStore.showAssetViewer(false);
+    assetViewerManager.showAssetViewer(false);
     handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
   }
 </script>
@@ -89,13 +86,13 @@
     </div>
   </UserPageLayout>
   <Portal target="body">
-    {#if $showAssetViewer}
+    {#if assetViewerManager.isViewing}
       {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
         <AssetViewer
-          cursor={{ current: $viewingAsset }}
+          cursor={{ current: assetViewerManager.asset! }}
           showNavigation={false}
           onClose={() => {
-            assetViewingStore.showAssetViewer(false);
+            assetViewerManager.showAssetViewer(false);
             handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
           }}
           isShared={false}

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -20,11 +20,11 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { memoryStore } from '$lib/stores/memory.store.svelte';
   import { preferences, user } from '$lib/stores/user.store';
@@ -43,7 +43,6 @@
   import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
-  let { isViewing: showAssetViewer } = assetViewingStore;
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true };
 
@@ -62,7 +61,7 @@
   });
 
   const handleEscape = () => {
-    if ($showAssetViewer) {
+    if (assetViewerManager.isViewing) {
       return;
     }
     if (assetInteraction.selectionActive) {

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -4,11 +4,11 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { Route } from '$lib/route';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { locale } from '$lib/stores/preferences.store';
   import { stackAssets } from '$lib/utils/asset-utils';
   import { suggestDuplicate } from '$lib/utils/duplicate-utils';
@@ -57,7 +57,6 @@
   };
 
   let duplicates = $state(data.duplicates);
-  const { isViewing: showAssetViewer } = assetViewingStore;
 
   const correctDuplicatesIndex = (index: number) => {
     return Math.max(0, Math.min(index, duplicates.length - 1));
@@ -186,7 +185,7 @@
 </script>
 
 <svelte:document
-  use:shortcuts={$showAssetViewer
+  use:shortcuts={assetViewerManager.isViewing
     ? []
     : [
         { shortcut: { key: 'ArrowLeft' }, onShortcut: handlePrevious },

web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -3,7 +3,7 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import LargeAssetData from '$lib/components/utilities-page/large-assets/large-asset-data.svelte';
   import Portal from '$lib/elements/Portal.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { getNextAsset, getPreviousAsset } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
@@ -19,10 +19,10 @@
 
   let assets = $derived(data.assets);
   let asset = $derived(data.asset);
-  const { isViewing: showAssetViewer, asset: viewingAsset, setAsset } = assetViewingStore;
+
   $effect(() => {
     if (asset) {
-      setAsset(asset);
+      assetViewerManager.setAsset(asset);
     }
   });
 
@@ -39,7 +39,7 @@
   const onAction = (payload: Action) => {
     if (payload.type == 'trash') {
       assets = assets.filter((a) => a.id != payload.asset.id);
-      $showAssetViewer = false;
+      assetViewerManager.showAssetViewer(false);
     }
   };
 
@@ -48,9 +48,9 @@
   };
 
   const assetCursor = $derived({
-    current: $viewingAsset,
+    current: assetViewerManager.asset!,
-    nextAsset: getNextAsset(assets, $viewingAsset),
+    nextAsset: getNextAsset(assets, assetViewerManager.asset),
-    previousAsset: getPreviousAsset(assets, $viewingAsset),
+    previousAsset: getPreviousAsset(assets, assetViewerManager.asset),
   });
 </script>
 
@@ -68,7 +68,7 @@
   </div>
 </UserPageLayout>
 
-{#if $showAssetViewer}
+{#if assetViewerManager.isViewing}
   {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
@@ -77,7 +77,7 @@
         {onRandom}
         {onAction}
         onClose={() => {
-          assetViewingStore.showAssetViewer(false);
+          assetViewerManager.showAssetViewer(false);
           handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
         }}
       />