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
refactor(web): extract asset grid layout logic into AssetLayout component
2025-09-30 00:08:14 +00:00 · 2025-09-30 00:08:14 +00:00 · 2025-09-30 00:00:50 +00:00 · 2025-09-29 01:26:59 +00:00
28 changed files with 803 additions and 1053 deletions
--- a/server/src/services/notification.service.ts
+++ b/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,
            },
          },
        }),
      );
    }
  }
--- a/web/src/lib/components/timeline/Photostream.svelte
+++ b/web/src/lib/components/timeline/Photostream.svelte
@@ -1,304 +0,0 @@
 <script lang="ts">
  import { page } from '$app/state';
  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
  import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
  import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { onMount, type Snippet } from 'svelte';
  interface Props {
    segment: Snippet<
      [
        {
          segment: PhotostreamSegment;
          scrollToFunction: (top: number) => void;
          onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
        },
      ]
    >;
    skeleton: Snippet<
      [
        {
          segment: PhotostreamSegment;
        },
      ]
    >;
    showScrollbar?: boolean;
    /** `true` if this asset grid responds to navigation events; if `true`, then look at the
     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
     additionally, update the page location/url with the asset as the asset-grid is scrolled */
    enableRouting: boolean;
    timelineManager: PhotostreamManager;
    alwaysShowScrollbar?: boolean;
    showSkeleton?: boolean;
    isShowDeleteConfirmation?: boolean;
    styleMarginRightOverride?: string;
    header?: Snippet<[scrollToFunction: (top: number) => void]>;
    children?: Snippet;
    empty?: Snippet;
    handleTimelineScroll?: () => void;
    smallHeaderHeight?: {
      rowHeight: number;
      headerHeight: number;
    };
    largeHeaderHeight?: {
      rowHeight: number;
      headerHeight: number;
    };
    styleMarginContentHorizontal?: string;
    styleMarginTop?: string;
  }
  let {
    segment,
    enableRouting,
    timelineManager = $bindable(),
    showSkeleton = $bindable(true),
    showScrollbar,
    styleMarginRightOverride,
    styleMarginContentHorizontal = '0px',
    styleMarginTop = '0px',
    alwaysShowScrollbar,
    isShowDeleteConfirmation = $bindable(false),
    children,
    skeleton,
    empty,
    header,
    handleTimelineScroll = () => {},
    smallHeaderHeight = {
      rowHeight: 100,
      headerHeight: 32,
    },
    largeHeaderHeight = {
      rowHeight: 235,
      headerHeight: 48,
    },
  }: Props = $props();
  let { gridScrollTarget } = assetViewingStore;
  let element: HTMLElement | undefined = $state();
  let timelineElement: HTMLElement | undefined = $state();
  const maxMd = $derived(mobileDevice.maxMd);
  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
  $effect(() => {
    const layoutOptions = maxMd ? smallHeaderHeight : largeHeaderHeight;
    timelineManager.setLayoutOptions(layoutOptions);
  });
  const scrollTo = (top: number) => {
    if (element) {
      element.scrollTo({ top });
    }
    updateSlidingWindow();
  };
  const scrollBy = (y: number) => {
    if (element) {
      element.scrollBy(0, y);
    }
    updateSlidingWindow();
  };
  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: PhotostreamSegment) => {
    // 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) {
      handleTriggeredScrollCompensation(timelineManager.scrollCompensation);
    }
    return height;
  };
  export const scrollToAssetId = async (assetId: string) => {
    const monthGroup = await timelineManager.findSegmentForAssetId(assetId);
    if (!monthGroup) {
      return false;
    }
    const height = getAssetHeight(assetId, monthGroup);
    scrollTo(height);
    return true;
  };
  export const completeAfterNavigate = async ({ scrollToAssetQueryParam }: { scrollToAssetQueryParam: boolean }) => {
    if (timelineManager.viewportHeight === 0 || timelineManager.viewportWidth === 0) {
      // this can happen if you do the following navigation order
      // /photos?at=<id>, /photos/<id>, http://example.com, browser back, browser back
      const rect = element?.getBoundingClientRect();
      if (rect) {
        timelineManager.viewportHeight = rect.height;
        timelineManager.viewportWidth = rect.width;
      }
    }
    if (scrollToAssetQueryParam) {
      const scrollTarget = $gridScrollTarget?.at;
      let scrolled = false;
      if (scrollTarget) {
        scrolled = await scrollToAssetId(scrollTarget);
      }
      if (!scrolled) {
        // if the asset is not found, scroll to the top
        scrollTo(0);
      }
    }
    showSkeleton = false;
  };
  const updateIsScrolling = () => (timelineManager.scrolling = true);
  // Yes, updateSlideWindow() is called by the onScroll event. However, if you also just scrolled
  // by explicitly invoking element.scrollX functions, there may be a delay with 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.
  // Also note: don't throttle, debounce, or otherwise do this function async - it causes flicker
  const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
  const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
  onMount(() => {
    if (!enableRouting) {
      showSkeleton = false;
    }
  });
 </script>
 <HotModuleReload
  onAfterUpdate={() => {
    // when hmr happens, skeleton is initialized to true by default
    // normally, loading asset-grid is part of a navigation event, and the completion of
    // that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
    // this handler will run the navigation/scroll-to-asset handler when hmr is performed,
    // preventing skeleton from showing after hmr
    const finishHmr = () => {
      const asset = page.url.searchParams.get('at');
      if (asset) {
        $gridScrollTarget = { at: asset };
      }
      void completeAfterNavigate({ scrollToAssetQueryParam: true });
    };
    // wait 500ms for the update to be fully swapped in
    setTimeout(finishHmr, 500);
  }}
 />
 {@render header?.(scrollTo)}
 <!-- Right margin MUST be equal to the width of scrubber -->
 <photostream
  id="asset-grid"
  class={[
    'overflow-y-auto outline-none',
    { 'scrollbar-hidden': !showScrollbar },
    { 'overflow-y-scroll': alwaysShowScrollbar },
    { 'm-0': isEmpty },
    { 'ms-0': !isEmpty },
  ]}
  style:height={`calc(100% - ${styleMarginTop})`}
  style:margin-top={styleMarginTop}
  style:margin-right={styleMarginRightOverride}
  style:scrollbar-width={showScrollbar ? 'thin' : 'none'}
  tabindex="-1"
  bind:clientHeight={timelineManager.viewportHeight}
  bind:this={element}
  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
 >
  <section
    bind:this={timelineElement}
    id="virtual-timeline"
    style:margin-left={styleMarginContentHorizontal}
    style:margin-right={styleMarginContentHorizontal}
    class:invisible={showSkeleton}
    style:height={timelineManager.timelineHeight + 'px'}
    bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
  >
    <section
      use:resizeObserver={topSectionResizeObserver}
      class:invisible={showSkeleton}
      style:position="absolute"
      style:left="0"
      style:right="0"
    >
      {@render children?.()}
      {#if isEmpty}
        <!-- (optional) empty placeholder -->
        {@render empty?.()}
      {/if}
    </section>
    {#each timelineManager.months as monthGroup (monthGroup.id)}
      {@const shouldDisplay = monthGroup.intersecting && monthGroup.isLoaded}
      {@const absoluteHeight = monthGroup.top}
      <div
        class="month-group"
        style:margin-bottom={timelineManager.createLayoutOptions().spacing + 'px'}
        style:position="absolute"
        style:transform={`translate3d(0,${absoluteHeight}px,0)`}
        style:height={`${monthGroup.height}px`}
        style:width="100%"
      >
        {#if !shouldDisplay}
          {@render skeleton({ segment: monthGroup })}
        {:else}
          {@render segment({
            segment: monthGroup,
            scrollToFunction: scrollTo,
            onScrollCompensationMonthInDOM: handleTriggeredScrollCompensation,
          })}
        {/if}
      </div>
    {/each}
    <!-- spacer for lead-out -->
    <div
      class="h-[60px]"
      style:position="absolute"
      style:left="0"
      style:right="0"
      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
    ></div>
  </section>
 </photostream>
 <style>
  photostream {
    display: block;
  }
  #asset-grid {
    contain: strict;
    scrollbar-width: none;
  }
  .month-group {
    contain: layout size paint;
    transform-style: flat;
    backface-visibility: hidden;
    transform-origin: center center;
  }
 </style>
--- a/web/src/lib/components/timeline/PhotostreamWithScrubber.svelte
+++ b/web/src/lib/components/timeline/PhotostreamWithScrubber.svelte
@@ -1,198 +0,0 @@
 <script lang="ts">
  import Photostream from '$lib/components/timeline/Photostream.svelte';
  import Scrubber from '$lib/components/timeline/Scrubber.svelte';
  import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
  import { findMonthAtScrollPosition } from '$lib/managers/timeline-manager/internal/search-support.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 { type ScrubberListenerWithScrollTo, type TimelineYearMonth } from '$lib/utils/timeline-util';
  import type { Snippet } from 'svelte';
  interface Props {
    /** `true` if this timeline responds to navigation events; if `true`, then look at the
     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
     additionally, update the page location/url with the asset as the asset-grid is scrolled */
    enableRouting: boolean;
    timelineManager: TimelineManager;
    showSkeleton?: boolean;
    isShowDeleteConfirmation?: boolean;
    segment: Snippet<
      [
        {
          segment: PhotostreamSegment;
          onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
        },
      ]
    >;
    skeleton: Snippet<
      [
        {
          segment: PhotostreamSegment;
        },
      ]
    >;
    children?: Snippet;
    empty?: Snippet;
  }
  let {
    enableRouting,
    timelineManager = $bindable(),
    showSkeleton = true,
    isShowDeleteConfirmation = $bindable(false),
    segment,
    skeleton,
    children,
    empty,
  }: Props = $props();
  const VIEWPORT_MULTIPLIER = 2; // Used to determine if timeline is "small"
  // The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
  // Note: There may be multiple months visible within the viewport at any given time.
  let viewportTopMonthScrollPercent = $state(0);
  // The timeline month intersecting the top position of the viewport
  let viewportTopMonth: TimelineYearMonth | undefined = $state(undefined);
  // Overall scroll percentage through the entire timeline (0-1)
  let timelineScrollPercent: number = $state(0);
  // Indicates whether the viewport is currently in the lead-out section (after all months)
  let isInLeadOutSection = $state(false);
  // Width of the scrubber component in pixels, used to adjust timeline margins
  let scrubberWidth: number = $state(0);
  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
  // this function updates the scrubber position based on the current scroll position in the timeline
  const handleTimelineScroll = () => {
    isInLeadOutSection = false;
    // Handle edge cases: small timeline (limited scroll) or lead-in area scrolling
    const top = timelineManager.visibleWindow.top;
    if (isSmallTimeline() || top < timelineManager.topSectionHeight) {
      calculateTimelineScrollPercent();
      return;
    }
    // Handle normal month scrolling
    handleMonthScroll();
  };
  const handleMonthScroll = () => {
    const scrollPosition = timelineManager.visibleWindow.top;
    const months = timelineManager.months;
    const maxScrollPercent = timelineManager.getMaxScrollPercent();
    // Find the month at the current scroll position
    const searchResult = findMonthAtScrollPosition(months, scrollPosition, maxScrollPercent);
    if (searchResult) {
      viewportTopMonth = searchResult.month;
      viewportTopMonthScrollPercent = searchResult.monthScrollPercent;
      isInLeadOutSection = false;
      return;
    }
    // We're in lead-out section
    isInLeadOutSection = true;
    timelineScrollPercent = 1;
    resetScrubberMonth();
  };
  const resetScrubberMonth = () => {
    viewportTopMonth = undefined;
    viewportTopMonthScrollPercent = 0;
  };
  const calculateTimelineScrollPercent = () => {
    const maxScroll = timelineManager.getMaxScroll();
    timelineScrollPercent = Math.min(1, timelineManager.visibleWindow.top / maxScroll);
    resetScrubberMonth();
  };
  const handleOverallPercentScroll = (percent: number, scrollTo?: (offset: number) => void) => {
    const maxScroll = timelineManager.getMaxScroll();
    const offset = maxScroll * percent;
    scrollTo?.(offset);
  };
  const findMonthGroup = (target: TimelineYearMonth) => {
    return timelineManager.months.find(
      ({ yearMonth }) => yearMonth.year === target.year && yearMonth.month === target.month,
    );
  };
  const isSmallTimeline = () => {
    return timelineManager.timelineHeight < timelineManager.viewportHeight * VIEWPORT_MULTIPLIER;
  };
  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
  // this function scrolls the timeline to the specified month group and offset, based on scrubber interaction
  const onScrub: ScrubberListenerWithScrollTo = (scrubberData) => {
    const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent, scrollToFunction } = scrubberData;
    // Handle edge case or no month selected
    if (!scrubberMonth || isSmallTimeline()) {
      handleOverallPercentScroll(overallScrollPercent, scrollToFunction);
      return;
    }
    // Find and scroll to the selected month
    const monthGroup = findMonthGroup(scrubberMonth);
    if (monthGroup) {
      scrollToPositionWithinMonth(monthGroup, scrubberMonthScrollPercent, scrollToFunction);
    }
  };
  const scrollToPositionWithinMonth = (
    monthGroup: MonthGroup,
    monthGroupScrollPercent: number,
    handleScrollTop?: (top: number) => void,
  ) => {
    const topOffset = monthGroup.top;
    const maxScrollPercent = timelineManager.getMaxScrollPercent();
    const delta = monthGroup.height * monthGroupScrollPercent;
    const scrollToTop = (topOffset + delta) * maxScrollPercent;
    handleScrollTop?.(scrollToTop);
  };
  let baseTimelineViewer: Photostream | undefined = $state();
  export const scrollToAsset = async (asset: TimelineAsset) =>
    (await baseTimelineViewer?.scrollToAssetId(asset.id)) ?? false;
  export const completeAfterNavigate = (args: { scrollToAssetQueryParam: boolean }) =>
    baseTimelineViewer?.completeAfterNavigate(args);
 </script>
 <Photostream
  bind:this={baseTimelineViewer}
  {enableRouting}
  {timelineManager}
  {showSkeleton}
  {isShowDeleteConfirmation}
  styleMarginRightOverride={scrubberWidth + 'px'}
  {handleTimelineScroll}
  {segment}
  {skeleton}
  {children}
  {empty}
 >
  {#snippet header(scrollToFunction)}
    {#if timelineManager.months.length > 0}
      <Scrubber
        {timelineManager}
        height={timelineManager.viewportHeight}
        timelineTopOffset={timelineManager.topSectionHeight}
        timelineBottomOffset={timelineManager.bottomSectionHeight}
        {isInLeadOutSection}
        {timelineScrollPercent}
        {viewportTopMonthScrollPercent}
        {viewportTopMonth}
        onScrub={(scrubberData) => onScrub({ ...scrubberData, scrollToFunction })}
        bind:scrubberWidth
      />
    {/if}
  {/snippet}
 </Photostream>
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
  import { afterNavigate, beforeNavigate } from '$app/navigation';
-  import { page } from '$app/state';
+  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 PhotostreamWithScrubber from '$lib/components/timeline/PhotostreamWithScrubber.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 { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
@@ -16,11 +18,18 @@
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { getSegmentIdentifier, getTimes } from '$lib/utils/timeline-util';
+  import { navigate } from '$lib/utils/navigation';
  import {
    getSegmentIdentifier,
    getTimes,
    type ScrubberListener,
    type TimelineYearMonth,
  } from '$lib/utils/timeline-util';
  import { type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
  import { DateTime } from 'luxon';
-  import { type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
  import type { UpdatePayload } from 'vite';
  interface Props {
    isSelectionMode?: boolean;
@@ -76,47 +85,298 @@
  let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
-  let viewer: PhotostreamWithScrubber | undefined = $state();
+  let element: HTMLElement | undefined = $state();
  let showSkeleton: boolean = $state(true);
-  // tri-state boolean
+  let timelineElement: HTMLElement | undefined = $state();
-  let initialLoadWasAssetViewer: boolean | null = null;
+  let showSkeleton = $state(true);
-  let hasNavigatedToOrFromAssetViewer: boolean = false;
+  // The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
-  let timelineScrollPositionInitialized = false;
+  // Note: There may be multiple months visible within the viewport at any given time.
  let viewportTopMonthScrollPercent = $state(0);
  // The timeline month intersecting the top position of the viewport
  let viewportTopMonth: { year: number; month: number } | undefined = $state(undefined);
  // Overall scroll percentage through the entire timeline (0-1)
  let timelineScrollPercent: number = $state(0);
  let scrubberWidth = $state(0);
-  beforeNavigate(({ from, to }) => {
+  // 60 is the bottom spacer element at 60px
-    timelineManager.suspendTransitions = true;
+  let bottomSectionHeight = 60;
-    hasNavigatedToOrFromAssetViewer = isAssetViewerRoute(to) || isAssetViewerRoute(from);
+  // Indicates whether the viewport is currently in the lead-out section (after all months)
  let isInLeadOutSection = $state(false);
  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
  const maxMd = $derived(mobileDevice.maxMd);
  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
  $effect(() => {
    const layoutOptions = maxMd
      ? {
          rowHeight: 100,
          headerHeight: 32,
        }
      : {
          rowHeight: 235,
          headerHeight: 48,
        };
    timelineManager.setLayoutOptions(layoutOptions);
  });
-  const completeAfterNavigate = () => {
+  const scrollTo = (top: number) => {
-    const assetViewerPage = !!(page.route.id?.endsWith('/[[assetId=id]]') && page.params.assetId);
+    if (element) {
-    let isInitial = false;
+      element.scrollTo({ top });
    // Set initial load state only once
    if (initialLoadWasAssetViewer === null) {
      initialLoadWasAssetViewer = assetViewerPage && !hasNavigatedToOrFromAssetViewer;
      isInitial = true;
    }
    let scrollToAssetQueryParam = false;
    if (
      !timelineScrollPositionInitialized &&
      ((isInitial && !assetViewerPage) || // Direct timeline load
        (!isInitial && hasNavigatedToOrFromAssetViewer)) // Navigated from asset viewer
    ) {
      scrollToAssetQueryParam = true;
      timelineScrollPositionInitialized = true;
    }
    return viewer?.completeAfterNavigate({ scrollToAssetQueryParam });
  };
-  afterNavigate(({ complete }) => void complete.then(completeAfterNavigate, completeAfterNavigate));
+  const scrollTop = (top: number) => {
    if (element) {
      element.scrollTop = top;
    }
  };
  const scrollBy = (y: number) => {
    if (element) {
      element.scrollBy(0, y);
    }
  };
  const scrollToTop = () => {
    scrollTo(0);
  };
-  const onViewerClose = async (asset: { id: string }) => {
+  const handleTriggeredScrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
-    assetViewingStore.showAssetViewer(false);
+    const { heightDelta, scrollTop } = compensation;
-    showSkeleton = true;
+    if (heightDelta !== undefined) {
-    $gridScrollTarget = { at: asset.id };
+      scrollBy(heightDelta);
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
+    } 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) {
      handleTriggeredScrollCompensation(timelineManager.scrollCompensation);
    }
    return height;
  };
  const assetIsVisible = (assetTop: number): boolean => {
    if (!element) {
      return false;
    }
    const { clientHeight, scrollTop } = element;
    return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
  };
  const scrollToAssetId = async (assetId: string) => {
    const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
    if (!monthGroup) {
      return false;
    }
    const height = getAssetHeight(assetId, monthGroup);
    // If the asset is already visible, then don't scroll.
    if (assetIsVisible(height)) {
      return true;
    }
    scrollTo(height);
    updateSlidingWindow();
    return true;
  };
  const scrollToAsset = (asset: TimelineAsset) => {
    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
    if (!monthGroup) {
      return false;
    }
    const height = getAssetHeight(asset.id, monthGroup);
    scrollTo(height);
    updateSlidingWindow();
    return true;
  };
  const completeNav = async () => {
    const scrollTarget = $gridScrollTarget?.at;
    let scrolled = false;
    if (scrollTarget) {
      scrolled = await scrollToAssetId(scrollTarget);
    }
    if (!scrolled) {
      // if the asset is not found, scroll to the top
      scrollToTop();
    }
    showSkeleton = false;
  };
  beforeNavigate(() => (timelineManager.suspendTransitions = true));
  afterNavigate((nav) => {
    const { complete } = nav;
    complete.then(completeNav, completeNav);
  });
  const handleAfterUpdate = (payload: UpdatePayload) => {
    const timelineUpdate = payload.updates.some(
      (update) => update.path.endsWith('Timeline.svelte') || update.path.endsWith('assets-store.ts'),
    );
    if (timelineUpdate) {
      setTimeout(() => {
        const asset = $page.url.searchParams.get('at');
        if (asset) {
          $gridScrollTarget = { at: asset };
          void navigate(
            { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
            { replaceState: true, forceNavigate: true },
          );
        } else {
          scrollToTop();
        }
        showSkeleton = false;
      }, 500);
    }
  };
  const handleBeforeUpdate = (payload: UpdatePayload) => {
    const timelineUpdate = payload.updates.some((update) => update.path.endsWith('Timeline.svelte'));
    if (timelineUpdate) {
      timelineManager.destroy();
    }
  };
  const updateIsScrolling = () => (timelineManager.scrolling = true);
  // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
  const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
  const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
  onMount(() => {
    if (!enableRouting) {
      showSkeleton = false;
    }
  });
  const getMaxScrollPercent = () => {
    const totalHeight = timelineManager.timelineHeight + bottomSectionHeight + timelineManager.topSectionHeight;
    return (totalHeight - timelineManager.viewportHeight) / totalHeight;
  };
  const getMaxScroll = () => {
    if (!element || !timelineElement) {
      return 0;
    }
    return (
      timelineManager.topSectionHeight + bottomSectionHeight + (timelineElement.clientHeight - element.clientHeight)
    );
  };
  const scrollToMonthGroupAndOffset = (monthGroup: MonthGroup, monthGroupScrollPercent: number) => {
    const topOffset = monthGroup.top;
    const maxScrollPercent = getMaxScrollPercent();
    const delta = monthGroup.height * monthGroupScrollPercent;
    const scrollToTop = (topOffset + delta) * maxScrollPercent;
    scrollTop(scrollToTop);
  };
  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
  // this function scrolls the timeline to the specified month group and offset, based on scrubber interaction
  const onScrub: ScrubberListener = (scrubberData) => {
    const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent } = scrubberData;
    if (!scrubberMonth || timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
      // edge case - scroll limited due to size of content, must adjust - use use the overall percent instead
      const maxScroll = getMaxScroll();
      const offset = maxScroll * overallScrollPercent;
      scrollTop(offset);
    } else {
      const monthGroup = timelineManager.months.find(
        ({ yearMonth: { year, month } }) => year === scrubberMonth.year && month === scrubberMonth.month,
      );
      if (!monthGroup) {
        return;
      }
      scrollToMonthGroupAndOffset(monthGroup, scrubberMonthScrollPercent);
    }
  };
  // note: don't throttle, debounch, or otherwise make this function async - it causes flicker
  const handleTimelineScroll = () => {
    isInLeadOutSection = false;
    if (!element) {
      return;
    }
    if (timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
      // edge case - scroll limited due to size of content, must adjust -  use the overall percent instead
      const maxScroll = getMaxScroll();
      timelineScrollPercent = Math.min(1, element.scrollTop / maxScroll);
      viewportTopMonth = undefined;
      viewportTopMonthScrollPercent = 0;
    } else {
      let top = element.scrollTop;
      if (top < timelineManager.topSectionHeight) {
        // in the lead-in area
        viewportTopMonth = undefined;
        viewportTopMonthScrollPercent = 0;
        const maxScroll = getMaxScroll();
        timelineScrollPercent = Math.min(1, element.scrollTop / maxScroll);
        return;
      }
      let maxScrollPercent = getMaxScrollPercent();
      let found = false;
      const monthsLength = timelineManager.months.length;
      for (let i = -1; i < monthsLength + 1; i++) {
        let monthGroup: TimelineYearMonth | undefined;
        let monthGroupHeight = 0;
        if (i === -1) {
          // lead-in
          monthGroupHeight = timelineManager.topSectionHeight;
        } else if (i === monthsLength) {
          // lead-out
          monthGroupHeight = bottomSectionHeight;
        } else {
          monthGroup = timelineManager.months[i].yearMonth;
          monthGroupHeight = timelineManager.months[i].height;
        }
        let next = top - monthGroupHeight * maxScrollPercent;
        // instead of checking for < 0, add a little wiggle room for subpixel resolution
        if (next < -1 && monthGroup) {
          viewportTopMonth = monthGroup;
          // allowing next to be at least 1 may cause percent to go negative, so ensure positive percentage
          viewportTopMonthScrollPercent = Math.max(0, top / (monthGroupHeight * maxScrollPercent));
          // compensate for lost precision/rounding errors advance to the next bucket, if present
          if (viewportTopMonthScrollPercent > 0.9999 && i + 1 < monthsLength - 1) {
            viewportTopMonth = timelineManager.months[i + 1].yearMonth;
            viewportTopMonthScrollPercent = 0;
          }
          found = true;
          break;
        }
        top = next;
      }
      if (!found) {
        isInLeadOutSection = true;
        viewportTopMonth = undefined;
        viewportTopMonthScrollPercent = 0;
        timelineScrollPercent = 1;
      }
    }
  };
  $effect(() => {
@@ -127,87 +387,168 @@
  });
 </script>
 <HotModuleReload onAfterUpdate={handleAfterUpdate} onBeforeUpdate={handleBeforeUpdate} />
 <TimelineKeyboardActions
-  scrollToAsset={async (asset) => (await viewer?.scrollToAsset(asset)) ?? Promise.resolve(false)}
+  scrollToAsset={(asset) => scrollToAsset(asset) ?? false}
  {timelineManager}
  {assetInteraction}
  bind:isShowDeleteConfirmation
  {onEscape}
 />
-<PhotostreamWithScrubber
+{#if timelineManager.months.length > 0}
-  bind:this={viewer}
+  <Scrubber
-  {enableRouting}
+    {timelineManager}
-  {timelineManager}
+    height={timelineManager.viewportHeight}
-  {isShowDeleteConfirmation}
+    timelineTopOffset={timelineManager.topSectionHeight}
-  {showSkeleton}
+    timelineBottomOffset={bottomSectionHeight}
-  {children}
+    {isInLeadOutSection}
-  {empty}
+    {timelineScrollPercent}
    {viewportTopMonthScrollPercent}
    {viewportTopMonth}
    {onScrub}
    bind:scrubberWidth
  />
 {/if}
 <!-- Right margin MUST be equal to the width of scrubber -->
 <section
  id="asset-grid"
  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
  style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
  tabindex="-1"
  bind:clientHeight={timelineManager.viewportHeight}
  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
  bind:this={element}
  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
 >
-  {#snippet skeleton({ segment })}
+  <section
-    <Skeleton
+    bind:this={timelineElement}
-      height={segment.height - segment.timelineManager.headerHeight}
+    id="virtual-timeline"
-      title={(segment as MonthGroup).monthGroupTitle}
+    class:invisible={showSkeleton}
-    />
+    style:height={timelineManager.timelineHeight + 'px'}
-  {/snippet}
+  >
-  {#snippet segment({ segment, onScrollCompensationMonthInDOM })}
+    <section
-    <SelectableSegment
+      use:resizeObserver={topSectionResizeObserver}
-      {segment}
+      class:invisible={showSkeleton}
-      {onScrollCompensationMonthInDOM}
+      style:position="absolute"
-      {timelineManager}
+      style:left="0"
-      {assetInteraction}
+      style:right="0"
      {isSelectionMode}
      {singleSelect}
      {onAssetOpen}
      {onAssetSelect}
    >
-      {#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
+      {@render children?.()}
-        <SelectableDay {assetInteraction} {onAssetSelect}>
+      {#if isEmpty}
-          {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
+        <!-- (optional) empty placeholder -->
-            <MonthSegment
+        {@render empty?.()}
-              {assetInteraction}
+      {/if}
-              {customThumbnailLayout}
+    </section>
-              {singleSelect}
+
-              monthGroup={segment as MonthGroup}
+    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
-              {timelineManager}
+      {@const display = monthGroup.intersecting}
-              {onDayGroupSelect}
+      {@const absoluteHeight = monthGroup.top}
-            >
+
-              {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
+      {#if !monthGroup.isLoaded}
-                {@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
+        <div
-                {@const isAssetSelected =
+          style:height={monthGroup.height + 'px'}
-                  assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
+          style:position="absolute"
-                {@const isAssetDisabled = timelineManager.albumAssets.has(asset.id)}
+          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-                <Thumbnail
+          style:width="100%"
-                  showStackedIcon={withStacked}
+        >
-                  {showArchiveIcon}
+          <Skeleton
-                  {asset}
+            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
-                  {groupIndex}
+            title={monthGroup.monthGroupTitle}
-                  onClick={() => onAssetOpen(asset)}
+          />
-                  onSelect={() => onDayGroupAssetSelect(dayGroup, asset)}
+        </div>
-                  onMouseEvent={(isMouseOver) => {
+      {:else if display}
-                    if (isMouseOver) {
+        <div
-                      onAssetHover(asset);
+          class="month-group"
-                    } else {
+          style:height={monthGroup.height + 'px'}
-                      onAssetHover(null);
+          style:position="absolute"
-                    }
+          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-                  }}
+          style:width="100%"
-                  selected={isAssetSelected}
+        >
-                  selectionCandidate={isAssetSelectionCandidate}
+          <SelectableSegment
-                  disabled={isAssetDisabled}
+            segment={monthGroup}
-                  thumbnailWidth={position.width}
+            onScrollCompensationMonthInDOM={handleTriggeredScrollCompensation}
-                  thumbnailHeight={position.height}
+            {timelineManager}
-                />
+            {assetInteraction}
-              {/snippet}
+            {isSelectionMode}
-            </MonthSegment>
+            {singleSelect}
-          {/snippet}
+            {onAssetOpen}
-        </SelectableDay>
+            {onAssetSelect}
-      {/snippet}
+          >
-    </SelectableSegment>
+            {#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
-  {/snippet}
+              <SelectableDay {assetInteraction} {onAssetSelect}>
-</PhotostreamWithScrubber>
+                {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
                  <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}
    <!-- spacer for leadout -->
    <div
      class="h-[60px]"
      style:position="absolute"
      style:left="0"
      style:right="0"
      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
    ></div>
  </section>
 </section>
 <Portal target="body">
  {#if $showAssetViewer}
-    <TimelineAssetViewer {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} {onViewerClose} />
+    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
  {/if}
 </Portal>
 <style>
  #asset-grid {
    contain: strict;
    scrollbar-width: none;
  }
  .month-group {
    contain: layout size paint;
    transform-style: flat;
    backface-visibility: hidden;
    transform-origin: center center;
  }
 </style>
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -9,16 +9,15 @@
  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
-  let { asset: viewingAsset, mutex, preloadAssets } = assetViewingStore;
+  let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
  interface Props {
    timelineManager: TimelineManager;
-
+    showSkeleton: boolean;
    withStacked?: boolean;
    isShared?: boolean;
    album?: AlbumResponseDto | null;
    person?: PersonResponseDto | null;
    onViewerClose?: (asset: { id: string }) => Promise<void>;
    removeAction?:
      | AssetAction.UNARCHIVE
@@ -31,12 +30,12 @@
  let {
    timelineManager,
    showSkeleton = $bindable(false),
    removeAction,
    withStacked = false,
    isShared = false,
    album = null,
    person = null,
    onViewerClose = () => Promise.resolve(void 0),
  }: Props = $props();
  const handlePrevious = async () => {
@@ -80,6 +79,13 @@
    }
  };
  const handleClose = async (asset: { id: string }) => {
    assetViewingStore.showAssetViewer(false);
    showSkeleton = true;
    $gridScrollTarget = { at: asset.id };
    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
  };
  const handlePreAction = async (action: Action) => {
    switch (action.type) {
      case removeAction:
@@ -91,7 +97,7 @@
      case AssetAction.SET_VISIBILITY_TIMELINE: {
        // find the next asset to show or close the viewer
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await onViewerClose?.(action.asset));
+        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
        // delete after find the next one
        timelineManager.removeAssets([action.asset.id]);
@@ -105,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;
      }
@@ -119,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(
@@ -166,6 +172,6 @@
    onPrevious={handlePrevious}
    onNext={handleNext}
    onRandom={handleRandom}
-    onClose={onViewerClose}
+    onClose={handleClose}
  />
 {/await}
--- a/web/src/lib/components/timeline/actions/ArchiveAction.svelte
+++ b/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;
--- a/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
+++ b/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;
--- a/web/src/lib/components/timeline/actions/FavoriteAction.svelte
+++ b/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({
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -7,10 +7,8 @@
    type RelativeResult,
  } from '$lib/components/shared-components/change-date.svelte';
  import {
-    setFocusToAsset as setFocusAssetUtil,
+    setFocusToAsset as setFocusAssetInit,
-    setFocusTo as setFocusToUtil,
+    setFocusTo as setFocusToInit,
    type FocusDirection,
    type FocusInterval,
  } from '$lib/components/timeline/actions/focus-actions';
  import { AppRoute } from '$lib/constants';
  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -34,7 +32,7 @@
    assetInteraction: AssetInteraction;
    isShowDeleteConfirmation: boolean;
    onEscape?: () => void;
-    scrollToAsset: (asset: TimelineAsset) => Promise<boolean>;
+    scrollToAsset: (asset: TimelineAsset) => boolean;
  }
  let {
@@ -53,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();
  };
@@ -149,10 +147,8 @@
    }
  });
-  const setFocusTo = (direction: FocusDirection, interval: FocusInterval) =>
+  const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
-    setFocusToUtil(scrollToAsset, timelineManager, direction, interval);
+  const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
  const setFocusAsset = (asset: TimelineAsset) => setFocusAssetUtil(scrollToAsset, asset);
  let shortcutList = $derived(
    (() => {
@@ -216,7 +212,7 @@
          (DateTime.fromISO(dateString.date) as DateTime<true>).toObject(),
        );
        if (asset) {
-          void setFocusAsset(asset);
+          setFocusAsset(asset);
        }
      }
    }}
--- a/web/src/lib/components/timeline/actions/focus-actions.ts
+++ b/web/src/lib/components/timeline/actions/focus-actions.ts
@@ -21,26 +21,19 @@ export const focusPreviousAsset = () =>
 const queryHTMLElement = (query: string) => document.querySelector(query) as HTMLElement;
-export const setFocusToAsset = async (
+export const setFocusToAsset = (scrollToAsset: (asset: TimelineAsset) => boolean, asset: TimelineAsset) => {
-  scrollToAsset: (asset: TimelineAsset) => Promise<boolean>,
+  const scrolled = scrollToAsset(asset);
  asset: TimelineAsset,
 ) => {
  const scrolled = await scrollToAsset(asset);
  if (scrolled) {
    const element = queryHTMLElement(`[data-thumbnail-focus-container][data-asset="${asset.id}"]`);
    element?.focus();
  }
 };
 export type FocusDirection = 'earlier' | 'later';
 export type FocusInterval = 'day' | 'month' | 'year' | 'asset';
 export const setFocusTo = async (
-  scrollToAsset: (asset: TimelineAsset) => Promise<boolean>,
+  scrollToAsset: (asset: TimelineAsset) => boolean,
  store: TimelineManager,
-  direction: FocusDirection,
+  direction: 'earlier' | 'later',
-  interval: FocusInterval,
+  interval: 'day' | 'month' | 'year' | 'asset',
 ) => {
  if (tracker.isActive()) {
    // there are unfinished running invocations, so return early
@@ -72,10 +65,7 @@ export const setFocusTo = async (
    return;
  }
-  const scrolled = await scrollToAsset(asset);
+  const scrolled = scrollToAsset(asset);
  if (!invocation.isStillValid()) {
    return;
  }
  if (scrolled) {
    await tick();
    if (!invocation.isStillValid()) {
--- a/web/src/lib/elements/Skeleton.svelte
+++ b/web/src/lib/elements/Skeleton.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
  interface Props {
    height: number;
-    title?: string;
+    title: string;
  }
  let { height = 0, title }: Props = $props();
 </script>
 <div class="overflow-clip" style:height={height + 'px'}>
-  {#if title}
+  <div
-    <div
+    class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
-      class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
+  >
-    >
+    {title}
-      {title}
+  </div>
    </div>
  {/if}
  <div
    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
    style:width="calc(100% - 20px)"
--- a/web/src/lib/managers/photostream-manager/PhotostreamManager.svelte.ts
+++ b/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);
@@ -269,14 +274,13 @@ export abstract class PhotostreamManager {
    return this.months.find((segment) => identifier.matches(segment));
  }
-  findSegmentForAssetId(assetId: string): Promise<PhotostreamSegment | undefined> {
+  getSegmentForAssetId(assetId: string) {
    for (const month of this.months) {
      const asset = month.assets.find((asset) => asset.id === assetId);
      if (asset) {
-        return Promise.resolve(month);
+        return month;
      }
    }
    return Promise.resolve(void 0);
  }
  refreshLayout() {
@@ -322,4 +326,106 @@ export abstract class PhotostreamManager {
  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 };
  }
 }
--- a/web/src/lib/managers/photostream-manager/PhotostreamSegment.svelte.ts
+++ b/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 };
  }
 }
--- a/web/src/lib/managers/timeline-manager/day-group.svelte.ts
+++ b/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;
--- a/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
+++ b/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 };
 }
--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
@@ -143,79 +143,3 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
    }
  }
 }
 export interface MonthGroupForSearch {
  yearMonth: TimelineYearMonth;
  top: number;
  height: number;
 }
 export interface BinarySearchResult {
  month: TimelineYearMonth;
  monthScrollPercent: number;
 }
 export function findMonthAtScrollPosition(
  months: MonthGroupForSearch[],
  scrollPosition: number,
  maxScrollPercent: number,
 ): BinarySearchResult | null {
  const SUBPIXEL_TOLERANCE = -1; // Tolerance for scroll position checks
  const NEAR_END_THRESHOLD = 0.9999; // Threshold for detecting near-end of month
  if (months.length === 0) {
    return null;
  }
  // Check if we're before the first month
  const firstMonthTop = months[0].top * maxScrollPercent;
  if (scrollPosition < firstMonthTop - SUBPIXEL_TOLERANCE) {
    return null;
  }
  // Check if we're after the last month
  const lastMonth = months.at(-1)!;
  const lastMonthBottom = (lastMonth.top + lastMonth.height) * maxScrollPercent;
  if (scrollPosition >= lastMonthBottom - SUBPIXEL_TOLERANCE) {
    return null;
  }
  // Binary search to find the month containing the scroll position
  let left = 0;
  let right = months.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    const month = months[mid];
    const monthTop = month.top * maxScrollPercent;
    const monthBottom = monthTop + month.height * maxScrollPercent;
    if (scrollPosition >= monthTop - SUBPIXEL_TOLERANCE && scrollPosition < monthBottom - SUBPIXEL_TOLERANCE) {
      // Found the month containing the scroll position
      const distanceIntoMonth = scrollPosition - monthTop;
      const monthScrollPercent = Math.max(0, distanceIntoMonth / (month.height * maxScrollPercent));
      // Handle month boundary edge case
      if (monthScrollPercent > NEAR_END_THRESHOLD && mid < months.length - 1) {
        return {
          month: months[mid + 1].yearMonth,
          monthScrollPercent: 0,
        };
      }
      return {
        month: month.yearMonth,
        monthScrollPercent,
      };
    }
    if (scrollPosition < monthTop) {
      right = mid - 1;
    } else {
      left = mid + 1;
    }
  }
  // Shouldn't reach here, but return null if we do
  return null;
 }
--- a/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts
+++ b/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);
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -1,8 +1,5 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import {
+import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
  findMonthGroupForAsset,
  getMonthGroupByDate,
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { AbortError } from '$lib/utils';
 import { fromISODateTimeUTCToObject, getSegmentIdentifier } from '$lib/utils/timeline-util';
 import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
@@ -176,7 +173,7 @@ describe('TimelineManager', () => {
    });
  });
-  describe('addAssets', () => {
+  describe('upsertAssets', () => {
    let timelineManager: TimelineManager;
    beforeEach(async () => {
@@ -197,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);
@@ -213,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);
@@ -239,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();
@@ -265,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);
@@ -279,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);
    });
@@ -295,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]);
    });
  });
@@ -310,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);
    });
@@ -341,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);
@@ -366,7 +356,7 @@ describe('TimelineManager', () => {
    });
    it('ignores invalid IDs', () => {
-      timelineManager.addAssets(
+      timelineManager.upsertAssets(
        timelineAssetFactory
          .buildList(2, {
            fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
@@ -386,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);
@@ -400,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);
@@ -432,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);
    });
  });
@@ -557,12 +547,12 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
-      expect(findMonthGroupForAsset(timelineManager, assetTwo.id)?.monthGroup.yearMonth.year).toEqual(2024);
+      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.year).toEqual(2024);
-      expect(findMonthGroupForAsset(timelineManager, assetTwo.id)?.monthGroup.yearMonth.month).toEqual(2);
+      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.month).toEqual(2);
-      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.year).toEqual(2024);
+      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
-      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.month).toEqual(1);
+      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
    });
    it('ignores removed months', () => {
@@ -576,11 +566,11 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
      timelineManager.removeAssets([assetTwo.id]);
-      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.year).toEqual(2024);
+      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
-      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.month).toEqual(1);
+      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
    });
  });
 });
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/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,13 +171,7 @@ export class TimelineManager extends PhotostreamManager {
    this.scrubberTimelineHeight = this.timelineHeight;
  }
