refactor: asset select manager (#27327)

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

@@ -15,7 +15,6 @@
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
   import { ActionButton, IconButton, Logo } from '@immich/ui';
@@ -66,7 +65,7 @@
     shortcut: { key: 'Escape' },
     onShortcut: () => {
       if (!assetViewerManager.isViewing && assetMultiSelectManager.selectionActive) {
-        cancelMultiselect(assetMultiSelectManager);
+        assetMultiSelectManager.clear();
       }
     },
   }}
@@ -100,8 +99,8 @@
   {#if assetMultiSelectManager.selectionActive}
     <AssetSelectControlBar
       ownerId={user?.id}
-      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+      assets={assetMultiSelectManager.assets}
+      clearSelect={() => assetMultiSelectManager.clear()}
     >
       <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
       {#if sharedLink.allowDownload}

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

@@ -29,7 +29,6 @@
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetMediaSize, AssetTypeEnum, getAssetInfo } from '@immich/sdk';
   import { ActionButton, IconButton, toastManager } from '@immich/ui';
@@ -339,8 +338,8 @@
   <div class="sticky top-0 z-1 dark">
     <AssetSelectControlBar
       forceDark
-      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
+      assets={assetMultiSelectManager.assets}
+      clearSelect={() => assetMultiSelectManager.clear()}
     >
       {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CreateSharedLink />

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

@@ -12,7 +12,7 @@
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
-  import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
+  import { downloadArchive } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -81,8 +81,8 @@
   <header class="fixed top-0 inset-s-0 w-full">
     {#if assetMultiSelectManager.selectionActive}
       <AssetSelectControlBar
-        assets={assetMultiSelectManager.selectedAssets}
-        clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
+        assets={assetMultiSelectManager.assets}
+        clearSelect={() => assetMultiSelectManager.clear()}
       >
         <IconButton
           shape="round"

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

@@ -16,13 +16,7 @@
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
-  import {
-    archiveAssets,
-    cancelMultiselect,
-    getNextAsset,
-    getPreviousAsset,
-    navigateToAsset,
-  } from '$lib/utils/asset-utils';
+  import { archiveAssets, getNextAsset, getPreviousAsset, navigateToAsset } from '$lib/utils/asset-utils';
   import { moveFocus } from '$lib/utils/focus-util';
   import { handleError } from '$lib/utils/handle-error';
   import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
@@ -126,10 +120,6 @@
     assetInteraction.selectAssets(assets.map((a) => toTimelineAsset(a)));
   };
 
-  const deselectAllAssets = () => {
-    cancelMultiselect(assetInteraction);
-  };
-
   const onKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Shift') {
       event.preventDefault();
@@ -153,18 +143,18 @@
 
     // Select/deselect already loaded assets
     if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
+      for (const candidate of assetInteraction.candidates) {
         assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
       }
       assetInteraction.removeAssetFromMultiselectGroup(asset.id);
     } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
+      for (const candidate of assetInteraction.candidates) {
         assetInteraction.selectAsset(candidate);
       }
       assetInteraction.selectAsset(asset);
     }
 
-    assetInteraction.clearAssetSelectionCandidates();
+    assetInteraction.clearCandidates();
     assetInteraction.setAssetSelectionStart(deselect ? null : asset);
   };
 
@@ -202,13 +192,13 @@
   };
 
   const onDelete = () => {
-    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
+    const hasTrashedAsset = assetInteraction.assets.some((asset) => asset.isTrashed);
     handlePromiseError(trashOrDelete(hasTrashedAsset));
   };
 
   const trashOrDelete = async (force: boolean = false) => {
     const forceOrNoTrash = force || !featureFlagsManager.value.trash;
-    const selectedAssets = assetInteraction.selectedAssets;
+    const selectedAssets = assetInteraction.assets;
 
     if ($showDeleteModal && forceOrNoTrash) {
       const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: selectedAssets.length });
@@ -224,17 +214,17 @@
       onReload,
     );
 
