refactor(web): extract timeline selection logic into SelectableSegment and SelectableDay components

- Move asset selection, range selection, and keyboard interaction logic
  to SelectableSegment
  - Extract day group selection logic to SelectableDay component
  - Simplify Timeline component by removing selection-related state and
  handlers
  - Fix scroll compensation handling with dedicated while loop
  - Remove unused keyboard handlers from Scrubber component

server/src/services/notification.service.ts

@@ -161,7 +161,24 @@ export class NotificationService extends BaseService {
 
     const [asset] = await this.assetRepository.getByIdsWithAllRelationsButStacks([assetId]);
     if (asset) {
-      this.eventRepository.clientSend('on_asset_update', userId, mapAsset(asset));
+      // need to specify authDto to this mapAsset request, because it tries to prevent
+      // leaking information PR#7580 which expects a userId in the auth options object
+      this.eventRepository.clientSend(
+        'on_asset_update',
+        userId,
+        mapAsset(asset, {
+          auth: {
+            user: {
+              id: userId,
+              isAdmin: false,
+              name: '',
+              email: '',
+              quotaUsageInBytes: 0,
+              quotaSizeInBytes: null,
+            },
+          },
+        }),
+      );
     }
   }
 

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -121,6 +121,7 @@
 
   const onMouseLeave = () => {
     mouseOver = false;
+    onMouseEvent?.({ isMouseOver: false, selectedGroupIndex: groupIndex });
   };
 
   let timer: ReturnType<typeof setTimeout> | null = null;

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { uploadAssetsStore } from '$lib/stores/upload';
+
+  import { flip } from 'svelte/animate';
+  import { scale } from 'svelte/transition';
+
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+  import type { CommonPosition } from '$lib/utils/layout-utils';
+  import type { Snippet } from 'svelte';
+
+  let { isUploading } = uploadAssetsStore;
+
+  interface Props {
+    viewerAssets: ViewerAsset[];
+    width: number;
+    height: number;
+    photostreamManager: PhotostreamManager;
+    thumbnail: Snippet<
+      [
+        {
+          asset: TimelineAsset;
+          position: CommonPosition;
+        },
+      ]
+    >;
+    customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
+  }
+
+  let { viewerAssets, width, height, photostreamManager, thumbnail, customThumbnailLayout }: Props = $props();
+
+  const transitionDuration = $derived.by(() => (photostreamManager.suspendTransitions && !$isUploading ? 0 : 150));
+  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+
+  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
+    return intersectables.filter((intersectable) => intersectable.intersecting);
+  }
+</script>
+
+<!-- Image grid -->
+<div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
+  {#each filterIntersecting(viewerAssets) as viewerAsset (viewerAsset.id)}
+    {@const position = viewerAsset.position!}
+    {@const asset = viewerAsset.asset!}
+
+    <!-- note: don't remove data-asset-id - its used by web e2e tests -->
+    <div
+      data-asset-id={asset.id}
+      class="absolute"
+      style:top={position.top + 'px'}
+      style:left={position.left + 'px'}
+      style:width={position.width + 'px'}
+      style:height={position.height + 'px'}
+      out:scale|global={{ start: 0.1, duration: scaleDuration }}
+      animate:flip={{ duration: transitionDuration }}
+    >
+      {@render thumbnail({ asset, position })}
+      {@render customThumbnailLayout?.(asset)}
+    </div>
+  {/each}
+</div>
+
+<style>
+  [data-image-grid] {
+    user-select: none;
+  }
+</style>

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

@@ -1,140 +1,49 @@
 <script lang="ts">
-  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 type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
-  import { navigate } from '$lib/utils/navigation';
+  import { Icon } from '@immich/ui';
-
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
 
-  import { Icon } from '@immich/ui';
+  import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import type { CommonPosition } from '$lib/utils/layout-utils';
   import type { Snippet } from 'svelte';
-  import { flip } from 'svelte/animate';
-  import { scale } from 'svelte/transition';
-
   let { isUploading } = uploadAssetsStore;
-
   interface Props {
-    isSelectionMode: boolean;
+    thumbnail: Snippet<[{ asset: TimelineAsset; position: CommonPosition; dayGroup: DayGroup; groupIndex: number }]>;
+    customThumbnailLayout?: Snippet<[TimelineAsset]>;
     singleSelect: boolean;
-    withStacked: boolean;
+    assetInteraction: AssetInteraction;
-    showArchiveIcon: boolean;
     monthGroup: MonthGroup;
     timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
+    onDayGroupSelect: (daygroup: DayGroup, assets: TimelineAsset[]) => void;
-    customLayout?: Snippet<[TimelineAsset]>;
-
-    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
-    onSelectAssets: (asset: TimelineAsset) => void;
-    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
-    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
   }
-
   let {
-    isSelectionMode,
+    thumbnail: thumbnailWithGroup,
+    customThumbnailLayout,
     singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
     assetInteraction,
+    monthGroup,
     timelineManager,
-    customLayout,
+    onDayGroupSelect,
-    onSelect,
-    onSelectAssets,
-    onSelectAssetCandidates,
-    onScrollCompensation,
-    onThumbnailClick,
   }: Props = $props();
-
   let isMouseOverGroup = $state(false);
   let hoveredDayGroup = $state();
-
   const transitionDuration = $derived.by(() =>
     monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
   );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
-  const _onClick = (
+    return intersectables.filter((intersectable) => intersectable.intersecting);
-    timelineManager: TimelineManager,
-    assets: TimelineAsset[],
-    groupTitle: string,
-    asset: TimelineAsset,
-  ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      assetSelectHandler(timelineManager, asset, assets, groupTitle);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
-
-  const assetSelectHandler = (
-    timelineManager: TimelineManager,
-    asset: TimelineAsset,
-    assetsInDayGroup: TimelineAsset[],
-    groupTitle: string,
-  ) => {
-    onSelectAssets(asset);
-
-    // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
-      assetInteraction.hasSelectedAsset(asset.id),
-    ).length;
-
-    // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
-      assetInteraction.addGroupToMultiselectGroup(groupTitle);
-    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
-    // Show multi select icon on hover on date group
-    hoveredDayGroup = groupTitle;
-
-    if (assetInteraction.selectionActive) {
-      onSelectAssetCandidates(asset);
-    }
-  };
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
-    return intersectable.filter((int) => int.intersecting);
   }
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensation(timelineManager.scrollCompensation);
-      timelineManager.clearScrollCompensation();
-    }
-  });
 </script>
 
 {#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
   {@const absoluteWidth = dayGroup.left}
-
+  {@const isDayGroupSelected = assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <section
     class={[
@@ -146,11 +55,11 @@
     style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
     onmouseenter={() => {
       isMouseOverGroup = true;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
+      hoveredDayGroup = dayGroup.groupTitle;
     }}
     onmouseleave={() => {
       isMouseOverGroup = false;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
+      hoveredDayGroup = null;
     }}
   >
     <!-- Date group title -->
@@ -163,10 +72,10 @@
           class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
           class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
             assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-          onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
+          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
+          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
         >
-          {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+          {#if isDayGroupSelected}
             <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
           {:else}
             <Icon icon={mdiCircleOutline} size="24" color="#757575" />
@@ -179,57 +88,17 @@
       </span>
     </div>
 
-    <!-- Image grid -->
+    <AssetLayout
-    <div
+      photostreamManager={timelineManager}
-      data-image-grid
+      viewerAssets={dayGroup.viewerAssets}
-      class="relative overflow-clip"
+      height={dayGroup.height}
-      style:height={dayGroup.height + 'px'}
+      width={dayGroup.width}
-      style:width={dayGroup.width + 'px'}
+      {customThumbnailLayout}
     >
-      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
+      {#snippet thumbnail({ asset, position })}
-        {@const position = viewerAsset.position!}
+        {@render thumbnailWithGroup({ asset, position, dayGroup, groupIndex })}
-        {@const asset = viewerAsset.asset!}
+      {/snippet}
-
+    </AssetLayout>
-        <!-- {#if viewerAsset.intersecting} -->
-        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
-        <div
-          data-asset-id={asset.id}
-          class="absolute"
-          style:top={position.top + 'px'}
-          style:left={position.left + 'px'}
-          style:width={position.width + 'px'}
-          style:height={position.height + 'px'}
-          out:scale|global={{ start: 0.1, duration: scaleDuration }}
-          animate:flip={{ duration: transitionDuration }}
-        >
-          <Thumbnail
-            showStackedIcon={withStacked}
-            {showArchiveIcon}
-            {asset}
-            {groupIndex}
-            onClick={(asset) => {
-              if (typeof onThumbnailClick === 'function') {
-                onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
-              } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
-              }
-            }}
-            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
-            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
-            selected={assetInteraction.hasSelectedAsset(asset.id) ||
-              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
-            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customLayout}
-            {@render customLayout(asset)}
-          {/if}
-        </div>
-        <!-- {/if} -->
-      {/each}
-    </div>
   </section>
 {/each}
 
@@ -237,7 +106,4 @@
   section {
     contain: layout paint style;
   }
-  [data-image-grid] {
-    user-select: none;
-  }
 </style>

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: Snippet<
+      [
+        {
+          onDayGroupSelect: (dayGroup: DayGroup, asset: TimelineAsset[]) => void;
+          onDayGroupAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
+        },
+      ]
+    >;
+    onAssetSelect: (asset: TimelineAsset) => void;
+    assetInteraction: AssetInteraction;
+  }
+
+  let { content, assetInteraction, onAssetSelect }: Props = $props();
+
+  // called when clicking asset with shift key pressed or with mouse
+  const onDayGroupAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    onAssetSelect(asset);
+
+    const assetsInDayGroup = dayGroup.getAssets();
+    const groupTitle = dayGroup.groupTitle;
+
+    // Check if all assets are selected in a group to toggle the group selection's icon
+    const selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
+      assetInteraction.hasSelectedAsset(asset.id),
+    ).length;
+    // if all assets are selected in a group, add the group to selected group
+    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
+      assetInteraction.addGroupToMultiselectGroup(groupTitle);
+    } else {
+      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
+    }
+  };
+
+  const onDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
+    const group = dayGroup.groupTitle;
+    if (assetInteraction.selectedGroup.has(group)) {
+      assetInteraction.removeGroupFromMultiselectGroup(group);
+      for (const asset of assets) {
+        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+      }
+    } else {
+      assetInteraction.addGroupToMultiselectGroup(group);
+      for (const asset of assets) {
+        onAssetSelect(asset);
+      }
+    }
+  };
+</script>
+
+{@render content({
+  onDayGroupSelect,
+  onDayGroupAssetSelect,
+})}

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

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { navigate } from '$lib/utils/navigation';
+
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import { searchStore } from '$lib/stores/search.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: Snippet<
+      [
+        {
+          onAssetOpen: (asset: TimelineAsset) => void;
+          onAssetSelect: (asset: TimelineAsset) => void;
+          onAssetHover: (asset: TimelineAsset | null) => void;
+        },
+      ]
+    >;
+    segment: PhotostreamSegment;
+    isSelectionMode: boolean;
+    singleSelect: boolean;
+    timelineManager: PhotostreamManager;
+    assetInteraction: AssetInteraction;
+    onAssetOpen?: (asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+    onAssetSelect?: (asset: TimelineAsset) => void;
+
+    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+  }
+
+  let {
+    segment,
+    content,
+    isSelectionMode,
+    singleSelect,
+    assetInteraction,
+    timelineManager,
+    onAssetOpen,
+    onAssetSelect,
+    onScrollCompensationMonthInDOM,
+  }: Props = $props();
+
+  let shiftKeyIsDown = $state(false);
+  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  let lastMouseHoverAsset: TimelineAsset | null = $state(null);
+
+  $effect(() => {
+    if (shiftKeyIsDown && lastMouseHoverAsset) {
+      void selectAssetCandidates(lastMouseHoverAsset);
+    }
+    if (isEmpty) {
+      assetInteraction.clearMultiselect();
+    }
+  });
+
+  const defaultAssetOpen = (asset: TimelineAsset) => {
+    if (isSelectionMode || assetInteraction.selectionActive) {
+      handleAssetSelect(asset);
+      return;
+    }
+    void navigate({ targetRoute: 'current', assetId: asset.id });
+  };
+
+  const handleOnAssetOpen = (asset: TimelineAsset) => {
+    if (onAssetOpen) {
+      onAssetOpen(asset, () => defaultAssetOpen(asset));
+      return;
+    }
+    defaultAssetOpen(asset);
+  };
+
+  // called when clicking asset with shift key pressed or with mouse
+  const handleAssetSelect = (asset: TimelineAsset) => {
+    handleSelectAssets(asset);
+
+    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
+      isSelectingAllAssets.set(true);
+    } else {
+      isSelectingAllAssets.set(false);
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = true;
+      assetInteraction.clearAssetSelectionCandidates();
+      if (lastMouseHoverAsset) {
+        void selectAssetCandidates(lastMouseHoverAsset);
+        return;
+      }
+      if (!assetInteraction.assetSelectionStart) {
+        assetInteraction.setAssetSelectionStart(assetInteraction.selectedAssets.at(-1) ?? null);
+      }
+    }
+  };
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = false;
+      assetInteraction.clearAssetSelectionCandidates();
+    }
+  };
+
+  const handleOnHover = (asset: TimelineAsset | null) => {
+    if (asset) {
+      if (assetInteraction.selectionActive) {
+        void selectAssetCandidates(asset);
+      }
+      lastMouseHoverAsset = asset;
+    }
+  };
+
+  const handleSelectAssets = (asset: TimelineAsset) => {
+    if (!asset) {
+      return;
+    }
+    onAssetSelect?.(asset);
+
+    if (singleSelect) {
+      return;
+    }
+
+    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
+    const deselect = assetInteraction.hasSelectedAsset(asset.id);
+
+    // Select/deselect already loaded assets
+    if (deselect) {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
+      }
+      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+    } else {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        handleSelectAsset(candidate);
+      }
+      handleSelectAsset(asset);
+    }
+
+    assetInteraction.clearAssetSelectionCandidates();
+
+    if (assetInteraction.assetSelectionStart && rangeSelection) {
+      const assets = timelineManager.retrieveLoadedRange(assetInteraction.assetSelectionStart, asset);
+      for (const asset of assets) {
+        if (deselect) {
+          assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+        } else {
+          handleSelectAsset(asset);
+        }
+      }
+    }
+    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
+    return null;
+  };
+
+  const handleSelectAsset = (asset: TimelineAsset) => {
+    if ('albumAssets' in timelineManager) {
+      const tm = timelineManager as TimelineManager;
+      if (tm.albumAssets.has(asset.id)) {
+        return;
+      }
+    }
+
+    assetInteraction.selectAsset(asset);
+  };
+
+  const selectAssetCandidates = (endAsset: TimelineAsset) => {
+    if (!shiftKeyIsDown) {
+      return;
+    }
+
+    const startAsset = assetInteraction.assetSelectionStart;
+    if (!startAsset) {
+      return;
+    }
+    const assets = assetsSnapshot(timelineManager.retrieveLoadedRange(startAsset, endAsset));
+    assetInteraction.setAssetSelectionCandidates(assets);
+  };
+
+  $effect.root(() => {
+    if (timelineManager.scrollCompensation.monthGroup === segment) {
+      onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
+    }
+  });
+</script>
+
+<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
+
+{@render content({
+  onAssetOpen: handleOnAssetOpen,
+  onAssetSelect: (asset) => {
+    void handleSelectAssets(asset);
+  },
+  onAssetHover: handleOnHover,
+})}

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