-  addAssets(assets: TimelineAsset[]) {
+  async findMonthGroupForAsset(id: string) {
    const assetsToUpdate = assets.filter((asset) => !this.isExcluded(asset));
    const notUpdated = this.updateAssets(assetsToUpdate);
    addAssetsToMonthGroups(this, [...notUpdated], { order: this.#options.order ?? AssetOrder.Desc });
  }
  async findSegmentForAssetId(id: string) {
    if (!this.isInitialized) {
      await this.initTask.waitUntilCompletion();
    }
@@ -218,6 +202,11 @@ export class TimelineManager extends PhotostreamManager {
    return getMonthGroupByDate(this, yearMonth);
  }
  getMonthGroupByAssetId(assetId: string) {
    const monthGroupInfo = findMonthGroupForAssetUtil(this, assetId);
    return monthGroupInfo?.monthGroup;
  }
  async getRandomMonthGroup() {
    const random = Math.floor(Math.random() * this.months.length);
    const month = this.months[random];
@@ -230,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 });
@@ -319,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 });
    }
  }
 }
--- a/web/src/lib/managers/timeline-manager/types.ts
+++ b/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 };
--- a/web/src/lib/utils/actions.ts
+++ b/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);
 }
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -24,19 +24,11 @@ export type TimelineDateTime = TimelineDate & {
  millisecond: number;
 };