-    assetInteraction.clearMultiselect();
+    assetInteraction.clear();
   };
 
   const toggleArchive = async () => {
     const ids = await archiveAssets(
-      assetInteraction.selectedAssets,
+      assetInteraction.assets,
       assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive,
     );
     if (ids) {
       assets = assets.filter((asset) => !ids.includes(asset.id));
-      deselectAllAssets();
+      assetInteraction.clear();
     }
   };
 
@@ -274,8 +264,8 @@
 
       if (assetInteraction.selectionActive) {
         shortcuts.push(
-          { shortcut: { key: 'Escape' }, onShortcut: deselectAllAssets },
-          { shortcut: { key: 'D', ctrl: true }, onShortcut: deselectAllAssets },
+          { shortcut: { key: 'Escape' }, onShortcut: () => assetInteraction.clear() },
+          { shortcut: { key: 'D', ctrl: true }, onShortcut: () => assetInteraction.clear() },
         );
         if (allowDeletion) {
           shortcuts.push(
@@ -335,13 +325,13 @@
 
   $effect(() => {
     if (!lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
+      assetInteraction.clearCandidates();
     }
   });
 
   $effect(() => {
     if (!shiftKeyIsDown) {
-      assetInteraction.clearAssetSelectionCandidates();
+      assetInteraction.clearCandidates();
     }
   });
 

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

@@ -45,7 +45,7 @@
   let { bbox, selectedClusterIds, assetCount, onClose }: Props = $props();
 
   let timelineManager = $state<TimelineManager>() as TimelineManager;
-  let selectedAssets = $derived(assetMultiSelectManager.selectedAssets);
+  let selectedAssets = $derived(assetMultiSelectManager.assets);
   let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
   let isLinkActionAvailable = $derived.by(() => {
     const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
@@ -69,11 +69,11 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const handleEscape = () => {
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const timelineBoundingBox = $derived(
@@ -90,7 +90,7 @@
 
   $effect.pre(() => {
     void timelineOptions;
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   });
 </script>
 
@@ -124,8 +124,8 @@
   <Portal target="body">
     <AssetSelectControlBar
       ownerId={$user.id}
-      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+      assets={assetMultiSelectManager.assets}
+      clearSelect={() => assetMultiSelectManager.clear()}
     >
       <CreateSharedLink />
       <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
@@ -139,7 +139,7 @@
 
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem />
-          {#if assetMultiSelectManager.selectedAssets.length > 1 || isAssetStackSelected}
+          {#if assetMultiSelectManager.assets.length > 1 || isAssetStackSelected}
             <StackAction
               unstack={isAssetStackSelected}
               onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
@@ -149,7 +149,7 @@
           {#if isLinkActionAvailable}
             <LinkLivePhotoAction
               menuItem
-              unlink={assetMultiSelectManager.selectedAssets.length === 1}
+              unlink={assetMultiSelectManager.assets.length === 1}
               onLink={handleLink}
               onUnlink={handleUnlink}
             />

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

@@ -404,7 +404,7 @@
       }
     }
 
-    assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.selectedAssets.length;
+    assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.assets.length;
   };
 
   const onSelectAssets = async (asset: TimelineAsset) => {
@@ -413,23 +413,23 @@
     }
     onSelect(asset);
 
-    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
+    const rangeSelection = assetInteraction.candidates.length > 0;
     const deselect = assetInteraction.hasSelectedAsset(asset.id);
 
     // Select/deselect already loaded assets
     if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
+      for (const candidate of assetInteraction.candidates) {
         assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
       }
       assetInteraction.removeAssetFromMultiselectGroup(asset.id);
     } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
+      for (const candidate of assetInteraction.candidates) {
         handleSelectAsset(candidate);
       }
       handleSelectAsset(asset);
     }
 
-    assetInteraction.clearAssetSelectionCandidates();
+    assetInteraction.clearCandidates();
 
     if (assetInteraction.startAsset && rangeSelection) {
       const startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.startAsset.id);
@@ -498,13 +498,13 @@
 
   $effect(() => {
     if (!lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
+      assetInteraction.clearCandidates();
     }
   });
 
   $effect(() => {
     if (!shiftKeyIsDown) {
-      assetInteraction.clearAssetSelectionCandidates();
+      assetInteraction.clearCandidates();
     }
   });
 
@@ -539,7 +539,7 @@
       assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
     }
 
-    assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.selectedAssets.length;
+    assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.assets.length;
   };
 
   const _onClick = (

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

@@ -1,46 +1,33 @@
 <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 { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
+  import { selectAllAssets } from '$lib/utils/asset-utils';
   import { Button, IconButton } from '@immich/ui';
   import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     timelineManager: TimelineManager;
     assetInteraction: AssetMultiSelectManager;
     withText?: boolean;
-  }
+  };
 
   let { timelineManager, assetInteraction, withText = false }: Props = $props();
   const allAssetsSelected = $derived(assetInteraction.selectAll);
 
-  const handleSelectAll = async () => {
-    await selectAllAssets(timelineManager, assetInteraction);
-  };
-
-  const handleCancel = () => {
-    cancelMultiselect(assetInteraction);
+  const icon = $derived(allAssetsSelected ? mdiSelectRemove : mdiSelectAll);
+  const label = $derived(allAssetsSelected ? $t('unselect_all') : $t('select_all'));
+  const onclick = async () => {
+    if (allAssetsSelected) {
+      assetInteraction.clear();
+    } else {
+      await selectAllAssets(timelineManager, assetInteraction);
+    }
   };
 </script>
 
 {#if withText}
-  <Button
-    leadingIcon={allAssetsSelected ? mdiSelectRemove : mdiSelectAll}
-    size="medium"
-    color="secondary"
-    variant="ghost"
-    onclick={allAssetsSelected ? handleCancel : handleSelectAll}
-  >
-    {allAssetsSelected ? $t('unselect_all') : $t('select_all')}
-  </Button>
+  <Button leadingIcon={icon} size="medium" color="secondary" variant="ghost" {onclick}>{label}</Button>
 {:else}
-  <IconButton
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    aria-label={allAssetsSelected ? $t('unselect_all') : $t('select_all')}
-    icon={allAssetsSelected ? mdiSelectRemove : mdiSelectAll}
-    onclick={allAssetsSelected ? handleCancel : handleSelectAll}
-  />
+  <IconButton shape="round" color="secondary" variant="ghost" aria-label={label} {icon} {onclick} />
 {/if}

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

@@ -19,7 +19,7 @@
   import { searchStore } from '$lib/stores/search.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets, updateStackedAssetInTimeline } from '$lib/utils/actions';
-  import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
+  import { archiveAssets, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
   import { AssetVisibility } from '@immich/sdk';
   import { isModalOpen, modalManager } from '@immich/ui';
 
@@ -34,7 +34,7 @@
 
   const trashOrDelete = async (forceRequested?: boolean) => {
     const force = forceRequested || !featureFlagsManager.value.trash;
-    const selectedAssets = assetInteraction.selectedAssets;
+    const selectedAssets = assetInteraction.assets;
 
     if ($showDeleteModal && force) {
       const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: selectedAssets.length });
@@ -52,16 +52,16 @@
       selectedAssets,
       force ? undefined : (assets) => timelineManager.upsertAssets(assets),
     );
-    assetInteraction.clearMultiselect();
+    assetInteraction.clear();
   };
 
   const onDelete = () => {
-    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
+    const hasTrashedAsset = assetInteraction.assets.some((asset) => asset.isTrashed);
     handlePromiseError(trashOrDelete(hasTrashedAsset));
   };
 
   const onStackAssets = async () => {
-    const result = await stackAssets(assetInteraction.selectedAssets);
+    const result = await stackAssets(assetInteraction.assets);
 
     updateStackedAssetInTimeline(timelineManager, result);
 
@@ -70,18 +70,14 @@
 
   const toggleArchive = async () => {
     const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
-    const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
+    const ids = await archiveAssets(assetInteraction.assets, visibility);
     timelineManager.update(ids, (asset) => (asset.visibility = visibility));
     eventManager.emit('AssetsArchive', ids);
-    deselectAllAssets();
+    assetInteraction.clear();
   };
 
   let shiftKeyIsDown = $state(false);
 
-  const deselectAllAssets = () => {
-    cancelMultiselect(assetInteraction);
-  };
-
   const onKeyDown = (event: KeyboardEvent) => {
     if (searchStore.isSearchEnabled) {
       return;
@@ -125,7 +121,7 @@
 
   $effect(() => {
     if (isEmpty) {
-      assetInteraction.clearMultiselect();
+      assetInteraction.clear();
     }
   });
 
@@ -166,7 +162,7 @@
       shortcuts.push(
         { shortcut: { key: 'Delete' }, onShortcut: onDelete },
         { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
-        { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
+        { shortcut: { key: 'D', ctrl: true }, onShortcut: () => assetInteraction.clear() },
         { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
         { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
       );

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

@@ -19,21 +19,21 @@ export class AssetMultiSelectManager {
 
   selectedGroup = new SvelteSet<string>();
 
-  assetSelectionCandidates = $state<TimelineAsset[]>([]);
+  candidates = $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));
+  assets = $derived(Array.from(this.#selectedMap.values()));
+  isAllTrashed = $derived(this.assets.every((asset) => asset.isTrashed));
+  isAllArchived = $derived(this.assets.every((asset) => asset.visibility === AssetVisibility.Archive));
+  isAllFavorite = $derived(this.assets.every((asset) => asset.isFavorite));
+  isAllUserOwned = $derived(this.assets.every((asset) => asset.ownerId === this.#userId));
 
   #unsubscribe?: () => void;
 
   constructor(options?: AssetMultiSelectOptions) {
     const { resetOnNavigate = false } = options ?? {};
     if (resetOnNavigate) {
-      this.#unsubscribe = eventManager.on({ AppNavigate: () => this.clearMultiselect() });
+      this.#unsubscribe = eventManager.on({ AppNavigate: () => this.clear() });
     }
   }
 
@@ -43,9 +43,9 @@ export class AssetMultiSelectManager {
 
   asControlContext(): AssetControlContext {
     return {
-      getOwnedAssets: () => this.selectedAssets.filter((asset) => asset.ownerId === this.#userId),
-      getAssets: () => this.selectedAssets,
-      clearSelect: () => this.clearMultiselect(),
+      getOwnedAssets: () => this.assets.filter((asset) => asset.ownerId === this.#userId),
+      getAssets: () => this.assets,
+      clearSelect: () => this.clear(),
     };
   }
 
@@ -54,7 +54,7 @@ export class AssetMultiSelectManager {
   }
 
   hasSelectionCandidate(assetId: string) {
-    return this.assetSelectionCandidates.some((asset) => asset.id === assetId);
+    return this.candidates.some((asset) => asset.id === assetId);
   }
 
   selectAsset(asset: TimelineAsset) {
@@ -84,14 +84,14 @@ export class AssetMultiSelectManager {
   }
 
   setAssetSelectionCandidates(assets: TimelineAsset[]) {
-    this.assetSelectionCandidates = assets;
+    this.candidates = assets;
   }
 
-  clearAssetSelectionCandidates() {
-    this.assetSelectionCandidates = [];
+  clearCandidates() {
+    this.candidates = [];
   }
 
-  clearMultiselect() {
+  clear() {
     this.selectAll = false;
 
     // Multi-selection
@@ -99,7 +99,7 @@ export class AssetMultiSelectManager {
     this.selectedGroup.clear();
 
     // Range selection
-    this.assetSelectionCandidates = [];
+    this.candidates = [];
     this.startAsset = null;
   }
 }

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

@@ -402,7 +402,7 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt
       }
 
       if (!assetInteraction.selectAll) {
-        assetInteraction.clearMultiselect();
+        assetInteraction.clear();
         break; // Cancelled
       }
       assetInteraction.selectAssets([...monthGroup.assetsIterator()]);
@@ -418,11 +418,6 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt
   }
 };
 
-export const cancelMultiselect = (assetInteraction: AssetMultiSelectManager) => {
-  assetInteraction.selectAll = false;
-  assetInteraction.clearMultiselect();
-};
-
 export const toggleArchive = async (asset: AssetResponseDto) => {
   const $t = get(t);
   try {