@@ -2,22 +2,22 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/stores';
   import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import MonthSegment from '$lib/components/timeline/MonthSegment.svelte';
   import Scrubber from '$lib/components/timeline/Scrubber.svelte';
+  import SelectableDay from '$lib/components/timeline/SelectableDay.svelte';
+  import SelectableSegment from '$lib/components/timeline/SelectableSegment.svelte';
   import TimelineAssetViewer from '$lib/components/timeline/TimelineAssetViewer.svelte';
   import TimelineKeyboardActions from '$lib/components/timeline/actions/TimelineKeyboardActions.svelte';
   import { AssetAction } from '$lib/constants';
   import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import Skeleton from '$lib/elements/Skeleton.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.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';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { navigate } from '$lib/utils/navigation';
   import {
@@ -53,22 +53,12 @@
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
-    onSelect?: (asset: TimelineAsset) => void;
+    onAssetOpen?: (asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+    onAssetSelect?: (asset: TimelineAsset) => void;
     onEscape?: () => void;
     children?: Snippet;
     empty?: Snippet;
-    customLayout?: Snippet<[TimelineAsset]>;
+    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
   }
 
   let {
@@ -84,12 +74,13 @@
     album = null,
     person = null,
     isShowDeleteConfirmation = $bindable(false),
-    onSelect = () => {},
+
+    onAssetSelect,
+    onAssetOpen,
     onEscape = () => {},
     children,
     empty,
-    customLayout,
+    customThumbnailLayout,
-    onThumbnailClick,
   }: Props = $props();
 
   let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
@@ -148,14 +139,26 @@
     scrollTo(0);
   };
 