-export type ScrubberData = {
+export type ScrubberListener = (scrubberData: {
  scrubberMonth: { year: number; month: number };
  overallScrollPercent: number;
  scrubberMonthScrollPercent: number;
-};
+}) => void | Promise<void>;
 export type ScrubberListener = (scrubberData: ScrubberData) => void | Promise<void>;
 export type ScrubberDataWithScrollTo = ScrubberData & {
  scrollToFunction: (top: number) => void;
 };
 export type ScrubberListenerWithScrollTo = (scrubberData: ScrubberDataWithScrollTo) => void | Promise<void>;
 // used for AssetResponseDto.dateTimeOriginal, amongst others
 export const fromISODateTime = (isoDateTime: string, timeZone: string): DateTime<true> =>
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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();
  };
@@ -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>
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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);
@@ -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>
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/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 />
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -62,7 +62,7 @@
      }),
    );
-    timelineManager.updateAssets(updatedAssets);
+    timelineManager.upsertAssets(updatedAssets);
    handleDeselectAll();
  };
Author	SHA1	Message	Date
midzelis	ed63399181	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	2025-09-30 00:08:14 +00:00
midzelis	0168353c2d	refactor(web): extract asset grid layout logic into AssetLayout component - Extracts the asset grid rendering logic from `MonthSegment` into a dedicated `AssetLayout` component - Simplifies `MonthSegment` by delegating layout responsibilities while maintaining all existing functionality - Renames `customLayout` prop to `customThumbnailLayout` for clarity across Timeline components ## Changes - Created new `AssetLayout.svelte` component that handles: - Asset grid rendering with proper positioning - Animation transitions - Filtering of intersecting viewer assets - Updated `MonthSegment.svelte` to use `AssetLayout` via composition pattern - Renamed `customLayout` to `customThumbnailLayout` in Timeline and related components - Moved thumbnail click and selection logic to Timeline parent component using snippets	2025-09-30 00:08:14 +00:00
midzelis	c44b315117	refactor(web): consolidate asset operations in PhotostreamManager base class Moves common asset operation methods (upsertAssets, removeAssets, updateAssetOperation) from TimelineManager into PhotostreamManager base class, making them available to all photostream implementations. Updates all consuming components to use the more accurate 'upsertAssets' naming instead of separate 'addAssets' and 'updateAssets' methods. - Move asset operation methods to PhotostreamManager base class - Replace addAssets/updateAssets calls with unified upsertAssets method - Update type imports to use PhotostreamManager instead of TimelineManager - Remove operations-support.svelte.ts (functionality moved to base class) - Add abstract upsertAssetIntoSegment method for subclass customization	2025-09-30 00:00:50 +00:00
midzelis	98ab224791	refactor: adjust favorite, delete, and archive actions for timeline - Pass TimelineManager instance to timeline action components instead of callbacks - Move asset update logic (delete, archive, favorite) into action components	2025-09-29 01:26:59 +00:00