refactor: asset viewing store (#27204)

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 { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   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,
-    nextAsset: getNextAsset(assets, $viewingAsset),
-    previousAsset: getPreviousAsset(assets, $viewingAsset),
+    current: assetViewerManager.asset!,
+    nextAsset: getNextAsset(assets, assetViewerManager.asset),
+    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 }));
         }}
       />