Run ops even if asset no longer matches criteria; add tests

Consolidates asset operation logic within TimelineManager class and removes the now redundant 
operations-support.svelte.ts file. 

Combines addAsset/updateAsset to be upsertAsset. 


Changes:
- Move `addAssetsToMonthGroups` logic into TimelineManager's `addAssetsToSegments`, `upsertAssetIntoSegment`, `postCreateSegments`, and `postUpsert` methods
- Move `runAssetOperation` from operations-support into TimelineManager's private `#runAssetOperation` method
- Rename public `addAssets`/`updateAssets` methods to unified `upsertAssets` for consistency
- Delete internal/operations-support.svelte.ts
- Update WebsocketSupport to use `upsertAssets` for both add and update operations
- Fix AssetOperation return type to allow undefined/void operations (not just `{ remove: boolean }`)
- Update MonthGroup constructor to accept `loaded` parameter for better initialization control
- Update all test references from `addAssets`/`updateAssets` to `upsertAssets`

This refactoring improves code maintainability by eliminating duplicate logic and consolidating all asset operations within the TimelineManager class where they belong.

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

@@ -110,13 +110,9 @@
       case AssetAction.ARCHIVE:
       case AssetAction.UNARCHIVE:
       case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
+      case AssetAction.UNFAVORITE:
       case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
+        timelineManager.upsertAssets([action.asset]);
         break;
       }
 
@@ -135,7 +131,7 @@
         break;
       }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
+        timelineManager.upsertAssets([toTimelineAsset(action.asset)]);
         if (action.stack) {
           //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
           updateUnstackedAssetInTimeline(

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

@@ -2,7 +2,7 @@
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';

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

@@ -46,7 +46,7 @@
       !(isTrashEnabled && !force),
       (assetIds) => timelineManager.removeAssets(assetIds),
       assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
+      !isTrashEnabled || force ? undefined : (assets) => timelineManager.upsertAssets(assets),
     );
     assetInteraction.clearMultiselect();
   };

web/src/lib/managers/timeline-manager/day-group.svelte.ts

@@ -4,9 +4,9 @@ import type { CommonLayoutOptions } from '$lib/utils/layout-utils';
 import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
 import { plainDateTimeCompare } from '$lib/utils/timeline-util';
 
-import { SvelteSet } from 'svelte/reactivity';
+import { onCreateDayGroup } from '$lib/managers/timeline-manager/internal/TestHooks.svelte';
 import type { MonthGroup } from './month-group.svelte';