+  const handleTriggeredScrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
+    const { heightDelta, scrollTop } = compensation;
+    if (heightDelta !== undefined) {
+      scrollBy(heightDelta);
+    } else if (scrollTop !== undefined) {
+      scrollTo(scrollTop);
+    }
+    timelineManager.clearScrollCompensation();
+  };
+
   const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
     // the following method may trigger any layouts, so need to
     // handle any scroll compensation that may have been set
     const height = monthGroup!.findAssetAbsolutePosition(assetId);
 
+    // this is in a while loop, since scrollCompensations invoke scrolls
+    // which may load months, triggering more scrollCompensations. Call
+    // this in a loop, until no more layouts occur.
     while (timelineManager.scrollCompensation.monthGroup) {
-      handleScrollCompensation(timelineManager.scrollCompensation);
+      handleTriggeredScrollCompensation(timelineManager.scrollCompensation);
-      timelineManager.clearScrollCompensation();
     }
     return height;
   };
@@ -251,19 +254,6 @@
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
   const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
 
-  const handleScrollCompensation = ({ heightDelta, scrollTop }: { heightDelta?: number; scrollTop?: number }) => {
-    if (heightDelta !== undefined) {
-      scrollBy(heightDelta);
-    } else if (scrollTop !== undefined) {
-      scrollTo(scrollTop);
-    }
-    // Yes, updateSlideWindow() is called by the onScroll event triggered as a result of
-    // the above calls. However, this delay is enough time to set the intersecting property
-    // of the monthGroup to false, then true, which causes the DOM nodes to be recreated,
-    // causing bad perf, and also, disrupting focus of those elements.
-    updateSlidingWindow();
-  };
-
   const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
 
   onMount(() => {
@@ -389,172 +379,6 @@
     }
   };
 
