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}
+      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+      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}
+      assets={assetMultiSelectManager.assets}
-      clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
+      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}
+        assets={assetMultiSelectManager.assets}
-        clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
+        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 {
+  import { archiveAssets, getNextAsset, getPreviousAsset, navigateToAsset } from '$lib/utils/asset-utils';
-    archiveAssets,
-    cancelMultiselect,
-    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: 'Escape' }, onShortcut: () => assetInteraction.clear() },
-          { shortcut: { key: 'D', ctrl: true }, onShortcut: deselectAllAssets },
+          { 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}
+      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+      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 () => {
+  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);
-  };
+    }
-
-  const handleCancel = () => {
-    cancelMultiselect(assetInteraction);
   };
 </script>
 
 {#if withText}
-  <Button
+  <Button leadingIcon={icon} size="medium" color="secondary" variant="ghost" {onclick}>{label}</Button>
-    leadingIcon={allAssetsSelected ? mdiSelectRemove : mdiSelectAll}
-    size="medium"
-    color="secondary"
-    variant="ghost"
-    onclick={allAssetsSelected ? handleCancel : handleSelectAll}
-  >
-    {allAssetsSelected ? $t('unselect_all') : $t('select_all')}
-  </Button>
 {:else}
-  <IconButton
+  <IconButton shape="round" color="secondary" variant="ghost" aria-label={label} {icon} {onclick} />
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    aria-label={allAssetsSelected ? $t('unselect_all') : $t('select_all')}
-    icon={allAssetsSelected ? mdiSelectRemove : mdiSelectAll}
-    onclick={allAssetsSelected ? handleCancel : handleSelectAll}
-  />
 {/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()));
