fix: padding for searchresults/photostream

fix: missing responsive calculation in UserPageLayout

server/src/services/notification.service.ts

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

web/src/lib/actions/shortcut.ts

@@ -1,5 +1,11 @@
 import type { ActionReturn } from 'svelte/action';
 
+interface ExplainedShortcut {
+  key: string[];
+  action: string;
+  info?: string;
+}
+
 export type Shortcut = {
   key: string;
   alt?: boolean;
@@ -14,6 +20,7 @@ export type ShortcutOptions<T = HTMLElement> = {
   ignoreInputFields?: boolean;
   onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
   preventDefault?: boolean;
+  explainedShortcut?: ExplainedShortcut;
 };
 
 export const shortcutLabel = (shortcut: Shortcut) => {

web/src/lib/components/layouts/user-page-layout.svelte

@@ -49,7 +49,7 @@
 <div
   tabindex="-1"
   class="relative z-0 grid grid-cols-[--spacing(0)_auto] overflow-hidden sidebar:grid-cols-[--spacing(64)_auto]
-    {hideNavbar ? 'h-dvh' : 'h-[calc(100dvh-var(--navbar-height))]'}
+    {hideNavbar ? 'h-dvh' : 'h-[calc(100dvh-var(--navbar-height))] max-md:h-[calc(100dvh-var(--navbar-height-md))]'}
     {hideNavbar ? 'pt-(--navbar-height)' : ''}
     {hideNavbar ? 'max-md:pt-(--navbar-height-md)' : ''}"
 >

web/src/lib/components/search/SearchKeyboardShortcuts.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
+  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
+  import { AppRoute } from '$lib/constants';
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
+  import { deleteAssets } from '$lib/utils/actions';
+  import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';
+  import { moveFocus } from '$lib/utils/focus-util';
+  import { AssetVisibility } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+  let { isViewing: isViewerOpen } = assetViewingStore;
+
+  let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
+
+  interface Props {
+    timelineManager: PhotostreamManager;
+    assetInteraction: AssetInteraction;
+
+    isShowDeleteConfirmation?: boolean;
+
+    onReload?: (() => void) | undefined;
+  }
+
+  let {
+    timelineManager,
+    assetInteraction,
+    isShowDeleteConfirmation = false,
+
+    onReload,
+  }: Props = $props();
+
+  const selectAllAssets = () => {
+    const allAssets = timelineManager.months.flatMap((segment) => segment.assets);
+    assetInteraction.selectAssets(allAssets);
+  };
+
+  const deselectAllAssets = () => {
+    cancelMultiselect(assetInteraction);
+  };
+
+  const onDelete = () => {
+    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
+
+    if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
+      isShowDeleteConfirmation = true;
+      return;
+    }
+    handlePromiseError(trashOrDelete(hasTrashedAsset));
+  };
+
+  const onForceDelete = () => {
+    if ($showDeleteModal) {
+      isShowDeleteConfirmation = true;
+      return;
+    }
+    handlePromiseError(trashOrDelete(true));
+  };
+
+  const trashOrDelete = async (force: boolean = false) => {
+    isShowDeleteConfirmation = false;
+    await deleteAssets(
+      !(isTrashEnabled && !force),
+      (assetIds) => timelineManager.removeAssets(assetIds),
+      assetInteraction.selectedAssets,
+      onReload,
+    );
+    assetInteraction.clearMultiselect();
+  };
+
+  const toggleArchive = async () => {
+    const assets = assetInteraction.selectedAssets;
+    const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
+    const ids = await archiveAssets(assets, visibility);
+    const idSet = new Set(ids);
+    if (ids) {
+      for (const asset of assets) {
+        if (idSet.has(asset.id)) {
+          asset.visibility = visibility;
+        }
+      }
+      deselectAllAssets();
+    }
+  };
+
+  const focusNextAsset = () => moveFocus((element) => element.dataset.thumbnailFocusContainer !== undefined, 'next');
+  const focusPreviousAsset = () =>
+    moveFocus((element) => element.dataset.thumbnailFocusContainer !== undefined, 'previous');
+
+  let isShortcutModalOpen = false;
+
+  const handleOpenShortcutModal = async () => {
+    if (isShortcutModalOpen) {
+      return;
+    }
+
+    isShortcutModalOpen = true;
+    await modalManager.show(ShortcutsModal, { shortcuts: getShortcuts() });
+    isShortcutModalOpen = false;
+  };
+
+  const getShortcuts = () => {
+    const general = Object.values(generalShortcuts);
+    const actions = Object.values(actionsShortcuts);
+    return {
+      general: general
+        .filter((general) => 'explainedShortcut' in general)
+        .map((generalShortcut) => generalShortcut.explainedShortcut!),
+      actions: actions.filter((action) => 'explainedShortcut' in action).map((action) => action.explainedShortcut!),
+    };
+  };
+
+  const generalShortcuts = {
+    OPEN_HELP: {
+      shortcut: { key: '?', shift: true },
+      onShortcut: handleOpenShortcutModal,
+      explainedShortcut: {
+        key: ['⇧', '?'],
+        action: 'Open this dialog',
+      },
+    },
+    EXPLORE: {
+      shortcut: { key: '/' },
+      onShortcut: () => goto(AppRoute.EXPLORE),
+      explainedShortcut: {
+        key: ['/'],
+        action: $t('explore'),
+      },
+    },
+    SELECT_ALL: {
+      shortcut: { key: 'A', ctrl: true },
+      onShortcut: () => selectAllAssets(),
+      explainedShortcut: {
+        key: ['Ctrl', 'a'],
+        action: $t('select_all'),
+      },
+    },
+    ARROW_RIGHT: {
+      shortcut: { key: 'ArrowRight' },
+      preventDefault: false,
+      onShortcut: focusNextAsset,
+      explainedShortcut: {
+        key: ['←', '→'],
+        action: $t('previous_or_next_photo'),
+      },
+    },
+    ARROW_LEFT: {
+      shortcut: { key: 'ArrowLeft' },
+      preventDefault: false,
+      onShortcut: focusPreviousAsset,
+    },
+  };
+  const actionsShortcuts = {
+    ESCAPE: {
+      shortcut: { key: 'Escape' },
+      onShortcut: deselectAllAssets,
+      explainedShortcut: {
+        key: ['Esc'],
+        action: $t('back_close_deselect'),
+      },
+    },
+    DELETE: {
+      shortcut: { key: 'Delete' },
+      onShortcut: onDelete,
+      explainedShortcut: {
+        key: ['Del'],
+        action: $t('trash_delete_asset'),
+        info: $t('shift_to_permanent_delete'),
+      },
+    },
+    FORCE_DELETE: {
+      shortcut: { key: 'Delete', shift: true },
+      onShortcut: onForceDelete,
+    },
+    DESELECT_ALL: {
+      shortcut: { key: 'D', ctrl: true },
+      onShortcut: () => deselectAllAssets(),
+      explainedShortcut: {
+        key: ['Ctrl', 'd'],
+        action: $t('deselect_all'),
+      },
+    },
+    TOGGLE_ARCHIVE: {
+      shortcut: { key: 'a', shift: true },
+      onShortcut: toggleArchive,
+      explainedShortcut: {
+        key: ['⇧', 'a'],
+        action: $t('select_all'),
+      },
+    },
+  };
+
+  const shortcutList = $derived(
+    (() => {
+      if ($isViewerOpen) {
+        return [];
+      }
+
+      const shortcuts: ShortcutOptions[] = [
+        generalShortcuts.OPEN_HELP,
+        generalShortcuts.EXPLORE,
+        generalShortcuts.SELECT_ALL,
+        generalShortcuts.ARROW_RIGHT,
+        generalShortcuts.ARROW_LEFT,
+      ];
+
+      if (assetInteraction.selectionActive) {
+        shortcuts.push(
+          actionsShortcuts.ESCAPE,
+          actionsShortcuts.DELETE,
+          actionsShortcuts.FORCE_DELETE,
+          actionsShortcuts.DESELECT_ALL,
+          actionsShortcuts.TOGGLE_ARCHIVE,
+        );
+      }
+
+      return shortcuts;
+    })(),
+  );
+</script>
+
+<svelte:document use:shortcuts={shortcutList} />
+
+{#if isShowDeleteConfirmation}
+  <DeleteAssetDialog
+    size={assetInteraction.selectedAssets.length}
+    onCancel={() => (isShowDeleteConfirmation = false)}
+    onConfirm={() => handlePromiseError(trashOrDelete(true))}
+  />
+{/if}

web/src/lib/components/search/SearchResults.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import SearchKeyboardShortcuts from '$lib/components/search/SearchKeyboardShortcuts.svelte';
+  import SearchResultsAssetViewer from '$lib/components/search/SearchResultsAssetViewer.svelte';
+
+  import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import Photostream from '$lib/components/timeline/Photostream.svelte';
+  import SelectableSegment from '$lib/components/timeline/SelectableSegment.svelte';
+  import StreamWithViewer from '$lib/components/timeline/StreamWithViewer.svelte';
+  import Skeleton from '$lib/elements/Skeleton.svelte';
+  import { SearchResultsManager } from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
+
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    assetInteraction: AssetInteraction;
+    children?: Snippet<[]>;
+
+    stylePaddingHorizontalPx?: number;
+    styleMarginTopPx?: number;
+    searchResultsManager: SearchResultsManager;
+  }
+
+  let {
+    searchResultsManager,
+    assetInteraction,
+    children,
+    stylePaddingHorizontalPx = 0,
+    styleMarginTopPx,
+  }: Props = $props();
+  let viewer: Photostream | undefined = $state(undefined);
+
+  const onAfterNavigateComplete = ({ scrollToAssetQueryParam }: { scrollToAssetQueryParam: boolean }) =>
+    viewer?.completeAfterNavigate({ scrollToAssetQueryParam });
+</script>
+
+<StreamWithViewer timelineManager={searchResultsManager} {onAfterNavigateComplete}>
+  {#snippet assetViewer({ onViewerClose })}
+    <SearchResultsAssetViewer timelineManager={searchResultsManager} {onViewerClose} />
+  {/snippet}
+  <SearchKeyboardShortcuts {assetInteraction} timelineManager={searchResultsManager} />
+  <Photostream
+    bind:this={viewer}
+    {stylePaddingHorizontalPx}
+    {styleMarginTopPx}
+    showScrollbar={true}
+    alwaysShowScrollbar={true}
+    enableRouting={true}
+    timelineManager={searchResultsManager}
+    isShowDeleteConfirmation={true}
+    smallHeaderHeight={{ rowHeight: 100, headerHeight: 2 }}
+    largeHeaderHeight={{ rowHeight: 235, headerHeight: 2 }}
+  >
+    {@render children?.()}
+
+    {#snippet skeleton({ segment })}
+      <Skeleton height={segment.height - segment.timelineManager.headerHeight} {stylePaddingHorizontalPx} />
+    {/snippet}
+
+    {#snippet segment({ segment, onScrollCompensationMonthInDOM })}
+      <SelectableSegment
+        {segment}
+        {onScrollCompensationMonthInDOM}
+        timelineManager={searchResultsManager}
+        {assetInteraction}
+        isSelectionMode={false}
+        singleSelect={false}
+      >
+        {#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
+          <AssetLayout
+            photostreamManager={searchResultsManager}
+            viewerAssets={segment.viewerAssets}
+            height={segment.height}
+            width={searchResultsManager.viewportWidth}
+          >
+            {#snippet thumbnail({ asset, position })}
+              {@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
+              {@const isAssetSelected = assetInteraction.hasSelectedAsset(asset.id)}
+              <Thumbnail
+                showStackedIcon={true}
+                showArchiveIcon={true}
+                {asset}
+                onClick={() => onAssetOpen(asset)}
+                onSelect={() => onAssetSelect(asset)}
+                onMouseEvent={() => onAssetHover(asset)}
+                selected={isAssetSelected}
+                selectionCandidate={isAssetSelectionCandidate}
+                thumbnailWidth={position.width}
+                thumbnailHeight={position.height}
+              />
+            {/snippet}
+          </AssetLayout>
+        {/snippet}
+      </SelectableSegment>
+    {/snippet}
+  </Photostream>
+</StreamWithViewer>

web/src/lib/components/search/SearchResultsAssetViewer.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import { AppRoute, AssetAction } from '$lib/constants';
+  import { SearchResultsManager } from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { navigate } from '$lib/utils/navigation';
+  let { asset: viewingAsset, setAssetId, preloadAssets } = assetViewingStore;
+
+  interface Props {
+    timelineManager: SearchResultsManager;
+
+    onViewerClose?: (asset: { id: string }) => Promise<void>;
+  }
+
+  let { timelineManager, onViewerClose = () => Promise.resolve(void 0) }: Props = $props();
+
+  const handleNext = async (): Promise<boolean> => {
+    const next = timelineManager.findNextAsset($viewingAsset.id);
+    if (next) {
+      await navigateToAsset(next);
+      return true;
+    }
+    return false;
+  };
+
+  const handleRandom = async (): Promise<{ id: string } | undefined> => {
+    const next = timelineManager.findRandomAsset();
+    if (next) {
+      await navigateToAsset(next);
+      return { id: next.id };
+    }
+  };
+
+  const handlePrevious = async (): Promise<boolean> => {
+    const next = timelineManager.findPreviousAsset($viewingAsset.id);
+    if (next) {
+      await navigateToAsset(next);
+      return true;
+    }
+    return false;
+  };
+
+  const navigateToAsset = async (asset?: { id: string }) => {
+    if (asset && asset.id !== $viewingAsset.id) {
+      await setAssetId(asset.id);
+      await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
+    }
+  };
+
+  const handleAction = async (action: Action) => {
+    switch (action.type) {
+      case AssetAction.ARCHIVE:
+      case AssetAction.DELETE:
+      case AssetAction.TRASH: {
+        timelineManager.removeAssets([action.asset.id]);
+        if (!(await handlePrevious())) {
+          await goto(AppRoute.PHOTOS);
+        }
+        break;
+      }
+    }
+  };
+</script>
+
+{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+  <AssetViewer
+    asset={$viewingAsset}
+    preloadAssets={$preloadAssets}
+    onAction={handleAction}
+    onPrevious={handlePrevious}
+    onNext={handleNext}
+    onRandom={handleRandom}
+    onClose={onViewerClose}
+  />
+{/await}

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

@@ -0,0 +1,307 @@
+<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;
+          stylePaddingHorizontalPx: number;
+        },
+      ]
+    >;
+
+    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;
+
+    header?: Snippet<[scrollToFunction: (top: number) => void]>;
+    children?: Snippet;
+    empty?: Snippet;
+    handleTimelineScroll?: () => void;
+
+    smallHeaderHeight?: {
+      rowHeight: number;
+      headerHeight: number;
+    };
+
+    largeHeaderHeight?: {
+      rowHeight: number;
+      headerHeight: number;
+    };
+    stylePaddingHorizontalPx?: number;
+    styleMarginTopPx?: number;
+    styleMarginRightPx?: number;
+  }
+
+  let {
+    segment,
+
+    enableRouting,
+    timelineManager = $bindable(),
+    showSkeleton = $bindable(true),
+    showScrollbar,
+    styleMarginRightPx = 0,
+    stylePaddingHorizontalPx = 0,
+    styleMarginTopPx = 0,
+    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% - ${styleMarginTopPx}px)`}
+  style:margin-top={styleMarginTopPx + 'px'}
+  style:margin-right={styleMarginRightPx + 'px'}
+  style:padding-left={stylePaddingHorizontalPx + 'px'}
+  style:padding-right={stylePaddingHorizontalPx + 'px'}
+  style:scrollbar-width={showScrollbar ? 'thin' : 'none'}
+  tabindex="-1"
+  bind:clientHeight={timelineManager.viewportHeight}
+  bind:clientWidth={
+    null, (v: number) => ((timelineManager.viewportWidth = v - stylePaddingHorizontalPx * 2), updateSlidingWindow())
+  }
+  bind:this={element}
+  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
+>
+  <section
+    bind:this={timelineElement}
+    id="virtual-timeline"
+    class:relative={true}
+    class:invisible={showSkeleton}
+    style:height={timelineManager.timelineHeight + 'px'}
+  >
+    <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, stylePaddingHorizontalPx })}
+        {: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>

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

@@ -0,0 +1,198 @@
+<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}
+  styleMarginRightPx={scrubberWidth}
+  {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>

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { afterNavigate, beforeNavigate } from '$app/navigation';
+  import { page } from '$app/state';
+  import Portal from '$lib/elements/Portal.svelte';
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
+  import { getSegmentIdentifier, getTimes } from '$lib/utils/timeline-util';
+  import { DateTime } from 'luxon';
+  import { type Snippet } from 'svelte';
+
+  interface Props {
+    timelineManager: PhotostreamManager;
+    children?: Snippet;
+    assetViewer: Snippet<[{ onViewerClose: (asset: { id: string }) => Promise<void> }]>;
+    onAfterNavigateComplete: (args: { scrollToAssetQueryParam: boolean }) => void;
+  }
+
+  let { timelineManager, children, assetViewer, onAfterNavigateComplete }: Props = $props();
+
+  let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
+
+  // tri-state boolean
+  let initialLoadWasAssetViewer: boolean | null = null;
+  let hasNavigatedToOrFromAssetViewer: boolean = false;
+  let timelineScrollPositionInitialized = false;
+
+  beforeNavigate(({ from, to }) => {
+    timelineManager.suspendTransitions = true;
+    hasNavigatedToOrFromAssetViewer = isAssetViewerRoute(to) || isAssetViewerRoute(from);
+  });
+
+  const completeAfterNavigate = () => {
+    const assetViewerPage = !!(page.route.id?.endsWith('/[[assetId=id]]') && page.params.assetId);
+    let isInitial = false;
+    // 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 onAfterNavigateComplete({ scrollToAssetQueryParam });
+  };
+  afterNavigate(({ complete }) => void complete.then(completeAfterNavigate, completeAfterNavigate));
+
+  const onViewerClose = async (asset: { id: string }) => {
+    assetViewingStore.showAssetViewer(false);
+    $gridScrollTarget = { at: asset.id };
+    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
+  };
+
+  $effect(() => {
+    if ($showAssetViewer) {
+      const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
+      void timelineManager.loadSegment(getSegmentIdentifier({ year: localDateTime.year, month: localDateTime.month }));
+    }
+  });
+</script>
+
+{@render children?.()}
+
+<Portal target="body">
+  {#if $showAssetViewer}
+    {@render assetViewer({ onViewerClose })}
+  {/if}
+</Portal>

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

@@ -1,35 +1,20 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import MonthSegment from '$lib/components/timeline/MonthSegment.svelte';
-  import Scrubber from '$lib/components/timeline/Scrubber.svelte';
+  import PhotostreamWithScrubber from '$lib/components/timeline/PhotostreamWithScrubber.svelte';
   import SelectableDay from '$lib/components/timeline/SelectableDay.svelte';
   import SelectableSegment from '$lib/components/timeline/SelectableSegment.svelte';
+  import StreamWithViewer from '$lib/components/timeline/StreamWithViewer.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';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   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 { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  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;
@@ -83,472 +68,90 @@
     customThumbnailLayout,
   }: Props = $props();
 
-  let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
+  let viewer: PhotostreamWithScrubber | undefined = $state(undefined);
 
-  let element: HTMLElement | undefined = $state();
+  const onAfterNavigateComplete = ({ scrollToAssetQueryParam }: { scrollToAssetQueryParam: boolean }) =>
-
+    viewer?.completeAfterNavigate({ scrollToAssetQueryParam });
-  let timelineElement: HTMLElement | undefined = $state();
-  let showSkeleton = $state(true);
-  // 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: { 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);
-
-  // 60 is the bottom spacer element at 60px
-  let bottomSectionHeight = 60;
-  // 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 scrollTo = (top: number) => {
-    if (element) {
-      element.scrollTo({ top });
-    }
-  };
-  const scrollTop = (top: number) => {
-    if (element) {
-      element.scrollTop = top;
-    }
-  };
-  const scrollBy = (y: number) => {
-    if (element) {
-      element.scrollBy(0, y);
-    }
-  };
-  const scrollToTop = () => {
-    scrollTo(0);
-  };
-
-  const handleTriggeredScrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
-    const { heightDelta, scrollTop } = compensation;
-    if (heightDelta !== undefined) {
-      scrollBy(heightDelta);
-    } else if (scrollTop !== undefined) {
-      scrollTo(scrollTop);
-    }
-    timelineManager.clearScrollCompensation();
-  };
-
-  const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
-    // the following method may trigger any layouts, so need to
-    // handle any scroll compensation that may have been set
-    const height = monthGroup!.findAssetAbsolutePosition(assetId);
-
-    // this is in a while loop, since scrollCompensations invoke scrolls
-    // which may load months, triggering more scrollCompensations. Call
-    // this in a loop, until no more layouts occur.
-    while (timelineManager.scrollCompensation.monthGroup) {
-      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(() => {
-    if ($showAssetViewer) {
-      const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
-      void timelineManager.loadSegment(getSegmentIdentifier({ year: localDateTime.year, month: localDateTime.month }));
-    }
-  });
 </script>
 
-<HotModuleReload onAfterUpdate={handleAfterUpdate} onBeforeUpdate={handleBeforeUpdate} />
+<StreamWithViewer {timelineManager} {onAfterNavigateComplete}>
-
+  {#snippet assetViewer({ onViewerClose })}
-<TimelineKeyboardActions
+    <TimelineAssetViewer {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} {onViewerClose} />
-  scrollToAsset={(asset) => scrollToAsset(asset) ?? false}
+  {/snippet}
-  {timelineManager}
+  <TimelineKeyboardActions
-  {assetInteraction}
+    scrollToAsset={async (asset) => (await viewer?.scrollToAsset(asset)) ?? Promise.resolve(false)}
-  bind:isShowDeleteConfirmation
-  {onEscape}
-/>
-
-{#if timelineManager.months.length > 0}
-  <Scrubber
     {timelineManager}
-    height={timelineManager.viewportHeight}
+    {assetInteraction}
-    timelineTopOffset={timelineManager.topSectionHeight}
+    bind:isShowDeleteConfirmation
-    timelineBottomOffset={bottomSectionHeight}
+    {onEscape}
-    {isInLeadOutSection}
-    {timelineScrollPercent}
-    {viewportTopMonthScrollPercent}
-    {viewportTopMonth}
-    {onScrub}
-    bind:scrubberWidth
   />
-{/if}
+  <PhotostreamWithScrubber
-
+    bind:this={viewer}
-<!-- Right margin MUST be equal to the width of scrubber -->
+    {enableRouting}
-<section
+    {timelineManager}
-  id="asset-grid"
+    {isShowDeleteConfirmation}
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
+    {children}
-  style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
+    {empty}
-  tabindex="-1"
-  bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
-  bind:this={element}
-  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
->
-  <section
-    bind:this={timelineElement}
-    id="virtual-timeline"
-    class:invisible={showSkeleton}
-    style:height={timelineManager.timelineHeight + 'px'}
   >
-    <section
+    {#snippet skeleton({ segment })}
-      use:resizeObserver={topSectionResizeObserver}
+      <Skeleton
-      class:invisible={showSkeleton}
+        height={segment.height - segment.timelineManager.headerHeight}
-      style:position="absolute"
+        title={(segment as MonthGroup).monthGroupTitle}
-      style:left="0"
+      />
-      style:right="0"
+    {/snippet}
-    >
+    {#snippet segment({ segment, onScrollCompensationMonthInDOM })}
-      {@render children?.()}
+      <SelectableSegment
-      {#if isEmpty}
+        {segment}
-        <!-- (optional) empty placeholder -->
+        {onScrollCompensationMonthInDOM}
-        {@render empty?.()}
+        {timelineManager}
-      {/if}
+        {assetInteraction}
-    </section>
+        {isSelectionMode}
-
+        {singleSelect}
-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
+        {onAssetOpen}
-      {@const display = monthGroup.intersecting}
+        {onAssetSelect}
-      {@const absoluteHeight = monthGroup.top}
+      >
-
+        {#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
-      {#if !monthGroup.isLoaded}
+          <SelectableDay {assetInteraction} {onAssetSelect}>
-        <div
+            {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
-          style:height={monthGroup.height + 'px'}
+              <MonthSegment
-          style:position="absolute"
+                {assetInteraction}
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
+                {customThumbnailLayout}
-          style:width="100%"
+                {singleSelect}
-        >
+                monthGroup={segment as MonthGroup}
-          <Skeleton
+                {timelineManager}
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
+                {onDayGroupSelect}
-            title={monthGroup.monthGroupTitle}
+              >
-          />
+                {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
-        </div>
+                  {@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
-      {:else if display}
+                  {@const isAssetSelected =
-        <div
+                    assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
-          class="month-group"
+                  {@const isAssetDisabled = timelineManager.albumAssets.has(asset.id)}
-          style:height={monthGroup.height + 'px'}
+                  <Thumbnail
-          style:position="absolute"
+                    showStackedIcon={withStacked}
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
+                    {showArchiveIcon}
-          style:width="100%"
+                    {asset}
-        >
+                    {groupIndex}
-          <SelectableSegment
+                    onClick={() => onAssetOpen(asset)}
-            segment={monthGroup}
+                    onSelect={() => onDayGroupAssetSelect(dayGroup, asset)}
-            onScrollCompensationMonthInDOM={handleTriggeredScrollCompensation}
+                    onMouseEvent={(isMouseOver) => {
-            {timelineManager}
+                      if (isMouseOver) {
-            {assetInteraction}
+                        onAssetHover(asset);
-            {isSelectionMode}
+                      } else {
-            {singleSelect}
+                        onAssetHover(null);
-            {onAssetOpen}
+                      }
-            {onAssetSelect}
+                    }}
-          >
+                    selected={isAssetSelected}
-            {#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
+                    selectionCandidate={isAssetSelectionCandidate}
-              <SelectableDay {assetInteraction} {onAssetSelect}>
+                    disabled={isAssetDisabled}
-                {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
+                    thumbnailWidth={position.width}
-                  <MonthSegment
+                    thumbnailHeight={position.height}
-                    {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>
+              </MonthSegment>
             {/snippet}
-          </SelectableSegment>
+          </SelectableDay>
-        </div>
+        {/snippet}
-      {/if}
+      </SelectableSegment>
-    {/each}
+    {/snippet}
-    <!-- spacer for leadout -->
+  </PhotostreamWithScrubber>
-    <div
+</StreamWithViewer>
-      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 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>

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

@@ -9,15 +9,16 @@
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
 
-  let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
+  let { asset: viewingAsset, 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
@@ -30,12 +31,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 () => {
@@ -79,13 +80,6 @@
     }
   };
 
-  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:
@@ -97,7 +91,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 handleClose(action.asset));
+        (await handleNext()) || (await handlePrevious()) || (await onViewerClose?.(action.asset));
 
         // delete after find the next one
         timelineManager.removeAssets([action.asset.id]);
@@ -111,12 +105,12 @@
       case AssetAction.UNARCHIVE:
       case AssetAction.FAVORITE:
       case AssetAction.UNFAVORITE: {
-        timelineManager.upsertAssets([action.asset]);
+        timelineManager.updateAssets([action.asset]);
         break;
       }
 
       case AssetAction.ADD: {
-        timelineManager.upsertAssets([action.asset]);
+        timelineManager.addAssets([action.asset]);
         break;
       }
 
@@ -125,7 +119,7 @@
         break;
       }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.upsertAssets([toTimelineAsset(action.asset)]);
+        timelineManager.addAssets([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(
@@ -172,6 +166,6 @@
     onPrevious={handlePrevious}
     onNext={handleNext}
     onRandom={handleRandom}
-    onClose={handleClose}
+    onClose={onViewerClose}
   />
 {/await}

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

@@ -1,6 +1,5 @@
 <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';
@@ -13,10 +12,9 @@
     onArchive?: OnArchive;
     menuItem?: boolean;
     unarchive?: boolean;
-    manager?: PhotostreamManager;
   }
 
-  let { onArchive, menuItem = false, unarchive = false, manager }: Props = $props();
+  let { onArchive, menuItem = false, unarchive = false }: Props = $props();
 
   let text = $derived(unarchive ? $t('unarchive') : $t('to_archive'));
   let icon = $derived(unarchive ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline);
@@ -26,13 +24,12 @@
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   const handleArchive = async () => {
-    const visibility = unarchive ? AssetVisibility.Timeline : AssetVisibility.Archive;
+    const isArchived = unarchive ? AssetVisibility.Timeline : AssetVisibility.Archive;
-    const assets = [...getOwnedAssets()].filter((asset) => asset.visibility !== visibility);
+    const assets = [...getOwnedAssets()].filter((asset) => asset.visibility !== isArchived);
     loading = true;
-    const ids = await archiveAssets(assets, visibility as AssetVisibility);
+    const ids = await archiveAssets(assets, isArchived as AssetVisibility);
     if (ids) {
-      manager?.updateAssetOperation(ids, (asset) => ((asset.visibility = visibility), void 0));
+      onArchive?.(ids, isArchived ? AssetVisibility.Archive : AssetVisibility.Timeline);
-      onArchive?.(ids, visibility ? AssetVisibility.Archive : AssetVisibility.Timeline);
       clearSelect();
     }
     loading = false;

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

@@ -1,8 +1,6 @@
 <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';
@@ -11,14 +9,13 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
 
   interface Props {
-    onAssetDelete?: OnDelete;
+    onAssetDelete: OnDelete;
-    onUndoDelete?: OnUndoDelete;
+    onUndoDelete?: OnUndoDelete | undefined;
     menuItem?: boolean;
     force?: boolean;
-    manager?: PhotostreamManager;
   }
 
-  let { onAssetDelete, onUndoDelete, menuItem = false, force = !$featureFlags.trash, manager }: Props = $props();
+  let { onAssetDelete, onUndoDelete = undefined, menuItem = false, force = !$featureFlags.trash }: Props = $props();
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
@@ -39,12 +36,7 @@
   const handleDelete = async () => {
     loading = true;
     const assets = [...getOwnedAssets()];
-    const undo = (assets: TimelineAsset[]) => {
+    await deleteAssets(force, onAssetDelete, assets, onUndoDelete);
-      manager?.upsertAssets(assets);
-      onUndoDelete?.(assets);
-    };
-    await deleteAssets(force, onAssetDelete, assets, undo);
-    manager?.removeAssets(assets.map((asset) => asset.id));
     clearSelect();
     isShowConfirmation = false;
     loading = false;

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

@@ -5,7 +5,6 @@
     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';
@@ -17,10 +16,9 @@
     onFavorite?: OnFavorite;
     menuItem?: boolean;
     removeFavorite: boolean;
-    manager?: PhotostreamManager;
   }
 
-  let { onFavorite, menuItem = false, removeFavorite, manager }: Props = $props();
+  let { onFavorite, menuItem = false, removeFavorite }: Props = $props();
 
   let text = $derived(removeFavorite ? $t('remove_from_favorites') : $t('to_favorite'));
   let icon = $derived(removeFavorite ? mdiHeartMinusOutline : mdiHeartOutline);
@@ -41,7 +39,11 @@
       if (ids.length > 0) {
         await updateAssets({ assetBulkUpdateDto: { ids, isFavorite } });
       }
-      manager?.updateAssetOperation(ids, (asset) => ((asset.isFavorite = isFavorite), void 0));
+
+      for (const asset of assets) {
+        asset.isFavorite = isFavorite;
+      }
+
       onFavorite?.(ids, isFavorite);
 
       notificationController.show({

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

@@ -7,8 +7,10 @@
     type RelativeResult,
   } from '$lib/components/shared-components/change-date.svelte';
   import {
-    setFocusToAsset as setFocusAssetInit,
+    setFocusToAsset as setFocusAssetUtil,
-    setFocusTo as setFocusToInit,
+    setFocusTo as setFocusToUtil,
+    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';
@@ -32,7 +34,7 @@
     assetInteraction: AssetInteraction;
     isShowDeleteConfirmation: boolean;
     onEscape?: () => void;
-    scrollToAsset: (asset: TimelineAsset) => boolean;
+    scrollToAsset: (asset: TimelineAsset) => Promise<boolean>;
   }
 
   let {
@@ -51,7 +53,7 @@
       !(isTrashEnabled && !force),
       (assetIds) => timelineManager.removeAssets(assetIds),
       assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.upsertAssets(assets),
+      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
     );
     assetInteraction.clearMultiselect();
   };
@@ -147,8 +149,10 @@
     }
   });
 
-  const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
+  const setFocusTo = (direction: FocusDirection, interval: FocusInterval) =>
-  const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
+    setFocusToUtil(scrollToAsset, timelineManager, direction, interval);
+
+  const setFocusAsset = (asset: TimelineAsset) => setFocusAssetUtil(scrollToAsset, asset);
 
   let shortcutList = $derived(
     (() => {
@@ -212,7 +216,7 @@
           (DateTime.fromISO(dateString.date) as DateTime<true>).toObject(),
         );
         if (asset) {
-          setFocusAsset(asset);
+          void setFocusAsset(asset);
         }
       }
     }}

web/src/lib/components/timeline/actions/focus-actions.ts

@@ -21,19 +21,26 @@ export const focusPreviousAsset = () =>
 
 const queryHTMLElement = (query: string) => document.querySelector(query) as HTMLElement;
 
-export const setFocusToAsset = (scrollToAsset: (asset: TimelineAsset) => boolean, asset: TimelineAsset) => {
+export const setFocusToAsset = async (
-  const scrolled = scrollToAsset(asset);
+  scrollToAsset: (asset: TimelineAsset) => Promise<boolean>,
+  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) => boolean,
+  scrollToAsset: (asset: TimelineAsset) => Promise<boolean>,
   store: TimelineManager,
-  direction: 'earlier' | 'later',
+  direction: FocusDirection,
-  interval: 'day' | 'month' | 'year' | 'asset',
+  interval: FocusInterval,
 ) => {
   if (tracker.isActive()) {
     // there are unfinished running invocations, so return early
@@ -65,7 +72,10 @@ export const setFocusTo = async (
     return;
   }
 
-  const scrolled = scrollToAsset(asset);
+  const scrolled = await scrollToAsset(asset);
+  if (!invocation.isStillValid()) {
+    return;
+  }
   if (scrolled) {
     await tick();
     if (!invocation.isStillValid()) {

web/src/lib/elements/Skeleton.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
   interface Props {
     height: number;
-    title: string;
+    title?: string;
+    stylePaddingHorizontalPx?: number;
   }
 
-  let { height = 0, title }: Props = $props();
+  let { height = 0, title, stylePaddingHorizontalPx = 0 }: Props = $props();
 </script>
 
-<div class="overflow-clip" style:height={height + 'px'}>
+<skeleton class="overflow-clip" style:height={height + 'px'}>
+  {#if title}
+    <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"
+    >
+      {title}
+    </div>
+  {/if}
   <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="animate-pulse absolute h-full"
-  >
+    style:width="100%"
-    {title}
+    style:padding-left={stylePaddingHorizontalPx + 'px'}
-  </div>
+    style:padding-right={stylePaddingHorizontalPx + 'px'}
-  <div
-    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
-    style:width="calc(100% - 20px)"
     data-skeleton="true"
   ></div>
-</div>
+</skeleton>
 
 <style>
   [data-skeleton] {

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

@@ -3,21 +3,16 @@ import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-s
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { clamp, debounce } from 'lodash-es';
 
-import {
+import type {
   PhotostreamSegment,
-  type SegmentIdentifier,
+  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);
@@ -274,13 +269,14 @@ export abstract class PhotostreamManager {
     return this.months.find((segment) => identifier.matches(segment));
   }
 
-  getSegmentForAssetId(assetId: string) {
+  findSegmentForAssetId(assetId: string): Promise<PhotostreamSegment | undefined> {
     for (const month of this.months) {
       const asset = month.assets.find((asset) => asset.id === assetId);
       if (asset) {
-        return month;
+        return Promise.resolve(month);
       }
     }
+    return Promise.resolve(void 0);
   }
 
   refreshLayout() {
@@ -327,105 +323,32 @@ export abstract class PhotostreamManager {
     return Promise.resolve(this.retrieveLoadedRange(start, end));
   }
 
-  updateAssetOperation(ids: string[], operation: AssetOperation) {
+  removeAssets(assetIds: string[]): string[] {
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    return this.#runAssetOperation(new Set(ids), operation);
+    const assetIdSet = new Set(assetIds);
-  }
+    const removedIds: string[] = [];
 
-  upsertAssets(assets: TimelineAsset[]) {
+    for (const segment of this.months) {
-    const notExcluded = assets.filter((asset) => !this.isExcluded(asset));
+      // Remove assets from each segment using splice
-    const notUpdated = this.#updateAssets(notExcluded);
+      for (let i = segment.viewerAssets.length - 1; i >= 0; i--) {
-    this.addAssetsToSegments([...notUpdated]);
+        if (assetIdSet.has(segment.viewerAssets[i].asset.id)) {
-  }
+          removedIds.push(segment.viewerAssets[i].asset.id);
-
+          segment.viewerAssets.splice(i, 1);
-  #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);
         }
       }
+
+      // Update segment layout after removing assets
+      if (removedIds.length > 0) {
+        segment.layout();
+      }
     }
-    if (combinedMoveAssets.length > 0) {
+
-      this.addAssetsToSegments(combinedMoveAssets.flat().map((a) => a.asset));
+    // Update viewport geometry after removals
+    if (removedIds.length > 0) {
+      this.updateViewportGeometry(false);
     }
-    const changedGeometry = changedMonthGroups.size > 0;
+
-    for (const month of changedMonthGroups) {
+    // Return the IDs that were not found/removed
-      updateGeometry(this, month, { invalidateHeight: true });
+    return assetIds.filter((id) => !removedIds.includes(id));
-    }
-    if (changedGeometry) {
-      this.updateIntersections();
-    }
-    return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
   }
 }

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

@@ -4,7 +4,7 @@ import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
 import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
-import type { AssetOperation, MoveAsset, TimelineAsset } from '$lib/managers/timeline-manager/types';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
 
 export type SegmentIdentifier = {
@@ -66,13 +66,18 @@ export abstract class PhotostreamSegment {
   }
 
   async load(cancelable: boolean): Promise<'DONE' | 'WAITED' | 'CANCELED' | 'LOADED' | 'ERRORED'> {
-    return await this.loader?.execute(async (signal: AbortSignal) => {
+    return await this.loader.execute(async (signal: AbortSignal) => {
       await this.fetch(signal);
     }, cancelable);
   }
 
   protected abstract fetch(signal: AbortSignal): Promise<void>;
 
+  async reload(cancelable: boolean): Promise<'DONE' | 'WAITED' | 'CANCELED' | 'LOADED' | 'ERRORED'> {
+    await this.loader.reset();
+    return await this.load(cancelable);
+  }
+
   get assets(): TimelineAsset[] {
     return this.#assets;
   }
@@ -139,7 +144,7 @@ export abstract class PhotostreamSegment {
     this.loader?.cancel();
   }
 
-  layout(_: boolean) {}
+  layout(_?: boolean) {}
 
   updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
     this.intersecting = intersecting;
@@ -147,49 +152,4 @@ export abstract class PhotostreamSegment {
   }
 
   abstract findAssetAbsolutePosition(assetId: string): number;
-
-  runAssetOperation(ids: Set<string>, operation: AssetOperation) {
-    if (ids.size === 0) {
-      return {
-        moveAssets: [] as MoveAsset[],
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity
-        processedIds: new Set<string>(),
-        unprocessedIds: ids,
-        changedGeometry: false,
-      };
-    }
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const unprocessedIds = new Set<string>(ids);
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const processedIds = new Set<string>();
-    const moveAssets: MoveAsset[] = [];
-    let changedGeometry = false;
-    for (const assetId of unprocessedIds) {
-      const index = this.viewerAssets.findIndex((viewAsset) => viewAsset.id == assetId);
-      if (index === -1) {
-        continue;
-      }
-
-      const asset = this.viewerAssets[index].asset!;
-      const oldTime = { ...asset.localDateTime };
-      const opResult = operation(asset);
-      let remove = false;
-      if (opResult) {
-        remove = (opResult as { remove: boolean }).remove ?? false;
-      }
-      const newTime = asset.localDateTime;
-      if (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day) {
-        const { year, month, day } = newTime;
-        remove = true;
-        moveAssets.push({ asset, date: { year, month, day } });
-      }
-      unprocessedIds.delete(assetId);
-      processedIds.add(assetId);
-      if (remove || this.timelineManager.isExcluded(asset)) {
-        this.viewerAssets.splice(index, 1);
-        changedGeometry = true;
-      }
-    }
-    return { moveAssets, processedIds, unprocessedIds, changedGeometry };
-  }
 }

web/src/lib/managers/searchresults-manager/SearchResultsManager.svelte.ts

@@ -0,0 +1,110 @@
+import { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+import { SearchResultsSegment } from '$lib/managers/searchresults-manager/SearchResultsSegment.svelte';
+import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
+import { isEqual } from 'lodash-es';
+
+export type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'> & { isVisible: boolean };
+
+export type Options = {
+  searchTerms: SearchTerms;
+  isSmartSearchEnabled: boolean;
+};
+
+export class SearchResultsManager extends PhotostreamManager {
+  #options: Options = {
+    searchTerms: {
+      isVisible: false,
+    },
+    isSmartSearchEnabled: false,
+  };
+
+  #months: SearchResultsSegment[] = $state([]);
+
+  get options() {
+    return this.#options;
+  }
+
+  async updateOptions(options: Options) {
+    if (isEqual(this.#options, options)) {
+      return;
+    }
+    await this.initTask.reset();
+    this.#options = options;
+    await this.init();
+    this.updateViewportGeometry(false);
+  }
+
+  async init() {
+    this.isInitialized = false;
+    await this.initTask.execute(() => {
+      this.#months.splice(0);
+      this.#months.push(new SearchResultsSegment(this, '1', { ...this.#options.searchTerms }));
+      return Promise.resolve();
+    }, true);
+
+    this.updateViewportGeometry(false);
+  }
+
+  get months(): SearchResultsSegment[] {
+    return this.#months;
+  }
+
+  findNextAsset(currentAssetId: string): { id: string } | undefined {
+    for (let segmentIndex = 0; segmentIndex < this.#months.length; segmentIndex++) {
+      const segment = this.#months[segmentIndex];
+      const assetIndex = segment.assets.findIndex((asset) => asset.id === currentAssetId);
+
+      if (assetIndex !== -1) {
+        // Found the current asset
+        if (assetIndex < segment.assets.length - 1) {
+          // Next asset is in the same segment
+          return segment.assets[assetIndex + 1];
+        } else if (segmentIndex < this.#months.length - 1) {
+          // Next asset is in the next segment
+          const nextSegment = this.#months[segmentIndex + 1];
+          if (nextSegment.assets.length > 0) {
+            return nextSegment.assets[0];
+          }
+        }
+        break;
+      }
+    }
+    return undefined;
+  }
+
+  findPreviousAsset(currentAssetId: string): { id: string } | undefined {
+    for (let segmentIndex = 0; segmentIndex < this.#months.length; segmentIndex++) {
+      const segment = this.#months[segmentIndex];
+      const assetIndex = segment.assets.findIndex((asset) => asset.id === currentAssetId);
+
+      if (assetIndex !== -1) {
+        // Found the current asset
+        if (assetIndex > 0) {
+          // Previous asset is in the same segment
+          return segment.assets[assetIndex - 1];
+        } else if (segmentIndex > 0) {
+          // Previous asset is in the previous segment
+          const previousSegment = this.#months[segmentIndex - 1];
+          if (previousSegment.assets.length > 0) {
+            return previousSegment.assets.at(-1);
+          }
+        }
+        break;
+      }
+    }
+    return undefined;
+  }
+
+  findRandomAsset(): { id: string } | undefined {
+    // Get all loaded assets across all segments
+    const allAssets = this.#months.flatMap((segment) => segment.assets);
+
+    if (allAssets.length === 0) {
+      return undefined;
+    }
+
+    // Return a random asset
+    const randomIndex = Math.floor(Math.random() * allAssets.length);
+    return allAssets[randomIndex];
+  }
+}

web/src/lib/managers/searchresults-manager/SearchResultsSegment.svelte.ts

@@ -0,0 +1,122 @@
+import {
+  PhotostreamSegment,
+  type SegmentIdentifier,
+} from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+import type {
+  SearchResultsManager,
+  SearchTerms,
+} from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
+import { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+import { getJustifiedLayoutFromAssets, getPosition } from '$lib/utils/layout-utils';
+import { toTimelineAsset } from '$lib/utils/timeline-util';
+import { TUNABLES } from '$lib/utils/tunables';
+import { searchAssets, searchSmart } from '@immich/sdk';
+import { isEqual } from 'lodash-es';
+const {
+  TIMELINE: { INTERSECTION_EXPAND_BOTTOM },
+} = TUNABLES;
+export class SearchResultsSegment extends PhotostreamSegment {
+  #manager: SearchResultsManager;
+  #identifier: SegmentIdentifier;
+  #id: string;
+  #searchTerms: SearchTerms;
+  #currentPage: string | null = null;
+  #nextPage: string | null = null;
+
+  #viewerAssets: ViewerAsset[] = $state([]);
+
+  constructor(manager: SearchResultsManager, currentPage: string, searchTerms: SearchTerms) {
+    super();
+    this.#currentPage = currentPage;
+    this.#manager = manager;
+    this.#searchTerms = searchTerms;
+    this.#id = JSON.stringify(searchTerms);
+    this.#identifier = {
+      matches(segment: SearchResultsSegment) {
+        return isEqual(segment.#searchTerms, searchTerms);
+      },
+    };
+    this.initialCount = searchTerms.size || 100;
+  }
+
+  get timelineManager(): SearchResultsManager {
+    return this.#manager;
+  }
+
+  get identifier(): SegmentIdentifier {
+    return this.#identifier;
+  }
+
+  get id(): string {
+    return this.#id;
+  }
+
+  async fetch(): Promise<void> {
+    if (this.#currentPage === null) {
+      return;
+    }
+    const searchDto: SearchTerms = {
+      ...this.#searchTerms,
+      withExif: true,
+      isVisible: true,
+      page: +this.#currentPage,
+    };
+
+    const { assets } =
+      ('query' in searchDto || 'queryAssetId' in searchDto) && this.#manager.options.isSmartSearchEnabled
+        ? await searchSmart({ smartSearchDto: searchDto })
+        : await searchAssets({ metadataSearchDto: searchDto });
+    this.#nextPage = assets.nextPage;
+
+    this.#viewerAssets.push(...assets.items.map((asset) => new ViewerAsset(this, toTimelineAsset(asset))));
+    this.layout();
+  }
+
+  layout(): void {
+    const timelineAssets = this.#viewerAssets.map((viewerAsset) => viewerAsset.asset);
+    const layoutOptions = this.timelineManager.createLayoutOptions();
+    const geometry = getJustifiedLayoutFromAssets(timelineAssets, layoutOptions);
+
+    this.height = timelineAssets.length === 0 ? 0 : geometry.containerHeight + this.timelineManager.headerHeight;
+    for (let i = 0; i < this.#viewerAssets.length; i++) {
+      const position = getPosition(geometry, i);
+      this.#viewerAssets[i].position = position;
+    }
+  }
+
+  get viewerAssets(): ViewerAsset[] {
+    return this.#viewerAssets;
+  }
+
+  findAssetAbsolutePosition(assetId: string) {
+    const viewerAsset = this.#viewerAssets.find((viewAsset) => viewAsset.id === assetId);
+    if (viewerAsset) {
+      if (!viewerAsset.position) {
+        console.warn('No position for asset');
+        return -1;
+      }
+      return this.top + viewerAsset.position.top + this.timelineManager.headerHeight;
+    }
+    return -1;
+  }
+
+  loadNextPage() {
+    if (this.#nextPage !== null) {
+      if (this.#currentPage === this.#nextPage) {
+        // there's an active load
+        return;
+      }
+      this.#currentPage = this.#nextPage;
+      void this.reload(false);
+    }
+  }
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    super.updateIntersection({ intersecting, actuallyIntersecting });
+    const loadNextPage =
+      this.timelineManager.timelineHeight - this.timelineManager.visibleWindow.bottom < INTERSECTION_EXPAND_BOTTOM;
+    if (loadNextPage) {
+      this.loadNextPage();
+    }
+  }
+}

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

@@ -129,11 +129,7 @@ export class DayGroup {
 
       const asset = this.viewerAssets[index].asset!;
       const oldTime = { ...asset.localDateTime };
-      const opResult = operation(asset);
+      let { remove } = operation(asset);
-      let remove = false;
-      if (opResult) {
-        remove = (opResult as { remove: boolean }).remove ?? false;
-      }
       const newTime = asset.localDateTime;
       if (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day) {
         const { year, month, day } = newTime;

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

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

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

@@ -143,3 +143,79 @@ 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;
+}

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.upsertAssets(add);
+      this.#timelineManager.addAssets(add);
     }
     if (update.length > 0) {
-      this.#timelineManager.upsertAssets(update);
+      this.#timelineManager.updateAssets(update);
     }
     if (remove.length > 0) {
       this.#timelineManager.removeAssets(remove);

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

@@ -306,7 +306,7 @@ export class MonthGroup extends PhotostreamSegment {
     this.loader?.cancel();
   }
 
-  layout(noDefer: boolean) {
+  layout(noDefer?: boolean) {
     layoutMonthGroup(this.timelineManager, this, noDefer);
   }
 

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

@@ -1,5 +1,8 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import {
+  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';
@@ -173,7 +176,7 @@ describe('TimelineManager', () => {
     });
   });
 
-  describe('upsertAssets', () => {
+  describe('addAssets', () => {
     let timelineManager: TimelineManager;
 
     beforeEach(async () => {
@@ -194,7 +197,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         }),
       );
-      timelineManager.upsertAssets([asset]);
+      timelineManager.addAssets([asset]);
 
       expect(timelineManager.months.length).toEqual(1);
       expect(timelineManager.assetCount).toEqual(1);
@@ -210,8 +213,8 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.upsertAssets([assetOne]);
+      timelineManager.addAssets([assetOne]);
-      timelineManager.upsertAssets([assetTwo]);
+      timelineManager.addAssets([assetTwo]);
 
       expect(timelineManager.months.length).toEqual(1);
       expect(timelineManager.assetCount).toEqual(2);
@@ -236,7 +239,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-16T12:00:00.000Z'),
         }),
       );
-      timelineManager.upsertAssets([assetOne, assetTwo, assetThree]);
+      timelineManager.addAssets([assetOne, assetTwo, assetThree]);
 
       const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
       expect(month).not.toBeNull();
@@ -262,7 +265,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2023-01-20T12:00:00.000Z'),
         }),
       );
-      timelineManager.upsertAssets([assetOne, assetTwo, assetThree]);
+      timelineManager.addAssets([assetOne, assetTwo, assetThree]);
 
       expect(timelineManager.months.length).toEqual(3);
       expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
@@ -276,11 +279,11 @@ describe('TimelineManager', () => {
     });
 
     it('updates existing asset', () => {
-      const updateAssetsSpy = vi.spyOn(timelineManager, 'upsertAssets');
+      const updateAssetsSpy = vi.spyOn(timelineManager, 'updateAssets');
       const asset = deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build());
-      timelineManager.upsertAssets([asset]);
+      timelineManager.addAssets([asset]);
 
-      timelineManager.upsertAssets([asset]);
+      timelineManager.addAssets([asset]);
       expect(updateAssetsSpy).toBeCalledWith([asset]);
       expect(timelineManager.assetCount).toEqual(1);
     });
@@ -292,7 +295,7 @@ describe('TimelineManager', () => {
 
       const timelineManager = new TimelineManager();
       await timelineManager.updateOptions({ isTrashed: true });
-      timelineManager.upsertAssets([asset, trashedAsset]);
+      timelineManager.addAssets([asset, trashedAsset]);
       expect(await getAssets(timelineManager)).toEqual([trashedAsset]);
     });
   });
@@ -307,15 +310,22 @@ 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.upsertAssets([asset]);
+      timelineManager.addAssets([asset]);
       expect(timelineManager.assetCount).toEqual(1);
       expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(false);
 
-      timelineManager.upsertAssets([updatedAsset]);
+      timelineManager.updateAssets([updatedAsset]);
       expect(timelineManager.assetCount).toEqual(1);
       expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(true);
     });
@@ -331,12 +341,12 @@ describe('TimelineManager', () => {
         fileCreatedAt: fromISODateTimeUTCToObject('2024-03-20T12:00:00.000Z'),
       });
 
-      timelineManager.upsertAssets([asset]);
+      timelineManager.addAssets([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.upsertAssets([updatedAsset]);
+      timelineManager.updateAssets([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);
@@ -356,7 +366,7 @@ describe('TimelineManager', () => {
     });
 
     it('ignores invalid IDs', () => {
-      timelineManager.upsertAssets(
+      timelineManager.addAssets(
         timelineAssetFactory
           .buildList(2, {
             fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
@@ -376,7 +386,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.upsertAssets([assetOne, assetTwo]);
+      timelineManager.addAssets([assetOne, assetTwo]);
       timelineManager.removeAssets([assetOne.id]);
 
       expect(timelineManager.assetCount).toEqual(1);
@@ -390,7 +400,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
         })
         .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.upsertAssets(assets);
+      timelineManager.addAssets(assets);
       timelineManager.removeAssets(assets.map((asset) => asset.id));
 
       expect(timelineManager.assetCount).toEqual(0);
@@ -422,7 +432,7 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.upsertAssets([assetOne, assetTwo]);
+      timelineManager.addAssets([assetOne, assetTwo]);
       expect(timelineManager.getFirstAsset()).toEqual(assetOne);
     });
   });
@@ -547,12 +557,12 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.upsertAssets([assetOne, assetTwo]);
+      timelineManager.addAssets([assetOne, assetTwo]);
 
-      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.year).toEqual(2024);
+      expect(findMonthGroupForAsset(timelineManager, assetTwo.id)?.monthGroup.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.month).toEqual(2);
+      expect(findMonthGroupForAsset(timelineManager, assetTwo.id)?.monthGroup.yearMonth.month).toEqual(2);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.month).toEqual(1);
     });
 
     it('ignores removed months', () => {
@@ -566,11 +576,11 @@ describe('TimelineManager', () => {
           fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
         }),
       );
-      timelineManager.upsertAssets([assetOne, assetTwo]);
+      timelineManager.addAssets([assetOne, assetTwo]);
 
       timelineManager.removeAssets([assetTwo.id]);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.month).toEqual(1);
     });
   });
 });

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

@@ -11,11 +11,14 @@ import {
 } from '$lib/utils/timeline-util';
 
 import { isEqual } from 'lodash-es';
-import { SvelteDate, SvelteSet } from 'svelte/reactivity';
+import { SvelteDate, SvelteMap, 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,
@@ -25,9 +28,16 @@ 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 } from './internal/utils.svelte';
+import { isMismatched, updateObject } from './internal/utils.svelte';
 import { MonthGroup } from './month-group.svelte';
-import type { AssetDescriptor, Direction, ScrubberMonth, TimelineAsset, TimelineManagerOptions } from './types';
+import type {
+  AssetDescriptor,
+  AssetOperation,
+  Direction,
+  ScrubberMonth,
+  TimelineAsset,
+  TimelineManagerOptions,
+} from './types';
 
 export class TimelineManager extends PhotostreamManager {
   albumAssets: Set<string> = new SvelteSet();
@@ -171,7 +181,13 @@ export class TimelineManager extends PhotostreamManager {
     this.scrubberTimelineHeight = this.timelineHeight;
   }
 
-  async findMonthGroupForAsset(id: string) {
+  addAssets(assets: TimelineAsset[]) {
+    const assetsToUpdate = assets.filter((asset) => !this.isExcluded(asset));
+    const notUpdated = this.updateAssets(assetsToUpdate);
+    addAssetsToMonthGroups(this, [...notUpdated], { order: this.#options.order ?? AssetOrder.Desc });
+  }
+
+  async findSegmentForAssetId(id: string) {
     if (!this.isInitialized) {
       await this.initTask.waitUntilCompletion();
     }
@@ -202,11 +218,6 @@ 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];
@@ -219,6 +230,40 @@ 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 });
@@ -274,42 +319,4 @@ export class TimelineManager extends PhotostreamManager {
   getAssetOrder() {
     return this.#options.order ?? AssetOrder.Desc;
   }
-
-  protected createUpsertContext(): unknown {
-    return new GroupInsertionCache();
-  }
-
-  protected upsertAssetIntoSegment(asset: TimelineAsset, context: GroupInsertionCache): void {
-    let month = getMonthGroupByDate(this, asset.localDateTime);
-
-    if (!month) {
-      month = new MonthGroup(this, asset.localDateTime, 1, true, this.#options.order);
-      this.months.push(month);
-    }
-
-    month.addTimelineAsset(asset, context);
-  }
-
-  protected postCreateSegments(): void {
-    this.months.sort((a, b) => {
-      return a.yearMonth.year === b.yearMonth.year
-        ? b.yearMonth.month - a.yearMonth.month
-        : b.yearMonth.year - a.yearMonth.year;
-    });
-  }
-
-  protected postUpsert(context: GroupInsertionCache): void {
-    for (const group of context.existingDayGroups) {
-      group.sortAssets(this.#options.order);
-    }
-
-    for (const monthGroup of context.bucketsWithNewDayGroups) {
-      monthGroup.sortDayGroups();
-    }
-
-    for (const month of context.updatedBuckets) {
-      month.sortDayGroups();
-      updateGeometry(this, month, { invalidateHeight: true });
-    }
-  }
 }

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

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

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

@@ -1,3 +1,4 @@
+import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
 import type { CommonPosition } from '$lib/utils/layout-utils';
 
 import type { DayGroup } from './day-group.svelte';
@@ -5,15 +6,20 @@ import { calculateViewerAssetIntersecting } from './internal/intersection-suppor
 import type { TimelineAsset } from './types';
 
 export class ViewerAsset {
-  readonly #group: DayGroup;
+  readonly #group: DayGroup | PhotostreamSegment;
 
   intersecting = $derived.by(() => {
     if (!this.position) {
       return false;
     }
-
+    if ((this.#group as DayGroup).sortAssets) {
-    const store = this.#group.monthGroup.timelineManager;
+      const dayGroup = this.#group as DayGroup;
-    const positionTop = this.#group.absoluteDayGroupTop + this.position.top;
+      const store = dayGroup.monthGroup.timelineManager;
+      const positionTop = dayGroup.absoluteDayGroupTop + this.position.top;
+      return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
+    }
+    const store = (this.#group as PhotostreamSegment).timelineManager;
+    const positionTop = this.position.top + (this.#group as PhotostreamSegment).top;
 
     return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
   });
@@ -22,7 +28,7 @@ export class ViewerAsset {
   asset: TimelineAsset = <TimelineAsset>$state();
   id: string = $derived(this.asset.id);
 
-  constructor(group: DayGroup, asset: TimelineAsset) {
+  constructor(group: DayGroup | PhotostreamSegment, asset: TimelineAsset) {
     this.#group = group;
     this.asset = asset;
   }

web/src/lib/utils/actions.ts

@@ -21,15 +21,15 @@ export type OnSetVisibility = (ids: string[]) => void;
 
 export const deleteAssets = async (
   force: boolean,
-  onAssetDelete: OnDelete | undefined,
+  onAssetDelete: OnDelete,
   assets: TimelineAsset[],
-  onUndoDelete: OnUndoDelete | undefined,
+  onUndoDelete: OnUndoDelete | undefined = 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.upsertAssets(assets);
+  timelineManager.addAssets(assets);
 }

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

@@ -24,11 +24,19 @@ export type TimelineDateTime = TimelineDate & {
   millisecond: number;
 };
 
-export type ScrubberListener = (scrubberData: {
+export type 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> =>

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

@@ -34,6 +34,7 @@
   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';
@@ -261,15 +262,18 @@
     }
   };
 
-  const handleSetVisibility = () => {
+  const handleSetVisibility = (assetIds: string[]) => {
+    timelineManager.removeAssets(assetIds);
     assetInteraction.clearMultiselect();
   };
 
-  const handleRemoveAssets = async () => {
+  const handleRemoveAssets = async (assetIds: string[]) => {
+    timelineManager.removeAssets(assetIds);
     await refreshAlbum();
   };
 
-  const handleUndoRemoveAssets = async () => {
+  const handleUndoRemoveAssets = async (assets: TimelineAsset[]) => {
+    timelineManager.addAssets(assets);
     await refreshAlbum();
   };
 
@@ -568,7 +572,14 @@
           <AddToAlbum shared />
         </ButtonContextMenu>
         {#if assetInteraction.isAllUserOwned}
-          <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager}></FavoriteAction>
+          <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" />
@@ -583,7 +594,7 @@
                 onClick={() => updateThumbnailUsingCurrentSelection()}
               />
             {/if}
-            <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} manager={timelineManager} />
+            <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
             <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
           {/if}
 
@@ -595,12 +606,7 @@
             <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
           {/if}
           {#if assetInteraction.isAllUserOwned}
-            <DeleteAssets
+            <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} onUndoDelete={handleUndoRemoveAssets} />
-              menuItem
-              onAssetDelete={handleRemoveAssets}
-              onUndoDelete={handleUndoRemoveAssets}
-              manager={timelineManager}
-            />
           {/if}
         </ButtonContextMenu>
       </AssetSelectControlBar>

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

@@ -65,18 +65,32 @@
     assets={assetInteraction.selectedAssets}
     clearSelect={() => assetInteraction.clearMultiselect()}
   >
-    <ArchiveAction unarchive manager={timelineManager} />
+    <ArchiveAction
+      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 removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager} />
+    <FavoriteAction
+      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 manager={timelineManager} />
+      <DeleteAssets menuItem onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
     </ButtonContextMenu>
   </AssetSelectControlBar>
 {/if}

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

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

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

@@ -349,8 +349,15 @@
     }
   };
 
-  const handleDeleteAssets = async () => await updateAssetCount();
+  const handleDeleteAssets = async (assetIds: string[]) => {
-  const handleUndoDeleteAssets = async () => await updateAssetCount();
+    timelineManager.removeAssets(assetIds);
+    await updateAssetCount();
+  };
+
+  const handleUndoDeleteAssets = async (assets: TimelineAsset[]) => {
+    timelineManager.addAssets(assets);
+    await updateAssetCount();
+  };
 
   let person = $derived(data.person);
 
@@ -504,7 +511,14 @@
         <AddToAlbum />
         <AddToAlbum shared />
       </ButtonContextMenu>
-      <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager} />
+      <FavoriteAction
+        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
@@ -515,16 +529,19 @@
         <ChangeDate menuItem />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
-        <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} manager={timelineManager} />
+        <ArchiveAction
+          menuItem
+          unarchive={assetInteraction.isAllArchived}
+          onArchive={(assetIds) => timelineManager.removeAssets(assetIds)}
+        />
         {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
           <TagAction menuItem />
         {/if}
         <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
         <DeleteAssets
           menuItem
-          manager={timelineManager}
+          onAssetDelete={(assetIds) => handleDeleteAssets(assetIds)}
-          onAssetDelete={handleDeleteAssets}
+          onUndoDelete={(assets) => handleUndoDeleteAssets(assets)}
-          onUndoDelete={handleUndoDeleteAssets}
         />
       </ButtonContextMenu>
     </AssetSelectControlBar>

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

@@ -70,12 +70,12 @@
 
   const handleLink: OnLink = ({ still, motion }) => {
     timelineManager.removeAssets([motion.id]);
-    timelineManager.upsertAssets([still]);
+    timelineManager.updateAssets([still]);
   };
 
   const handleUnlink: OnUnlink = ({ still, motion }) => {
-    timelineManager.upsertAssets([motion]);
+    timelineManager.addAssets([motion]);
-    timelineManager.upsertAssets([still]);
+    timelineManager.updateAssets([still]);
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
@@ -118,7 +118,14 @@
       <AddToAlbum />
       <AddToAlbum shared />
     </ButtonContextMenu>
-    <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={timelineManager}></FavoriteAction>
+    <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}
@@ -139,11 +146,15 @@
       <ChangeDate menuItem />
       <ChangeDescription menuItem />
       <ChangeLocation menuItem />
-      <ArchiveAction menuItem manager={timelineManager} />
+      <ArchiveAction menuItem onArchive={(assetIds) => timelineManager.removeAssets(assetIds)} />
       {#if $preferences.tags.enabled}
         <TagAction menuItem />
       {/if}
-      <DeleteAssets menuItem manager={timelineManager} />
+      <DeleteAssets
+        menuItem
+        onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
+        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
+      />
       <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
       <hr />
       <AssetJobActions />

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

@@ -1,17 +1,16 @@
 <script lang="ts">
-  import { afterNavigate, goto } from '$app/navigation';
+  import { goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcut } from '$lib/actions/shortcut';
-  import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
+  import SearchResults from '$lib/components/search/SearchResults.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import AssetJobActions from '$lib/components/timeline/actions/AssetJobActions.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
-  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeDescriptionAction from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
   import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
   import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
   import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
@@ -20,66 +19,44 @@
   import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+
   import { AppRoute, QueryParameter } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import type {
+    PhotostreamSegment,
+    SegmentIdentifier,
+  } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+  import { SearchResultsManager } from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { lang, locale } from '$lib/stores/preferences.store';
+  import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { preferences } from '$lib/stores/user.store';
-  import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { parseUtcDate } from '$lib/utils/date-time';
-  import { handleError } from '$lib/utils/handle-error';
+  import { getPerson, getTagById, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
-  import { isAlbumsRoute, isPeopleRoute } from '$lib/utils/navigation';
+  import { IconButton } from '@immich/ui';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { mdiArrowLeft, mdiDotsVertical, mdiPlus, mdiSelectAll } from '@mdi/js';
-  import {
-    type AlbumResponseDto,
-    getPerson,
-    getTagById,
-    type MetadataSearchDto,
-    searchAssets,
-    searchSmart,
-    type SmartSearchDto,
-  } from '@immich/sdk';
-  import { Icon, IconButton, LoadingSpinner } from '@immich/ui';
-  import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
-  import { tick } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { SvelteMap } from 'svelte/reactivity';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
   const viewport: Viewport = $state({ width: 0, height: 0 });
-  let searchResultsElement: HTMLElement | undefined = $state();
 
-  // The GalleryViewer pushes it's own history state, which causes weird
-  // behavior for history.back(). To prevent that we store the previous page
-  // manually and navigate back to that.
   let previousRoute = $state(AppRoute.EXPLORE as string);
 
-  let nextPage = $state(1);
-  let searchResultAlbums: AlbumResponseDto[] = $state([]);
-  let searchResultAssets: TimelineAsset[] = $state([]);
-  let isLoading = $state(true);
-  let scrollY = $state(0);
-  let scrollYHistory = 0;
-
   const assetInteraction = new AssetInteraction();
 
   type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'>;
   let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
-  let smartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
+  let isSmartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
   let terms = $derived(searchQuery ? JSON.parse(searchQuery) : {});
 
-  $effect(() => {
+  const searchResultsManager = new SearchResultsManager();
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    terms;
-    setTimeout(() => {
-      handlePromiseError(onSearchQueryUpdate());
-    });
-  });
 
-  let timelineManager = new TimelineManager();
+  $effect(() => {
+    void searchResultsManager.updateOptions({ isSmartSearchEnabled, searchTerms: terms });
+  });
 
   const onEscape = () => {
     if ($showAssetViewer) {
@@ -90,91 +67,44 @@
       assetInteraction.selectedAssets = [];
       return;
     }
-    handlePromiseError(goto(previousRoute));
   };
 
-  $effect(() => {
+  const restoreMap = new SvelteMap<string, SegmentIdentifier>();
-    if (scrollY) {
+
-      scrollYHistory = scrollY;
+  const onAssetDelete = async (assetIds: string[]) => {
+    for (const id of assetIds) {
+      const segment = await searchResultsManager.findSegmentForAssetId(id);
+      if (segment) {
+        restoreMap.set(id, segment.identifier);
+      }
     }
-  });
+    searchResultsManager.removeAssets(assetIds);
+  };
 
-  afterNavigate(({ from }) => {
+  const onUndoDelete = (assets: TimelineAsset[]) => {
-    // Prevent setting previousRoute to the current page.
+    const segments: PhotostreamSegment[] = [];
-    if (from?.url && from.route.id !== page.route.id) {
+    for (const asset of assets) {
-      previousRoute = from.url.href;
+      const segmentIdentifier = restoreMap.get(asset.id);
+      if (segmentIdentifier) {
+        const segment = searchResultsManager.getSegmentByIdentifier(segmentIdentifier);
+        if (segment) {
+          segments.push(segment);
+        }
+      }
     }
-    const route = from?.route?.id;
+    for (const segment of segments) {
-
+      void segment.reload(false);
-    if (isPeopleRoute(route)) {
-      previousRoute = AppRoute.PHOTOS;
     }
-
-    if (isAlbumsRoute(route)) {
-      previousRoute = AppRoute.EXPLORE;
-    }
-
-    tick()
-      .then(() => {
-        window.scrollTo(0, scrollYHistory);
-      })
-      .catch(() => {
-        // do nothing
-      });
-  });
-
-  const onAssetDelete = (assetIds: string[]) => {
-    const assetIdSet = new Set(assetIds);
-    searchResultAssets = searchResultAssets.filter((asset: TimelineAsset) => !assetIdSet.has(asset.id));
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
-    timelineManager.removeAssets(assetIds);
+    searchResultsManager.removeAssets(assetIds);
     assetInteraction.clearMultiselect();
-    onAssetDelete(assetIds);
   };
 
   const handleSelectAll = () => {
-    assetInteraction.selectAssets(searchResultAssets);
+    const allAssets = searchResultsManager.months.flatMap((segment) => segment.assets);
-  };
+    assetInteraction.selectAssets(allAssets);
-
-  async function onSearchQueryUpdate() {
-    nextPage = 1;
-    searchResultAssets = [];
-    searchResultAlbums = [];
-    await loadNextPage(true);
-  }
-
-  // eslint-disable-next-line svelte/valid-prop-names-in-kit-pages
-  export const loadNextPage = async (force?: boolean) => {
-    if (!nextPage || (isLoading && !force)) {
-      return;
-    }
-    isLoading = true;
-
-    const searchDto: SearchTerms = {
-      page: nextPage,
-      withExif: true,
-      isVisible: true,
-      language: $lang,
-      ...terms,
-    };
-
-    try {
-      const { albums, assets } =
-        ('query' in searchDto || 'queryAssetId' in searchDto) && smartSearchEnabled
-          ? await searchSmart({ smartSearchDto: searchDto })
-          : await searchAssets({ metadataSearchDto: searchDto });
-
-      searchResultAlbums.push(...albums.items);
-      searchResultAssets.push(...assets.items.map((asset) => toTimelineAsset(asset)));
-
-      nextPage = Number(assets.nextPage) || 0;
-    } catch (error) {
-      handleError(error, $t('loading_search_results_failed'));
-    } finally {
-      isLoading = false;
-    }
   };
 
   function getHumanReadableDate(dateString: string) {
@@ -248,8 +178,7 @@
     cancelMultiselect(assetInteraction);
 
     if (terms.isNotInAlbum.toString() == 'true') {
-      const assetIdSet = new Set(assetIds);
+      searchResultsManager.removeAssets(assetIds);
-      searchResultAssets = searchResultAssets.filter((asset) => !assetIdSet.has(asset.id));
     }
   };
 
@@ -258,12 +187,11 @@
   }
 </script>
 
-<svelte:window bind:scrollY />
 <svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} />
 
 <section>
   {#if assetInteraction.selectionActive}
-    <div class="fixed top-0 start-0 w-full">
+    <div class="fixed z-1 top-0 start-0 w-full">
       <AssetSelectControlBar
         assets={assetInteraction.selectedAssets}
         clearSelect={() => cancelMultiselect(assetInteraction)}
@@ -281,17 +209,7 @@
           <AddToAlbum {onAddToAlbum} />
           <AddToAlbum shared {onAddToAlbum} />
         </ButtonContextMenu>
-        <FavoriteAction
+        <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />
-          removeFavorite={assetInteraction.isAllFavorite}
-          onFavorite={(assetIds, isFavorite) => {
-            for (const assetId of assetIds) {
-              const asset = searchResultAssets.find((searchAsset) => searchAsset.id === assetId);
-              if (asset) {
-                asset.isFavorite = isFavorite;
-              }
-            }
-          }}
-        />
 
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem />
@@ -301,14 +219,14 @@
           {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
             <TagAction menuItem />
           {/if}
-          <DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
+          <DeleteAssets menuItem {onAssetDelete} {onUndoDelete} />
           <hr />
           <AssetJobActions />
         </ButtonContextMenu>
       </AssetSelectControlBar>
     </div>
   {:else}
-    <div class="fixed top-0 start-0 w-full">
+    <div class="fixed z-1 top-0 start-0 w-full">
       <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
         <div class="absolute bg-light"></div>
         <div class="w-full flex-1 ps-4">
@@ -319,92 +237,55 @@
   {/if}
 </section>
 
-{#if terms}
-  <section
-    id="search-chips"
-    class="mt-24 text-center w-full flex gap-5 place-content-center place-items-center flex-wrap px-24"
-  >
-    {#each getObjectKeys(terms) as searchKey (searchKey)}
-      {@const value = terms[searchKey]}
-      <div class="flex place-content-center place-items-center items-stretch text-xs">
-        <div
-          class="flex items-center justify-center bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
-          {value === true ? 'rounded-full' : 'rounded-s-full'}"
-        >
-          {getHumanReadableSearchKey(searchKey as keyof SearchTerms)}
-        </div>
-
-        {#if value !== true}
-          <div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
-            {#if (searchKey === 'takenAfter' || searchKey === 'takenBefore') && typeof value === 'string'}
-              {getHumanReadableDate(value)}
-            {:else if searchKey === 'personIds' && Array.isArray(value)}
-              {#await getPersonName(value) then personName}
-                {personName}
-              {/await}
-            {:else if searchKey === 'tagIds' && (Array.isArray(value) || value === null)}
-              {#await getTagNames(value) then tagNames}
-                {tagNames}
-              {/await}
-            {:else if value === null || value === ''}
-              {$t('unknown')}
-            {:else}
-              {value}
-            {/if}
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </section>
-{/if}
-
 <section
-  class="mb-12 bg-immich-bg dark:bg-immich-dark-bg m-4 max-h-screen"
+  class="absolute top-0 right-0 left-0 bottom-0 mb-0 bg-immich-bg dark:bg-immich-dark-bg max-h-screen"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
-  bind:this={searchResultsElement}
 >
-  {#if searchResultAlbums.length > 0}
+  <SearchResults {searchResultsManager} {assetInteraction} stylePaddingHorizontalPx={16}>
-    <section>
+    {#if terms}
-      <div class="uppercase ms-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums')}</div>
+      <section
-      <AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
+        id="search-chips"
+        class="md:mt-[94px] mt-[72px] mb-4 text-center w-full flex gap-5 place-content-center place-items-center flex-wrap"
+      >
+        {#each getObjectKeys(terms) as searchKey (searchKey)}
+          {@const value = terms[searchKey]}
+          <div class="flex place-content-center place-items-center items-stretch text-xs">
+            <div
+              class="flex items-center justify-center bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
+          {value === true ? 'rounded-full' : 'rounded-s-full'}"
+            >
+              {getHumanReadableSearchKey(searchKey as keyof SearchTerms)}
+            </div>
 
-      <div class="uppercase m-6 text-4xl font-medium text-black/70 dark:text-white/80">
+            {#if value !== true}
-        {$t('photos_and_videos')}
+              <div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
-      </div>
+                {#if (searchKey === 'takenAfter' || searchKey === 'takenBefore') && typeof value === 'string'}
-    </section>
+                  {getHumanReadableDate(value)}
-  {/if}
+                {:else if searchKey === 'personIds' && Array.isArray(value)}
-  <section id="search-content">
+                  {#await getPersonName(value) then personName}
-    {#if searchResultAssets.length > 0}
+                    {personName}
-      <GalleryViewer
+                  {/await}
-        assets={searchResultAssets}
+                {:else if searchKey === 'tagIds' && (Array.isArray(value) || value === null)}
-        {assetInteraction}
+                  {#await getTagNames(value) then tagNames}
-        onIntersected={loadNextPage}
+                    {tagNames}
-        showArchiveIcon={true}
+                  {/await}
-        {viewport}
+                {:else if value === null || value === ''}
-        onReload={onSearchQueryUpdate}
+                  {$t('unknown')}
-        slidingWindowOffset={searchResultsElement.offsetTop}
+                {:else}
-      />
+                  {value}
-    {:else if !isLoading}
+                {/if}
-      <div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
+              </div>
-        <div class="flex flex-col content-center items-center text-center">
+            {/if}
-          <Icon icon={mdiImageOffOutline} size="3.5em" />
+          </div>
-          <p class="mt-5 text-3xl font-medium">{$t('no_results')}</p>
+        {/each}
-          <p class="text-base font-normal">{$t('no_results_description')}</p>
+      </section>
-        </div>
-      </div>
     {/if}
-
+  </SearchResults>
-    {#if isLoading}
-      <div class="flex justify-center py-16 items-center">
-        <LoadingSpinner size="giant" />
-      </div>
-    {/if}
-  </section>
 
   <section>
     {#if assetInteraction.selectionActive}
-      <div class="fixed top-0 start-0 w-full">
+      <div class="fixed z-1 top-0 start-0 w-full">
         <AssetSelectControlBar
           assets={assetInteraction.selectedAssets}
           clearSelect={() => cancelMultiselect(assetInteraction)}
@@ -422,22 +303,12 @@
             <AddToAlbum {onAddToAlbum} />
             <AddToAlbum shared {onAddToAlbum} />
           </ButtonContextMenu>
-          <FavoriteAction
+          <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />
-            removeFavorite={assetInteraction.isAllFavorite}
-            onFavorite={(ids, isFavorite) => {
-              for (const id of ids) {
-                const asset = searchResultAssets.find((asset) => asset.id === id);
-                if (asset) {
-                  asset.isFavorite = isFavorite;
-                }
-              }
-            }}
-          />
 
           <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
             <DownloadAction menuItem />
             <ChangeDate menuItem />
-            <ChangeDescription menuItem />
+            <ChangeDescriptionAction menuItem />
             <ChangeLocation menuItem />
             <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
             {#if assetInteraction.isAllUserOwned}
@@ -446,14 +317,14 @@
             {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
               <TagAction menuItem />
             {/if}
-            <DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
+            <DeleteAssets menuItem {onAssetDelete} {onUndoDelete} />
             <hr />
             <AssetJobActions />
           </ButtonContextMenu>
         </AssetSelectControlBar>
       </div>
     {:else}
-      <div class="fixed top-0 start-0 w-full">
+      <div class="fixed z-1 top-0 start-0 w-full">
         <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
           <div class="absolute bg-light"></div>
           <div class="w-full flex-1 ps-4">

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

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