-  const handleSelectAsset = (asset: TimelineAsset) => {
-    if (!timelineManager.albumAssets.has(asset.id)) {
-      assetInteraction.selectAsset(asset);
-    }
-  };
-
-  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
-
-  let shiftKeyIsDown = $state(false);
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-  const handleSelectAssetCandidates = (asset: TimelineAsset | null) => {
-    if (asset) {
-      void selectAssetCandidates(asset);
-    }
-    lastAssetMouseEvent = asset;
-  };
-
-  const handleGroupSelect = (timelineManager: TimelineManager, group: string, assets: TimelineAsset[]) => {
-    if (assetInteraction.selectedGroup.has(group)) {
-      assetInteraction.removeGroupFromMultiselectGroup(group);
-      for (const asset of assets) {
-        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-      }
-    } else {
-      assetInteraction.addGroupToMultiselectGroup(group);
-      for (const asset of assets) {
-        handleSelectAsset(asset);
-      }
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const handleSelectAssets = async (asset: TimelineAsset) => {
-    if (!asset) {
-      return;
-    }
-    onSelect(asset);
-
-    if (singleSelect) {
-      scrollTop(0);
-      return;
-    }
-
-    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
-    const deselect = assetInteraction.hasSelectedAsset(asset.id);
-
-    // Select/deselect already loaded assets
-    if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
-      }
-      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-    } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        handleSelectAsset(candidate);
-      }
-      handleSelectAsset(asset);
-    }
-
-    assetInteraction.clearAssetSelectionCandidates();
-
-    if (assetInteraction.assetSelectionStart && rangeSelection) {
-      let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
-      let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
-
-      if (startBucket === null || endBucket === null) {
-        return;
-      }
-
-      // Select/deselect assets in range (start,end)
-      let started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === endBucket) {
-          break;
-        }
-        if (started) {
-          await timelineManager.loadSegment(monthGroup.identifier);
-          for (const asset of monthGroup.assetsIterator()) {
-            if (deselect) {
-              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-            } else {
-              handleSelectAsset(asset);
-            }
-          }
-        }
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-      }
-
-      // Update date group selection in range [start,end]
-      started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-        if (started) {
-          // Split month group into day groups and check each group
-          for (const dayGroup of monthGroup.dayGroups) {
-            const dayGroupTitle = dayGroup.groupTitle;
-            if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
-              assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
-            } else {
-              assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
-            }
-          }
-        }
-        if (monthGroup === endBucket) {
-          break;
-        }
-      }
-    }
-
-    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
-  };
-
-  const selectAssetCandidates = async (endAsset: TimelineAsset) => {
-    if (!shiftKeyIsDown) {
-      return;
-    }
-
-    const startAsset = assetInteraction.assetSelectionStart;
-    if (!startAsset) {
-      return;
-    }
-
-    const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
-    assetInteraction.setAssetSelectionCandidates(assets);
-  };
-
-  $effect(() => {
-    if (!lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
-    }
-  });
-
-  $effect(() => {
-    if (!shiftKeyIsDown) {
-      assetInteraction.clearAssetSelectionCandidates();
-    }
-  });
-
-  $effect(() => {
-    if (shiftKeyIsDown && lastAssetMouseEvent) {
-      void selectAssetCandidates(lastAssetMouseEvent);
-    }
-  });
-
   $effect(() => {
     if ($showAssetViewer) {
       const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
@@ -563,8 +387,6 @@
   });
 </script>
 
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
-
 <HotModuleReload onAfterUpdate={handleAfterUpdate} onBeforeUpdate={handleBeforeUpdate} />
 
 <TimelineKeyboardActions
@@ -587,21 +409,6 @@
     {viewportTopMonth}
     {onScrub}
     bind:scrubberWidth
-    onScrubKeyDown={(evt) => {
-      evt.preventDefault();
-      let amount = 50;
-      if (shiftKeyIsDown) {
-        amount = 500;
-      }
-      if (evt.key === 'ArrowUp') {
-        amount = -amount;
-        if (shiftKeyIsDown) {
-          element?.scrollBy({ top: amount, behavior: 'smooth' });
-        }
-      } else if (evt.key === 'ArrowDown') {
-        element?.scrollBy({ top: amount, behavior: 'smooth' });
-      }
-    }}
   />
 {/if}
 
@@ -660,21 +467,58 @@
           style:transform={`translate3d(0,${absoluteHeight}px,0)`}
           style:width="100%"
         >
-          <MonthSegment
+          <SelectableSegment
-            {withStacked}
+            segment={monthGroup}
-            {showArchiveIcon}
+            onScrollCompensationMonthInDOM={handleTriggeredScrollCompensation}
-            {assetInteraction}
             {timelineManager}
+            {assetInteraction}
             {isSelectionMode}
             {singleSelect}
-            {monthGroup}
+            {onAssetOpen}
-            onSelect={({ title, assets }) => handleGroupSelect(timelineManager, title, assets)}
+            {onAssetSelect}
-            onSelectAssetCandidates={handleSelectAssetCandidates}
+          >
-            onSelectAssets={handleSelectAssets}
+            {#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
-            onScrollCompensation={handleScrollCompensation}
+              <SelectableDay {assetInteraction} {onAssetSelect}>
-            {customLayout}
+                {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
-            {onThumbnailClick}
+                  <MonthSegment
-          />
+                    {assetInteraction}
+                    {customThumbnailLayout}
+                    {singleSelect}
+                    {monthGroup}
+                    {timelineManager}
+                    {onDayGroupSelect}
+                  >
+                    {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
+                      {@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
+                      {@const isAssetSelected =
+                        assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
+                      {@const isAssetDisabled = timelineManager.albumAssets.has(asset.id)}
+                      <Thumbnail
+                        showStackedIcon={withStacked}
+                        {showArchiveIcon}
+                        {asset}
+                        {groupIndex}
+                        onClick={() => onAssetOpen(asset)}
+                        onSelect={() => onDayGroupAssetSelect(dayGroup, asset)}
+                        onMouseEvent={(isMouseOver) => {
+                          if (isMouseOver) {
+                            onAssetHover(asset);
+                          } else {
+                            onAssetHover(null);
+                          }
+                        }}
+                        selected={isAssetSelected}
+                        selectionCandidate={isAssetSelectionCandidate}
+                        disabled={isAssetDisabled}
+                        thumbnailWidth={position.width}
+                        thumbnailHeight={position.height}
+                      />
+                    {/snippet}
+                  </MonthSegment>
+                {/snippet}
+              </SelectableDay>
+            {/snippet}
+          </SelectableSegment>
         </div>
       {/if}
     {/each}

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

@@ -111,12 +111,12 @@
       case AssetAction.UNARCHIVE:
       case AssetAction.FAVORITE:
       case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
+        timelineManager.upsertAssets([action.asset]);
         break;
       }
 
       case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
+        timelineManager.upsertAssets([action.asset]);
         break;
       }
 
@@ -125,7 +125,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/actions/ArchiveAction.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
   import type { OnArchive } from '$lib/utils/actions';
   import { archiveAssets } from '$lib/utils/asset-utils';
   import { AssetVisibility } from '@immich/sdk';
@@ -12,9 +13,10 @@
     onArchive?: OnArchive;
     menuItem?: boolean;
     unarchive?: boolean;
+    manager?: PhotostreamManager;
   }
 
-  let { onArchive, menuItem = false, unarchive = false }: Props = $props();
+  let { onArchive, menuItem = false, unarchive = false, manager }: Props = $props();
 
   let text = $derived(unarchive ? $t('unarchive') : $t('to_archive'));
   let icon = $derived(unarchive ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline);
@@ -24,12 +26,13 @@
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   const handleArchive = async () => {
-    const isArchived = unarchive ? AssetVisibility.Timeline : AssetVisibility.Archive;
+    const visibility = unarchive ? AssetVisibility.Timeline : AssetVisibility.Archive;
-    const assets = [...getOwnedAssets()].filter((asset) => asset.visibility !== isArchived);
+    const assets = [...getOwnedAssets()].filter((asset) => asset.visibility !== visibility);
     loading = true;
-    const ids = await archiveAssets(assets, isArchived as AssetVisibility);
+    const ids = await archiveAssets(assets, visibility as AssetVisibility);
     if (ids) {
-      onArchive?.(ids, isArchived ? AssetVisibility.Archive : AssetVisibility.Timeline);
+      manager?.updateAssetOperation(ids, (asset) => ((asset.visibility = visibility), void 0));
+      onArchive?.(ids, visibility ? AssetVisibility.Archive : AssetVisibility.Timeline);
       clearSelect();
     }
     loading = false;

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

@@ -1,6 +1,8 @@
 <script lang="ts">
   import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
   import { IconButton } from '@immich/ui';
@@ -9,13 +11,14 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
 
   interface Props {
-    onAssetDelete: OnDelete;
+    onAssetDelete?: OnDelete;
-    onUndoDelete?: OnUndoDelete | undefined;
+    onUndoDelete?: OnUndoDelete;
     menuItem?: boolean;
     force?: boolean;
+    manager?: PhotostreamManager;
   }
 
-  let { onAssetDelete, onUndoDelete = undefined, menuItem = false, force = !$featureFlags.trash }: Props = $props();
+  let { onAssetDelete, onUndoDelete, menuItem = false, force = !$featureFlags.trash, manager }: Props = $props();
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
@@ -36,7 +39,12 @@
   const handleDelete = async () => {
     loading = true;
     const assets = [...getOwnedAssets()];
-    await deleteAssets(force, onAssetDelete, assets, onUndoDelete);
+    const undo = (assets: TimelineAsset[]) => {
+      manager?.upsertAssets(assets);
+      onUndoDelete?.(assets);
+    };
+    await deleteAssets(force, onAssetDelete, assets, undo);
+    manager?.removeAssets(assets.map((asset) => asset.id));
     clearSelect();
     isShowConfirmation = false;
     loading = false;

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

@@ -5,6 +5,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
   import type { OnFavorite } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
@@ -16,9 +17,10 @@
     onFavorite?: OnFavorite;
     menuItem?: boolean;
     removeFavorite: boolean;
+    manager?: PhotostreamManager;
   }
 
-  let { onFavorite, menuItem = false, removeFavorite }: Props = $props();
+  let { onFavorite, menuItem = false, removeFavorite, manager }: Props = $props();
 
   let text = $derived(removeFavorite ? $t('remove_from_favorites') : $t('to_favorite'));
   let icon = $derived(removeFavorite ? mdiHeartMinusOutline : mdiHeartOutline);
@@ -39,11 +41,7 @@
       if (ids.length > 0) {
         await updateAssets({ assetBulkUpdateDto: { ids, isFavorite } });
       }
-
+      manager?.updateAssetOperation(ids, (asset) => ((asset.isFavorite = isFavorite), void 0));
-      for (const asset of assets) {
-        asset.isFavorite = isFavorite;
-      }
-
       onFavorite?.(ids, isFavorite);
 
       notificationController.show({

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

@@ -51,7 +51,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/photostream-manager/PhotostreamManager.svelte.ts

@@ -3,16 +3,21 @@ import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-s
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { clamp, debounce } from 'lodash-es';
 
-import type {
+import {
   PhotostreamSegment,
-  SegmentIdentifier,
+  type SegmentIdentifier,
 } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+
+import { updateObject } from '$lib/managers/timeline-manager/internal/utils.svelte';
 import type {
   AssetDescriptor,
+  AssetOperation,
+  MoveAsset,
   TimelineAsset,
   TimelineManagerLayoutOptions,
   Viewport,
 } from '$lib/managers/timeline-manager/types';
+import { setDifference } from '$lib/utils/timeline-util';
 
 export abstract class PhotostreamManager {
   isInitialized = $state(false);
@@ -294,11 +299,15 @@ export abstract class PhotostreamManager {
     return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
   }
 
-  retrieveRange(start: AssetDescriptor, end: AssetDescriptor): Promise<TimelineAsset[]> {
+  retrieveLoadedRange(start: AssetDescriptor, end: AssetDescriptor): TimelineAsset[] {
     const range: TimelineAsset[] = [];
     let collecting = false;
 
     for (const month of this.months) {
+      if (collecting && !month.isLoaded) {
+        // if there are any unloaded months in the range, return empty []
+        return [];
+      }
       for (const asset of month.assets) {
         if (asset.id === start.id) {
           collecting = true;
@@ -307,10 +316,116 @@ export abstract class PhotostreamManager {
           range.push(asset);
         }
         if (asset.id === end.id) {
-          return Promise.resolve(range);
+          return range;
         }
       }
     }
-    return Promise.resolve(range);
+    return range;
+  }
+
+  retrieveRange(start: AssetDescriptor, end: AssetDescriptor): Promise<TimelineAsset[]> {
+    return Promise.resolve(this.retrieveLoadedRange(start, end));
+  }
+
+  updateAssetOperation(ids: string[], operation: AssetOperation) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    return this.#runAssetOperation(new Set(ids), operation);
+  }
+
+  upsertAssets(assets: TimelineAsset[]) {
+    const notExcluded = assets.filter((asset) => !this.isExcluded(asset));
+    const notUpdated = this.#updateAssets(notExcluded);
+    this.addAssetsToSegments([...notUpdated]);
+  }
+
+  #updateAssets(assets: TimelineAsset[]) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const lookup = new Map<string, TimelineAsset>(assets.map((asset) => [asset.id, asset]));
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const { unprocessedIds } = this.#runAssetOperation(new Set(lookup.keys()), (asset) =>
+      updateObject(asset, lookup.get(asset.id)),
+    );
+    const result: TimelineAsset[] = [];
+    for (const id of unprocessedIds.values()) {
+      result.push(lookup.get(id)!);
+    }
+    return result;
+  }
+
+  removeAssets(ids: string[]) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const { unprocessedIds } = this.#runAssetOperation(new Set(ids), () => ({ remove: true }));
+    return [...unprocessedIds];
+  }
+
+  isExcluded(_: TimelineAsset) {
+    return false;
+  }
+
+  protected createUpsertContext(): unknown {
+    return;
+  }
+
+  protected abstract upsertAssetIntoSegment(asset: TimelineAsset, context: unknown): void;
+
+  protected postCreateSegments(): void {}
+
+  protected postUpsert(_: unknown): void {}
+
+  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: Set<string>, operation: AssetOperation) {
+    if (ids.size === 0) {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      return { processedIds: new Set(), unprocessedIds: ids, changedGeometry: false };
+    }
+
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const changedMonthGroups = new Set<PhotostreamSegment>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    let idsToProcess = new Set(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsProcessed = new Set<string>();
+    const combinedMoveAssets: MoveAsset[][] = [];
+    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);
+        }
+        idsToProcess = setDifference(idsToProcess, processedIds);
+        for (const id of processedIds) {
+          idsProcessed.add(id);
+        }
+        if (changedGeometry) {
+          changedMonthGroups.add(month);
+        }
+      }
+    }
+    if (combinedMoveAssets.length > 0) {
+      this.addAssetsToSegments(combinedMoveAssets.flat().map((a) => a.asset));
+    }
+    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 };
   }
 }

