refactor: asset select manager (#27329)

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

@@ -16,7 +16,7 @@
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
+  import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
   import { ActionButton, IconButton, Logo } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiPresentationPlay } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -26,10 +26,9 @@
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
-    user?: UserResponseDto | undefined;
   }
 
-  let { sharedLink, user = undefined }: Props = $props();
+  let { sharedLink }: Props = $props();
 
   const album = sharedLink.album as AlbumResponseDto;
 
@@ -97,11 +96,7 @@
 
 <header>
   {#if assetMultiSelectManager.selectionActive}
-    <AssetSelectControlBar
-      ownerId={user?.id}
-      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clear()}
-    >
+    <AssetSelectControlBar>
       <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
       {#if sharedLink.allowDownload}
         <DownloadAction filename="{album.albumName}.zip" />

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

@@ -336,11 +336,7 @@
 
 {#if assetMultiSelectManager.selectionActive}
   <div class="sticky top-0 z-1 dark">
-    <AssetSelectControlBar
-      forceDark
-      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clear()}
-    >
+    <AssetSelectControlBar forceDark>
       {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CreateSharedLink />
       <IconButton

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

@@ -80,10 +80,7 @@
 
   <header class="fixed top-0 inset-s-0 w-full">
     {#if assetMultiSelectManager.selectionActive}
-      <AssetSelectControlBar
-        assets={assetMultiSelectManager.assets}
-        clearSelect={() => assetMultiSelectManager.clear()}
-      >
+      <AssetSelectControlBar>
         <IconButton
           shape="round"
           color="secondary"

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

@@ -22,7 +22,7 @@
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { mapSettings } from '$lib/stores/preferences.store';
-  import { preferences, user } from '$lib/stores/user.store';
+  import { preferences } from '$lib/stores/user.store';
   import {
     updateStackedAssetInTimeline,
     updateUnstackedAssetInTimeline,
@@ -122,11 +122,7 @@
   <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
 
   <Portal target="body">
-    <AssetSelectControlBar
-      ownerId={$user.id}
-      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clear()}
-    >
+    <AssetSelectControlBar>
       <CreateSharedLink />
       <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
       <ActionButton action={Actions.AddToAlbum} />

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

@@ -1,32 +1,26 @@
-<script lang="ts" module>
-  import { setAssetControlContext } from '$lib/utils/context';
-  import { t } from 'svelte-i18n';
-</script>
-
 <script lang="ts">
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
+  import { setAssetControlContext } from '$lib/utils/context';
   import { mdiClose } from '@mdi/js';
   import type { Snippet } from 'svelte';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import { t } from 'svelte-i18n';
 
   type Props = {
-    assets: TimelineAsset[];
-    clearSelect: () => void;
-    ownerId?: string | undefined;
     children?: Snippet;
     forceDark?: boolean;
   };
 
-  let { assets, clearSelect, ownerId = undefined, children, forceDark }: Props = $props();
+  let { children, forceDark }: Props = $props();
 
-  setAssetControlContext({
-    getAssets: () => assets,
-    getOwnedAssets: () => (ownerId === undefined ? assets : assets.filter((asset) => asset.ownerId === ownerId)),
-    clearSelect: () => clearSelect(),
-  });
+  setAssetControlContext(assetMultiSelectManager.asControlContext());
+
+  const onClose = () => assetMultiSelectManager.clear();
+
+  const assets = $derived(assetMultiSelectManager.assets);
 </script>
 
-<ControlAppBar onClose={clearSelect} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
+<ControlAppBar {onClose} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   {#snippet leading()}
     <div class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-primary'}">
       <p class="block sm:hidden">{assets.length}</p>