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
+    <AssetSelectControlBar>
-      ownerId={user?.id}
-      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clear()}
-    >
       <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
+    <AssetSelectControlBar forceDark>
-      forceDark
-      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clear()}
-    >
       {@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
+      <AssetSelectControlBar>
-        assets={assetMultiSelectManager.assets}
-        clearSelect={() => assetMultiSelectManager.clear()}
-      >
         <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
+    <AssetSelectControlBar>
-      ownerId={$user.id}
-      assets={assetMultiSelectManager.assets}
-      clearSelect={() => assetMultiSelectManager.clear()}
-    >
       <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({
+  setAssetControlContext(assetMultiSelectManager.asControlContext());
-    getAssets: () => assets,
+
-    getOwnedAssets: () => (ownerId === undefined ? assets : assets.filter((asset) => asset.ownerId === ownerId)),
+  const onClose = () => assetMultiSelectManager.clear();
-    clearSelect: () => clearSelect(),
+
-  });
+  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>

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

@@ -43,7 +43,8 @@ export class AssetMultiSelectManager {
 
   asControlContext(): AssetControlContext {
     return {
-      getOwnedAssets: () => this.assets.filter((asset) => asset.ownerId === this.#userId),
+      getOwnedAssets: () =>
+        this.#userId ? this.assets.filter((asset) => asset.ownerId === this.#userId) : this.assets,
       getAssets: () => this.assets,
       clearSelect: () => this.clear(),
     };

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

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

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

@@ -59,7 +59,7 @@
 </UserPageLayout>
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+  <AssetSelectControlBar>
     {@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

@@ -63,7 +63,7 @@
 
 <!-- Multiselection mode app bar -->
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+  <AssetSelectControlBar>
     {@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

@@ -110,7 +110,7 @@
 
 {#if assetMultiSelectManager.selectionActive}
   <div class="fixed top-0 start-0 w-full">
-    <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+    <AssetSelectControlBar>
       {@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

@@ -74,7 +74,7 @@
 
 <!-- Multi-selection mode app bar -->
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+  <AssetSelectControlBar>
     <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

@@ -39,7 +39,7 @@
 </main>
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+  <AssetSelectControlBar>
     {@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

@@ -458,7 +458,7 @@
 
 <header>
   {#if assetMultiSelectManager.selectionActive}
-    <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+    <AssetSelectControlBar>
       {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
       <CreateSharedLink />

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

@@ -25,7 +25,7 @@
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { preferences, user } from '$lib/stores/user.store';
+  import { preferences } from '$lib/stores/user.store';
   import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
   import {
     updateStackedAssetInTimeline,
@@ -112,11 +112,7 @@
 </UserPageLayout>
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar
+  <AssetSelectControlBar>
-    ownerId={$user.id}
-    assets={assetMultiSelectManager.assets}
-    clearSelect={() => assetMultiSelectManager.clear()}
-  >
     {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
     <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
 

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

@@ -318,10 +318,7 @@
   <section>
     {#if assetMultiSelectManager.selectionActive}
       <div class="fixed top-0 start-0 w-full z-2">
-        <AssetSelectControlBar
+        <AssetSelectControlBar>
-          assets={assetMultiSelectManager.assets}
-          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

@@ -27,7 +27,7 @@
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { getTagActions } from '$lib/services/tag.service';
-  import { preferences, user } from '$lib/stores/user.store';
+  import { preferences } from '$lib/stores/user.store';
   import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider, Text } from '@immich/ui';
@@ -113,11 +113,7 @@
 <section>
   {#if assetMultiSelectManager.selectionActive}
     <div class="fixed top-0 start-0 w-full">
-      <AssetSelectControlBar
+      <AssetSelectControlBar>
-        ownerId={$user.id}
-        assets={assetMultiSelectManager.assets}
-        clearSelect={() => assetMultiSelectManager.clear()}
-      >
         {@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
         <CreateSharedLink />

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

@@ -68,7 +68,7 @@
 {/if}
 
 {#if assetMultiSelectManager.selectionActive}
-  <AssetSelectControlBar assets={assetMultiSelectManager.assets} clearSelect={() => assetMultiSelectManager.clear()}>
+  <AssetSelectControlBar>
     <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
     <DeleteAssets force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
     <RestoreAssets onRestore={(assetIds) => timelineManager.removeAssets(assetIds)} />