web/src/lib/managers/photostream-manager/PhotostreamSegment.svelte.ts

@@ -4,7 +4,7 @@ import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
 import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+import type { AssetOperation, MoveAsset, TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
 
 export type SegmentIdentifier = {
@@ -147,4 +147,49 @@ export abstract class PhotostreamSegment {
   }
 
   abstract findAssetAbsolutePosition(assetId: string): number;
+
+  runAssetOperation(ids: Set<string>, operation: AssetOperation) {
+    if (ids.size === 0) {
+      return {
+        moveAssets: [] as MoveAsset[],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        processedIds: new Set<string>(),
+        unprocessedIds: ids,
+        changedGeometry: false,
+      };
+    }
+    // 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: MoveAsset[] = [];
+    let changedGeometry = false;
+    for (const assetId of unprocessedIds) {
+      const index = this.viewerAssets.findIndex((viewAsset) => viewAsset.id == assetId);
+      if (index === -1) {
+        continue;
+      }
+
+      const asset = this.viewerAssets[index].asset!;
+      const oldTime = { ...asset.localDateTime };
+      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;
+        remove = true;
+        moveAssets.push({ asset, date: { year, month, day } });
+      }
+      unprocessedIds.delete(assetId);
+      processedIds.add(assetId);
+      if (remove || this.timelineManager.isExcluded(asset)) {
+        this.viewerAssets.splice(index, 1);
+        changedGeometry = true;
+      }
+    }
+    return { moveAssets, processedIds, unprocessedIds, changedGeometry };
+  }
 }

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