+  assets = $derived(Array.from(this.#selectedMap.values()));
-  isAllTrashed = $derived(this.selectedAssets.every((asset) => asset.isTrashed));
+  isAllTrashed = $derived(this.assets.every((asset) => asset.isTrashed));
-  isAllArchived = $derived(this.selectedAssets.every((asset) => asset.visibility === AssetVisibility.Archive));
+  isAllArchived = $derived(this.assets.every((asset) => asset.visibility === AssetVisibility.Archive));
-  isAllFavorite = $derived(this.selectedAssets.every((asset) => asset.isFavorite));
+  isAllFavorite = $derived(this.assets.every((asset) => asset.isFavorite));
-  isAllUserOwned = $derived(this.selectedAssets.every((asset) => asset.ownerId === this.#userId));
+  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),
+      getOwnedAssets: () => this.assets.filter((asset) => asset.ownerId === this.#userId),
-      getAssets: () => this.selectedAssets,
+      getAssets: () => this.assets,
-      clearSelect: () => this.clearMultiselect(),
+      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() {
+  clearCandidates() {
-    this.assetSelectionCandidates = [];
+    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 {

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

@@ -49,7 +49,6 @@
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { preferences, user } from '$lib/stores/user.store';
   import { handlePromiseError } from '$lib/utils';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '$lib/utils/navigation';
   import { AlbumUserRole, AssetVisibility, getAlbumInfo, updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
@@ -127,7 +126,7 @@
       return;
     }
     if (assetMultiSelectManager.selectionActive) {
-      cancelMultiselect(assetMultiSelectManager);
+      assetMultiSelectManager.clear();
       return;
     }
     await goto(Route.albums());
@@ -148,13 +147,13 @@
   };
 
   const handleCloseSelectAssets = async () => {
-    timelineMultiSelectManager.clearMultiselect();
+    timelineMultiSelectManager.clear();
     await setModeToView();
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const handleRemoveAssets = async (assetIds: string[]) => {
@@ -175,13 +174,13 @@
     await updateThumbnail(assetId);
 
     viewMode = AlbumPageViewMode.VIEW;
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const updateThumbnailUsingCurrentSelection = async () => {
-    if (assetMultiSelectManager.selectedAssets.length === 1) {
+    if (assetMultiSelectManager.assets.length === 1) {
-      const [firstAsset] = assetMultiSelectManager.selectedAssets;
+      const [firstAsset] = assetMultiSelectManager.assets;
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       await updateThumbnail(firstAsset.id);
     }
   };
@@ -290,7 +289,7 @@
     }
 
     await refreshAlbum();
-    timelineMultiSelectManager.clearMultiselect();
+    timelineMultiSelectManager.clear();
     await setModeToView();
   };
 
@@ -312,7 +311,7 @@
 
   const { Cast } = $derived(getGlobalActions($t));
   const { Share } = $derived(getAlbumActions($t, album));
-  const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineMultiSelectManager.selectedAssets));
+  const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineMultiSelectManager.assets));
 
   const Close = $derived({
     title: $t('go_back'),
@@ -453,8 +452,8 @@
 
     {#if assetMultiSelectManager.selectionActive}
       <AssetSelectControlBar
-        assets={assetMultiSelectManager.selectedAssets}
+        assets={assetMultiSelectManager.assets}
-        clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+        clearSelect={() => assetMultiSelectManager.clear()}
       >
         {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
@@ -480,7 +479,7 @@
             />
             <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
           {/if}
-          {#if assetMultiSelectManager.selectedAssets.length === 1}
+          {#if assetMultiSelectManager.assets.length === 1}
             <MenuOption
               text={$t('set_as_album_cover')}
               icon={mdiImageOutline}
@@ -597,7 +596,7 @@
               {#if !timelineMultiSelectManager.selectionActive}
                 {$t('add_to_album')}
               {:else}
-                {$t('selected_count', { values: { count: timelineMultiSelectManager.selectedAssets.length } })}
+                {$t('selected_count', { values: { count: timelineMultiSelectManager.assets.length } })}
               {/if}
             </p>
           {/snippet}

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

@@ -32,14 +32,14 @@
 
   const handleEscape = () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 </script>
 
@@ -59,10 +59,7 @@
 </UserPageLayout>
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar
+  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
-  >
     {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
     <ArchiveAction

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

@@ -35,14 +35,14 @@
 
   const handleEscape = () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 </script>
 
@@ -63,10 +63,7 @@
 
 <!-- Multiselection mode app bar -->
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar
+  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
-  >
     {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
     <FavoriteAction removeFavorite onFavorite={(assetIds) => timelineManager.removeAssets(assetIds)} />

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

@@ -25,7 +25,6 @@
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { foldersStore } from '$lib/stores/folders.svelte';
   import { preferences } from '$lib/stores/user.store';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { joinPaths } from '$lib/utils/tree-utils';
   import { ActionButton, CommandPaletteDefaultProvider, IconButton, Text } from '@immich/ui';
@@ -45,30 +44,29 @@
 
   const getLinkForPath = (path: string) => Route.folders({ path });
 
-  afterNavigate(function clearAssetSelection() {
+  afterNavigate(() => {
-    // Clear the asset selection when we navigate (like going to another folder)
+    assetMultiSelectManager.clear();
-    cancelMultiselect(assetMultiSelectManager);
   });
 
-  function navigateToView(path: string) {
+  const navigateToView = (path: string) => {
     return goto(getLinkForPath(path), { keepFocus: true, noScroll: true });
-  }
+  };
 
-  async function triggerAssetUpdate() {
+  const triggerAssetUpdate = async () => {
-    cancelMultiselect(assetMultiSelectManager);
+    assetMultiSelectManager.clear();
     if (data.tree.path) {
       await foldersStore.refreshAssetsByPath(data.tree.path);
     }
     await invalidateAll();
-  }
+  };
 
-  function handleSelectAllAssets() {
+  const handleSelectAllAssets = () => {
     if (!data.pathAssets) {
       return;
     }
 
     assetMultiSelectManager.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
-  }
+  };
 </script>
 
 <UserPageLayout title={data.meta.title}>
@@ -112,10 +110,7 @@
 
 {#if assetMultiSelectManager.selectionActive}
   <div class="fixed top-0 start-0 w-full">
-    <AssetSelectControlBar
+    <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
-    >
       {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
       <CreateSharedLink />

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

@@ -33,13 +33,13 @@
 
   const handleEscape = () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
 
   const handleMoveOffLockedFolder = (assetIds: string[]) => {
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
     timelineManager.removeAssets(assetIds);
   };
 
@@ -74,10 +74,7 @@
 
 <!-- Multi-selection mode app bar -->
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar
+  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
-  >
     <SelectAllAssets withText {timelineManager} assetInteraction={assetMultiSelectManager} />
     <SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>

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

@@ -28,7 +28,7 @@
 
   const handleEscape = () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
@@ -39,10 +39,7 @@
 </main>
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar
+  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
-  >
     {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
     <CreateSharedLink />

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

@@ -26,13 +26,13 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { getPersonActions } from '$lib/services/person.service';
-  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';
@@ -106,7 +106,7 @@
 
   const handleEscape = async () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
 
@@ -126,8 +126,8 @@
   });
 
   const handleUnmerge = () => {
-    timelineManager.removeAssets(assetMultiSelectManager.selectedAssets.map((a) => a.id));
+    timelineManager.removeAssets(assetMultiSelectManager.assets.map((a) => a.id));
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
     viewMode = PersonPageViewMode.VIEW_ASSETS;
   };
 
@@ -153,7 +153,7 @@
       handleError(error, $t('errors.unable_to_set_feature_photo'));
     }
 
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
 
     viewMode = PersonPageViewMode.VIEW_ASSETS;
   };
@@ -282,7 +282,7 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const onPersonUpdate = async (response: PersonResponseDto) => {
@@ -458,10 +458,7 @@
 
 <header>
   {#if assetMultiSelectManager.selectionActive}
-    <AssetSelectControlBar
+    <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-      assets={assetMultiSelectManager.selectedAssets}
-      clearSelect={() => assetMultiSelectManager.clearMultiselect()}
-    >
       {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
       <CreateSharedLink />
@@ -521,7 +518,7 @@
 
 {#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
   <UnMergeFaceSelector
-    assetIds={assetMultiSelectManager.selectedAssets.map((a) => a.id)}
+    assetIds={assetMultiSelectManager.assets.map((a) => a.id)}
     personAssets={person}
     onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
     onConfirm={handleUnmerge}

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

@@ -19,12 +19,12 @@
   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 { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { memoryManager } from '$lib/managers/memory-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { 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,7 +44,7 @@
   let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = { visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true };
 
-  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;
@@ -61,7 +61,7 @@
       return;
     }
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
@@ -78,7 +78,7 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const items = $derived(
@@ -114,8 +114,8 @@
 {#if assetMultiSelectManager.selectionActive}
   <AssetSelectControlBar
     ownerId={$user.id}
-    assets={assetMultiSelectManager.selectedAssets}
+    assets={assetMultiSelectManager.assets}
-    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+    clearSelect={() => assetMultiSelectManager.clear()}
   >
     {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
@@ -132,7 +132,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)}
@@ -142,7 +142,7 @@
         {#if isLinkActionAvailable}
           <LinkLivePhotoAction
             menuItem
-            unlink={assetMultiSelectManager.selectedAssets.length === 1}
+            unlink={assetMultiSelectManager.assets.length === 1}
             onLink={handleLink}
             onUnlink={handleUnlink}
           />

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

@@ -19,15 +19,14 @@
   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 { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  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';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { parseUtcDate } from '$lib/utils/date-time';
   import { handleError } from '$lib/utils/handle-error';
   import { isAlbumsRoute, isPeopleRoute } from '$lib/utils/navigation';
@@ -110,7 +109,7 @@
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
     onAssetDelete(assetIds);
   };
 
@@ -224,7 +223,7 @@
   }
 
   const onAlbumAddAssets = ({ assetIds }: { assetIds: string[] }) => {
-    cancelMultiselect(assetMultiSelectManager);
+    assetMultiSelectManager.clear();
 
     if (terms.isNotInAlbum) {
       const assetIdSet = new Set(assetIds);
@@ -320,8 +319,8 @@
     {#if assetMultiSelectManager.selectionActive}
       <div class="fixed top-0 start-0 w-full z-2">
         <AssetSelectControlBar
-          assets={assetMultiSelectManager.selectedAssets}
+          assets={assetMultiSelectManager.assets}
-          clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
+          clearSelect={() => assetMultiSelectManager.clear()}
         >
           {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
           <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />

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

@@ -22,11 +22,11 @@
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import { AssetAction } from '$lib/constants';
   import SkipLink from '$lib/elements/SkipLink.svelte';
+  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 { getAssetBulkActions } from '$lib/services/asset.service';
   import { getTagActions } from '$lib/services/tag.service';
-  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';
@@ -56,7 +56,7 @@
 
   const handleSetVisibility = (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
-    assetMultiSelectManager.clearMultiselect();
+    assetMultiSelectManager.clear();
   };
 
   const onRefresh = async () => {
@@ -115,8 +115,8 @@
     <div class="fixed top-0 start-0 w-full">
       <AssetSelectControlBar
         ownerId={$user.id}
-        assets={assetMultiSelectManager.selectedAssets}
+        assets={assetMultiSelectManager.assets}
-        clearSelect={() => assetMultiSelectManager.clearMultiselect()}
+        clearSelect={() => assetMultiSelectManager.clear()}
       >
         {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />

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

@@ -8,12 +8,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 { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getTrashActions } from '$lib/services/trash.service';
-  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';
@@ -33,7 +33,7 @@
 
   const handleEscape = () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
@@ -68,10 +68,7 @@
 {/if}
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar
+  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
-    assets={assetMultiSelectManager.selectedAssets}
-    clearSelect={() => assetMultiSelectManager.clearMultiselect()}
-  >
     <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
     <DeleteAssets force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
     <RestoreAssets onRestore={(assetIds) => timelineManager.removeAssets(assetIds)} />

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

@@ -4,15 +4,14 @@
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.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 { authManager } from '$lib/managers/auth-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
   import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.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';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetVisibility, getAssetInfo, updateAssets } from '@immich/sdk';
@@ -46,7 +45,7 @@
 
     const confirmed = await modalManager.show(GeolocationUpdateConfirmModal, {
       point,
-      assetCount: assetMultiSelectManager.selectedAssets.length,
+      assetCount: assetMultiSelectManager.assets.length,
     });
 
     if (!confirmed) {
@@ -55,14 +54,14 @@
 
     await updateAssets({
       assetBulkUpdateDto: {
-        ids: assetMultiSelectManager.selectedAssets.map((asset) => asset.id),
+        ids: assetMultiSelectManager.assets.map((asset) => asset.id),
         latitude: point.lat,
         longitude: point.lng,
       },
     });
 
     const updatedAssets = await Promise.all(
-      assetMultiSelectManager.selectedAssets.map(async (asset) => {
+      assetMultiSelectManager.assets.map(async (asset) => {
         const updatedAsset = await getAssetInfo({ ...authManager.params, id: asset.id });
         return toTimelineAsset(updatedAsset);
       }),
@@ -70,7 +69,7 @@
 
     timelineManager.upsertAssets(updatedAssets);
 
-    handleDeselectAll();
+    assetMultiSelectManager.clear();
   };
 
   const onKeyDown = (event: KeyboardEvent) => {
@@ -78,7 +77,7 @@
       event.preventDefault();
     }
     if (event.key === 'Escape' && assetMultiSelectManager.selectionActive) {
-      cancelMultiselect(assetMultiSelectManager);
+      assetMultiSelectManager.clear();
     }
   };
   const onKeyUp = (event: KeyboardEvent) => {
@@ -87,10 +86,6 @@
     }
   };
 
-  const handleDeselectAll = () => {
-    cancelMultiselect(assetMultiSelectManager);
-  };
-
   const handlePickPoint = async () => {
     const selected = await modalManager.show(GeolocationPointPickerModal, { point });
     if (!selected) {
@@ -101,7 +96,7 @@
   };
   const handleEscape = () => {
     if (assetMultiSelectManager.selectionActive) {
-      assetMultiSelectManager.clearMultiselect();
+      assetMultiSelectManager.clear();
       return;
     }
   };
@@ -168,7 +163,7 @@
         color="secondary"
         variant="ghost"
         disabled={!assetMultiSelectManager.selectionActive}
-        onclick={handleDeselectAll}
+        onclick={() => assetMultiSelectManager.clear()}
       >
         {$t('unselect_all')}
       </Button>
@@ -176,11 +171,11 @@
         leadingIcon={mdiMapMarkerMultipleOutline}
         size="small"
         color="primary"
-        disabled={assetMultiSelectManager.selectedAssets.length === 0}
+        disabled={assetMultiSelectManager.assets.length === 0}
         onclick={() => handleUpdate()}
       >
         <Text class="hidden sm:inline-block">
-          {$t('apply_count', { values: { count: assetMultiSelectManager.selectedAssets.length } })}
+          {$t('apply_count', { values: { count: assetMultiSelectManager.assets.length } })}
         </Text>
       </Button>
     </div>