refactor: selection mananger (#27325)

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 { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.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 { 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';
@@ -39,8 +39,6 @@
   const options = $derived({ albumId: album.id, order: album.order });
   let timelineManager = $state<TimelineManager>() as TimelineManager;
 
-  const assetInteraction = new AssetInteraction();
-
   dragAndDropFilesStore.subscribe((value) => {
     if (value.isDragging && value.files.length > 0) {
       handlePromiseError(fileUploadHandler({ files: value.files, albumId: album.id }));
@@ -67,15 +65,15 @@
   use:shortcut={{
     shortcut: { key: 'Escape' },
     onShortcut: () => {
-      if (!assetViewerManager.isViewing && assetInteraction.selectionActive) {
+      if (!assetViewerManager.isViewing && assetMultiSelectManager.selectionActive) {
-        cancelMultiselect(assetInteraction);
+        cancelMultiselect(assetMultiSelectManager);
       }
     },
   }}
 />
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <Timeline enableRouting={true} {album} bind:timelineManager {options} {assetInteraction}>
+  <Timeline enableRouting={true} {album} bind:timelineManager {options} assetInteraction={assetMultiSelectManager}>
     <section class="pt-8 md:pt-24 px-2 md:px-0">
       <!-- ALBUM TITLE -->
       <h1 class="text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all">
@@ -99,13 +97,13 @@
 </main>
 
 <header>
-  {#if assetInteraction.selectionActive}
+  {#if assetMultiSelectManager.selectionActive}
     <AssetSelectControlBar
       ownerId={user?.id}
-      assets={assetInteraction.selectedAssets}
+      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => assetInteraction.clearMultiselect()}
+      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
     >
-      <SelectAllAssets {timelineManager} {assetInteraction} />
+      <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
       {#if sharedLink.allowDownload}
         <DownloadAction filename="{album.albumName}.zip" />
       {/if}

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

@@ -19,13 +19,13 @@
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { QueryParameter } from '$lib/constants';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { memoryManager, type MemoryAsset } from '$lib/managers/memory-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 { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
@@ -80,7 +80,6 @@
   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 });
-  const assetInteraction = new AssetInteraction();
   let progressBarController: Tween<number> | undefined = $state(undefined);
   let videoPlayer: HTMLVideoElement | undefined = $state();
   const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
@@ -117,7 +116,7 @@
   const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
   const handleEscape = async () => goto(Route.photos());
   const handleSelectAll = () =>
-    assetInteraction.selectAssets(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
+    assetMultiSelectManager.selectAssets(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
 
   const handleAction = async (callingContext: string, action: 'reset' | 'pause' | 'play') => {
     // leaving these log statements here as comments. Very useful to figure out what's going on during dev!
@@ -336,14 +335,14 @@
       ]}
 />
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <div class="sticky top-0 z-1 dark">
     <AssetSelectControlBar
       forceDark
-      assets={assetInteraction.selectedAssets}
+      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => cancelMultiselect(assetInteraction)}
+      clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
     >
-      {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+      {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CreateSharedLink />
       <IconButton
         shape="round"
@@ -356,15 +355,19 @@
 
       <ActionButton action={Actions.AddToAlbum} />
 
-      <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />
+      <FavoriteAction removeFavorite={assetMultiSelectManager.isAllFavorite} />
 
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
         <DownloadAction menuItem />
         <ChangeDate menuItem />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
-        <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={handleDeleteOrArchiveAssets} />
+        <ArchiveAction
-        {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
+          menuItem
+          unarchive={assetMultiSelectManager.isAllArchived}
+          onArchive={handleDeleteOrArchiveAssets}
+        />
+        {#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
           <TagAction menuItem />
         {/if}
         <DeleteAssets menuItem onAssetDelete={handleDeleteOrArchiveAssets} />
@@ -669,7 +672,7 @@
         assets={currentTimelineAssets}
         {viewerAssets}
         viewport={galleryViewport}
-        {assetInteraction}
+        assetInteraction={assetMultiSelectManager}
         slidingWindowOffset={viewerHeight}
         arrowNavigation={false}
       />

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -5,10 +5,10 @@
   import RemoveFromSharedLink from '$lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { AssetAction } from '$lib/constants';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
@@ -31,7 +31,6 @@
   let { sharedLink = $bindable(), isOwned }: Props = $props();
 
   const viewport: Viewport = $state({ width: 0, height: 0 });
-  const assetInteraction = new AssetInteraction();
 
   let assets = $derived(sharedLink.assets);
 
@@ -59,7 +58,7 @@
   };
 
   const handleSelectAll = () => {
-    assetInteraction.selectAssets(assets.map((asset) => toTimelineAsset(asset)));
+    assetMultiSelectManager.selectAssets(assets.map((asset) => toTimelineAsset(asset)));
   };
 
   const handleAction = async (action: Action) => {
@@ -76,14 +75,14 @@
 
 {#if sharedLink?.allowUpload || assets.length > 1}
   <main class="mt-24 mb-40 mx-4 isolate" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
-    <GalleryViewer {assets} {assetInteraction} {viewport} allowDeletion={false} />
+    <GalleryViewer {assets} assetInteraction={assetMultiSelectManager} {viewport} allowDeletion={false} />
   </main>
 
   <header class="fixed top-0 inset-s-0 w-full">
-    {#if assetInteraction.selectionActive}
+    {#if assetMultiSelectManager.selectionActive}
       <AssetSelectControlBar
-        assets={assetInteraction.selectedAssets}
+        assets={assetMultiSelectManager.selectedAssets}
-        clearSelect={() => cancelMultiselect(assetInteraction)}
+        clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
       >
         <IconButton
           shape="round"

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

@@ -6,13 +6,13 @@
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
+  import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.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 { showDeleteModal } from '$lib/stores/preferences.store';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
@@ -36,7 +36,7 @@
   type Props = {
     assets: AssetResponseDto[];
     viewerAssets?: AssetResponseDto[];
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetMultiSelectManager;
     disableAssetSelect?: boolean;
     showArchiveIcon?: boolean;
     viewport: Viewport;
@@ -180,7 +180,7 @@
       return;
     }
 
-    const startAsset = assetInteraction.assetSelectionStart;
+    const startAsset = assetInteraction.startAsset;
     if (!startAsset) {
       return;
     }

web/src/lib/components/shared-components/map/MapTimelinePanel.svelte

@@ -18,9 +18,9 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import Portal from '$lib/elements/Portal.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { preferences, user } from '$lib/stores/user.store';
   import {
@@ -44,9 +44,8 @@
 
   let { bbox, selectedClusterIds, assetCount, onClose }: Props = $props();
 
-  const assetInteraction = new AssetInteraction();
   let timelineManager = $state<TimelineManager>() as TimelineManager;
-  let selectedAssets = $derived(assetInteraction.selectedAssets);
+  let selectedAssets = $derived(assetMultiSelectManager.selectedAssets);
   let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
   let isLinkActionAvailable = $derived.by(() => {
     const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
@@ -55,7 +54,7 @@
       selectedAssets.some((asset) => asset.isImage) &&
       selectedAssets.some((asset) => asset.isVideo);
 
-    return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
+    return assetMultiSelectManager.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
   });
 
   const handleLink: OnLink = ({ still, motion }) => {
@@ -70,11 +69,11 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const handleEscape = () => {
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const timelineBoundingBox = $derived(
@@ -91,7 +90,7 @@
 
   $effect.pre(() => {
     void timelineOptions;
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   });
 </script>
 
@@ -112,35 +111,35 @@
       enableRouting={false}
       options={timelineOptions}
       onEscape={handleEscape}
-      {assetInteraction}
+      assetInteraction={assetMultiSelectManager}
       showArchiveIcon
     />
   </div>
 </aside>
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
-  {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+  {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
   <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
 
   <Portal target="body">
     <AssetSelectControlBar
       ownerId={$user.id}
-      assets={assetInteraction.selectedAssets}
+      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => assetInteraction.clearMultiselect()}
+      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
     >
       <CreateSharedLink />
-      <SelectAllAssets {timelineManager} {assetInteraction} />
+      <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
       <ActionButton action={Actions.AddToAlbum} />
 
-      {#if assetInteraction.isAllUserOwned}
+      {#if assetMultiSelectManager.isAllUserOwned}
         <FavoriteAction
-          removeFavorite={assetInteraction.isAllFavorite}
+          removeFavorite={assetMultiSelectManager.isAllFavorite}
           onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
         />
 
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem />
-          {#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
+          {#if assetMultiSelectManager.selectedAssets.length > 1 || isAssetStackSelected}
             <StackAction
               unstack={isAssetStackSelected}
               onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
@@ -150,7 +149,7 @@
           {#if isLinkActionAvailable}
             <LinkLivePhotoAction
               menuItem
-              unlink={assetInteraction.selectedAssets.length === 1}
+              unlink={assetMultiSelectManager.selectedAssets.length === 1}
               onLink={handleLink}
               onUnlink={handleUnlink}
             />
@@ -160,7 +159,7 @@
           <ChangeLocation menuItem />
           <ArchiveAction
             menuItem
-            unarchive={assetInteraction.isAllArchived}
+            unarchive={assetMultiSelectManager.isAllArchived}
             onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
           />
           {#if $preferences.tags.enabled}

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

@@ -1,11 +1,11 @@
 <script lang="ts">
   import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot, filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
@@ -26,7 +26,7 @@
     >;
     customThumbnailLayout?: Snippet<[TimelineAsset]>;
     singleSelect: boolean;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetMultiSelectManager;
     monthGroup: MonthGroup;
     manager: VirtualScrollManager;
     onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;

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 type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.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';
@@ -18,7 +19,6 @@
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   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 { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
   import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
@@ -36,7 +36,7 @@
     enableRouting: boolean;
     timelineManager?: TimelineManager;
     options?: TimelineManagerOptions;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetMultiSelectManager;
     removeAction?: AssetAction.UNARCHIVE | AssetAction.ARCHIVE | AssetAction.SET_VISIBILITY_TIMELINE | null;
     withStacked?: boolean;
     showArchiveIcon?: boolean;
@@ -431,8 +431,8 @@
 
     assetInteraction.clearAssetSelectionCandidates();
 
-    if (assetInteraction.assetSelectionStart && rangeSelection) {
+    if (assetInteraction.startAsset && rangeSelection) {
-      const startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
+      const startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.startAsset.id);
       const endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
 
       if (!startBucket || !endBucket) {
@@ -487,7 +487,7 @@
       return;
     }
 
-    const startAsset = assetInteraction.assetSelectionStart;
+    const startAsset = assetInteraction.startAsset;
     if (!startAsset) {
       return;
     }

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

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
   import { Button, IconButton } from '@immich/ui';
   import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
@@ -8,7 +8,7 @@
 
   interface Props {
     timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetMultiSelectManager;
     withText?: boolean;
   }
 

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 type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   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';
@@ -14,7 +15,6 @@
   import NavigateToDateModal from '$lib/modals/NavigateToDateModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { Route } from '$lib/route';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { searchStore } from '$lib/stores/search.svelte';
   import { handlePromiseError } from '$lib/utils';
@@ -25,7 +25,7 @@
 
   type Props = {
     timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetMultiSelectManager;
     onEscape?: () => void;
     scrollToAsset: (asset: TimelineAsset) => boolean;
   };

web/src/lib/managers/asset-multi-select-manager.svelte.spec.ts

@@ -1,42 +1,42 @@
-import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+import { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
 import { resetSavedUser, user } from '$lib/stores/user.store';
 import { AssetVisibility } from '@immich/sdk';
 import { timelineAssetFactory } from '@test-data/factories/asset-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 
-describe('AssetInteraction', () => {
+describe('AssetMultiSelectManager', () => {
-  let assetInteraction: AssetInteraction;
+  let sut: AssetMultiSelectManager;
 
   beforeEach(() => {
-    assetInteraction = new AssetInteraction();
+    sut = new AssetMultiSelectManager();
   });
 
   it('calculates derived values from selection', () => {
-    assetInteraction.selectAsset(
+    sut.selectAsset(
       timelineAssetFactory.build({ isFavorite: true, visibility: AssetVisibility.Archive, isTrashed: true }),
     );
-    assetInteraction.selectAsset(
+    sut.selectAsset(
       timelineAssetFactory.build({ isFavorite: true, visibility: AssetVisibility.Timeline, isTrashed: false }),
     );
 
-    expect(assetInteraction.selectionActive).toBe(true);
+    expect(sut.selectionActive).toBe(true);
-    expect(assetInteraction.isAllTrashed).toBe(false);
+    expect(sut.isAllTrashed).toBe(false);
-    expect(assetInteraction.isAllArchived).toBe(false);
+    expect(sut.isAllArchived).toBe(false);
-    expect(assetInteraction.isAllFavorite).toBe(true);
+    expect(sut.isAllFavorite).toBe(true);
   });
 
   it('updates isAllUserOwned when the active user changes', () => {
     const [user1, user2] = userAdminFactory.buildList(2);
-    assetInteraction.selectAsset(timelineAssetFactory.build({ ownerId: user1.id }));
+    sut.selectAsset(timelineAssetFactory.build({ ownerId: user1.id }));
 
     const cleanup = $effect.root(() => {
-      expect(assetInteraction.isAllUserOwned).toBe(false);
+      expect(sut.isAllUserOwned).toBe(false);
 
       user.set(user1);
-      expect(assetInteraction.isAllUserOwned).toBe(true);
+      expect(sut.isAllUserOwned).toBe(true);
 
       user.set(user2);
-      expect(assetInteraction.isAllUserOwned).toBe(false);
+      expect(sut.isAllUserOwned).toBe(false);
     });
 
     cleanup();

web/src/lib/managers/asset-multi-select-manager.svelte.ts

@@ -1,3 +1,4 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { user } from '$lib/stores/user.store';
 import type { AssetControlContext } from '$lib/types';
@@ -5,39 +6,59 @@ import { AssetVisibility, type UserAdminResponseDto } from '@immich/sdk';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { fromStore } from 'svelte/store';
 
-export class AssetInteraction {
+export type AssetMultiSelectOptions = {
-  private selectedAssetsMap = new SvelteMap<string, TimelineAsset>();
+  resetOnNavigate?: boolean;
-  selectedAssets = $derived(Array.from(this.selectedAssetsMap.values()));
+};
-  selectAll = $state(false);
+export class AssetMultiSelectManager {
-  hasSelectedAsset(assetId: string) {
+  #selectedMap = new SvelteMap<string, TimelineAsset>();
-    return this.selectedAssetsMap.has(assetId);
+  #user = fromStore<UserAdminResponseDto | undefined>(user);
-  }
+  #userId = $derived(this.#user.current?.id);
-  selectedGroup = new SvelteSet<string>();
-  assetSelectionCandidates = $state<TimelineAsset[]>([]);
-  hasSelectionCandidate(assetId: string) {
-    return this.assetSelectionCandidates.some((asset) => asset.id === assetId);
-  }
-  assetSelectionStart = $state<TimelineAsset | null>(null);
-  selectionActive = $derived(this.selectedAssetsMap.size > 0);
 
-  private user = fromStore<UserAdminResponseDto | undefined>(user);
+  selectAll = $state(false);
-  private userId = $derived(this.user.current?.id);
+  startAsset = $state<TimelineAsset | null>(null);
+
+  selectedGroup = new SvelteSet<string>();
+
+  assetSelectionCandidates = $state<TimelineAsset[]>([]);
+
+  selectionActive = $derived(this.#selectedMap.size > 0);
+  selectedAssets = $derived(Array.from(this.#selectedMap.values()));
+  isAllTrashed = $derived(this.selectedAssets.every((asset) => asset.isTrashed));
+  isAllArchived = $derived(this.selectedAssets.every((asset) => asset.visibility === AssetVisibility.Archive));
+  isAllFavorite = $derived(this.selectedAssets.every((asset) => asset.isFavorite));
+  isAllUserOwned = $derived(this.selectedAssets.every((asset) => asset.ownerId === this.#userId));
+
+  #unsubscribe?: () => void;
+
+  constructor(options?: AssetMultiSelectOptions) {
+    const { resetOnNavigate = false } = options ?? {};
+    if (resetOnNavigate) {
+      this.#unsubscribe = eventManager.on({ AppNavigate: () => this.clearMultiselect() });
+    }
+  }
+
+  destroy() {
+    this.#unsubscribe?.();
+  }
 
   asControlContext(): AssetControlContext {
     return {
-      getOwnedAssets: () => this.selectedAssets.filter((asset) => asset.ownerId === this.userId),
+      getOwnedAssets: () => this.selectedAssets.filter((asset) => asset.ownerId === this.#userId),
       getAssets: () => this.selectedAssets,
       clearSelect: () => this.clearMultiselect(),
     };
   }
 
-  isAllTrashed = $derived(this.selectedAssets.every((asset) => asset.isTrashed));
+  hasSelectedAsset(assetId: string) {
-  isAllArchived = $derived(this.selectedAssets.every((asset) => asset.visibility === AssetVisibility.Archive));
+    return this.#selectedMap.has(assetId);
-  isAllFavorite = $derived(this.selectedAssets.every((asset) => asset.isFavorite));
+  }
-  isAllUserOwned = $derived(this.selectedAssets.every((asset) => asset.ownerId === this.userId));
+
+  hasSelectionCandidate(assetId: string) {
+    return this.assetSelectionCandidates.some((asset) => asset.id === assetId);
+  }
 
   selectAsset(asset: TimelineAsset) {
-    this.selectedAssetsMap.set(asset.id, asset);
+    this.#selectedMap.set(asset.id, asset);
   }
 
   selectAssets(assets: TimelineAsset[]) {
@@ -47,7 +68,7 @@ export class AssetInteraction {
   }
 
   removeAssetFromMultiselectGroup(assetId: string) {
-    this.selectedAssetsMap.delete(assetId);
+    this.#selectedMap.delete(assetId);
   }
 
   addGroupToMultiselectGroup(group: string) {
@@ -59,7 +80,7 @@ export class AssetInteraction {
   }
 
   setAssetSelectionStart(asset: TimelineAsset | null) {
-    this.assetSelectionStart = asset;
+    this.startAsset = asset;
   }
 
   setAssetSelectionCandidates(assets: TimelineAsset[]) {
@@ -74,11 +95,13 @@ export class AssetInteraction {
     this.selectAll = false;
 
     // Multi-selection
-    this.selectedAssetsMap.clear();
+    this.#selectedMap.clear();
     this.selectedGroup.clear();
 
     // Range selection
     this.assetSelectionCandidates = [];
-    this.assetSelectionStart = null;
+    this.startAsset = null;
   }
 }
+
+export const assetMultiSelectManager = new AssetMultiSelectManager({ resetOnNavigate: true });

web/src/lib/managers/event-manager.svelte.ts

@@ -20,6 +20,7 @@ import type {
 
 export type Events = {
   AppInit: [];
+  AppNavigate: [];
 
   AuthLogin: [LoginResponseDto];
   AuthLogout: [];

web/src/lib/utils/asset-utils.ts

@@ -1,8 +1,8 @@
+import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { preferences } from '$lib/stores/user.store';
 import { downloadRequest, withError } from '$lib/utils';
 import { getByteUnitString } from '$lib/utils/byte-units';
@@ -388,7 +388,7 @@ export const keepThisDeleteOthers = async (keepAsset: AssetResponseDto, stack: S
   }
 };
 
-export const selectAllAssets = async (timelineManager: TimelineManager, assetInteraction: AssetInteraction) => {
+export const selectAllAssets = async (timelineManager: TimelineManager, assetInteraction: AssetMultiSelectManager) => {
   if (assetInteraction.selectAll) {
     // Selection is already ongoing
     return;
@@ -418,7 +418,7 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt
   }
 };
 
-export const cancelMultiselect = (assetInteraction: AssetInteraction) => {
+export const cancelMultiselect = (assetInteraction: AssetMultiSelectManager) => {
   assetInteraction.selectAll = false;
   assetInteraction.clearMultiselect();
 };

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

@@ -29,6 +29,7 @@
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AlbumPageViewMode } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
+  import { assetMultiSelectManager, AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   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';
@@ -45,7 +46,6 @@
   } from '$lib/services/album.service';
   import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { preferences, user } from '$lib/stores/user.store';
   import { handlePromiseError } from '$lib/utils';
@@ -91,8 +91,7 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   let showAlbumUsers = $derived(timelineManager?.showAssetOwners ?? false);
 
-  const assetInteraction = new AssetInteraction();
+  const timelineMultiSelectManager = new AssetMultiSelectManager();
-  const timelineInteraction = new AssetInteraction();
 
   const handleFavorite = async () => {
     try {
@@ -127,8 +126,8 @@
     if (assetViewerManager.isViewing) {
       return;
     }
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      cancelMultiselect(assetInteraction);
+      cancelMultiselect(assetMultiSelectManager);
       return;
     }
     await goto(Route.albums());
@@ -149,13 +148,13 @@
   };
 
   const handleCloseSelectAssets = async () => {
-    timelineInteraction.clearMultiselect();
+    timelineMultiSelectManager.clearMultiselect();
     await setModeToView();
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const handleRemoveAssets = async (assetIds: string[]) => {
@@ -176,13 +175,13 @@
     await updateThumbnail(assetId);
 
     viewMode = AlbumPageViewMode.VIEW;
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const updateThumbnailUsingCurrentSelection = async () => {
-    if (assetInteraction.selectedAssets.length === 1) {
+    if (assetMultiSelectManager.selectedAssets.length === 1) {
-      const [firstAsset] = assetInteraction.selectedAssets;
+      const [firstAsset] = assetMultiSelectManager.selectedAssets;
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       await updateThumbnail(firstAsset.id);
     }
   };
@@ -271,7 +270,7 @@
     }
   };
   const currentAssetIntersection = $derived(
-    viewMode === AlbumPageViewMode.SELECT_ASSETS ? timelineInteraction : assetInteraction,
+    viewMode === AlbumPageViewMode.SELECT_ASSETS ? timelineMultiSelectManager : assetMultiSelectManager,
   );
 
   const onSharedLinkCreate = async () => {
@@ -291,7 +290,7 @@
     }
 
     await refreshAlbum();
-    timelineInteraction.clearMultiselect();
+    timelineMultiSelectManager.clearMultiselect();
     await setModeToView();
   };
 
@@ -313,7 +312,7 @@
 
   const { Cast } = $derived(getGlobalActions($t));
   const { Share } = $derived(getAlbumActions($t, album));
-  const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineInteraction.selectedAssets));
+  const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineMultiSelectManager.selectedAssets));
 
   const Close = $derived({
     title: $t('go_back'),
@@ -452,36 +451,36 @@
       {/if}
     </main>
 
-    {#if assetInteraction.selectionActive}
+    {#if assetMultiSelectManager.selectionActive}
       <AssetSelectControlBar
-        assets={assetInteraction.selectedAssets}
+        assets={assetMultiSelectManager.selectedAssets}
-        clearSelect={() => assetInteraction.clearMultiselect()}
+        clearSelect={() => assetMultiSelectManager.clearMultiselect()}
       >
-        {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+        {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
         <CreateSharedLink />
-        <SelectAllAssets {timelineManager} {assetInteraction} />
+        <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
         <ActionButton action={Actions.AddToAlbum} />
-        {#if assetInteraction.isAllUserOwned}
+        {#if assetMultiSelectManager.isAllUserOwned}
           <FavoriteAction
-            removeFavorite={assetInteraction.isAllFavorite}
+            removeFavorite={assetMultiSelectManager.isAllFavorite}
             onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
           ></FavoriteAction>
         {/if}
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
           <DownloadAction menuItem filename="{album.albumName}.zip" />
-          {#if assetInteraction.isAllUserOwned}
+          {#if assetMultiSelectManager.isAllUserOwned}
             <ChangeDate menuItem />
             <ChangeDescription menuItem />
             <ChangeLocation menuItem />
             <ArchiveAction
               menuItem
-              unarchive={assetInteraction.isAllArchived}
+              unarchive={assetMultiSelectManager.isAllArchived}
               onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
             />
             <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
           {/if}
-          {#if assetInteraction.selectedAssets.length === 1}
+          {#if assetMultiSelectManager.selectedAssets.length === 1}
             <MenuOption
               text={$t('set_as_album_cover')}
               icon={mdiImageOutline}
@@ -489,14 +488,14 @@
             />
           {/if}
 
-          {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
+          {#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
             <TagAction menuItem />
           {/if}
 
-          {#if isOwned || assetInteraction.isAllUserOwned}
+          {#if isOwned || assetMultiSelectManager.isAllUserOwned}
             <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
           {/if}
-          {#if assetInteraction.isAllUserOwned}
+          {#if assetMultiSelectManager.isAllUserOwned}
             <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} onUndoDelete={handleUndoRemoveAssets} />
           {/if}
         </ButtonContextMenu>
@@ -595,10 +594,10 @@
         <ControlAppBar onClose={handleCloseSelectAssets}>
           {#snippet leading()}
             <p class="text-lg dark:text-immich-dark-fg">
-              {#if !timelineInteraction.selectionActive}
+              {#if !timelineMultiSelectManager.selectionActive}
                 {$t('add_to_album')}
               {:else}
-                {$t('selected_count', { values: { count: timelineInteraction.selectedAssets.length } })}
+                {$t('selected_count', { values: { count: timelineMultiSelectManager.selectedAssets.length } })}
               {/if}
             </p>
           {/snippet}

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

@@ -13,9 +13,9 @@
   import { AssetAction } from '$lib/constants';
 
   import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetVisibility } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
@@ -30,27 +30,25 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { visibility: AssetVisibility.Archive };
 
-  const assetInteraction = new AssetInteraction();
-
   const handleEscape = () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 </script>
 
-<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
+<UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} title={data.meta.title} scrollbar={false}>
   <Timeline
     enableRouting={true}
     bind:timelineManager
     {options}
-    {assetInteraction}
+    assetInteraction={assetMultiSelectManager}
     removeAction={AssetAction.UNARCHIVE}
     onEscape={handleEscape}
   >
@@ -60,22 +58,22 @@
   </Timeline>
 </UserPageLayout>
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
-    assets={assetInteraction.selectedAssets}
+    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetInteraction.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
   >
-    {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+    {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
     <ArchiveAction
       unarchive
       onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
     />
     <CreateSharedLink />
-    <SelectAllAssets {timelineManager} {assetInteraction} />
+    <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
     <ActionButton action={Actions.AddToAlbum} />
     <FavoriteAction
-      removeFavorite={assetInteraction.isAllFavorite}
+      removeFavorite={assetMultiSelectManager.isAllFavorite}
       onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
     />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>

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

@@ -15,9 +15,9 @@
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
@@ -33,28 +33,26 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { isFavorite: true, withStacked: true };
 
-  const assetInteraction = new AssetInteraction();
-
   const handleEscape = () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 </script>
 
-<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
+<UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} title={data.meta.title} scrollbar={false}>
   <Timeline
     enableRouting={true}
     withStacked={true}
     bind:timelineManager
     {options}
-    {assetInteraction}
+    assetInteraction={assetMultiSelectManager}
     onEscape={handleEscape}
   >
     {#snippet empty()}
@@ -64,16 +62,16 @@
 </UserPageLayout>
 
 <!-- Multiselection mode app bar -->
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
-    assets={assetInteraction.selectedAssets}
+    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetInteraction.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
   >
-    {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+    {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
     <FavoriteAction removeFavorite onFavorite={(assetIds) => timelineManager.removeAssets(assetIds)} />
     <CreateSharedLink />
-    <SelectAllAssets {timelineManager} {assetInteraction} />
+    <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
     <ActionButton action={Actions.AddToAlbum} />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
@@ -82,7 +80,7 @@
       <ChangeLocation menuItem />
       <ArchiveAction
         menuItem
-        unarchive={assetInteraction.isAllArchived}
+        unarchive={assetMultiSelectManager.isAllArchived}
         onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
       />
       {#if $preferences.tags.enabled}

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

@@ -19,10 +19,10 @@
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import SkipLink from '$lib/elements/SkipLink.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import type { 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 { foldersStore } from '$lib/stores/folders.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
@@ -40,7 +40,6 @@
   let { data }: Props = $props();
 
   const viewport: Viewport = $state({ width: 0, height: 0 });
-  const assetInteraction = new AssetInteraction();
 
   const handleNavigateToFolder = (folderName: string) => navigateToView(joinPaths(data.tree.path, folderName));
 
@@ -48,7 +47,7 @@
 
   afterNavigate(function clearAssetSelection() {
     // Clear the asset selection when we navigate (like going to another folder)
-    cancelMultiselect(assetInteraction);
+    cancelMultiselect(assetMultiSelectManager);
   });
 
   function navigateToView(path: string) {
@@ -56,7 +55,7 @@
   }
 
   async function triggerAssetUpdate() {
-    cancelMultiselect(assetInteraction);
+    cancelMultiselect(assetMultiSelectManager);
     if (data.tree.path) {
       await foldersStore.refreshAssetsByPath(data.tree.path);
     }
@@ -68,7 +67,7 @@
       return;
     }
 
-    assetInteraction.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
+    assetMultiSelectManager.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
   }
 </script>
 
@@ -100,7 +99,7 @@
       <div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
         <GalleryViewer
           assets={data.pathAssets}
-          {assetInteraction}
+          assetInteraction={assetMultiSelectManager}
           {viewport}
           showAssetName={true}
           pageHeaderOffset={54}
@@ -111,13 +110,13 @@
   </section>
 </UserPageLayout>
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <div class="fixed top-0 start-0 w-full">
     <AssetSelectControlBar
-      assets={assetInteraction.selectedAssets}
+      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => cancelMultiselect(assetInteraction)}
+      clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
     >
-      {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+      {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
       <CreateSharedLink />
       <IconButton
@@ -130,7 +129,7 @@
       />
       <ActionButton action={Actions.AddToAlbum} />
       <FavoriteAction
-        removeFavorite={assetInteraction.isAllFavorite}
+        removeFavorite={assetMultiSelectManager.isAllFavorite}
         onFavorite={function handleFavoriteUpdate(ids, isFavorite) {
           if (data.pathAssets && data.pathAssets.length > 0) {
             for (const id of ids) {
@@ -148,8 +147,8 @@
         <ChangeDate menuItem />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
-        <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={triggerAssetUpdate} />
+        <ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} onArchive={triggerAssetUpdate} />
-        {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
+        {#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
           <TagAction menuItem />
         {/if}
         <DeleteAssets menuItem onAssetDelete={triggerAssetUpdate} onUndoDelete={triggerAssetUpdate} />

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

@@ -13,10 +13,10 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getUserActions } from '$lib/services/user.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetVisibility } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -31,17 +31,15 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { visibility: AssetVisibility.Locked };
 
-  const assetInteraction = new AssetInteraction();
-
   const handleEscape = () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
 
   const handleMoveOffLockedFolder = (assetIds: string[]) => {
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
     timelineManager.removeAssets(assetIds);
   };
 
@@ -57,14 +55,14 @@
 <UserPageLayout
   title={data.meta.title}
   actions={[LockSession]}
-  hideNavbar={assetInteraction.selectionActive}
+  hideNavbar={assetMultiSelectManager.selectionActive}
   scrollbar={false}
 >
   <Timeline
     enableRouting={true}
     bind:timelineManager
     {options}
-    {assetInteraction}
+    assetInteraction={assetMultiSelectManager}
     onEscape={handleEscape}
     removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
   >
@@ -75,12 +73,12 @@
 </UserPageLayout>
 
 <!-- Multi-selection mode app bar -->
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
-    assets={assetInteraction.selectedAssets}
+    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetInteraction.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
   >
-    <SelectAllAssets withText {timelineManager} {assetInteraction} />
+    <SelectAllAssets withText {timelineManager} assetInteraction={assetMultiSelectManager} />
     <SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />

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

@@ -5,9 +5,9 @@
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetVisibility } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiArrowLeft } from '@mdi/js';
@@ -26,26 +26,24 @@
     withStacked: true,
   });
 
-  const assetInteraction = new AssetInteraction();
-
   const handleEscape = () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
 </script>
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <Timeline enableRouting={true} {options} {assetInteraction} onEscape={handleEscape} />
+  <Timeline enableRouting={true} {options} assetInteraction={assetMultiSelectManager} onEscape={handleEscape} />
 </main>
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
-    assets={assetInteraction.selectedAssets}
+    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetInteraction.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
   >
-    {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+    {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
     <CreateSharedLink />
     <ActionButton action={Actions.AddToAlbum} />

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

@@ -32,7 +32,7 @@
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { getPersonActions } from '$lib/services/person.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
@@ -65,7 +65,6 @@
 
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = $derived({ visibility: AssetVisibility.Timeline, personId: data.person.id });
-  const assetInteraction = new AssetInteraction();
 
   let viewMode: PersonPageViewMode = $state(PersonPageViewMode.VIEW_ASSETS);
   let isEditingName = $state(false);
@@ -106,8 +105,8 @@
   });
 
   const handleEscape = async () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
 
@@ -127,8 +126,8 @@
   });
 
   const handleUnmerge = () => {
-    timelineManager.removeAssets(assetInteraction.selectedAssets.map((a) => a.id));
+    timelineManager.removeAssets(assetMultiSelectManager.selectedAssets.map((a) => a.id));
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
     viewMode = PersonPageViewMode.VIEW_ASSETS;
   };
 
@@ -154,7 +153,7 @@
       handleError(error, $t('errors.unable_to_set_feature_photo'));
     }
 
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
 
     viewMode = PersonPageViewMode.VIEW_ASSETS;
   };
@@ -283,7 +282,7 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const onPersonUpdate = async (response: PersonResponseDto) => {
@@ -347,7 +346,7 @@
       {person}
       bind:timelineManager
       {options}
-      {assetInteraction}
+      assetInteraction={assetMultiSelectManager}
       isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}
       singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
       onSelect={handleSelectFeaturePhoto}
@@ -458,18 +457,18 @@
 </main>
 
 <header>
-  {#if assetInteraction.selectionActive}
+  {#if assetMultiSelectManager.selectionActive}
     <AssetSelectControlBar
-      assets={assetInteraction.selectedAssets}
+      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => assetInteraction.clearMultiselect()}
+      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
     >
-      {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+      {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
       <CreateSharedLink />
-      <SelectAllAssets {timelineManager} {assetInteraction} />
+      <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
       <ActionButton action={Actions.AddToAlbum} />
       <FavoriteAction
-        removeFavorite={assetInteraction.isAllFavorite}
+        removeFavorite={assetMultiSelectManager.isAllFavorite}
         onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
       />
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
@@ -484,10 +483,10 @@
         <ChangeLocation menuItem />
         <ArchiveAction
           menuItem
-          unarchive={assetInteraction.isAllArchived}
+          unarchive={assetMultiSelectManager.isAllArchived}
           onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
         />
-        {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
+        {#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
           <TagAction menuItem />
         {/if}
         <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
@@ -522,7 +521,7 @@
 
 {#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
   <UnMergeFaceSelector
-    assetIds={assetInteraction.selectedAssets.map((a) => a.id)}
+    assetIds={assetMultiSelectManager.selectedAssets.map((a) => a.id)}
     personAssets={person}
     onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
     onConfirm={handleUnmerge}

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

@@ -24,7 +24,7 @@
   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 { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { preferences, user } from '$lib/stores/user.store';
   import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
   import {
@@ -44,9 +44,7 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true };
 
-  const assetInteraction = new AssetInteraction();
+  let selectedAssets = $derived(assetMultiSelectManager.selectedAssets);
-
-  let selectedAssets = $derived(assetInteraction.selectedAssets);
   let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
   let isLinkActionAvailable = $derived.by(() => {
     const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
@@ -55,15 +53,15 @@
       selectedAssets.some((asset) => asset.isImage) &&
       selectedAssets.some((asset) => asset.isVideo);
 
-    return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
+    return assetMultiSelectManager.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
   });
 
   const handleEscape = () => {
     if (assetViewerManager.isViewing) {
       return;
     }
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
@@ -80,7 +78,7 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const items = $derived(
@@ -94,12 +92,12 @@
   );
 </script>
 
-<UserPageLayout hideNavbar={assetInteraction.selectionActive} scrollbar={false}>
+<UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} scrollbar={false}>
   <Timeline
     enableRouting={true}
     bind:timelineManager
     {options}
-    {assetInteraction}
+    assetInteraction={assetMultiSelectManager}
     removeAction={AssetAction.ARCHIVE}
     onEscape={handleEscape}
     withStacked
@@ -113,28 +111,28 @@
   </Timeline>
 </UserPageLayout>
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
     ownerId={$user.id}
-    assets={assetInteraction.selectedAssets}
+    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetInteraction.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
   >
-    {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+    {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
 
     <CreateSharedLink />
-    <SelectAllAssets {timelineManager} {assetInteraction} />
+    <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
     <ActionButton action={Actions.AddToAlbum} />
 
-    {#if assetInteraction.isAllUserOwned}
+    {#if assetMultiSelectManager.isAllUserOwned}
       <FavoriteAction
-        removeFavorite={assetInteraction.isAllFavorite}
+        removeFavorite={assetMultiSelectManager.isAllFavorite}
         onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
       />
 
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
         <DownloadAction menuItem />
-        {#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
+        {#if assetMultiSelectManager.selectedAssets.length > 1 || isAssetStackSelected}
           <StackAction
             unstack={isAssetStackSelected}
             onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
@@ -144,7 +142,7 @@
         {#if isLinkActionAvailable}
           <LinkLivePhotoAction
             menuItem
-            unlink={assetInteraction.selectedAssets.length === 1}
+            unlink={assetMultiSelectManager.selectedAssets.length === 1}
             onLink={handleLink}
             onUnlink={handleUnlink}
           />

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

@@ -23,7 +23,7 @@
   import type { 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 { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { lang, locale } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { handlePromiseError } from '$lib/utils';
@@ -62,8 +62,6 @@
   let scrollY = $state(0);
   let scrollYHistory = 0;
 
-  const assetInteraction = new AssetInteraction();
-
   type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'>;
   let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
   let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
@@ -112,12 +110,12 @@
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
     onAssetDelete(assetIds);
   };
 
   const handleSelectAll = () => {
-    assetInteraction.selectAssets(searchResultAssets.map((asset) => toTimelineAsset(asset)));
+    assetMultiSelectManager.selectAssets(searchResultAssets.map((asset) => toTimelineAsset(asset)));
   };
 
   async function onSearchQueryUpdate() {
@@ -226,7 +224,7 @@
   }
 
   const onAlbumAddAssets = ({ assetIds }: { assetIds: string[] }) => {
-    cancelMultiselect(assetInteraction);
+    cancelMultiselect(assetMultiSelectManager);
 
     if (terms.isNotInAlbum) {
       const assetIdSet = new Set(assetIds);
@@ -294,7 +292,7 @@
     {#if searchResultAssets.length > 0}
       <GalleryViewer
         assets={searchResultAssets}
-        {assetInteraction}
+        assetInteraction={assetMultiSelectManager}
         onIntersected={loadNextPage}
         showArchiveIcon={true}
         {viewport}
@@ -319,13 +317,13 @@
   </section>
 
   <section>
-    {#if assetInteraction.selectionActive}
+    {#if assetMultiSelectManager.selectionActive}
       <div class="fixed top-0 start-0 w-full z-2">
         <AssetSelectControlBar
-          assets={assetInteraction.selectedAssets}
+          assets={assetMultiSelectManager.selectedAssets}
-          clearSelect={() => cancelMultiselect(assetInteraction)}
+          clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
         >
-          {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+          {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
           <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
 
           <CreateSharedLink />
@@ -338,9 +336,9 @@
             onclick={handleSelectAll}
           />
           <ActionButton action={Actions.AddToAlbum} />
-          {#if assetInteraction.isAllUserOwned}
+          {#if assetMultiSelectManager.isAllUserOwned}
             <FavoriteAction
-              removeFavorite={assetInteraction.isAllFavorite}
+              removeFavorite={assetMultiSelectManager.isAllFavorite}
               onFavorite={(ids, isFavorite) => {
                 for (const id of ids) {
                   const asset = searchResultAssets.find((asset) => asset.id === id);
@@ -357,7 +355,7 @@
               <ChangeDate menuItem />
               <ChangeDescription menuItem />
               <ChangeLocation menuItem />
-              <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
+              <ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} />
               <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
               {#if $preferences.tags.enabled}
                 <TagAction menuItem />

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

@@ -26,7 +26,7 @@
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { getTagActions } from '$lib/services/tag.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { preferences, user } from '$lib/stores/user.store';
   import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
@@ -41,8 +41,6 @@
 
   let { data }: Props = $props();
 
-  const assetInteraction = new AssetInteraction();
-
   let tags = $derived<TagResponseDto[]>(data.tags);
   const tree = $derived(TreeNode.fromTags(tags));
   const tag = $derived(tree.traverse(data.path));
@@ -58,7 +56,7 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetInteraction.clearMultiselect();
+    assetMultiSelectManager.clearMultiselect();
   };
 
   const onRefresh = async () => {
@@ -99,7 +97,7 @@
         enableRouting={true}
         bind:timelineManager
         {options}
-        {assetInteraction}
+        assetInteraction={assetMultiSelectManager}
         removeAction={AssetAction.UNARCHIVE}
       >
         {#snippet empty()}
@@ -113,20 +111,20 @@
 </UserPageLayout>
 
 <section>
-  {#if assetInteraction.selectionActive}
+  {#if assetMultiSelectManager.selectionActive}
     <div class="fixed top-0 start-0 w-full">
       <AssetSelectControlBar
         ownerId={$user.id}
-        assets={assetInteraction.selectedAssets}
+        assets={assetMultiSelectManager.selectedAssets}
-        clearSelect={() => assetInteraction.clearMultiselect()}
+        clearSelect={() => assetMultiSelectManager.clearMultiselect()}
       >
-        {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+        {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
         <CreateSharedLink />
-        <SelectAllAssets {timelineManager} {assetInteraction} />
+        <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
         <ActionButton action={Actions.AddToAlbum} />
         <FavoriteAction
-          removeFavorite={assetInteraction.isAllFavorite}
+          removeFavorite={assetMultiSelectManager.isAllFavorite}
           onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
         ></FavoriteAction>
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>

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

@@ -13,7 +13,7 @@
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getTrashActions } from '$lib/services/trash.service';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -27,15 +27,13 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { isTrashed: true };
 
-  const assetInteraction = new AssetInteraction();
-
   if (!featureFlagsManager.value.trash) {
     handlePromiseError(goto(Route.photos()));
   }
 
   const handleEscape = () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
@@ -45,12 +43,18 @@
 
 {#if featureFlagsManager.value.trash}
   <UserPageLayout
-    hideNavbar={assetInteraction.selectionActive}
+    hideNavbar={assetMultiSelectManager.selectionActive}
-    actions={assetInteraction.selectionActive ? [] : [Empty, RestoreAll]}
+    actions={assetMultiSelectManager.selectionActive ? [] : [Empty, RestoreAll]}
     title={data.meta.title}
     scrollbar={false}
   >
-    <Timeline enableRouting={true} bind:timelineManager {options} {assetInteraction} onEscape={handleEscape}>
+    <Timeline
+      enableRouting={true}
+      bind:timelineManager
+      {options}
+      assetInteraction={assetMultiSelectManager}
+      onEscape={handleEscape}
+    >
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         {$t('trashed_items_will_be_permanently_deleted_after', {
           values: { days: serverConfigManager.value.trashDays },
@@ -63,12 +67,12 @@
   </UserPageLayout>
 {/if}
 
-{#if assetInteraction.selectionActive}
+{#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
-    assets={assetInteraction.selectedAssets}
+    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetInteraction.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
   >
-    <SelectAllAssets {timelineManager} {assetInteraction} />
+    <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
     <DeleteAssets force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
     <RestoreAssets onRestore={(assetIds) => timelineManager.removeAssets(assetIds)} />
   </AssetSelectControlBar>

web/src/routes/(user)/utilities/geolocation/+page.svelte

@@ -10,7 +10,7 @@
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
   import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import type { LatLng } from '$lib/types';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { setQueryValue } from '$lib/utils/navigation';
@@ -28,7 +28,6 @@
   let { data }: Props = $props();
 
   let isLoading = $state(false);
-  let assetInteraction = new AssetInteraction();
   let point = $state<LatLng>();
   let locationUpdated = $state(false);
 
@@ -47,7 +46,7 @@
 
     const confirmed = await modalManager.show(GeolocationUpdateConfirmModal, {
       point,
-      assetCount: assetInteraction.selectedAssets.length,
+      assetCount: assetMultiSelectManager.selectedAssets.length,
     });
 
     if (!confirmed) {
@@ -56,14 +55,14 @@
 
     await updateAssets({
       assetBulkUpdateDto: {
-        ids: assetInteraction.selectedAssets.map((asset) => asset.id),
+        ids: assetMultiSelectManager.selectedAssets.map((asset) => asset.id),
         latitude: point.lat,
         longitude: point.lng,
       },
     });
 
     const updatedAssets = await Promise.all(
-      assetInteraction.selectedAssets.map(async (asset) => {
+      assetMultiSelectManager.selectedAssets.map(async (asset) => {
         const updatedAsset = await getAssetInfo({ ...authManager.params, id: asset.id });
         return toTimelineAsset(updatedAsset);
       }),
@@ -78,8 +77,8 @@
     if (event.key === 'Shift') {
       event.preventDefault();
     }
-    if (event.key === 'Escape' && assetInteraction.selectionActive) {
+    if (event.key === 'Escape' && assetMultiSelectManager.selectionActive) {
-      cancelMultiselect(assetInteraction);
+      cancelMultiselect(assetMultiSelectManager);
     }
   };
   const onKeyUp = (event: KeyboardEvent) => {
@@ -89,7 +88,7 @@
   };
 
   const handleDeselectAll = () => {
-    cancelMultiselect(assetInteraction);
+    cancelMultiselect(assetMultiSelectManager);
   };
 
   const handlePickPoint = async () => {
@@ -101,8 +100,8 @@
     point = selected;
   };
   const handleEscape = () => {
-    if (assetInteraction.selectionActive) {
+    if (assetMultiSelectManager.selectionActive) {
-      assetInteraction.clearMultiselect();
+      assetMultiSelectManager.clearMultiselect();
       return;
     }
   };
@@ -168,7 +167,7 @@
         size="small"
         color="secondary"
         variant="ghost"
-        disabled={!assetInteraction.selectionActive}
+        disabled={!assetMultiSelectManager.selectionActive}
         onclick={handleDeselectAll}
       >
         {$t('unselect_all')}
@@ -177,11 +176,11 @@
         leadingIcon={mdiMapMarkerMultipleOutline}
         size="small"
         color="primary"
-        disabled={assetInteraction.selectedAssets.length === 0}
+        disabled={assetMultiSelectManager.selectedAssets.length === 0}
         onclick={() => handleUpdate()}
       >
         <Text class="hidden sm:inline-block">
-          {$t('apply_count', { values: { count: assetInteraction.selectedAssets.length } })}
+          {$t('apply_count', { values: { count: assetMultiSelectManager.selectedAssets.length } })}
         </Text>
       </Button>
     </div>
@@ -198,7 +197,7 @@
     enableRouting={true}
     bind:timelineManager
     {options}
-    {assetInteraction}
+    assetInteraction={assetMultiSelectManager}
     removeAction={AssetAction.ARCHIVE}
     onEscape={handleEscape}
     withStacked

web/src/routes/+layout.svelte

@@ -99,6 +99,9 @@
     if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
       return;
     }
+
+    eventManager.emit('AppNavigate');
+
     showNavigationLoadingBar = true;
   });