@@ -129,7 +129,11 @@ export class DayGroup {
 
       const asset = this.viewerAssets[index].asset!;
       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;

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

@@ -1,103 +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, true, options.order);
-      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/websocket-support.svelte.ts

@@ -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/timeline-manager.svelte.spec.ts

@@ -173,7 +173,7 @@ describe('TimelineManager', () => {
     });
   });
 
-  describe('addAssets', () => {
+  describe('upsertAssets', () => {
     let timelineManager: TimelineManager;
 
     beforeEach(async () => {
@@ -194,7 +194,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);
@@ -210,8 +210,8 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets([assetOne]);
+      timelineManager.upsertAssets([assetOne]);
-      timelineManager.addAssets([assetTwo]);
+      timelineManager.upsertAssets([assetTwo]);
 
       expect(timelineManager.months.length).toEqual(1);
       expect(timelineManager.assetCount).toEqual(2);
@@ -236,7 +236,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();
@@ -262,7 +262,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);
@@ -276,11 +276,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);
     });
@@ -292,7 +292,7 @@ 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]);
     });
   });
@@ -307,22 +307,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', () => {
       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);
     });
@@ -338,12 +331,12 @@ 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 })?.assets.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 })?.assets.length).toEqual(0);
@@ -363,7 +356,7 @@ describe('TimelineManager', () => {
     });
 
     it('ignores invalid IDs', () => {
-      timelineManager.addAssets(
+      timelineManager.upsertAssets(
         timelineAssetFactory
           .buildList(2, {
             fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
@@ -383,7 +376,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);
@@ -397,7 +390,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);
@@ -429,7 +422,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
       expect(timelineManager.getFirstAsset()).toEqual(assetOne);
     });
   });
@@ -554,7 +547,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);
@@ -573,7 +566,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

@@ -11,14 +11,11 @@ import {
 } from '$lib/utils/timeline-util';
 
 import { isEqual } from 'lodash-es';
