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) {
-        cancelMultiselect(assetInteraction);
+      if (!assetViewerManager.isViewing && assetMultiSelectManager.selectionActive) {
+        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}
-      clearSelect={() => assetInteraction.clearMultiselect()}
+      assets={assetMultiSelectManager.selectedAssets}
+      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}
-      clearSelect={() => cancelMultiselect(assetInteraction)}
+      assets={assetMultiSelectManager.selectedAssets}
+      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} />
-        {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
+        <ArchiveAction
+          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}
-        clearSelect={() => cancelMultiselect(assetInteraction)}
+        assets={assetMultiSelectManager.selectedAssets}
+        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}
-  {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+{#if assetMultiSelectManager.selectionActive}
+  {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
   <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
 
   <Portal target="body">
     <AssetSelectControlBar
       ownerId={$user.id}
-      assets={assetInteraction.selectedAssets}
-      clearSelect={() => assetInteraction.clearMultiselect()}
+      assets={assetMultiSelectManager.selectedAssets}
+      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) {
-      const startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
+    if (assetInteraction.startAsset && rangeSelection) {
+      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;
   };