refactor: selection mananger (#27325)

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

@@ -0,0 +1,45 @@
+import { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
+import { resetSavedUser, user } from '$lib/stores/user.store';
+import { AssetVisibility } from '@immich/sdk';
+import { timelineAssetFactory } from '@test-data/factories/asset-factory';
+import { userAdminFactory } from '@test-data/factories/user-factory';
+
+describe('AssetMultiSelectManager', () => {
+  let sut: AssetMultiSelectManager;
+
+  beforeEach(() => {
+    sut = new AssetMultiSelectManager();
+  });
+
+  it('calculates derived values from selection', () => {
+    sut.selectAsset(
+      timelineAssetFactory.build({ isFavorite: true, visibility: AssetVisibility.Archive, isTrashed: true }),
+    );
+    sut.selectAsset(
+      timelineAssetFactory.build({ isFavorite: true, visibility: AssetVisibility.Timeline, isTrashed: false }),
+    );
+
+    expect(sut.selectionActive).toBe(true);
+    expect(sut.isAllTrashed).toBe(false);
+    expect(sut.isAllArchived).toBe(false);
+    expect(sut.isAllFavorite).toBe(true);
+  });
+
+  it('updates isAllUserOwned when the active user changes', () => {
+    const [user1, user2] = userAdminFactory.buildList(2);
+    sut.selectAsset(timelineAssetFactory.build({ ownerId: user1.id }));
+
+    const cleanup = $effect.root(() => {
+      expect(sut.isAllUserOwned).toBe(false);
+
+      user.set(user1);
+      expect(sut.isAllUserOwned).toBe(true);
+
+      user.set(user2);
+      expect(sut.isAllUserOwned).toBe(false);
+    });
+
+    cleanup();
+    resetSavedUser();
+  });
+});

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

@@ -0,0 +1,107 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+import { user } from '$lib/stores/user.store';
+import type { AssetControlContext } from '$lib/types';
+import { AssetVisibility, type UserAdminResponseDto } from '@immich/sdk';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { fromStore } from 'svelte/store';
+
+export type AssetMultiSelectOptions = {
+  resetOnNavigate?: boolean;
+};
+export class AssetMultiSelectManager {
+  #selectedMap = new SvelteMap<string, TimelineAsset>();
+  #user = fromStore<UserAdminResponseDto | undefined>(user);
+  #userId = $derived(this.#user.current?.id);
+
+  selectAll = $state(false);
+  startAsset = $state<TimelineAsset | null>(null);
+
+  selectedGroup = new SvelteSet<string>();
+
+  assetSelectionCandidates = $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));
+
+  #unsubscribe?: () => void;
+
+  constructor(options?: AssetMultiSelectOptions) {
+    const { resetOnNavigate = false } = options ?? {};
+    if (resetOnNavigate) {
+      this.#unsubscribe = eventManager.on({ AppNavigate: () => this.clearMultiselect() });
+    }
+  }
+
+  destroy() {
+    this.#unsubscribe?.();
+  }
+
+  asControlContext(): AssetControlContext {
+    return {
+      getOwnedAssets: () => this.selectedAssets.filter((asset) => asset.ownerId === this.#userId),
+      getAssets: () => this.selectedAssets,
+      clearSelect: () => this.clearMultiselect(),
+    };
+  }
+
+  hasSelectedAsset(assetId: string) {
+    return this.#selectedMap.has(assetId);
+  }
+
+  hasSelectionCandidate(assetId: string) {
+    return this.assetSelectionCandidates.some((asset) => asset.id === assetId);
+  }
+
+  selectAsset(asset: TimelineAsset) {
+    this.#selectedMap.set(asset.id, asset);
+  }
+
+  selectAssets(assets: TimelineAsset[]) {
+    for (const asset of assets) {
+      this.selectAsset(asset);
+    }
+  }
+
+  removeAssetFromMultiselectGroup(assetId: string) {
+    this.#selectedMap.delete(assetId);
+  }
+
+  addGroupToMultiselectGroup(group: string) {
+    this.selectedGroup.add(group);
+  }
+
+  removeGroupFromMultiselectGroup(group: string) {
+    this.selectedGroup.delete(group);
+  }
+
+  setAssetSelectionStart(asset: TimelineAsset | null) {
+    this.startAsset = asset;
+  }
+
+  setAssetSelectionCandidates(assets: TimelineAsset[]) {
+    this.assetSelectionCandidates = assets;
+  }
+
+  clearAssetSelectionCandidates() {
+    this.assetSelectionCandidates = [];
+  }
+
+  clearMultiselect() {
+    this.selectAll = false;
+
+    // Multi-selection
+    this.#selectedMap.clear();
+    this.selectedGroup.clear();
+
+    // Range selection
+    this.assetSelectionCandidates = [];
+    this.startAsset = null;
+  }
+}
+
+export const assetMultiSelectManager = new AssetMultiSelectManager({ resetOnNavigate: true });

web/src/lib/managers/event-manager.svelte.ts

@@ -20,6 +20,7 @@ import type {
 
 export type Events = {
   AppInit: [];
+  AppNavigate: [];
 
   AuthLogin: [LoginResponseDto];
   AuthLogout: [];