-import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 
 import { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+import { GroupInsertionCache } from '$lib/managers/timeline-manager/group-insertion-cache.svelte';
 import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
-import {
-  addAssetsToMonthGroups,
-  runAssetOperation,
-} from '$lib/managers/timeline-manager/internal/operations-support.svelte';
 import {
   findMonthGroupForAsset as findMonthGroupForAssetUtil,
   findMonthGroupForDate,
@@ -28,16 +25,9 @@ import {
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
 import { DayGroup } from './day-group.svelte';
-import { isMismatched, updateObject } from './internal/utils.svelte';
+import { isMismatched } from './internal/utils.svelte';
 import { MonthGroup } from './month-group.svelte';
-import type {
+import type { AssetDescriptor, Direction, ScrubberMonth, TimelineAsset, TimelineManagerOptions } from './types';
-  AssetDescriptor,
-  AssetOperation,
-  Direction,
-  ScrubberMonth,
-  TimelineAsset,
-  TimelineManagerOptions,
-} from './types';
 
 export class TimelineManager extends PhotostreamManager {
   albumAssets: Set<string> = new SvelteSet();
@@ -181,12 +171,6 @@ export class TimelineManager extends PhotostreamManager {
     this.scrubberTimelineHeight = this.timelineHeight;
   }
 
-  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 });
-  }
-
   async findMonthGroupForAsset(id: string) {
     if (!this.isInitialized) {
       await this.initTask.waitUntilCompletion();
@@ -235,40 +219,6 @@ export class TimelineManager extends PhotostreamManager {
     return month?.getRandomAsset();
   }
 
-  updateAssetOperation(ids: string[], operation: AssetOperation) {
-    runAssetOperation(this, new SvelteSet(ids), operation, { order: this.#options.order ?? AssetOrder.Desc });
-  }
-
-  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 },
-    );
-    const result: TimelineAsset[] = [];
-    for (const id of unprocessedIds.values()) {
-      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];
-  }
-
   refreshLayout() {
     for (const month of this.months) {
       updateGeometry(this, month, { invalidateHeight: true });
@@ -324,4 +274,42 @@ export class TimelineManager extends PhotostreamManager {
   getAssetOrder() {
     return this.#options.order ?? AssetOrder.Desc;
   }
+
+  protected createUpsertContext(): unknown {
+    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 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

@@ -35,7 +35,7 @@ export type TimelineAsset = {
   longitude?: number | null;
 };
 
-export type AssetOperation = (asset: TimelineAsset) => { remove: boolean };
+export type AssetOperation = (asset: TimelineAsset) => { remove: boolean } | unknown;
 
 export type MoveAsset = { asset: TimelineAsset; date: TimelineDate };
 

web/src/lib/utils/actions.ts

@@ -21,15 +21,15 @@ export type OnSetVisibility = (ids: string[]) => void;
 
 export const deleteAssets = async (
   force: boolean,
-  onAssetDelete: OnDelete,
+  onAssetDelete: OnDelete | undefined,
   assets: TimelineAsset[],
-  onUndoDelete: OnUndoDelete | undefined = undefined,
+  onUndoDelete: OnUndoDelete | undefined,
 ) => {
   const $t = get(t);
   try {
     const ids = assets.map((a) => a.id);
     await deleteBulk({ assetBulkDeleteDto: { ids, force } });
-    onAssetDelete(ids);
+    onAssetDelete?.(ids);
 
     notificationController.show({
       message: force
@@ -98,5 +98,5 @@ export function updateUnstackedAssetInTimeline(timelineManager: TimelineManager,
     },
   );
 
-  timelineManager.addAssets(assets);
+  timelineManager.upsertAssets(assets);
 }

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

@@ -34,7 +34,6 @@
   import { AlbumPageViewMode, AppRoute } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
   import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
   import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
@@ -262,18 +261,15 @@
     }
   };
 
-  const handleSetVisibility = (assetIds: string[]) => {
+  const handleSetVisibility = () => {
-    timelineManager.removeAssets(assetIds);
     assetInteraction.clearMultiselect();
   };
 
-  const handleRemoveAssets = async (assetIds: string[]) => {
+  const handleRemoveAssets = async () => {
-    timelineManager.removeAssets(assetIds);
     await refreshAlbum();
   };
 
-  const handleUndoRemoveAssets = async (assets: TimelineAsset[]) => {
+  const handleUndoRemoveAssets = async () => {
-    timelineManager.addAssets(assets);
     await refreshAlbum();
   };
 
@@ -452,7 +448,7 @@
         {isSelectionMode}
         {singleSelect}
         {showArchiveIcon}
-        {onSelect}
+        onAssetSelect={onSelect}
         onEscape={handleEscape}
       >
         {#if viewMode !== AlbumPageViewMode.SELECT_ASSETS}
@@ -572,14 +568,7 @@
           <AddToAlbum shared />
         </ButtonContextMenu>
         {#if assetInteraction.isAllUserOwned}
-          <FavoriteAction
+          <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager}></FavoriteAction>
-            removeFavorite={assetInteraction.isAllFavorite}
-            onFavorite={(ids, isFavorite) =>
-              timelineManager.updateAssetOperation(ids, (asset) => {
-                asset.isFavorite = isFavorite;
-                return { remove: false };
-              })}
-          ></FavoriteAction>
         {/if}
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
           <DownloadAction menuItem filename="{album.albumName}.zip" />
@@ -594,7 +583,7 @@
                 onClick={() => updateThumbnailUsingCurrentSelection()}
               />
             {/if}
-            <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
+            <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} manager={timelineManager} />
             <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
           {/if}
 
@@ -606,7 +595,12 @@
             <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
           {/if}
           {#if assetInteraction.isAllUserOwned}
-            <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} onUndoDelete={handleUndoRemoveAssets} />
+            <DeleteAssets
+              menuItem
+              onAssetDelete={handleRemoveAssets}
+              onUndoDelete={handleUndoRemoveAssets}
+              manager={timelineManager}
+            />
           {/if}
         </ButtonContextMenu>
       </AssetSelectControlBar>

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

@@ -65,32 +65,18 @@
     assets={assetInteraction.selectedAssets}
     clearSelect={() => assetInteraction.clearMultiselect()}
   >
-    <ArchiveAction
+    <ArchiveAction unarchive manager={timelineManager} />
-      unarchive
-      onArchive={(ids, visibility) =>
-        timelineManager.updateAssetOperation(ids, (asset) => {
-          asset.visibility = visibility;
-          return { remove: false };
-        })}
-    />
     <CreateSharedLink />
     <SelectAllAssets {timelineManager} {assetInteraction} />
     <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
       <AddToAlbum />
       <AddToAlbum shared />
     </ButtonContextMenu>
-    <FavoriteAction
+    <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager} />
-      removeFavorite={assetInteraction.isAllFavorite}
-      onFavorite={(ids, isFavorite) =>
-        timelineManager.updateAssetOperation(ids, (asset) => {
-          asset.isFavorite = isFavorite;
-          return { remove: false };
-        })}
-    />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
       <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
-      <DeleteAssets menuItem onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
+      <DeleteAssets menuItem manager={timelineManager} />
     </ButtonContextMenu>
   </AssetSelectControlBar>
 {/if}

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

@@ -71,7 +71,7 @@
     assets={assetInteraction.selectedAssets}
     clearSelect={() => assetInteraction.clearMultiselect()}
   >
-    <FavoriteAction removeFavorite onFavorite={(assetIds) => timelineManager.removeAssets(assetIds)} />
+    <FavoriteAction removeFavorite manager={timelineManager} />
     <CreateSharedLink />
     <SelectAllAssets {timelineManager} {assetInteraction} />
     <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
@@ -83,20 +83,12 @@
       <ChangeDate menuItem />
       <ChangeDescription menuItem />
       <ChangeLocation menuItem />
-      <ArchiveAction
+      <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} manager={timelineManager} />
-        menuItem
-        unarchive={assetInteraction.isAllArchived}
-        onArchive={(assetIds) => timelineManager.removeAssets(assetIds)}
-      />
       {#if $preferences.tags.enabled}
         <TagAction menuItem />
       {/if}
       <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
-      <DeleteAssets
+      <DeleteAssets menuItem manager={timelineManager} />
-        menuItem
-        onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
-        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
-      />
     </ButtonContextMenu>
   </AssetSelectControlBar>
 {/if}

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

@@ -349,15 +349,8 @@
     }
   };
 
-  const handleDeleteAssets = async (assetIds: string[]) => {
+  const handleDeleteAssets = async () => await updateAssetCount();
-    timelineManager.removeAssets(assetIds);
+  const handleUndoDeleteAssets = async () => await updateAssetCount();
-    await updateAssetCount();
-  };
-
-  const handleUndoDeleteAssets = async (assets: TimelineAsset[]) => {
-    timelineManager.addAssets(assets);
-    await updateAssetCount();
-  };
 
   let person = $derived(data.person);
 
@@ -392,7 +385,7 @@
       {assetInteraction}
       isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}
       singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
-      onSelect={handleSelectFeaturePhoto}
+      onAssetSelect={handleSelectFeaturePhoto}
       onEscape={handleEscape}
     >
       {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
@@ -511,14 +504,7 @@
         <AddToAlbum />
         <AddToAlbum shared />
       </ButtonContextMenu>
-      <FavoriteAction
+      <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager} />
-        removeFavorite={assetInteraction.isAllFavorite}
-        onFavorite={(ids, isFavorite) =>
-          timelineManager.updateAssetOperation(ids, (asset) => {
-            asset.isFavorite = isFavorite;
-            return { remove: false };
-          })}
-      />
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
         <DownloadAction menuItem filename="{person.name || 'immich'}.zip" />
         <MenuOption
@@ -529,19 +515,16 @@
         <ChangeDate menuItem />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
-        <ArchiveAction
+        <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} manager={timelineManager} />
-          menuItem
-          unarchive={assetInteraction.isAllArchived}
-          onArchive={(assetIds) => timelineManager.removeAssets(assetIds)}
-        />
         {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
           <TagAction menuItem />
         {/if}
         <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
         <DeleteAssets
           menuItem
-          onAssetDelete={(assetIds) => handleDeleteAssets(assetIds)}
+          manager={timelineManager}
-          onUndoDelete={(assets) => handleUndoDeleteAssets(assets)}
+          onAssetDelete={handleDeleteAssets}
+          onUndoDelete={handleUndoDeleteAssets}
         />
       </ButtonContextMenu>
     </AssetSelectControlBar>

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

@@ -70,12 +70,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.upsertAssets([motion]);
-    timelineManager.updateAssets([still]);
+    timelineManager.upsertAssets([still]);
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
@@ -118,14 +118,7 @@
       <AddToAlbum />
       <AddToAlbum shared />
     </ButtonContextMenu>
-    <FavoriteAction
+    <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager}></FavoriteAction>
-      removeFavorite={assetInteraction.isAllFavorite}
-      onFavorite={(ids, isFavorite) =>
-        timelineManager.updateAssetOperation(ids, (asset) => {
-          asset.isFavorite = isFavorite;
-          return { remove: false };
-        })}
-    ></FavoriteAction>
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
       {#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
@@ -146,15 +139,11 @@
       <ChangeDate menuItem />
       <ChangeDescription menuItem />
       <ChangeLocation menuItem />
-      <ArchiveAction menuItem onArchive={(assetIds) => timelineManager.removeAssets(assetIds)} />
+      <ArchiveAction menuItem manager={timelineManager} />
       {#if $preferences.tags.enabled}
         <TagAction menuItem />
       {/if}
-      <DeleteAssets
+      <DeleteAssets menuItem manager={timelineManager} />
-        menuItem
-        onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
-        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
-      />
       <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
       <hr />
       <AssetJobActions />

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

@@ -5,7 +5,6 @@
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
   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 GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
@@ -63,7 +62,7 @@
       }),
     );
 
-    timelineManager.updateAssets(updatedAssets);
+    timelineManager.upsertAssets(updatedAssets);
 
     handleDeselectAll();
   };
@@ -110,17 +109,7 @@
     return !!asset.latitude && !!asset.longitude;
   };
 
-  const handleThumbnailClick = (
+  const handleAssetOpen = (asset: TimelineAsset, defaultAssetOpen: () => void) => {
-    asset: TimelineAsset,
-    timelineManager: TimelineManager,
-    dayGroup: DayGroup,
-    onClick: (
-      timelineManager: TimelineManager,
-      assets: TimelineAsset[],
-      groupTitle: string,
-      asset: TimelineAsset,
-    ) => void,
-  ) => {
     if (hasGps(asset)) {
       locationUpdated = true;
       setTimeout(() => {
@@ -128,9 +117,9 @@
       }, 1500);
       location = { latitude: asset.latitude!, longitude: asset.longitude! };
       void setQueryValue('at', asset.id);
-    } else {
+      return;
-      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
     }
+    defaultAssetOpen();
   };
 </script>
 
@@ -193,9 +182,9 @@
     removeAction={AssetAction.ARCHIVE}
     onEscape={handleEscape}
     withStacked
-    onThumbnailClick={handleThumbnailClick}
+    onAssetOpen={handleAssetOpen}
   >
-    {#snippet customLayout(asset: TimelineAsset)}
+    {#snippet customThumbnailLayout(asset: TimelineAsset)}
       {#if hasGps(asset)}
         <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
           {asset.city || $t('gps')}