-import type { AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
+import type { AssetOperation, Direction, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';
 
 export class DayGroup {
@@ -31,6 +31,9 @@ export class DayGroup {
     this.monthGroup = monthGroup;
     this.day = day;
     this.groupTitle = groupTitle;
+    if (import.meta.env.DEV) {
+      onCreateDayGroup(this);
+    }
   }
 
   get top() {
@@ -104,15 +107,18 @@ export class DayGroup {
   runAssetOperation(ids: Set<string>, operation: AssetOperation) {
     if (ids.size === 0) {
       return {
-        moveAssets: [] as MoveAsset[],
-        processedIds: new SvelteSet<string>(),
+        moveAssets: [] as TimelineAsset[],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        processedIds: new Set<string>(),
         unprocessedIds: ids,
         changedGeometry: false,
       };
     }
-    const unprocessedIds = new SvelteSet<string>(ids);
-    const processedIds = new SvelteSet<string>();
-    const moveAssets: MoveAsset[] = [];
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const unprocessedIds = new Set<string>(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const processedIds = new Set<string>();
+    const moveAssets: TimelineAsset[] = [];
     let changedGeometry = false;
     for (const assetId of unprocessedIds) {
       const index = this.viewerAssets.findIndex((viewAsset) => viewAsset.id == assetId);
@@ -121,13 +127,20 @@ export class DayGroup {
       }
 
       const asset = this.viewerAssets[index].asset!;
+      // save old time, pre-mutating operation
       const oldTime = { ...asset.localDateTime };
-      let { remove } = operation(asset);
+      const opResult = operation(asset);
+      let remove = false;
+      if (opResult) {
+        remove = (opResult as { remove: boolean }).remove ?? false;
+      }
       const newTime = asset.localDateTime;
-      if (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day) {
-        const { year, month, day } = newTime;
+      if (
+        !remove &&
+        (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day)
+      ) {
         remove = true;
-        moveAssets.push({ asset, date: { year, month, day } });
+        moveAssets.push(asset);
       }
       unprocessedIds.delete(assetId);
       processedIds.add(assetId);

web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts

@@ -1,6 +1,5 @@
 import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
-import { SvelteSet } from 'svelte/reactivity';
 import type { DayGroup } from './day-group.svelte';
 import type { MonthGroup } from './month-group.svelte';
 import type { TimelineAsset } from './types';
@@ -10,8 +9,10 @@ export class GroupInsertionCache {
     [year: number]: { [month: number]: { [day: number]: DayGroup } };
   } = {};
   unprocessedAssets: TimelineAsset[] = [];
-  changedDayGroups = new SvelteSet<DayGroup>();
-  newDayGroups = new SvelteSet<DayGroup>();
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  changedDayGroups = new Set<DayGroup>();
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  newDayGroups = new Set<DayGroup>();
 
   getDayGroup({ year, month, day }: TimelineDate): DayGroup | undefined {
     return this.#lookupCache[year]?.[month]?.[day];
@@ -32,7 +33,8 @@ export class GroupInsertionCache {
   }
 
   get updatedBuckets() {
-    const updated = new SvelteSet<MonthGroup>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const updated = new Set<MonthGroup>();
     for (const group of this.changedDayGroups) {
       updated.add(group.monthGroup);
     }
@@ -40,7 +42,8 @@ export class GroupInsertionCache {
   }
 
   get bucketsWithNewDayGroups() {
-    const updated = new SvelteSet<MonthGroup>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const updated = new Set<MonthGroup>();
     for (const group of this.newDayGroups) {
       updated.add(group.monthGroup);
     }

web/src/lib/managers/timeline-manager/internal/TestHooks.svelte.ts

@@ -0,0 +1,16 @@
+import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
+
+let testHooks: TestHooks | undefined = undefined;
+
+export type TestHooks = {
+  onCreateMonthGroup(monthGroup: MonthGroup): unknown;
+  onCreateDayGroup(dayGroup: DayGroup): unknown;
+};
+
+export const setTestHooks = (hooks: TestHooks) => {
+  testHooks = hooks;
+};
+
+export const onCreateMonthGroup = (monthGroup: MonthGroup) => testHooks?.onCreateMonthGroup(monthGroup);
+export const onCreateDayGroup = (dayGroup: DayGroup) => testHooks?.onCreateDayGroup(dayGroup);

web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts

@@ -1,6 +1,6 @@
 import { TUNABLES } from '$lib/utils/tunables';
 import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
+import { TimelineManager } from '../timeline-manager.svelte';
 
 const {
   TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },

web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts

@@ -1,5 +1,5 @@
 import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
+import { TimelineManager } from '../timeline-manager.svelte';
 import type { UpdateGeometryOptions } from '../types';
 
 export function updateGeometry(timelineManager: TimelineManager, month: MonthGroup, options: UpdateGeometryOptions) {

web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts

@@ -2,7 +2,7 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import { toISOYearMonthUTC } from '$lib/utils/timeline-util';
 import { getTimeBucket } from '@immich/sdk';
 import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
+import { TimelineManager } from '../timeline-manager.svelte';
 import type { TimelineManagerOptions } from '../types';
 
 export async function loadFromTimeBuckets(
@@ -46,7 +46,7 @@ export async function loadFromTimeBuckets(
     }
   }
 
-  const unprocessedAssets = monthGroup.addAssets(bucketResponse);
+  const unprocessedAssets = monthGroup.addAssets(bucketResponse, true);
   if (unprocessedAssets.length > 0) {
     console.error(
       `Warning: getTimeBucket API returning assets not in requested month: ${monthGroup.yearMonth.month}, ${JSON.stringify(

web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts

@@ -1,104 +0,0 @@
-import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
-import { AssetOrder } from '@immich/sdk';
-
-import { SvelteSet } from 'svelte/reactivity';
-import { GroupInsertionCache } from '../group-insertion-cache.svelte';
-import { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { AssetOperation, TimelineAsset } from '../types';
-import { updateGeometry } from './layout-support.svelte';
-import { getMonthGroupByDate } from './search-support.svelte';
-
-export function addAssetsToMonthGroups(
-  timelineManager: TimelineManager,
-  assets: TimelineAsset[],
-  options: { order: AssetOrder },
-) {
-  if (assets.length === 0) {
-    return;
-  }
-
-  const addContext = new GroupInsertionCache();
-  const updatedMonthGroups = new SvelteSet<MonthGroup>();
-  const monthCount = timelineManager.months.length;
-  for (const asset of assets) {
-    let month = getMonthGroupByDate(timelineManager, asset.localDateTime);
-
-    if (!month) {
-      month = new MonthGroup(timelineManager, asset.localDateTime, 1, options.order);
-      month.isLoaded = true;
-      timelineManager.months.push(month);
-    }
-
-    month.addTimelineAsset(asset, addContext);
-    updatedMonthGroups.add(month);
-  }
-
-  if (timelineManager.months.length !== monthCount) {
-    timelineManager.months.sort((a, b) => {
-      return a.yearMonth.year === b.yearMonth.year
-        ? b.yearMonth.month - a.yearMonth.month
-        : b.yearMonth.year - a.yearMonth.year;
-    });
-  }
-
-  for (const group of addContext.existingDayGroups) {
-    group.sortAssets(options.order);
-  }
-
-  for (const monthGroup of addContext.bucketsWithNewDayGroups) {
-    monthGroup.sortDayGroups();
-  }
-
-  for (const month of addContext.updatedBuckets) {
-    month.sortDayGroups();
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
-  }
-  timelineManager.updateIntersections();
-}
-
-export function runAssetOperation(
-  timelineManager: TimelineManager,
-  ids: Set<string>,
-  operation: AssetOperation,
-  options: { order: AssetOrder },
-) {
-  if (ids.size === 0) {
-    return { processedIds: new SvelteSet(), unprocessedIds: ids, changedGeometry: false };
-  }
-
-  const changedMonthGroups = new SvelteSet<MonthGroup>();
-  let idsToProcess = new SvelteSet(ids);
-  const idsProcessed = new SvelteSet<string>();
-  const combinedMoveAssets: { asset: TimelineAsset; date: TimelineDate }[][] = [];
-  for (const month of timelineManager.months) {
-    if (idsToProcess.size > 0) {
-      const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);
-      if (moveAssets.length > 0) {
-        combinedMoveAssets.push(moveAssets);
-      }
-      idsToProcess = setDifference(idsToProcess, processedIds);
-      for (const id of processedIds) {
-        idsProcessed.add(id);
-      }
-      if (changedGeometry) {
-        changedMonthGroups.add(month);
-      }
-    }
-  }
-  if (combinedMoveAssets.length > 0) {
-    addAssetsToMonthGroups(
-      timelineManager,
-      combinedMoveAssets.flat().map((a) => a.asset),
-      options,
-    );
-  }
-  const changedGeometry = changedMonthGroups.size > 0;
-  for (const month of changedMonthGroups) {
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
-  }
-  if (changedGeometry) {
-    timelineManager.updateIntersections();
-  }
-  return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
-}

web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts

@@ -2,7 +2,7 @@ import { plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timelin
 import { AssetOrder } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
+import { TimelineManager } from '../timeline-manager.svelte';
 import type { AssetDescriptor, Direction, TimelineAsset } from '../types';
 
 export async function getAssetWithOffset(

web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts

@@ -1,4 +1,4 @@
-import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { PendingChange, TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { websocketEvents } from '$lib/stores/websocket';
 import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -13,10 +13,10 @@ export class WebsocketSupport {
   #processPendingChanges = throttle(() => {
     const { add, update, remove } = this.#getPendingChangeBatches();
     if (add.length > 0) {
-      this.#timelineManager.addAssets(add);
+      this.#timelineManager.upsertAssets(add);
     }
     if (update.length > 0) {
-      this.#timelineManager.updateAssets(update);
+      this.#timelineManager.upsertAssets(update);
     }
     if (remove.length > 0) {
       this.#timelineManager.removeAssets(remove);

web/src/lib/managers/timeline-manager/month-group.svelte.ts

@@ -9,7 +9,7 @@ import {
   fromTimelinePlainDateTime,
   fromTimelinePlainYearMonth,
   getTimes,
-  setDifference,
+  setDifferenceInPlace,
   type TimelineDateTime,
   type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
@@ -17,11 +17,11 @@ import {
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
-import { SvelteSet } from 'svelte/reactivity';
+import { onCreateMonthGroup } from '$lib/managers/timeline-manager/internal/TestHooks.svelte';
 import { DayGroup } from './day-group.svelte';
 import { GroupInsertionCache } from './group-insertion-cache.svelte';
-import type { TimelineManager } from './timeline-manager.svelte';
-import type { AssetDescriptor, AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
+import { TimelineManager } from './timeline-manager.svelte';
+import type { AssetDescriptor, AssetOperation, Direction, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';
 
 export class MonthGroup {
@@ -50,12 +50,13 @@ export class MonthGroup {
   readonly yearMonth: TimelineYearMonth;
 
   constructor(
-    store: TimelineManager,
+    timelineManager: TimelineManager,
     yearMonth: TimelineYearMonth,
     initialCount: number,
+    loaded: boolean,
     order: AssetOrder = AssetOrder.Desc,
   ) {
-    this.timelineManager = store;
+    this.timelineManager = timelineManager;
     this.#initialCount = initialCount;
     this.#sortOrder = order;
 
@@ -72,6 +73,12 @@ export class MonthGroup {
       },
       this.#handleLoadError,
     );
+    if (loaded) {
+      this.isLoaded = true;
+    }
+    if (import.meta.env.DEV) {
+      onCreateMonthGroup(this);
+    }
   }
 
   set intersecting(newValue: boolean) {
@@ -115,26 +122,29 @@ export class MonthGroup {
   runAssetOperation(ids: Set<string>, operation: AssetOperation) {
     if (ids.size === 0) {
       return {
-        moveAssets: [] as MoveAsset[],
-        processedIds: new SvelteSet<string>(),
+        moveAssets: [] as TimelineAsset[],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        processedIds: new Set<string>(),
         unprocessedIds: ids,
         changedGeometry: false,
       };
     }
     const { dayGroups } = this;
     let combinedChangedGeometry = false;
-    let idsToProcess = new SvelteSet(ids);
-    const idsProcessed = new SvelteSet<string>();
-    const combinedMoveAssets: MoveAsset[][] = [];
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsToProcess = new Set(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsProcessed = new Set<string>();
+    const combinedMoveAssets: TimelineAsset[] = [];
     let index = dayGroups.length;
     while (index--) {
       if (idsToProcess.size > 0) {
         const group = dayGroups[index];
         const { moveAssets, processedIds, changedGeometry } = group.runAssetOperation(ids, operation);
         if (moveAssets.length > 0) {
-          combinedMoveAssets.push(moveAssets);
+          combinedMoveAssets.push(...moveAssets);
         }
-        idsToProcess = setDifference(idsToProcess, processedIds);
+        setDifferenceInPlace(idsToProcess, processedIds);
         for (const id of processedIds) {
           idsProcessed.add(id);
         }
@@ -146,14 +156,14 @@ export class MonthGroup {
       }
     }
     return {
-      moveAssets: combinedMoveAssets.flat(),
+      moveAssets: combinedMoveAssets,
       unprocessedIds: idsToProcess,
       processedIds: idsProcessed,
       changedGeometry: combinedChangedGeometry,
     };
   }
 
-  addAssets(bucketAssets: TimeBucketAssetResponseDto) {
+  addAssets(bucketAssets: TimeBucketAssetResponseDto, preSorted: boolean) {
     const addContext = new GroupInsertionCache();
     for (let i = 0; i < bucketAssets.id.length; i++) {
       const { localDateTime, fileCreatedAt } = getTimes(
@@ -194,17 +204,17 @@ export class MonthGroup {
       }
       this.addTimelineAsset(timelineAsset, addContext);
     }
+    if (!preSorted) {
+      for (const group of addContext.existingDayGroups) {
+        group.sortAssets(this.#sortOrder);
+      }
 
-    for (const group of addContext.existingDayGroups) {
-      group.sortAssets(this.#sortOrder);
+      if (addContext.newDayGroups.size > 0) {
+        this.sortDayGroups();
+      }
+
+      addContext.sort(this, this.#sortOrder);
     }
-
-    if (addContext.newDayGroups.size > 0) {
-      this.sortDayGroups();
-    }
-
-    addContext.sort(this, this.#sortOrder);
-
     return addContext.unprocessedAssets;
   }
 

web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts

@@ -1,10 +1,14 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
+import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
 import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import { setTestHooks } from '$lib/managers/timeline-manager/internal/TestHooks.svelte';
+import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
 import { AbortError } from '$lib/utils';
 import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
-import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
+import { AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
 import { tick } from 'svelte';
+import type { MockInstance } from 'vitest';
 import { TimelineManager } from './timeline-manager.svelte';
 import type { TimelineAsset } from './types';
 
@@ -175,7 +179,7 @@ describe('TimelineManager', () => {
     });
   });
 
-  describe('addAssets', () => {
+  describe('upsertAssets', () => {
     let timelineManager: TimelineManager;
 
     beforeEach(async () => {
@@ -196,7 +200,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
 
       expect(timelineManager.months.length).toEqual(1);
       expect(timelineManager.assetCount).toEqual(1);
@@ -212,8 +216,8 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets([assetOne]);
-      timelineManager.addAssets([assetTwo]);
+      timelineManager.upsertAssets([assetOne]);
+      timelineManager.upsertAssets([assetTwo]);
 
       expect(timelineManager.months.length).toEqual(1);
       expect(timelineManager.assetCount).toEqual(2);
@@ -238,7 +242,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-16T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([assetOne, assetTwo, assetThree]);
+      timelineManager.upsertAssets([assetOne, assetTwo, assetThree]);
 
       const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
       expect(month).not.toBeNull();
@@ -264,7 +268,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2023-01-20T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([assetOne, assetTwo, assetThree]);
+      timelineManager.upsertAssets([assetOne, assetTwo, assetThree]);
 
       expect(timelineManager.months.length).toEqual(3);
       expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
@@ -278,11 +282,11 @@ describe('TimelineManager', () => {
     });
 
     it('updates existing asset', () => {
-      const updateAssetsSpy = vi.spyOn(timelineManager, 'updateAssets');
+      const updateAssetsSpy = vi.spyOn(timelineManager, 'upsertAssets');
       const asset = deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build());
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
 
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
       expect(updateAssetsSpy).toBeCalledWith([asset]);
       expect(timelineManager.assetCount).toEqual(1);
     });
@@ -294,12 +298,128 @@ describe('TimelineManager', () => {
 
       const timelineManager = new TimelineManager();
       await timelineManager.updateOptions({ isTrashed: true });
-      timelineManager.addAssets([asset, trashedAsset]);
+      timelineManager.upsertAssets([asset, trashedAsset]);
       expect(await getAssets(timelineManager)).toEqual([trashedAsset]);
     });
   });
 
-  describe('updateAssets', () => {
+  describe('ensure efficient timeline operations', () => {
+    let timelineManager: TimelineManager;
+
+    let month1day1asset1: TimelineAsset,
+      month1day2asset1: TimelineAsset,
+      month1day2asset2: TimelineAsset,
+      month1day3asset1: TimelineAsset,
+      month2day1asset1: TimelineAsset,
+      month2day2asset1: TimelineAsset,
+      month2day2asset2: TimelineAsset;
+
+    type DayMocks = {
+      layoutFn: MockInstance;
+      sortAssetsFn: MockInstance;
+    };
+    type MonthMocks = {
+      sortDayGroupsFn: MockInstance;
+    };
+
+    const dayGroups = new Map<DayGroup, DayMocks>();
+    const monthGroups = new Map<MonthGroup, MonthMocks>();
+
+    beforeEach(async () => {
+      timelineManager = new TimelineManager();
+      setTestHooks({
+        onCreateDayGroup: (dayGroup: DayGroup) => {
+          dayGroups.set(dayGroup, {
+            layoutFn: vi.spyOn(dayGroup, 'layout'),
+            sortAssetsFn: vi.spyOn(dayGroup, 'sortAssets'),
+          });
+        },
+        onCreateMonthGroup: (monthGroup: MonthGroup) => {
+          monthGroups.set(monthGroup, {
+            sortDayGroupsFn: vi.spyOn(monthGroup, 'sortDayGroups'),
+          });
+        },
+      });
+      sdkMock.getTimeBuckets.mockResolvedValue([]);
+      month1day1asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
+        }),
+      );
+      month1day2asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T12:00:00.000Z'),
+        }),
+      );
+      month1day2asset2 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T13:00:00.000Z'),
+        }),
+      );
+      month1day3asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-16T12:00:00.000Z'),
+        }),
+      );
+      month2day1asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-16T12:00:00.000Z'),
+        }),
+      );
+      month2day2asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-18T12:00:00.000Z'),
+        }),
+      );
+      month2day2asset2 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-18T13:00:00.000Z'),
+        }),
+      );
+
+      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      timelineManager.upsertAssets([
+        month1day1asset1,
+        month1day2asset1,
+        month1day2asset2,
+        month1day3asset1,
+        month2day1asset1,
+        month2day2asset1,
+        month2day2asset2,
+      ]);
+      vitest.resetAllMocks();
+    });
+    it.skip('Not Ready Yet - optimizations not complete: moving asset between months only sorts/layout the affected months once', () => {
+      // move from 2024-01-15 to 2024-01-16
+      timelineManager.updateAssetOperation([month1day2asset1.id], (asset) => {
+        asset.localDateTime.day = asset.localDateTime.day + 1;
+      });
+      for (const [day, mocks] of dayGroups) {
+        if (day.day === 15 && day.monthGroup.yearMonth.month === 1) {
+          // source - should be layout once
+          expect.soft(mocks.layoutFn).toBeCalledTimes(1);
+          expect.soft(mocks.sortAssetsFn).toBeCalledTimes(1);
+        }
+        if (day.day === 16 && day.monthGroup.yearMonth.month === 1) {
+          // target - should be layout once
+          expect.soft(mocks.layoutFn).toBeCalledTimes(1);
+          expect.soft(mocks.sortAssetsFn).toBeCalledTimes(1);
+        }
+        // everything else - should not be layed-out
+        expect.soft(mocks.layoutFn).toBeCalledTimes(0);
+        expect.soft(mocks.sortAssetsFn).toBeCalledTimes(0);
+      }
+      for (const [_, mocks] of monthGroups) {
+        // if the day itself did not change, probably no need to sort it
+        // in the timeline manager, the day-group identity is immutable - you will never
+        // "move" a whole day to another day - only the assets inside will be moved from
+        // one to the other.
+        expect.soft(mocks.sortDayGroupsFn).toBeCalledTimes(0);
+      }
+    });
+  });
+
+  describe('upsertAssets', () => {
     let timelineManager: TimelineManager;
 
     beforeEach(async () => {
@@ -309,22 +429,15 @@ describe('TimelineManager', () => {
       await timelineManager.updateViewport({ width: 1588, height: 1000 });
     });
 
-    it('ignores non-existing assets', () => {
-      timelineManager.updateAssets([deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build())]);
-
-      expect(timelineManager.months.length).toEqual(0);
-      expect(timelineManager.assetCount).toEqual(0);
-    });
-
-    it('updates an asset', () => {
+    it('upserts an asset', () => {
       const asset = deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build({ isFavorite: false }));
       const updatedAsset = { ...asset, isFavorite: true };
 
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
       expect(timelineManager.assetCount).toEqual(1);
       expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(false);
 
-      timelineManager.updateAssets([updatedAsset]);
+      timelineManager.upsertAssets([updatedAsset]);
       expect(timelineManager.assetCount).toEqual(1);
       expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(true);
     });
@@ -340,18 +453,81 @@ describe('TimelineManager', () => {
         fileCreatedAt: fromISODateTimeUTCToObject('2024-03-20T12:00:00.000Z'),
       });
 
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
       expect(timelineManager.months.length).toEqual(1);
       expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
       expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(1);
 
-      timelineManager.updateAssets([updatedAsset]);
+      timelineManager.upsertAssets([updatedAsset]);
       expect(timelineManager.months.length).toEqual(2);
       expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
       expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
       expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })).not.toBeUndefined();
       expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })?.getAssets().length).toEqual(1);
     });
+
+    it('asset is removed during upsert when TimelineManager if visibility changes', async () => {
+      await timelineManager.updateOptions({
+        visibility: AssetVisibility.Archive,
+      });
+      const fixture = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          visibility: AssetVisibility.Archive,
+        }),
+      );
+
+      timelineManager.upsertAssets([fixture]);
+      expect(timelineManager.assetCount).toEqual(1);
+
+      const updated = Object.freeze({ ...fixture, visibility: AssetVisibility.Timeline });
+      timelineManager.upsertAssets([updated]);
+      expect(timelineManager.assetCount).toEqual(0);
+
+      timelineManager.upsertAssets([{ ...fixture, visibility: AssetVisibility.Archive }]);
+      expect(timelineManager.assetCount).toEqual(1);
+    });
+
+    it('asset is removed during upsert when TimelineManager if isFavorite changes', async () => {
+      await timelineManager.updateOptions({
+        isFavorite: true,
+      });
+      const fixture = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          isFavorite: true,
+        }),
+      );
+
+      timelineManager.upsertAssets([fixture]);
+      expect(timelineManager.assetCount).toEqual(1);
+
+      const updated = Object.freeze({ ...fixture, isFavorite: false });
+      timelineManager.upsertAssets([updated]);
+      expect(timelineManager.assetCount).toEqual(0);
+
+      timelineManager.upsertAssets([{ ...fixture, isFavorite: true }]);
+      expect(timelineManager.assetCount).toEqual(1);
+    });
+
+    it('asset is removed during upsert when TimelineManager if isTrashed changes', async () => {
+      await timelineManager.updateOptions({
+        isTrashed: true,
+      });
+      const fixture = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          isTrashed: true,
+        }),
+      );
+
+      timelineManager.upsertAssets([fixture]);
+      expect(timelineManager.assetCount).toEqual(1);
+
+      const updated = Object.freeze({ ...fixture, isTrashed: false });
+      timelineManager.upsertAssets([updated]);
+      expect(timelineManager.assetCount).toEqual(0);
+
+      timelineManager.upsertAssets([{ ...fixture, isTrashed: true }]);
+      expect(timelineManager.assetCount).toEqual(1);
+    });
   });
 
   describe('removeAssets', () => {
@@ -365,7 +541,7 @@ describe('TimelineManager', () => {
     });
 
     it('ignores invalid IDs', () => {
-      timelineManager.addAssets(
+      timelineManager.upsertAssets(
         timelineAssetFactory
           .buildList(2, {
             fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
@@ -385,7 +561,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
       timelineManager.removeAssets([assetOne.id]);
 
       expect(timelineManager.assetCount).toEqual(1);
@@ -399,7 +575,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets(assets);
+      timelineManager.upsertAssets(assets);
       timelineManager.removeAssets(assets.map((asset) => asset.id));
 
       expect(timelineManager.assetCount).toEqual(0);
@@ -431,7 +607,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
       expect(timelineManager.getFirstAsset()).toEqual(assetOne);
     });
   });
@@ -556,7 +732,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
 
       expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.year).toEqual(2024);
       expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.month).toEqual(2);
@@ -575,7 +751,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
 
       timelineManager.removeAssets([assetTwo.id]);
       expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);

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

@@ -1,12 +1,9 @@
 import { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { GroupInsertionCache } from '$lib/managers/timeline-manager/group-insertion-cache.svelte';
 import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
 import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
 import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
-import {
-  addAssetsToMonthGroups,
-  runAssetOperation,
-} from '$lib/managers/timeline-manager/internal/operations-support.svelte';
 import {
   findClosestGroupForDate,
   findMonthGroupForAsset as findMonthGroupForAssetUtil,
@@ -17,10 +14,15 @@ import {
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
 import { CancellableTask } from '$lib/utils/cancellable-task';
-import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
+import {
+  setDifferenceInPlace,
+  toTimelineAsset,
+  type TimelineDateTime,
+  type TimelineYearMonth,
+} from '$lib/utils/timeline-util';
 import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
 import { clamp, isEqual } from 'lodash-es';
-import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { isMismatched, updateObject } from './internal/utils.svelte';
 import { MonthGroup } from './month-group.svelte';
@@ -218,6 +220,7 @@ export class TimelineManager extends VirtualScrollManager {
         this,
         { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1 },
         timeBucket.count,
+        false,
         this.#options.order,
       );
     });
@@ -320,10 +323,10 @@ export class TimelineManager extends VirtualScrollManager {
     }
   }
 
-  addAssets(assets: TimelineAsset[]) {
-    const assetsToUpdate = assets.filter((asset) => !this.isExcluded(asset));
-    const notUpdated = this.updateAssets(assetsToUpdate);
-    addAssetsToMonthGroups(this, [...notUpdated], { order: this.#options.order ?? AssetOrder.Desc });
+  upsertAssets(assets: TimelineAsset[]) {
+    const notUpdated = this.#updateAssets(assets);
+    const notExcluded = notUpdated.filter((asset) => !this.isExcluded(asset));
+    this.addAssetsToSegments(notExcluded);
   }
 
   async findMonthGroupForAsset(id: string) {
@@ -400,38 +403,112 @@ export class TimelineManager extends VirtualScrollManager {
     return randomDay.viewerAssets[randomAssetIndex - accumulatedCount].asset;
   }
 
+  /**
+   * Executes the given operation against every passed in asset id.
+   *
+   * @returns An object with the changed ids, unprocessed ids, and if this resulted
+   * in changes of the timeline geometry.
+   */
   updateAssetOperation(ids: string[], operation: AssetOperation) {
-    runAssetOperation(this, new SvelteSet(ids), operation, { order: this.#options.order ?? AssetOrder.Desc });
+    return this.#runAssetOperation(ids, operation);
   }
 
-  updateAssets(assets: TimelineAsset[]) {
-    const lookup = new SvelteMap<string, TimelineAsset>(assets.map((asset) => [asset.id, asset]));
-    const { unprocessedIds } = runAssetOperation(
-      this,
-      new SvelteSet(lookup.keys()),
-      (asset) => {
-        updateObject(asset, lookup.get(asset.id));
-        return { remove: false };
-      },
-      { order: this.#options.order ?? AssetOrder.Desc },
-    );
+  /**
+   * Looks up the specified asset from the TimelineAsset using its id, and then updates the
+   * existing object to match the rest of the TimelineAsset parameter.
+
+   * @returns list of assets that were updated (not found)
+   */
+  #updateAssets(updatedAssets: TimelineAsset[]) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const lookup = new Map<string, TimelineAsset>();
+    const ids = [];
+    for (const asset of updatedAssets) {
+      ids.push(asset.id);
+      lookup.set(asset.id, asset);
+    }
+    const { unprocessedIds } = this.#runAssetOperation(ids, (asset) => updateObject(asset, lookup.get(asset.id)));
     const result: TimelineAsset[] = [];
-    for (const id of unprocessedIds.values()) {
+    for (const id of unprocessedIds) {
       result.push(lookup.get(id)!);
     }
     return result;
   }
 
   removeAssets(ids: string[]) {
-    const { unprocessedIds } = runAssetOperation(
-      this,
-      new SvelteSet(ids),
-      () => {
-        return { remove: true };
-      },
-      { order: this.#options.order ?? AssetOrder.Desc },
-    );
-    return [...unprocessedIds];
+    this.#runAssetOperation(ids, () => ({ remove: true }));
+  }
+
+  protected createUpsertContext(): GroupInsertionCache {
+    return new GroupInsertionCache();
+  }
+
+  protected upsertAssetIntoSegment(asset: TimelineAsset, context: GroupInsertionCache): void {
+    let month = getMonthGroupByDate(this, asset.localDateTime);
+
+    if (!month) {
+      month = new MonthGroup(this, asset.localDateTime, 1, true, this.#options.order);
+      this.months.push(month);
+    }
+
+    month.addTimelineAsset(asset, context);
+  }
+
+  protected addAssetsToSegments(assets: TimelineAsset[]) {
+    if (assets.length === 0) {
+      return;
+    }
+    const context = this.createUpsertContext();
+    const monthCount = this.months.length;
+    for (const asset of assets) {
+      this.upsertAssetIntoSegment(asset, context);
+    }
+    if (this.months.length !== monthCount) {
+      this.postCreateSegments();
+    }
+    this.postUpsert(context);
+    this.updateIntersections();
+  }
+
+  #runAssetOperation(ids: string[], operation: AssetOperation) {
+    if (ids.length === 0) {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      return { processedIds: new Set<string>(), unprocessedIds: new Set<string>(), changedGeometry: false };
+    }
+
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const changedMonthGroups = new Set<MonthGroup>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsToProcess = new Set(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsProcessed = new Set<string>();
+    const combinedMoveAssets: TimelineAsset[] = [];
+    for (const month of this.months) {
+      if (idsToProcess.size > 0) {
+        const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);
+        if (moveAssets.length > 0) {
+          combinedMoveAssets.push(...moveAssets);
+        }
+        setDifferenceInPlace(idsToProcess, processedIds);
+        for (const id of processedIds) {
+          idsProcessed.add(id);
+        }
+        if (changedGeometry) {
+          changedMonthGroups.add(month);
+        }
+      }
+    }
+    if (combinedMoveAssets.length > 0) {
+      this.addAssetsToSegments(combinedMoveAssets);
+    }
+    const changedGeometry = changedMonthGroups.size > 0;
+    for (const month of changedMonthGroups) {
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+    if (changedGeometry) {
+      this.updateIntersections();
+    }
+    return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
   }
 
   override refreshLayout() {
@@ -493,4 +570,27 @@ export class TimelineManager extends VirtualScrollManager {
   getAssetOrder() {
     return this.#options.order ?? AssetOrder.Desc;
   }
+
+  protected postCreateSegments(): void {
+    this.months.sort((a, b) => {
+      return a.yearMonth.year === b.yearMonth.year
+        ? b.yearMonth.month - a.yearMonth.month
+        : b.yearMonth.year - a.yearMonth.year;
+    });
+  }
+
+  protected postUpsert(context: GroupInsertionCache): void {
+    for (const group of context.existingDayGroups) {
+      group.sortAssets(this.#options.order);
+    }
+
+    for (const monthGroup of context.bucketsWithNewDayGroups) {
+      monthGroup.sortDayGroups();
+    }
+
+    for (const month of context.updatedBuckets) {
+      month.sortDayGroups();
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+  }
 }

web/src/lib/managers/timeline-manager/types.ts

@@ -1,4 +1,4 @@
-import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '$lib/utils/timeline-util';
+import type { TimelineDateTime, TimelineYearMonth } from '$lib/utils/timeline-util';
 import type { AssetStackResponseDto, AssetVisibility } from '@immich/sdk';
 
 export type ViewportTopMonth = TimelineYearMonth | undefined | 'lead-in' | 'lead-out';
@@ -37,9 +37,7 @@ export type TimelineAsset = {
   longitude?: number | null;
 };
 
-export type AssetOperation = (asset: TimelineAsset) => { remove: boolean };
-
-export type MoveAsset = { asset: TimelineAsset; date: TimelineDate };
+export type AssetOperation = (asset: TimelineAsset) => unknown;
 
 export interface Viewport {
   width: number;

web/src/lib/modals/NavigateToDateModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import DateInput from '$lib/elements/DateInput.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { getPreferredTimeZone, getTimezones, toDatetime, type ZoneOption } from '$lib/modals/timezone-utils';
   import { Button, HStack, Modal, ModalBody, ModalFooter, VStack } from '@immich/ui';

web/src/lib/utils/actions.ts

@@ -109,5 +109,5 @@ export function updateUnstackedAssetInTimeline(timelineManager: TimelineManager,
     },
   );
 
-  timelineManager.addAssets(assets);
+  timelineManager.upsertAssets(assets);
 }

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

@@ -3,7 +3,7 @@ import ToastAction from '$lib/components/ToastAction.svelte';
 import { AppRoute } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
-import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';

web/src/lib/utils/timeline-util.ts

@@ -3,7 +3,6 @@ import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 import { DateTime, type LocaleOptions } from 'luxon';
-import { SvelteSet } from 'svelte/reactivity';
 import { get } from 'svelte/store';
 
 // Move type definitions to the top
@@ -222,8 +221,13 @@ export const plainDateTimeCompare = (ascending: boolean, a: TimelineDateTime, b:
   return aDateTime.millisecond - bDateTime.millisecond;
 };
 
-export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
-  const result = new SvelteSet<T>();
+export function setDifference<T>(setA: Set<T>, setB: Set<T>): Set<T> {
+  // Check if native Set.prototype.difference is available (ES2025)
+  const setWithDifference = setA as unknown as Set<T> & { difference?: (other: Set<T>) => Set<T> };
+  if (setWithDifference.difference && typeof setWithDifference.difference === 'function') {
+    return setWithDifference.difference(setB);
+  }
+  const result = new Set<T>();
   for (const value of setA) {
     if (!setB.has(value)) {
       result.add(value);
@@ -231,3 +235,13 @@ export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
   }
   return result;
 }
+
+/**
+ * Removes all elements of setB from setA in-place (mutates setA).
+ */
+export function setDifferenceInPlace<T>(setA: Set<T>, setB: Set<T>): Set<T> {
+  for (const value of setB) {
+    setA.delete(value);
+  }
+  return setA;
+}

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

@@ -244,7 +244,7 @@
   };
 
   const handleUndoRemoveAssets = async (assets: TimelineAsset[]) => {
-    timelineManager.addAssets(assets);
+    timelineManager.upsertAssets(assets);
     await refreshAlbum();
   };
 

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

@@ -94,7 +94,7 @@
       <DeleteAssets
         menuItem
         onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
-        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
+        onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
       />
     </ButtonContextMenu>
   </AssetSelectControlBar>

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

@@ -339,7 +339,7 @@
   };
 
   const handleUndoDeleteAssets = async (assets: TimelineAsset[]) => {
-    timelineManager.addAssets(assets);
+    timelineManager.upsertAssets(assets);
     await updateAssetCount();
   };
 

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

@@ -69,12 +69,12 @@
 
   const handleLink: OnLink = ({ still, motion }) => {
     timelineManager.removeAssets([motion.id]);
-    timelineManager.updateAssets([still]);
+    timelineManager.upsertAssets([still]);
   };
 
   const handleUnlink: OnUnlink = ({ still, motion }) => {
-    timelineManager.addAssets([motion]);
-    timelineManager.updateAssets([still]);
+    timelineManager.upsertAssets([motion]);
+    timelineManager.upsertAssets([still]);
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
@@ -153,7 +153,7 @@
       <DeleteAssets
         menuItem
         onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
-        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
+        onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
       />
       <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
       <hr />

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

@@ -63,7 +63,7 @@
       }),
     );
 
-    timelineManager.updateAssets(updatedAssets);
+    timelineManager.upsertAssets(updatedAssets);
 
     handleDeselectAll();
   };