feat(web): add asset navigation and simplify photostream architecture

- Add findNextAsset, findPreviousAsset, and findRandomAsset methods to PhotostreamManager - Move layout() and findAssetAbsolutePosition() to PhotostreamSegment base class - Create SimplePhotostreamManager for basic photostream functionalityw
refactor(web): convert timeline layout options to derived state
2025-09-28 20:55:20 +00:00 · 2025-09-28 20:55:19 +00:00 · 2025-09-28 20:55:19 +00:00 · 2025-09-28 20:55:19 +00:00 · 2025-09-28 20:55:19 +00:00 · 2025-09-28 20:55:19 +00:00
42 changed files with 3213 additions and 1943 deletions
--- a/web/src/lib/actions/shortcut.ts
+++ b/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) => {
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -121,6 +121,7 @@

  const onMouseLeave = () => {
    mouseOver = false;
+    onMouseEvent?.({ isMouseOver: false, selectedGroupIndex: groupIndex });
  };

  let timer: ReturnType<typeof setTimeout> | null = null;
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/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)' : ''}"
 >
--- a/web/src/lib/components/search/SearchKeyboardShortcuts.svelte
+++ b/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}
--- a/web/src/lib/components/search/SearchResults.svelte
+++ b/web/src/lib/components/search/SearchResults.svelte
@@ -0,0 +1,96 @@
+<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 })}
+      <SelectableSegment
+        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>
--- a/web/src/lib/components/search/SearchResultsAssetViewer.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -33,9 +33,13 @@
  let isFocus = $state(false);
  let close: (() => Promise<void>) | undefined;

+  let navigating = false;
  const listboxId = generateId();

  onDestroy(() => {
+    if (navigating) {
+      return;
+    }
    searchStore.isSearchEnabled = false;
  });

@@ -44,6 +48,7 @@

    closeDropdown();
    searchStore.isSearchEnabled = false;
+    navigating = true;
    await goto(`${AppRoute.SEARCH}?${params}`);
  };

@@ -73,6 +78,9 @@
  };

  const onFocusOut = () => {
+    if (navigating) {
+      return;
+    }
    searchStore.isSearchEnabled = false;
  };

@@ -161,6 +169,9 @@
  };

  const closeDropdown = () => {
+    if (navigating) {
+      return;
+    }
    showSuggestions = false;
    isFocus = false;
    searchHistoryBox?.clearSelection();
--- a/web/src/lib/components/timeline/AssetLayout.svelte
+++ b/web/src/lib/components/timeline/AssetLayout.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { uploadAssetsStore } from '$lib/stores/upload';
+
+  import { flip } from 'svelte/animate';
+  import { scale } from 'svelte/transition';
+
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+  import type { CommonPosition } from '$lib/utils/layout-utils';
+  import type { Snippet } from 'svelte';
+
+  let { isUploading } = uploadAssetsStore;
+
+  interface Props {
+    viewerAssets: ViewerAsset[];
+    width: number;
+    height: number;
+    photostreamManager: PhotostreamManager;
+    thumbnail: Snippet<
+      [
+        {
+          asset: TimelineAsset;
+          position: CommonPosition;
+        },
+      ]
+    >;
+    customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
+  }
+
+  let { viewerAssets, width, height, photostreamManager, thumbnail, customThumbnailLayout }: Props = $props();
+
+  const transitionDuration = $derived.by(() => (photostreamManager.suspendTransitions && !$isUploading ? 0 : 150));
+  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+
+  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
+    return intersectables.filter((intersectable) => intersectable.intersecting);
+  }
+</script>
+
+<!-- Image grid -->
+<div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
+  {#each filterIntersecting(viewerAssets) as viewerAsset (viewerAsset.id)}
+    {@const position = viewerAsset.position!}
+    {@const asset = viewerAsset.asset!}
+
+    <!-- note: don't remove data-asset-id - its used by web e2e tests -->
+    <div
+      data-asset-id={asset.id}
+      class="absolute"
+      style:top={position.top + 'px'}
+      style:left={position.left + 'px'}
+      style:width={position.width + 'px'}
+      style:height={position.height + 'px'}
+      out:scale|global={{ start: 0.1, duration: scaleDuration }}
+      animate:flip={{ duration: transitionDuration }}
+    >
+      {@render thumbnail({ asset, position })}
+      {@render customThumbnailLayout?.(asset)}
+    </div>
+  {/each}
+</div>
+
+<style>
+  [data-image-grid] {
+    user-select: none;
+  }
+</style>
--- a/web/src/lib/components/timeline/MonthSegment.svelte
+++ b/web/src/lib/components/timeline/MonthSegment.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  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 { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import { uploadAssetsStore } from '$lib/stores/upload';
+  import { Icon } from '@immich/ui';
+  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
+
+  import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import type { CommonPosition } from '$lib/utils/layout-utils';
+  import type { Snippet } from 'svelte';
+  let { isUploading } = uploadAssetsStore;
+  interface Props {
+    thumbnail: Snippet<[{ asset: TimelineAsset; position: CommonPosition; dayGroup: DayGroup; groupIndex: number }]>;
+    customThumbnailLayout?: Snippet<[TimelineAsset]>;
+    singleSelect: boolean;
+    assetInteraction: AssetInteraction;
+    monthGroup: MonthGroup;
+    timelineManager: TimelineManager;
+    onDayGroupSelect: (daygroup: DayGroup, assets: TimelineAsset[]) => void;
+  }
+  let {
+    thumbnail: thumbnailWithGroup,
+    customThumbnailLayout,
+    singleSelect,
+    assetInteraction,
+    monthGroup,
+    timelineManager,
+    onDayGroupSelect,
+  }: Props = $props();
+  let isMouseOverGroup = $state(false);
+  let hoveredDayGroup = $state();
+  const transitionDuration = $derived.by(() =>
+    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
+  );
+  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
+    return intersectables.filter((intersectable) => intersectable.intersecting);
+  }
+</script>
+
+{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
+  {@const absoluteWidth = dayGroup.left}
+  {@const isDayGroupSelected = assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <section
+    class={[
+      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
+      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
+    ]}
+    data-group
+    style:position="absolute"
+    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    onmouseenter={() => {
+      isMouseOverGroup = true;
+      hoveredDayGroup = dayGroup.groupTitle;
+    }}
+    onmouseleave={() => {
+      isMouseOverGroup = false;
+      hoveredDayGroup = null;
+    }}
+  >
+    <!-- Date group title -->
+    <div
+      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
+      style:width={dayGroup.width + 'px'}
+    >
+      {#if !singleSelect}
+        <div
+          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
+          class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
+            assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
+          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
+        >
+          {#if isDayGroupSelected}
+            <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
+          {:else}
+            <Icon icon={mdiCircleOutline} size="24" color="#757575" />
+          {/if}
+        </div>
+      {/if}
+
+      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitleFull}>
+        {dayGroup.groupTitle}
+      </span>
+    </div>
+
+    <AssetLayout
+      photostreamManager={timelineManager}
+      viewerAssets={dayGroup.viewerAssets}
+      height={dayGroup.height}
+      width={dayGroup.width}
+      {customThumbnailLayout}
+    >
+      {#snippet thumbnail({ asset, position })}
+        {@render thumbnailWithGroup({ asset, position, dayGroup, groupIndex })}
+      {/snippet}
+    </AssetLayout>
+  </section>
+{/each}
+
+<style>
+  section {
+    contain: layout paint style;
+  }
+</style>
--- a/web/src/lib/components/timeline/Photostream.svelte
+++ b/web/src/lib/components/timeline/Photostream.svelte
@@ -0,0 +1,274 @@
+<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;
+        },
+      ]
+    >;
+    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();
+  };
+
+  export const scrollToAssetId = async (assetId: string) => {
+    const monthGroup = await timelineManager.findSegmentForAssetId(assetId);
+    if (!monthGroup) {
+      return false;
+    }
+
+    const height = monthGroup.findAssetAbsolutePosition(assetId);
+    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.layoutOptions.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,
+          })}
+        {/if}
+      </div>
+    {/each}
+    <!-- spacer for lead-out -->
+    <div
+      class="h-[60px]"
+      style:position="absolute"
+      style:left="0"
+      style:right="0"
+      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
+    ></div>
+  </section>
+</photostream>
+
+<style>
+  photostream {
+    display: block;
+  }
+  #asset-grid {
+    contain: strict;
+    scrollbar-width: none;
+  }
+  .month-group {
+    contain: layout size paint;
+    transform-style: flat;
+    backface-visibility: hidden;
+    transform-origin: center center;
+  }
+</style>
--- a/web/src/lib/components/timeline/PhotostreamWithScrubber.svelte
+++ b/web/src/lib/components/timeline/PhotostreamWithScrubber.svelte
@@ -0,0 +1,197 @@
+<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;
+        },
+      ]
+    >;
+    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>
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -3,7 +3,7 @@
  import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener } from '$lib/utils/timeline-util';
+  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
  import { Icon } from '@immich/ui';
  import { mdiPlay } from '@mdi/js';
  import { clamp } from 'lodash-es';
@@ -11,18 +11,31 @@
  import { fade, fly } from 'svelte/transition';

  interface Props {
+    /** Offset from the top of the timeline (e.g., for headers) */
    timelineTopOffset?: number;
+    /** Offset from the bottom of the timeline (e.g., for footers) */
    timelineBottomOffset?: number;
+    /** Total height of the scrubber component */
    height?: number;
+    /** Timeline manager instance that controls the timeline state */
    timelineManager: TimelineManager;
-    scrubOverallPercent?: number;
-    scrubberMonthPercent?: number;
-    scrubberMonth?: { year: number; month: number };
-    leadout?: boolean;
+    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
+    timelineScrollPercent?: number;
+    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
+    viewportTopMonthScrollPercent?: number;
+    /** The year/month of the timeline month at the top of the viewport */
+    viewportTopMonth?: TimelineYearMonth;
+    /** Indicates whether the viewport is currently in the lead-out section (after all months) */
+    isInLeadOutSection?: boolean;
+    /** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
    scrubberWidth?: number;
+    /** Callback fired when user interacts with the scrubber to navigate */
    onScrub?: ScrubberListener;
+    /** Callback fired when keyboard events occur on the scrubber */
    onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
+    /** Callback fired when scrubbing starts */
    startScrub?: ScrubberListener;
+    /** Callback fired when scrubbing stops */
    stopScrub?: ScrubberListener;
  }

@@ -31,10 +44,10 @@
    timelineBottomOffset = 0,
    height = 0,
    timelineManager,
-    scrubOverallPercent = 0,
-    scrubberMonthPercent = 0,
-    scrubberMonth = undefined,
-    leadout = false,
+    timelineScrollPercent = 0,
+    viewportTopMonthScrollPercent = 0,
+    viewportTopMonth = undefined,
+    isInLeadOutSection = false,
    onScrub = undefined,
    onScrubKeyDown = undefined,
    startScrub = undefined,
@@ -100,7 +113,7 @@
        offset += scrubberMonthPercent * relativeBottomOffset;
      }
      return offset;
-    } else if (leadout) {
+    } else if (isInLeadOutSection) {
      let offset = relativeTopOffset;
      for (const segment of segments) {
        offset += segment.height;
@@ -111,7 +124,9 @@
      return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
    }
  };
-  let scrollY = $derived(toScrollFromMonthGroupPercentage(scrubberMonth, scrubberMonthPercent, scrubOverallPercent));
+  let scrollY = $derived(
+    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
+  );
  let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
  let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
  let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
@@ -295,12 +310,24 @@

    const scrollPercent = toTimelineY(hoverY);
    if (wasDragging === false && isDragging) {
-      void startScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
-      void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+      void startScrub?.({
+        scrubberMonth: segmentDate!,
+        overallScrollPercent: scrollPercent,
+        scrubberMonthScrollPercent: monthGroupPercentY,
+      });
+      void onScrub?.({
+        scrubberMonth: segmentDate!,
+        overallScrollPercent: scrollPercent,
+        scrubberMonthScrollPercent: monthGroupPercentY,
+      });
    }

    if (wasDragging && !isDragging) {
-      void stopScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+      void stopScrub?.({
+        scrubberMonth: segmentDate!,
+        overallScrollPercent: scrollPercent,
+        scrubberMonthScrollPercent: monthGroupPercentY,
+      });
      return;
    }

@@ -308,7 +335,11 @@
      return;
    }

-    void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+    void onScrub?.({
+      scrubberMonth: segmentDate!,
+      overallScrollPercent: scrollPercent,
+      scrubberMonthScrollPercent: monthGroupPercentY,
+    });
  };
  /* eslint-disable tscompat/tscompat */
  const getTouch = (event: TouchEvent) => {
@@ -412,7 +443,11 @@
      }
      if (next) {
        event.preventDefault();
-        void onScrub?.({ year: next.year, month: next.month }, -1, 0);
+        void onScrub?.({
+          scrubberMonth: { year: next.year, month: next.month },
+          overallScrollPercent: -1,
+          scrubberMonthScrollPercent: 0,
+        });
        return true;
      }
    }
@@ -422,7 +457,11 @@
        const next = segments[idx + 1];
        if (next) {
          event.preventDefault();
-          void onScrub?.({ year: next.year, month: next.month }, -1, 0);
+          void onScrub?.({
+            scrubberMonth: { year: next.year, month: next.month },
+            overallScrollPercent: -1,
+            scrubberMonthScrollPercent: 0,
+          });
          return true;
        }
      }
--- a/web/src/lib/components/timeline/SelectableDay.svelte
+++ b/web/src/lib/components/timeline/SelectableDay.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: Snippet<
+      [
+        {
+          onDayGroupSelect: (dayGroup: DayGroup, asset: TimelineAsset[]) => void;
+          onDayGroupAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
+        },
+      ]
+    >;
+    onAssetSelect: (asset: TimelineAsset) => void;
+    assetInteraction: AssetInteraction;
+  }
+
+  let { content, assetInteraction, onAssetSelect }: Props = $props();
+
+  // called when clicking asset with shift key pressed or with mouse
+  const onDayGroupAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    onAssetSelect(asset);
+
+    const assetsInDayGroup = dayGroup.getAssets();
+    const groupTitle = dayGroup.groupTitle;
+
+    // Check if all assets are selected in a group to toggle the group selection's icon
+    const selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
+      assetInteraction.hasSelectedAsset(asset.id),
+    ).length;
+    // if all assets are selected in a group, add the group to selected group
+    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
+      assetInteraction.addGroupToMultiselectGroup(groupTitle);
+    } else {
+      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
+    }
+  };
+
+  const onDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
+    const group = dayGroup.groupTitle;
+    if (assetInteraction.selectedGroup.has(group)) {
+      assetInteraction.removeGroupFromMultiselectGroup(group);
+      for (const asset of assets) {
+        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+      }
+    } else {
+      assetInteraction.addGroupToMultiselectGroup(group);
+      for (const asset of assets) {
+        onAssetSelect(asset);
+      }
+    }
+  };
+</script>
+
+{@render content({
+  onDayGroupSelect,
+  onDayGroupAssetSelect,
+})}
--- a/web/src/lib/components/timeline/SelectableSegment.svelte
+++ b/web/src/lib/components/timeline/SelectableSegment.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { navigate } from '$lib/utils/navigation';
+
+  import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import { searchStore } from '$lib/stores/search.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: Snippet<
+      [
+        {
+          onAssetOpen: (asset: TimelineAsset) => void;
+          onAssetSelect: (asset: TimelineAsset) => void;
+          onAssetHover: (asset: TimelineAsset | null) => void;
+        },
+      ]
+    >;
+
+    isSelectionMode: boolean;
+    singleSelect: boolean;
+    timelineManager: PhotostreamManager;
+    assetInteraction: AssetInteraction;
+    onAssetOpen?: (asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+    onAssetSelect?: (asset: TimelineAsset) => void;
+  }
+
+  let { content, isSelectionMode, singleSelect, assetInteraction, timelineManager, onAssetOpen, onAssetSelect }: Props =
+    $props();
+
+  let shiftKeyIsDown = $state(false);
+  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  let lastMouseHoverAsset: TimelineAsset | null = $state(null);
+
+  $effect(() => {
+    if (shiftKeyIsDown && lastMouseHoverAsset) {
+      void selectAssetCandidates(lastMouseHoverAsset);
+    }
+    if (isEmpty) {
+      assetInteraction.clearMultiselect();
+    }
+  });
+
+  const defaultAssetOpen = (asset: TimelineAsset) => {
+    if (isSelectionMode || assetInteraction.selectionActive) {
+      handleAssetSelect(asset);
+      return;
+    }
+    void navigate({ targetRoute: 'current', assetId: asset.id });
+  };
+
+  const handleOnAssetOpen = (asset: TimelineAsset) => {
+    if (onAssetOpen) {
+      onAssetOpen(asset, () => defaultAssetOpen(asset));
+      return;
+    }
+    defaultAssetOpen(asset);
+  };
+
+  // called when clicking asset with shift key pressed or with mouse
+  const handleAssetSelect = (asset: TimelineAsset) => {
+    handleSelectAssets(asset);
+
+    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
+      isSelectingAllAssets.set(true);
+    } else {
+      isSelectingAllAssets.set(false);
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = true;
+      assetInteraction.clearAssetSelectionCandidates();
+      if (lastMouseHoverAsset) {
+        void selectAssetCandidates(lastMouseHoverAsset);
+        return;
+      }
+      if (!assetInteraction.assetSelectionStart) {
+        assetInteraction.setAssetSelectionStart(assetInteraction.selectedAssets.at(-1) ?? null);
+      }
+    }
+  };
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = false;
+      assetInteraction.clearAssetSelectionCandidates();
+    }
+  };
+
+  const handleOnHover = (asset: TimelineAsset | null) => {
+    if (asset) {
+      if (assetInteraction.selectionActive) {
+        void selectAssetCandidates(asset);
+      }
+      lastMouseHoverAsset = asset;
+    }
+  };
+
+  const handleSelectAssets = (asset: TimelineAsset) => {
+    if (!asset) {
+      return;
+    }
+    onAssetSelect?.(asset);
+
+    if (singleSelect) {
+      return;
+    }
+
+    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
+    const deselect = assetInteraction.hasSelectedAsset(asset.id);
+
+    // Select/deselect already loaded assets
+    if (deselect) {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
+      }
+      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+    } else {
+      for (const candidate of assetInteraction.assetSelectionCandidates) {
+        handleSelectAsset(candidate);
+      }
+      handleSelectAsset(asset);
+    }
+
+    assetInteraction.clearAssetSelectionCandidates();
+
+    if (assetInteraction.assetSelectionStart && rangeSelection) {
+      const assets = timelineManager.retrieveLoadedRange(assetInteraction.assetSelectionStart, asset);
+      for (const asset of assets) {
+        if (deselect) {
+          assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+        } else {
+          handleSelectAsset(asset);
+        }
+      }
+    }
+    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
+    return null;
+  };
+
+  const handleSelectAsset = (asset: TimelineAsset) => {
+    if ('albumAssets' in timelineManager) {
+      const tm = timelineManager as TimelineManager;
+      if (tm.albumAssets.has(asset.id)) {
+        return;
+      }
+    }
+
+    assetInteraction.selectAsset(asset);
+  };
+
+  const selectAssetCandidates = (endAsset: TimelineAsset) => {
+    if (!shiftKeyIsDown) {
+      return;
+    }
+
+    const startAsset = assetInteraction.assetSelectionStart;
+    if (!startAsset) {
+      return;
+    }
+    const assets = assetsSnapshot(timelineManager.retrieveLoadedRange(startAsset, endAsset));
+    assetInteraction.setAssetSelectionCandidates(assets);
+  };
+</script>
+
+<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
+
+{@render content({
+  onAssetOpen: handleOnAssetOpen,
+  onAssetSelect: (asset) => {
+    void handleSelectAssets(asset);
+  },
+  onAssetHover: handleOnHover,
+})}
--- a/web/src/lib/components/timeline/StreamWithViewer.svelte
+++ b/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>
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import { AssetAction } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
+  import { navigate } from '$lib/utils/navigation';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
+
+  let { asset: viewingAsset, mutex, preloadAssets } = assetViewingStore;
+
+  interface Props {
+    timelineManager: TimelineManager;
+
+    withStacked?: boolean;
+    isShared?: boolean;
+    album?: AlbumResponseDto | null;
+    person?: PersonResponseDto | null;
+    onViewerClose?: (asset: { id: string }) => Promise<void>;
+
+    removeAction?:
+      | AssetAction.UNARCHIVE
+      | AssetAction.ARCHIVE
+      | AssetAction.FAVORITE
+      | AssetAction.UNFAVORITE
+      | AssetAction.SET_VISIBILITY_TIMELINE
+      | null;
+  }
+
+  let {
+    timelineManager,
+    removeAction,
+    withStacked = false,
+    isShared = false,
+    album = null,
+    person = null,
+    onViewerClose = () => Promise.resolve(void 0),
+  }: Props = $props();
+
+  const handlePrevious = async () => {
+    const release = await mutex.acquire();
+    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
+
+    if (laterAsset) {
+      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
+      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
+      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
+    }
+
+    release();
+    return !!laterAsset;
+  };
+
+  const handleNext = async () => {
+    const release = await mutex.acquire();
+    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
+
+    if (earlierAsset) {
+      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
+      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
+      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
+    }
+
+    release();
+    return !!earlierAsset;
+  };
+
+  const handleRandom = async () => {
+    const randomAsset = await timelineManager.getRandomAsset();
+
+    if (randomAsset) {
+      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
+      assetViewingStore.setAsset(asset);
+      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
+      return asset;
+    }
+  };
+
+  const handlePreAction = async (action: Action) => {
+    switch (action.type) {
+      case removeAction:
+      case AssetAction.TRASH:
+      case AssetAction.RESTORE:
+      case AssetAction.DELETE:
+      case AssetAction.ARCHIVE:
+      case AssetAction.SET_VISIBILITY_LOCKED:
+      case AssetAction.SET_VISIBILITY_TIMELINE: {
+        // find the next asset to show or close the viewer
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        (await handleNext()) || (await handlePrevious()) || (await onViewerClose?.(action.asset));
+
+        // delete after find the next one
+        timelineManager.removeAssets([action.asset.id]);
+        break;
+      }
+    }
+  };
+  const handleAction = (action: Action) => {
+    switch (action.type) {
+      case AssetAction.ARCHIVE:
+      case AssetAction.UNARCHIVE:
+      case AssetAction.FAVORITE:
+      case AssetAction.UNFAVORITE: {
+        timelineManager.updateAssets([action.asset]);
+        break;
+      }
+
+      case AssetAction.ADD: {
+        timelineManager.addAssets([action.asset]);
+        break;
+      }
+
+      case AssetAction.UNSTACK: {
+        updateUnstackedAssetInTimeline(timelineManager, action.assets);
+        break;
+      }
+      case AssetAction.REMOVE_ASSET_FROM_STACK: {
+        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(
+            timelineManager,
+            action.stack.assets.map((asset) => toTimelineAsset(asset)),
+          );
+          updateStackedAssetInTimeline(timelineManager, {
+            stack: action.stack,
+            toDeleteIds: action.stack.assets
+              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
+              .map((asset) => asset.id),
+          });
+        }
+        break;
+      }
+      case AssetAction.SET_STACK_PRIMARY_ASSET: {
+        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
+        updateUnstackedAssetInTimeline(
+          timelineManager,
+          action.stack.assets.map((asset) => toTimelineAsset(asset)),
+        );
+        updateStackedAssetInTimeline(timelineManager, {
+          stack: action.stack,
+          toDeleteIds: action.stack.assets
+            .filter((asset) => asset.id !== action.stack.primaryAssetId)
+            .map((asset) => asset.id),
+        });
+        break;
+      }
+    }
+  };
+</script>
+
+{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+  <AssetViewer
+    {withStacked}
+    asset={$viewingAsset}
+    preloadAssets={$preloadAssets}
+    {isShared}
+    {album}
+    {person}
+    preAction={handlePreAction}
+    onAction={handleAction}
+    onPrevious={handlePrevious}
+    onNext={handleNext}
+    onRandom={handleRandom}
+    onClose={onViewerClose}
+  />
+{/await}
--- a/web/src/lib/components/timeline/TimelineDateGroup.svelte
+++ b/web/src/lib/components/timeline/TimelineDateGroup.svelte
@@ -1,254 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import { navigate } from '$lib/utils/navigation';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
-  import { Icon } from '@immich/ui';
-  import type { Snippet } from 'svelte';
-  import { flip } from 'svelte/animate';
-  import { scale } from 'svelte/transition';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    customLayout?: Snippet<[TimelineAsset]>;
-
-    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
-    onSelectAssets: (asset: TimelineAsset) => void;
-    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
-    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
-  }
-
-  let {
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    customLayout,
-    onSelect,
-    onSelectAssets,
-    onSelectAssetCandidates,
-    onScrollCompensation,
-    onThumbnailClick,
-  }: Props = $props();
-
-  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
-
-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-  const _onClick = (
-    timelineManager: TimelineManager,
-    assets: TimelineAsset[],
-    groupTitle: string,
-    asset: TimelineAsset,
-  ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      assetSelectHandler(timelineManager, asset, assets, groupTitle);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
-
-  const assetSelectHandler = (
-    timelineManager: TimelineManager,
-    asset: TimelineAsset,
-    assetsInDayGroup: TimelineAsset[],
-    groupTitle: string,
-  ) => {
-    onSelectAssets(asset);
-
-    // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
-      assetInteraction.hasSelectedAsset(asset.id),
-    ).length;
-
-    // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
-      assetInteraction.addGroupToMultiselectGroup(groupTitle);
-    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
-    // Show multi select icon on hover on date group
-    hoveredDayGroup = groupTitle;
-
-    if (assetInteraction.selectionActive) {
-      onSelectAssetCandidates(asset);
-    }
-  };
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
-    return intersectable.filter((int) => int.intersecting);
-  }
-
-  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
-    const { month, year } = dayGroup.monthGroup.yearMonth;
-    const date = fromTimelinePlainDate({
-      year,
-      month,
-      day: dayGroup.day,
-    });
-    return getDateLocaleString(date);
-  };
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensation(timelineManager.scrollCompensation);
-      timelineManager.clearScrollCompensation();
-    }
-  });
-</script>
-
-{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
-
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <section
-    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
-    ]}
-    data-group
-    style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
-    onmouseenter={() => {
-      isMouseOverGroup = true;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
-    }}
-    onmouseleave={() => {
-      isMouseOverGroup = false;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
-    }}
-  >
-    <!-- Date group title -->
-    <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
-      style:width={dayGroup.width + 'px'}
-    >
-      {#if !singleSelect}
-        <div
-          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
-          class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
-            assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-          onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-            <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
-          {:else}
-            <Icon icon={mdiCircleOutline} size="24" color="#757575" />
-          {/if}
-        </div>
-      {/if}
-
-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
-        {dayGroup.groupTitle}
-      </span>
-    </div>
-
-    <!-- Image grid -->
-    <div
-      data-image-grid
-      class="relative overflow-clip"
-      style:height={dayGroup.height + 'px'}
-      style:width={dayGroup.width + 'px'}
-    >
-      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
-        {@const position = viewerAsset.position!}
-        {@const asset = viewerAsset.asset!}
-
-        <!-- {#if viewerAsset.intersecting} -->
-        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
-        <div
-          data-asset-id={asset.id}
-          class="absolute"
-          style:top={position.top + 'px'}
-          style:left={position.left + 'px'}
-          style:width={position.width + 'px'}
-          style:height={position.height + 'px'}
-          out:scale|global={{ start: 0.1, duration: scaleDuration }}
-          animate:flip={{ duration: transitionDuration }}
-        >
-          <Thumbnail
-            showStackedIcon={withStacked}
-            {showArchiveIcon}
-            {asset}
-            {groupIndex}
-            onClick={(asset) => {
-              if (typeof onThumbnailClick === 'function') {
-                onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
-              } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
-              }
-            }}
-            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
-            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
-            selected={assetInteraction.hasSelectedAsset(asset.id) ||
-              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
-            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customLayout}
-            {@render customLayout(asset)}
-          {/if}
-        </div>
-        <!-- {/if} -->
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -0,0 +1,225 @@
+<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 ChangeDate, {
+    type AbsoluteResult,
+    type RelativeResult,
+  } from '$lib/components/shared-components/change-date.svelte';
+  import {
+    setFocusToAsset as setFocusAssetUtil,
+    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';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  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 { searchStore } from '$lib/stores/search.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
+  import { deleteAssets, updateStackedAssetInTimeline } from '$lib/utils/actions';
+  import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
+  import { AssetVisibility } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
+  import { DateTime } from 'luxon';
+  let { isViewing: showAssetViewer } = assetViewingStore;
+
+  interface Props {
+    timelineManager: TimelineManager;
+    assetInteraction: AssetInteraction;
+    isShowDeleteConfirmation: boolean;
+    onEscape?: () => void;
+    scrollToAsset: (asset: TimelineAsset) => Promise<boolean>;
+  }
+
+  let {
+    timelineManager = $bindable(),
+    assetInteraction,
+    isShowDeleteConfirmation = $bindable(false),
+    onEscape,
+    scrollToAsset,
+  }: Props = $props();
+
+  let isShowSelectDate = $state(false);
+
+  const trashOrDelete = async (force: boolean = false) => {
+    isShowDeleteConfirmation = false;
+    await deleteAssets(
+      !(isTrashEnabled && !force),
+      (assetIds) => timelineManager.removeAssets(assetIds),
+      assetInteraction.selectedAssets,
+      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
+    );
+    assetInteraction.clearMultiselect();
+  };
+
+  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 onStackAssets = async () => {
+    const result = await stackAssets(assetInteraction.selectedAssets);
+
+    updateStackedAssetInTimeline(timelineManager, result);
+
+    onEscape?.();
+  };
+
+  const toggleArchive = async () => {
+    const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
+    const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
+    timelineManager.updateAssetOperation(ids, (asset) => {
+      asset.visibility = visibility;
+      return { remove: false };
+    });
+    deselectAllAssets();
+  };
+
+  let shiftKeyIsDown = $state(false);
+
+  const deselectAllAssets = () => {
+    cancelMultiselect(assetInteraction);
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = true;
+    }
+  };
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = false;
+    }
+  };
+
+  const onSelectStart = (e: Event) => {
+    if (assetInteraction.selectionActive && shiftKeyIsDown) {
+      e.preventDefault();
+    }
+  };
+
+  const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
+  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
+  let isShortcutModalOpen = false;
+
+  const handleOpenShortcutModal = async () => {
+    if (isShortcutModalOpen) {
+      return;
+    }
+
+    isShortcutModalOpen = true;
+    await modalManager.show(ShortcutsModal, {});
+    isShortcutModalOpen = false;
+  };
+
+  $effect(() => {
+    if (isEmpty) {
+      assetInteraction.clearMultiselect();
+    }
+  });
+
+  const setFocusTo = (direction: FocusDirection, interval: FocusInterval) =>
+    setFocusToUtil(scrollToAsset, timelineManager, direction, interval);
+
+  const setFocusAsset = (asset: TimelineAsset) => setFocusAssetUtil(scrollToAsset, asset);
+
+  let shortcutList = $derived(
+    (() => {
+      if (searchStore.isSearchEnabled || $showAssetViewer) {
+        return [];
+      }
+
+      const shortcuts: ShortcutOptions[] = [
+        { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
+        { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
+        { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) },
+        { shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') },
+        { shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') },
+        { shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') },
+        { shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') },
+        { shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') },
+        { shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
+        { shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
+        { shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
+        { shortcut: { key: 'G' }, onShortcut: () => (isShowSelectDate = true) },
+      ];
+      if (onEscape) {
+        shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
+      }
+
+      if (assetInteraction.selectionActive) {
+        shortcuts.push(
+          { shortcut: { key: 'Delete' }, onShortcut: onDelete },
+          { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
+          { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
+          { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
+          { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
+        );
+      }
+
+      return shortcuts;
+    })(),
+  );
+</script>
+
+<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />
+
+{#if isShowDeleteConfirmation}
+  <DeleteAssetDialog
+    size={idsSelectedAssets.length}
+    onCancel={() => (isShowDeleteConfirmation = false)}
+    onConfirm={() => handlePromiseError(trashOrDelete(true))}
+  />
+{/if}
+
+{#if isShowSelectDate}
+  <ChangeDate
+    withDuration={false}
+    title="Navigate to Time"
+    initialDate={DateTime.now()}
+    timezoneInput={false}
+    onConfirm={async (dateString: AbsoluteResult | RelativeResult) => {
+      isShowSelectDate = false;
+      if (dateString.mode == 'absolute') {
+        const asset = await timelineManager.getClosestAssetToDate(
+          (DateTime.fromISO(dateString.date) as DateTime<true>).toObject(),
+        );
+        if (asset) {
+          void setFocusAsset(asset);
+        }
+      }
+    }}
+    onCancel={() => (isShowSelectDate = false)}
+  />
+{/if}
--- a/web/src/lib/components/timeline/actions/focus-actions.ts
+++ b/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) => {
-  const scrolled = scrollToAsset(asset);
+export const setFocusToAsset = async (
+  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',
-  interval: 'day' | 'month' | 'year' | 'asset',
+  direction: FocusDirection,
+  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()) {
--- a/web/src/lib/elements/Skeleton.svelte
+++ b/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"
-  >
-    {title}
-  </div>
-  <div
-    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
-    style:width="calc(100% - 20px)"
+    class="animate-pulse absolute h-full"
+    style:width="100%"
+    style:padding-left={stylePaddingHorizontalPx + 'px'}
+    style:padding-right={stylePaddingHorizontalPx + 'px'}
    data-skeleton="true"
  ></div>
-</div>
+</skeleton>

 <style>
  [data-skeleton] {
--- a/web/src/lib/managers/photostream-manager/PhotostreamManager.svelte.ts
+++ b/web/src/lib/managers/photostream-manager/PhotostreamManager.svelte.ts
@@ -0,0 +1,367 @@
+import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
+import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
+import { CancellableTask } from '$lib/utils/cancellable-task';
+import { debounce } from 'lodash-es';
+
+import type {
+  PhotostreamSegment,
+  SegmentIdentifier,
+} from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+import type {
+  AssetDescriptor,
+  TimelineAsset,
+  TimelineManagerLayoutOptions,
+  Viewport,
+} from '$lib/managers/timeline-manager/types';
+
+export abstract class PhotostreamManager {
+  isInitialized = $state(false);
+
+  topSectionHeight = $state(0);
+  bottomSectionHeight = $state(60);
+
+  assetCount = $derived.by(() => this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
+  timelineHeight = $derived.by(
+    () => this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight,
+  );
+
+  visibleWindow = $derived.by(() => ({
+    top: this.#scrollTop,
+    bottom: this.#scrollTop + this.viewportHeight,
+  }));
+
+  layoutOptions = $derived({
+    spacing: 2,
+    heightTolerance: 0.15,
+    rowHeight: this.rowHeight,
+    rowWidth: Math.floor(this.viewportWidth),
+  });
+
+  protected initTask = new CancellableTask(
+    () => (this.isInitialized = true),
+    () => (this.isInitialized = false),
+    () => void 0,
+  );
+
+  #viewportHeight = $state(0);
+  #viewportWidth = $state(0);
+  #scrollTop = $state(0);
+
+  #rowHeight = $state(235);
+  #headerHeight = $state(48);
+  #gap = $state(12);
+
+  #scrolling = $state(false);
+  #suspendTransitions = $state(false);
+  #resetScrolling = debounce(() => (this.#scrolling = false), 1000);
+  #resetSuspendTransitions = debounce(() => (this.suspendTransitions = false), 1000);
+  #updatingIntersections = false;
+
+  abstract get months(): PhotostreamSegment[];
+
+  setLayoutOptions({ headerHeight = 48, rowHeight = 235, gap = 12 }: TimelineManagerLayoutOptions) {
+    this.#setHeaderHeight(headerHeight);
+    this.#setGap(gap);
+    this.#setRowHeight(rowHeight);
+  }
+
+  #setHeaderHeight(value: number) {
+    if (this.#headerHeight == value) {
+      return false;
+    }
+    this.#headerHeight = value;
+    return true;
+  }
+
+  get headerHeight() {
+    return this.#headerHeight;
+  }
+
+  #setGap(value: number) {
+    if (this.#gap == value) {
+      return false;
+    }
+    this.#gap = value;
+    return true;
+  }
+
+  get gap() {
+    return this.#gap;
+  }
+
+  #setRowHeight(value: number) {
+    if (this.#rowHeight == value) {
+      return false;
+    }
+    this.#rowHeight = value;
+    return true;
+  }
+
+  get rowHeight() {
+    return this.#rowHeight;
+  }
+
+  set scrolling(value: boolean) {
+    this.#scrolling = value;
+    if (value) {
+      this.suspendTransitions = true;
+      this.#resetScrolling();
+    }
+  }
+
+  get scrolling() {
+    return this.#scrolling;
+  }
+
+  set suspendTransitions(value: boolean) {
+    this.#suspendTransitions = value;
+    if (value) {
+      this.#resetSuspendTransitions();
+    }
+  }
+
+  get suspendTransitions() {
+    return this.#suspendTransitions;
+  }
+
+  set viewportWidth(value: number) {
+    const changed = value !== this.#viewportWidth;
+    this.#viewportWidth = value;
+    this.suspendTransitions = true;
+    void this.updateViewportGeometry(changed);
+  }
+
+  get viewportWidth() {
+    return this.#viewportWidth;
+  }
+
+  set viewportHeight(value: number) {
+    this.#viewportHeight = value;
+    this.#suspendTransitions = true;
+    void this.updateViewportGeometry(false);
+  }
+
+  get viewportHeight() {
+    return this.#viewportHeight;
+  }
+
+  updateSlidingWindow(scrollTop: number) {
+    if (this.#scrollTop !== scrollTop) {
+      this.#scrollTop = scrollTop;
+      this.updateIntersections();
+    }
+  }
+
+  updateIntersections() {
+    if (this.#updatingIntersections || !this.isInitialized || this.visibleWindow.bottom === this.visibleWindow.top) {
+      return;
+    }
+    this.#updatingIntersections = true;
+
+    for (const month of this.months) {
+      updateIntersectionMonthGroup(this, month);
+    }
+
+    this.#updatingIntersections = false;
+  }
+
+  async init() {
+    this.isInitialized = false;
+    await this.initTask.execute(() => Promise.resolve(undefined), true);
+  }
+
+  public destroy() {
+    this.isInitialized = false;
+  }
+
+  async updateViewport(viewport: Viewport) {
+    if (viewport.height === 0 && viewport.width === 0) {
+      return;
+    }
+
+    if (this.viewportHeight === viewport.height && this.viewportWidth === viewport.width) {
+      return;
+    }
+
+    if (!this.initTask.executed) {
+      await (this.initTask.loading ? this.initTask.waitUntilCompletion() : this.init());
+    }
+
+    const changedWidth = viewport.width !== this.viewportWidth;
+    this.viewportHeight = viewport.height;
+    this.viewportWidth = viewport.width;
+    this.updateViewportGeometry(changedWidth);
+  }
+
+  protected updateViewportGeometry(changedWidth: boolean) {
+    if (!this.isInitialized) {
+      return;
+    }
+    if (this.viewportWidth === 0 || this.viewportHeight === 0) {
+      return;
+    }
+    for (const month of this.months) {
+      updateGeometry(this, month, { invalidateHeight: changedWidth });
+    }
+    this.updateIntersections();
+  }
+
+  async loadSegment(identifier: SegmentIdentifier, options?: { cancelable: boolean }): Promise<void> {
+    let cancelable = true;
+    if (options) {
+      cancelable = options.cancelable;
+    }
+    const segment = this.getSegmentByIdentifier(identifier);
+    if (!segment) {
+      return;
+    }
+
+    if (segment.loader?.executed) {
+      return;
+    }
+
+    const result = await segment.load(cancelable);
+    if (result === 'LOADED') {
+      updateIntersectionMonthGroup(this, segment);
+    }
+  }
+
+  getSegmentByIdentifier(identifier: SegmentIdentifier) {
+    return this.months.find((segment) => identifier.matches(segment));
+  }
+
+  findSegmentForAssetId(assetId: string): Promise<PhotostreamSegment | undefined> {
+    for (const month of this.months) {
+      const asset = month.assets.find((asset) => asset.id === assetId);
+      if (asset) {
+        return Promise.resolve(month);
+      }
+    }
+    return Promise.resolve(void 0);
+  }
+
+  getMaxScrollPercent() {
+    const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
+    return (totalHeight - this.viewportHeight) / totalHeight;
+  }
+
+  getMaxScroll() {
+    return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
+  }
+
+  retrieveLoadedRange(start: AssetDescriptor, end: AssetDescriptor): TimelineAsset[] {
+    const range: TimelineAsset[] = [];
+    let collecting = false;
+
+    for (const month of this.months) {
+      if (collecting && !month.isLoaded) {
+        // if there are any unloaded months in the range, return empty []
+        return [];
+      }
+      for (const asset of month.assets) {
+        if (asset.id === start.id) {
+          collecting = true;
+        }
+        if (collecting) {
+          range.push(asset);
+        }
+        if (asset.id === end.id) {
+          return range;
+        }
+      }
+    }
+    return range;
+  }
+
+  retrieveRange(start: AssetDescriptor, end: AssetDescriptor): Promise<TimelineAsset[]> {
+    return Promise.resolve(this.retrieveLoadedRange(start, end));
+  }
+
+  removeAssets(assetIds: string[]): string[] {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const assetIdSet = new Set(assetIds);
+    const removedIds: string[] = [];
+
+    for (const segment of this.months) {
+      // Remove assets from each segment using splice
+      for (let i = segment.viewerAssets.length - 1; i >= 0; i--) {
+        if (assetIdSet.has(segment.viewerAssets[i].asset.id)) {
+          removedIds.push(segment.viewerAssets[i].asset.id);
+          segment.viewerAssets.splice(i, 1);
+        }
+      }
+
+      // Update segment layout after removing assets
+      if (removedIds.length > 0) {
+        segment.layout();
+      }
+    }
+
+    // Update viewport geometry after removals
+    if (removedIds.length > 0) {
+      this.updateViewportGeometry(false);
+    }
+
+    // Return the IDs that were not found/removed
+    return assetIds.filter((id) => !removedIds.includes(id));
+  }
+
+  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];
+  }
+}
--- a/web/src/lib/managers/photostream-manager/PhotostreamSegment.svelte.ts
+++ b/web/src/lib/managers/photostream-manager/PhotostreamSegment.svelte.ts
@@ -0,0 +1,175 @@
+import { CancellableTask } from '$lib/utils/cancellable-task';
+import { handleError } from '$lib/utils/handle-error';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+import { getTestHook } from '$lib/managers/photostream-manager/TestHooks.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+import { getJustifiedLayoutFromAssets, getPosition } from '$lib/utils/layout-utils';
+
+export type SegmentIdentifier = {
+  matches(segment: PhotostreamSegment): boolean;
+};
+export abstract class PhotostreamSegment {
+  #intersecting = $state(false);
+  actuallyIntersecting = $state(false);
+  #isLoaded = $state(false);
+
+  #height = $state(0);
+  #top = $state(0);
+  #assets = $derived.by(() => this.viewerAssets.map((viewerAsset) => viewerAsset.asset));
+
+  initialCount = $state(0);
+
+  assetsCount = $derived.by(() => (this.isLoaded ? this.viewerAssets.length : this.initialCount));
+  loader = new CancellableTask(
+    () => this.markLoaded(),
+    () => this.markCanceled,
+    () => this.handleLoadError,
+  );
+  isHeightActual = $state(false);
+
+  constructor() {
+    getTestHook()?.hookSegment(this);
+  }
+
+  abstract get timelineManager(): PhotostreamManager;
+
+  abstract get identifier(): SegmentIdentifier;
+
+  abstract get id(): string;
+
+  get isLoaded() {
+    return this.#isLoaded;
+  }
+
+  protected markLoaded() {
+    this.#isLoaded = true;
+  }
+
+  protected markCanceled() {
+    this.#isLoaded = false;
+  }
+
+  set intersecting(newValue: boolean) {
+    const old = this.#intersecting;
+    if (old === newValue) {
+      return;
+    }
+    this.#intersecting = newValue;
+    if (newValue) {
+      void this.load(true);
+    } else {
+      this.cancel();
+    }
+  }
+
+  get intersecting() {
+    return this.#intersecting;
+  }
+
+  async load(cancelable: boolean): Promise<'DONE' | 'WAITED' | 'CANCELED' | 'LOADED' | 'ERRORED'> {
+    const executionStatus = await this.loader.execute(async (signal: AbortSignal) => {
+      await this.fetch(signal);
+    }, cancelable);
+    if (executionStatus === 'LOADED') {
+      this.layout();
+    }
+    return executionStatus;
+  }
+
+  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;
+  }
+
+  abstract get viewerAssets(): ViewerAsset[];
+
+  set height(height: number) {
+    if (this.#height === height) {
+      return;
+    }
+
+    let needsIntersectionUpdate = false;
+    const timelineManager = this.timelineManager;
+    const index = timelineManager.months.indexOf(this);
+    const heightDelta = height - this.#height;
+    this.#height = height;
+    const prevMonthGroup = timelineManager.months[index - 1];
+    if (prevMonthGroup) {
+      const newTop = prevMonthGroup.#top + prevMonthGroup.#height;
+      if (this.#top !== newTop) {
+        this.#top = newTop;
+      }
+    }
+    if (heightDelta === 0) {
+      return;
+    }
+
+    for (let cursor = index + 1; cursor < timelineManager.months.length; cursor++) {
+      const monthGroup = timelineManager.months[cursor];
+      const newTop = monthGroup.#top + heightDelta;
+      if (monthGroup.#top !== newTop) {
+        monthGroup.#top = newTop;
+        needsIntersectionUpdate = true;
+      }
+    }
+
+    if (needsIntersectionUpdate) {
+      timelineManager.updateIntersections();
+    }
+  }
+
+  get height() {
+    return this.#height;
+  }
+
+  get top(): number {
+    return this.#top + this.timelineManager.topSectionHeight;
+  }
+
+  protected handleLoadError(error: unknown) {
+    const _$t = get(t);
+    handleError(error, _$t('errors.failed_to_load_assets'));
+  }
+
+  cancel() {
+    this.loader?.cancel();
+  }
+
+  layout(): void {
+    const timelineAssets = this.viewerAssets.map((viewerAsset) => viewerAsset.asset);
+    const layoutOptions = this.timelineManager.layoutOptions;
+    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;
+    }
+  }
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    this.intersecting = intersecting;
+    this.actuallyIntersecting = actuallyIntersecting;
+  }
+
+  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;
+  }
+}
--- a/web/src/lib/managers/photostream-manager/TestHooks.svelte.ts
+++ b/web/src/lib/managers/photostream-manager/TestHooks.svelte.ts
@@ -0,0 +1,11 @@
+import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+
+let testHooks: { hookSegment: (segment: PhotostreamSegment) => void } | undefined = undefined;
+
+export function setTestHook(hooks: { hookSegment: (segment: PhotostreamSegment) => void }) {
+  testHooks = hooks;
+}
+
+export function getTestHook() {
+  return testHooks;
+}
--- a/web/src/lib/managers/searchresults-manager/SearchResultsManager.svelte.ts
+++ b/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];
+  }
+}
--- a/web/src/lib/managers/searchresults-manager/SearchResultsSegment.svelte.ts
+++ b/web/src/lib/managers/searchresults-manager/SearchResultsSegment.svelte.ts
@@ -0,0 +1,109 @@
+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 { 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();
+  }
+
+  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();
+    }
+  }
+}
--- a/web/src/lib/managers/simple-photostream-manager/SimplePhotostreamManager.ts
+++ b/web/src/lib/managers/simple-photostream-manager/SimplePhotostreamManager.ts
@@ -0,0 +1,50 @@
+import { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+import {
+  PhotostreamSegment,
+  type SegmentIdentifier,
+} from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+import { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+
+function createSimpleSegment(manager: SimplePhotostreamManager, assets: TimelineAsset[]) {
+  class SimpleSegment extends PhotostreamSegment {
+    #viewerAssets = $derived(assets.map((asset) => new ViewerAsset(this, asset)));
+    #identifier = {
+      matches: () => true,
+    };
+    get timelineManager(): PhotostreamManager {
+      return manager;
+    }
+    get identifier(): SegmentIdentifier {
+      return this.#identifier;
+    }
+    get id(): string {
+      return 'one';
+    }
+    protected fetch(): Promise<void> {
+      return Promise.resolve();
+    }
+    get viewerAssets(): ViewerAsset[] {
+      return this.#viewerAssets;
+    }
+  }
+  return new SimpleSegment();
+}
+
+export class SimplePhotostreamManager extends PhotostreamManager {
+  #assets: TimelineAsset[] = $state([]);
+  #segment: PhotostreamSegment;
+
+  constructor() {
+    super();
+    this.#segment = createSimpleSegment(this, this.#assets);
+  }
+
+  set assets(assets: TimelineAsset[]) {
+    this.#assets = assets;
+  }
+
+  get months(): PhotostreamSegment[] {
+    return [this.#segment];
+  }
+}
--- a/web/src/lib/managers/timeline-manager/day-group.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/day-group.svelte.ts
@@ -13,6 +13,7 @@ export class DayGroup {
  readonly monthGroup: MonthGroup;
  readonly index: number;
  readonly groupTitle: string;
+  readonly groupTitleFull: string;
  readonly day: number;
  viewerAssets: ViewerAsset[] = $state([]);

@@ -26,11 +27,12 @@ export class DayGroup {
  #col = $state(0);
  #deferredLayout = false;

-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
+  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: string) {
    this.index = index;
    this.monthGroup = monthGroup;
    this.day = day;
    this.groupTitle = groupTitle;
+    this.groupTitleFull = groupTitleFull;
  }

  get top() {
--- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
@@ -1,27 +1,23 @@
+import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
 import { TUNABLES } from '$lib/utils/tunables';
-import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';

 const {
  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
 } = TUNABLES;

-export function updateIntersectionMonthGroup(timelineManager: TimelineManager, month: MonthGroup) {
-  const actuallyIntersecting = calculateMonthGroupIntersecting(timelineManager, month, 0, 0);
+export function updateIntersectionMonthGroup(timelineManager: PhotostreamManager, month: PhotostreamSegment) {
+  const actuallyIntersecting = calculateSegmentIntersecting(timelineManager, month, 0, 0);
  let preIntersecting = false;
  if (!actuallyIntersecting) {
-    preIntersecting = calculateMonthGroupIntersecting(
+    preIntersecting = calculateSegmentIntersecting(
      timelineManager,
      month,
      INTERSECTION_EXPAND_TOP,
      INTERSECTION_EXPAND_BOTTOM,
    );
  }
-  month.intersecting = actuallyIntersecting || preIntersecting;
-  month.actuallyIntersecting = actuallyIntersecting;
-  if (preIntersecting || actuallyIntersecting) {
-    timelineManager.clearDeferredLayout(month);
-  }
+  month.updateIntersection({ intersecting: actuallyIntersecting || preIntersecting, actuallyIntersecting });
 }

 /**
@@ -40,9 +36,9 @@ export function isIntersecting(regionTop: number, regionBottom: number, windowTo
  );
 }

-export function calculateMonthGroupIntersecting(
-  timelineManager: TimelineManager,
-  monthGroup: MonthGroup,
+export function calculateSegmentIntersecting(
+  timelineManager: PhotostreamManager,
+  monthGroup: PhotostreamSegment,
  expandTop: number,
  expandBottom: number,
 ) {
@@ -55,22 +51,17 @@ export function calculateMonthGroupIntersecting(
 }

 /**
- * Calculate intersection for viewer assets with additional parameters like header height and scroll compensation
+ * Calculate intersection for viewer assets with additional parameters like header height
 */
 export function calculateViewerAssetIntersecting(
-  timelineManager: TimelineManager,
+  timelineManager: PhotostreamManager,
  positionTop: number,
  positionHeight: number,
  expandTop: number = INTERSECTION_EXPAND_TOP,
  expandBottom: number = INTERSECTION_EXPAND_BOTTOM,
 ) {
-  const scrollCompensationHeightDelta = timelineManager.scrollCompensation?.heightDelta ?? 0;
-
-  const topWindow =
-    timelineManager.visibleWindow.top - timelineManager.headerHeight - expandTop + scrollCompensationHeightDelta;
-  const bottomWindow =
-    timelineManager.visibleWindow.bottom + timelineManager.headerHeight + expandBottom + scrollCompensationHeightDelta;
-
+  const topWindow = timelineManager.visibleWindow.top - timelineManager.headerHeight - expandTop;
+  const bottomWindow = timelineManager.visibleWindow.bottom + timelineManager.headerHeight + expandBottom;
  const positionBottom = positionTop + positionHeight;

  return isIntersecting(positionTop, positionBottom, topWindow, bottomWindow);
--- a/web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts
@@ -1,8 +1,14 @@
+import type { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
+import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
 import type { UpdateGeometryOptions } from '../types';

-export function updateGeometry(timelineManager: TimelineManager, month: MonthGroup, options: UpdateGeometryOptions) {
+export function updateGeometry(
+  timelineManager: PhotostreamManager,
+  month: PhotostreamSegment,
+  options: UpdateGeometryOptions,
+) {
  const { invalidateHeight, noDefer = false } = options;
  if (invalidateHeight) {
    month.isHeightActual = false;
@@ -17,7 +23,7 @@ export function updateGeometry(timelineManager: TimelineManager, month: MonthGro
    }
    return;
  }
-  layoutMonthGroup(timelineManager, month, noDefer);
+  month.layout(noDefer);
 }

 export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthGroup, noDefer: boolean = false) {
@@ -28,7 +34,7 @@ export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthG
  let dayGroupRow = 0;
  let dayGroupCol = 0;

-  const options = timelineManager.createLayoutOptions();
+  const options = timelineManager.layoutOptions;
  for (const dayGroup of month.dayGroups) {
    dayGroup.layout(options, noDefer);

--- a/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
@@ -25,8 +25,7 @@ export function addAssetsToMonthGroups(
    let month = getMonthGroupByDate(timelineManager, asset.localDateTime);

    if (!month) {
-      month = new MonthGroup(timelineManager, asset.localDateTime, 1, options.order);
-      month.isLoaded = true;
+      month = new MonthGroup(timelineManager, asset.localDateTime, 1, true, options.order);
      timelineManager.months.push(month);
    }

--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
@@ -143,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;
+}
--- a/web/src/lib/managers/timeline-manager/month-group.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/month-group.svelte.ts
@@ -1,22 +1,26 @@
 import { AssetOrder, type TimeBucketAssetResponseDto } from '@immich/sdk';

-import { CancellableTask } from '$lib/utils/cancellable-task';
-import { handleError } from '$lib/utils/handle-error';
 import {
  formatGroupTitle,
+  formatGroupTitleFull,
  formatMonthGroupTitle,
  fromTimelinePlainDate,
  fromTimelinePlainDateTime,
  fromTimelinePlainYearMonth,
+  getSegmentIdentifier,
  getTimes,
  setDifference,
  type TimelineDateTime,
  type TimelineYearMonth,
 } from '$lib/utils/timeline-util';

-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
+import { layoutMonthGroup, updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
+import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';

+import {
+  PhotostreamSegment,
+  type SegmentIdentifier,
+} from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
 import { SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { GroupInsertionCache } from './group-insertion-cache.svelte';
@@ -24,71 +28,53 @@ import type { TimelineManager } from './timeline-manager.svelte';
 import type { AssetDescriptor, AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';

-export class MonthGroup {
-  #intersecting: boolean = $state(false);
-  actuallyIntersecting: boolean = $state(false);
-  isLoaded: boolean = $state(false);
+export class MonthGroup extends PhotostreamSegment {
  dayGroups: DayGroup[] = $state([]);
-  readonly timelineManager: TimelineManager;

-  #height: number = $state(0);
-  #top: number = $state(0);
-
-  #initialCount: number = 0;
  #sortOrder: AssetOrder = AssetOrder.Desc;
-  percent: number = $state(0);
-
-  assetsCount: number = $derived(
-    this.isLoaded
-      ? this.dayGroups.reduce((accumulator, g) => accumulator + g.viewerAssets.length, 0)
-      : this.#initialCount,
-  );
-  loader: CancellableTask | undefined;
-  isHeightActual: boolean = $state(false);
+  #yearMonth: TimelineYearMonth;
+  #identifier: SegmentIdentifier;
+  #timelineManager: TimelineManager;

  readonly monthGroupTitle: string;
-  readonly yearMonth: TimelineYearMonth;

  constructor(
-    store: TimelineManager,
+    timelineManager: TimelineManager,
    yearMonth: TimelineYearMonth,
    initialCount: number,
+    loaded: boolean,
    order: AssetOrder = AssetOrder.Desc,
  ) {
-    this.timelineManager = store;
-    this.#initialCount = initialCount;
+    super();
+    this.initialCount = initialCount;
+    this.#yearMonth = yearMonth;
+    this.#identifier = getSegmentIdentifier(yearMonth);
+    this.#timelineManager = timelineManager;
    this.#sortOrder = order;
-
-    this.yearMonth = yearMonth;
    this.monthGroupTitle = formatMonthGroupTitle(fromTimelinePlainYearMonth(yearMonth));
-
-    this.loader = new CancellableTask(
-      () => {
-        this.isLoaded = true;
-      },
-      () => {
-        this.dayGroups = [];
-        this.isLoaded = false;
-      },
-      this.#handleLoadError,
-    );
-  }
-
-  set intersecting(newValue: boolean) {
-    const old = this.#intersecting;
-    if (old === newValue) {
-      return;
-    }
-    this.#intersecting = newValue;
-    if (newValue) {
-      void this.timelineManager.loadMonthGroup(this.yearMonth);
-    } else {
-      this.cancel();
+    if (loaded) {
+      this.markLoaded();
    }
  }

-  get intersecting() {
-    return this.#intersecting;
+  get identifier() {
+    return this.#identifier;
+  }
+
+  get timelineManager() {
+    return this.#timelineManager;
+  }
+
+  get yearMonth() {
+    return this.#yearMonth;
+  }
+
+  fetch(signal: AbortSignal): Promise<void> {
+    return loadFromTimeBuckets(this.timelineManager, this, this.timelineManager.options, signal);
+  }
+
+  layout(noDefer?: boolean) {
+    layoutMonthGroup(this.timelineManager, this, noDefer);
  }

  get lastDayGroup() {
@@ -99,9 +85,9 @@ export class MonthGroup {
    return this.dayGroups[0]?.getFirstAsset();
  }

-  getAssets() {
+  get viewerAssets() {
    // eslint-disable-next-line unicorn/no-array-reduce
-    return this.dayGroups.reduce((accumulator: TimelineAsset[], g: DayGroup) => accumulator.concat(g.getAssets()), []);
+    return this.dayGroups.reduce((accumulator: ViewerAsset[], g: DayGroup) => accumulator.concat(g.viewerAssets), []);
  }

  sortDayGroups() {
@@ -222,7 +208,8 @@ export class MonthGroup {
      addContext.setDayGroup(dayGroup, localDateTime);
    } else {
      const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
+      const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
+      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
      this.dayGroups.push(dayGroup);
      addContext.setDayGroup(dayGroup, localDateTime);
      addContext.newDayGroups.add(dayGroup);
@@ -242,67 +229,15 @@ export class MonthGroup {
    return this.getRandomDayGroup()?.getRandomAsset()?.asset;
  }

+  get id() {
+    return this.viewId;
+  }
+
  get viewId() {
    const { year, month } = this.yearMonth;
    return year + '-' + month;
  }

-  set height(height: number) {
-    if (this.#height === height) {
-      return;
-    }
-    const { timelineManager: store, percent } = this;
-    const index = store.months.indexOf(this);
-    const heightDelta = height - this.#height;
-    this.#height = height;
-    const prevMonthGroup = store.months[index - 1];
-    if (prevMonthGroup) {
-      const newTop = prevMonthGroup.#top + prevMonthGroup.#height;
-      if (this.#top !== newTop) {
-        this.#top = newTop;
-      }
-    }
-    for (let cursor = index + 1; cursor < store.months.length; cursor++) {
-      const monthGroup = this.timelineManager.months[cursor];
-      const newTop = monthGroup.#top + heightDelta;
-      if (monthGroup.#top !== newTop) {
-        monthGroup.#top = newTop;
-      }
-    }
-    if (store.topIntersectingMonthGroup) {
-      const currentIndex = store.months.indexOf(store.topIntersectingMonthGroup);
-      if (currentIndex > 0) {
-        if (index < currentIndex) {
-          store.scrollCompensation = {
-            heightDelta,
-            scrollTop: undefined,
-            monthGroup: this,
-          };
-        } else if (percent > 0) {
-          const top = this.top + height * percent;
-          store.scrollCompensation = {
-            heightDelta: undefined,
-            scrollTop: top,
-            monthGroup: this,
-          };
-        }
-      }
-    }
-  }
-
-  get height() {
-    return this.#height;
-  }
-
-  get top(): number {
-    return this.#top + this.timelineManager.topSectionHeight;
-  }
-
-  #handleLoadError(error: unknown) {
-    const _$t = get(t);
-    handleError(error, _$t('errors.failed_to_load_assets'));
-  }
-
  findDayGroupForAsset(asset: TimelineAsset) {
    for (const group of this.dayGroups) {
      if (group.viewerAssets.some((viewerAsset) => viewerAsset.id === asset.id)) {
@@ -316,7 +251,7 @@ export class MonthGroup {
  }

  findAssetAbsolutePosition(assetId: string) {
-    this.timelineManager.clearDeferredLayout(this);
+    this.#clearDeferredLayout();
    for (const group of this.dayGroups) {
      const viewerAsset = group.viewerAssets.find((viewAsset) => viewAsset.id === assetId);
      if (viewerAsset) {
@@ -374,4 +309,22 @@ export class MonthGroup {
  cancel() {
    this.loader?.cancel();
  }
+
+  #clearDeferredLayout() {
+    const hasDeferred = this.dayGroups.some((group) => group.deferredLayout);
+    if (hasDeferred) {
+      updateGeometry(this.timelineManager, this, { invalidateHeight: true, noDefer: true });
+      for (const group of this.dayGroups) {
+        group.deferredLayout = false;
+      }
+    }
+  }
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    this.intersecting = intersecting;
+    this.actuallyIntersecting = actuallyIntersecting;
+    if (intersecting) {
+      this.#clearDeferredLayout();
+    }
+  }
 }
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -1,9 +1,15 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
+import { setTestHook } from '$lib/managers/photostream-manager/TestHooks.svelte';
+import {
+  findMonthGroupForAsset,
+  getMonthGroupByDate,
+} from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { AbortError } from '$lib/utils';
-import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
+import { fromISODateTimeUTCToObject, getSegmentIdentifier } from '$lib/utils/timeline-util';
 import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
+import type { MockedFunction } from 'vitest';
 import { TimelineManager } from './timeline-manager.svelte';
 import type { TimelineAsset } from './types';

@@ -54,8 +60,16 @@ describe('TimelineManager', () => {
      Object.entries(bucketAssets).map(([key, assets]) => [key, toResponseDto(...assets)]),
    );

+    const spys: { segment: PhotostreamSegment; cancelSpy: MockedFunction<() => void> }[] = [];
    beforeEach(async () => {
      timelineManager = new TimelineManager();
+
+      setTestHook({
+        hookSegment: (segment) => {
+          spys.push({ segment, cancelSpy: vi.spyOn(segment, 'cancel') as MockedFunction<() => void> });
+        },
+      });
+
      sdkMock.getTimeBuckets.mockResolvedValue([
        { count: 1, timeBucket: '2024-03-01' },
        { count: 100, timeBucket: '2024-02-01' },
@@ -68,7 +82,7 @@ describe('TimelineManager', () => {

    it('should load months in viewport', () => {
      expect(sdkMock.getTimeBuckets).toBeCalledTimes(1);
-      expect(sdkMock.getTimeBucket).toHaveBeenCalledTimes(2);
+      expect(spys[2].cancelSpy).toHaveBeenCalled();
    });

    it('calculates month height', () => {
@@ -82,17 +96,17 @@ describe('TimelineManager', () => {
        expect.arrayContaining([
          expect.objectContaining({ year: 2024, month: 3, height: 165.5 }),
          expect.objectContaining({ year: 2024, month: 2, height: 11_996 }),
-          expect.objectContaining({ year: 2024, month: 1, height: 286 }),
+          expect.objectContaining({ year: 2024, month: 1, height: 48 }),
        ]),
      );
    });

    it('calculates timeline height', () => {
-      expect(timelineManager.timelineHeight).toBe(12_447.5);
+      expect(timelineManager.timelineHeight).toBe(12_209.5);
    });
  });

-  describe('loadMonthGroup', () => {
+  describe('loadSegment', () => {
    let timelineManager: TimelineManager;
    const bucketAssets: Record<string, TimelineAsset[]> = {
      '2024-01-03T00:00:00.000Z': timelineAssetFactory.buildList(1).map((asset) =>
@@ -128,48 +142,48 @@ describe('TimelineManager', () => {
    });

    it('loads a month', async () => {
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(0);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(3);
    });

    it('ignores invalid months', async () => {
-      await timelineManager.loadMonthGroup({ year: 2023, month: 1 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2023, month: 1 }));
      expect(sdkMock.getTimeBucket).toBeCalledTimes(0);
    });

    it('cancels month loading', async () => {
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
-      void timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      void timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
      const abortSpy = vi.spyOn(month!.loader!.cancelToken!, 'abort');
      month?.cancel();
      expect(abortSpy).toBeCalledTimes(1);
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(3);
    });

    it('prevents loading months multiple times', async () => {
      await Promise.all([
-        timelineManager.loadMonthGroup({ year: 2024, month: 1 }),
-        timelineManager.loadMonthGroup({ year: 2024, month: 1 }),
+        timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 })),
+        timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 })),
      ]);
      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);

-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
    });

    it('allows loading a canceled month', async () => {
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
-      const loadPromise = timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      const loadPromise = timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));

      month.cancel();
      await loadPromise;
-      expect(month?.getAssets().length).toEqual(0);
+      expect(month?.assets.length).toEqual(0);

-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(month!.getAssets().length).toEqual(3);
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      expect(month!.assets.length).toEqual(3);
    });
  });

@@ -198,7 +212,7 @@ describe('TimelineManager', () => {

      expect(timelineManager.months.length).toEqual(1);
      expect(timelineManager.assetCount).toEqual(1);
-      expect(timelineManager.months[0].getAssets().length).toEqual(1);
+      expect(timelineManager.months[0].assets.length).toEqual(1);
      expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
      expect(timelineManager.months[0].yearMonth.month).toEqual(1);
      expect(timelineManager.months[0].getFirstAsset().id).toEqual(asset.id);
@@ -215,7 +229,7 @@ describe('TimelineManager', () => {

      expect(timelineManager.months.length).toEqual(1);
      expect(timelineManager.assetCount).toEqual(2);
-      expect(timelineManager.months[0].getAssets().length).toEqual(2);
+      expect(timelineManager.months[0].assets.length).toEqual(2);
      expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
      expect(timelineManager.months[0].yearMonth.month).toEqual(1);
    });
@@ -240,10 +254,10 @@ describe('TimelineManager', () => {

      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
      expect(month).not.toBeNull();
-      expect(month?.getAssets().length).toEqual(3);
-      expect(month?.getAssets()[0].id).toEqual(assetOne.id);
-      expect(month?.getAssets()[1].id).toEqual(assetThree.id);
-      expect(month?.getAssets()[2].id).toEqual(assetTwo.id);
+      expect(month?.assets.length).toEqual(3);
+      expect(month?.assets[0].id).toEqual(assetOne.id);
+      expect(month?.assets[1].id).toEqual(assetThree.id);
+      expect(month?.assets[2].id).toEqual(assetTwo.id);
    });

    it('orders months by descending date', () => {
@@ -341,14 +355,14 @@ describe('TimelineManager', () => {
      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 })?.getAssets().length).toEqual(1);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(1);

      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 })?.getAssets().length).toEqual(0);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.assets.length).toEqual(0);
      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })?.getAssets().length).toEqual(1);
+      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })?.assets.length).toEqual(1);
    });
  });

@@ -374,7 +388,7 @@ describe('TimelineManager', () => {

      expect(timelineManager.assetCount).toEqual(2);
      expect(timelineManager.months.length).toEqual(1);
-      expect(timelineManager.months[0].getAssets().length).toEqual(2);
+      expect(timelineManager.months[0].assets.length).toEqual(2);
    });

    it('removes asset from month', () => {
@@ -388,7 +402,7 @@ describe('TimelineManager', () => {

      expect(timelineManager.assetCount).toEqual(1);
      expect(timelineManager.months.length).toEqual(1);
-      expect(timelineManager.months[0].getAssets().length).toEqual(1);
+      expect(timelineManager.months[0].assets.length).toEqual(1);
    });

    it('does not remove month when empty', () => {
@@ -477,45 +491,45 @@ describe('TimelineManager', () => {
    });

    it('returns previous assetId', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });

-      const a = month!.getAssets()[0];
-      const b = month!.getAssets()[1];
+      const a = month!.assets[0];
+      const b = month!.assets[1];
      const previous = await timelineManager.getLaterAsset(b);
      expect(previous).toEqual(a);
    });

    it('returns previous assetId spanning multiple months', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 2 }));
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 3 }));

      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
      const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
-      const a = month!.getAssets()[0];
-      const b = previousMonth!.getAssets()[0];
+      const a = month!.assets[0];
+      const b = previousMonth!.assets[0];
      const previous = await timelineManager.getLaterAsset(a);
      expect(previous).toEqual(b);
    });

    it('loads previous month', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 2 }));
      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
      const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
      const a = month!.getFirstAsset();
      const b = previousMonth!.getFirstAsset();
-      const loadMonthGroupSpy = vi.spyOn(month!.loader!, 'execute');
+      const loadSegmentSpy = vi.spyOn(month!.loader!, 'execute');
      const previousMonthSpy = vi.spyOn(previousMonth!.loader!, 'execute');
      const previous = await timelineManager.getLaterAsset(a);
      expect(previous).toEqual(b);
-      expect(loadMonthGroupSpy).toBeCalledTimes(0);
+      expect(loadSegmentSpy).toBeCalledTimes(0);
      expect(previousMonthSpy).toBeCalledTimes(0);
    });

    it('skips removed assets', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 1 }));
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 2 }));
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 3 }));

      const [assetOne, assetTwo, assetThree] = await getAssets(timelineManager);
      timelineManager.removeAssets([assetTwo.id]);
@@ -523,7 +537,7 @@ describe('TimelineManager', () => {
    });

    it('returns null when no more assets', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadSegment(getSegmentIdentifier({ year: 2024, month: 3 }));
      expect(await timelineManager.getLaterAsset(timelineManager.months[0].getFirstAsset())).toBeUndefined();
    });
  });
@@ -556,10 +570,10 @@ describe('TimelineManager', () => {
      );
      timelineManager.addAssets([assetOne, assetTwo]);

-      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.month).toEqual(2);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
+      expect(findMonthGroupForAsset(timelineManager, assetTwo.id)?.monthGroup.yearMonth.year).toEqual(2024);
+      expect(findMonthGroupForAsset(timelineManager, assetTwo.id)?.monthGroup.yearMonth.month).toEqual(2);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.year).toEqual(2024);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.month).toEqual(1);
    });

    it('ignores removed months', () => {
@@ -576,8 +590,8 @@ describe('TimelineManager', () => {
      timelineManager.addAssets([assetOne, assetTwo]);

      timelineManager.removeAssets([assetTwo.id]);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.year).toEqual(2024);
+      expect(findMonthGroupForAsset(timelineManager, assetOne.id)?.monthGroup.yearMonth.month).toEqual(1);
    });
  });
 });
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -3,14 +3,17 @@ import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
 import { authManager } from '$lib/managers/auth-manager.svelte';

 import { CancellableTask } from '$lib/utils/cancellable-task';
-import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
+import {
+  getSegmentIdentifier,
+  toTimelineAsset,
+  type TimelineDateTime,
+  type TimelineYearMonth,
+} from '$lib/utils/timeline-util';

-import { clamp, debounce, isEqual } from 'lodash-es';
+import { isEqual } from 'lodash-es';
 import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';

-import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
-import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
-import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
+import { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
 import {
  addAssetsToMonthGroups,
  runAssetOperation,
@@ -32,29 +35,14 @@ import type {
  Direction,
  ScrubberMonth,
  TimelineAsset,
-  TimelineManagerLayoutOptions,
  TimelineManagerOptions,
-  Viewport,
 } from './types';

-export class TimelineManager {
-  isInitialized = $state(false);
-  months: MonthGroup[] = $state([]);
-  topSectionHeight = $state(0);
-  timelineHeight = $derived(this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight);
-  assetCount = $derived(this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
-
+export class TimelineManager extends PhotostreamManager {
  albumAssets: Set<string> = new SvelteSet();
-
  scrubberMonths: ScrubberMonth[] = $state([]);
  scrubberTimelineHeight: number = $state(0);
-
-  topIntersectingMonthGroup: MonthGroup | undefined = $state();
-
-  visibleWindow = $derived.by(() => ({
-    top: this.#scrollTop,
-    bottom: this.#scrollTop + this.viewportHeight,
-  }));
+  #months: MonthGroup[] = $state([]);

  initTask = new CancellableTask(
    () => {
@@ -72,121 +60,16 @@ export class TimelineManager {
  );

  static #INIT_OPTIONS = {};
-  #viewportHeight = $state(0);
-  #viewportWidth = $state(0);
-  #scrollTop = $state(0);
+
  #websocketSupport: WebsocketSupport | undefined;
-
-  #rowHeight = $state(235);
-  #headerHeight = $state(48);
-  #gap = $state(12);
-
  #options: TimelineManagerOptions = TimelineManager.#INIT_OPTIONS;

-  #scrolling = $state(false);
-  #suspendTransitions = $state(false);
-  #resetScrolling = debounce(() => (this.#scrolling = false), 1000);
-  #resetSuspendTransitions = debounce(() => (this.suspendTransitions = false), 1000);
-  scrollCompensation: {
-    heightDelta: number | undefined;
-    scrollTop: number | undefined;
-    monthGroup: MonthGroup | undefined;
-  } = $state({
-    heightDelta: 0,
-    scrollTop: 0,
-    monthGroup: undefined,
-  });
-
-  constructor() {}
-
-  setLayoutOptions({ headerHeight = 48, rowHeight = 235, gap = 12 }: TimelineManagerLayoutOptions) {
-    let changed = false;
-    changed ||= this.#setHeaderHeight(headerHeight);
-    changed ||= this.#setGap(gap);
-    changed ||= this.#setRowHeight(rowHeight);
-    if (changed) {
-      this.refreshLayout();
-    }
+  get months() {
+    return this.#months;
  }

-  #setHeaderHeight(value: number) {
-    if (this.#headerHeight == value) {
-      return false;
-    }
-    this.#headerHeight = value;
-    return true;
-  }
-
-  get headerHeight() {
-    return this.#headerHeight;
-  }
-
-  #setGap(value: number) {
-    if (this.#gap == value) {
-      return false;
-    }
-    this.#gap = value;
-    return true;
-  }
-
-  get gap() {
-    return this.#gap;
-  }
-
-  #setRowHeight(value: number) {
-    if (this.#rowHeight == value) {
-      return false;
-    }
-    this.#rowHeight = value;
-    return true;
-  }
-
-  get rowHeight() {
-    return this.#rowHeight;
-  }
-
-  set scrolling(value: boolean) {
-    this.#scrolling = value;
-    if (value) {
-      this.suspendTransitions = true;
-      this.#resetScrolling();
-    }
-  }
-
-  get scrolling() {
-    return this.#scrolling;
-  }
-
-  set suspendTransitions(value: boolean) {
-    this.#suspendTransitions = value;
-    if (value) {
-      this.#resetSuspendTransitions();
-    }
-  }
-
-  get suspendTransitions() {
-    return this.#suspendTransitions;
-  }
-
-  set viewportWidth(value: number) {
-    const changed = value !== this.#viewportWidth;
-    this.#viewportWidth = value;
-    this.suspendTransitions = true;
-    void this.#updateViewportGeometry(changed);
-  }
-
-  get viewportWidth() {
-    return this.#viewportWidth;
-  }
-
-  set viewportHeight(value: number) {
-    this.#viewportHeight = value;
-    this.#suspendTransitions = true;
-    void this.#updateViewportGeometry(false);
-  }
-
-  get viewportHeight() {
-    return this.#viewportHeight;
+  get options() {
+    return this.#options;
  }

  async *assetsIterator(options?: {
@@ -198,7 +81,7 @@ export class TimelineManager {
    const direction = options?.direction ?? 'earlier';
    let { startDayGroup, startAsset } = options ?? {};
    for (const monthGroup of this.monthGroupIterator({ direction, startMonthGroup: options?.startMonthGroup })) {
-      await this.loadMonthGroup(monthGroup.yearMonth, { cancelable: false });
+      await this.loadSegment(monthGroup.identifier, { cancelable: false });
      yield* monthGroup.assetsIterator({ startDayGroup, startAsset, direction });
      startDayGroup = startAsset = undefined;
    }
@@ -234,75 +117,24 @@ export class TimelineManager {
    this.#websocketSupport = undefined;
  }

-  updateSlidingWindow(scrollTop: number) {
-    if (this.#scrollTop !== scrollTop) {
-      this.#scrollTop = scrollTop;
-      this.updateIntersections();
-    }
-  }
-
-  clearScrollCompensation() {
-    this.scrollCompensation = {
-      heightDelta: undefined,
-      scrollTop: undefined,
-      monthGroup: undefined,
-    };
-  }
-
-  updateIntersections() {
-    if (!this.isInitialized || this.visibleWindow.bottom === this.visibleWindow.top) {
-      return;
-    }
-    let topIntersectingMonthGroup = undefined;
-    for (const month of this.months) {
-      updateIntersectionMonthGroup(this, month);
-      if (!topIntersectingMonthGroup && month.actuallyIntersecting) {
-        topIntersectingMonthGroup = month;
-      }
-    }
-    if (topIntersectingMonthGroup !== undefined && this.topIntersectingMonthGroup !== topIntersectingMonthGroup) {
-      this.topIntersectingMonthGroup = topIntersectingMonthGroup;
-    }
-    for (const month of this.months) {
-      if (month === this.topIntersectingMonthGroup) {
-        this.topIntersectingMonthGroup.percent = clamp(
-          (this.visibleWindow.top - this.topIntersectingMonthGroup.top) / this.topIntersectingMonthGroup.height,
-          0,
-          1,
-        );
-      } else {
-        month.percent = 0;
-      }
-    }
-  }
-
-  clearDeferredLayout(month: MonthGroup) {
-    const hasDeferred = month.dayGroups.some((group) => group.deferredLayout);
-    if (hasDeferred) {
-      updateGeometry(this, month, { invalidateHeight: true, noDefer: true });
-      for (const group of month.dayGroups) {
-        group.deferredLayout = false;
-      }
-    }
-  }
-
  async #initializeMonthGroups() {
    const timebuckets = await getTimeBuckets({
      ...authManager.params,
      ...this.#options,
    });

-    this.months = timebuckets.map((timeBucket) => {
+    this.#months = timebuckets.map((timeBucket) => {
      const date = new SvelteDate(timeBucket.timeBucket);
      return new MonthGroup(
        this,
        { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1 },
        timeBucket.count,
+        false,
        this.#options.order,
      );
    });
    this.albumAssets.clear();
-    this.#updateViewportGeometry(false);
+    this.updateViewportGeometry(false);
  }

  async updateOptions(options: TimelineManagerOptions) {
@@ -313,16 +145,16 @@ export class TimelineManager {
      return;
    }
    await this.initTask.reset();
-    await this.#init(options);
-    this.#updateViewportGeometry(false);
+    this.#options = options;
+    await this.init();
+    this.updateViewportGeometry(false);
  }

-  async #init(options: TimelineManagerOptions) {
+  async init() {
    this.isInitialized = false;
-    this.months = [];
+    this.#months = [];
    this.albumAssets.clear();
    await this.initTask.execute(async () => {
-      this.#options = options;
      await this.#initializeMonthGroups();
    }, true);
  }
@@ -332,36 +164,8 @@ export class TimelineManager {
    this.isInitialized = false;
  }

-  async updateViewport(viewport: Viewport) {
-    if (viewport.height === 0 && viewport.width === 0) {
-      return;
-    }
-
-    if (this.viewportHeight === viewport.height && this.viewportWidth === viewport.width) {
-      return;
-    }
-
-    if (!this.initTask.executed) {
-      await (this.initTask.loading ? this.initTask.waitUntilCompletion() : this.#init(this.#options));
-    }
-
-    const changedWidth = viewport.width !== this.viewportWidth;
-    this.viewportHeight = viewport.height;
-    this.viewportWidth = viewport.width;
-    this.#updateViewportGeometry(changedWidth);
-  }
-
-  #updateViewportGeometry(changedWidth: boolean) {
-    if (!this.isInitialized) {
-      return;
-    }
-    if (this.viewportWidth === 0 || this.viewportHeight === 0) {
-      return;
-    }
-    for (const month of this.months) {
-      updateGeometry(this, month, { invalidateHeight: changedWidth });
-    }
-    this.updateIntersections();
+  updateViewportGeometry(changedWidth: boolean) {
+    super.updateViewportGeometry(changedWidth);
    this.#createScrubberMonths();
  }

@@ -376,46 +180,13 @@ export class TimelineManager {
    this.scrubberTimelineHeight = this.timelineHeight;
  }

-  createLayoutOptions() {
-    const viewportWidth = this.viewportWidth;
-
-    return {
-      spacing: 2,
-      heightTolerance: 0.15,
-      rowHeight: this.#rowHeight,
-      rowWidth: Math.floor(viewportWidth),
-    };
-  }
-
-  async loadMonthGroup(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> {
-    let cancelable = true;
-    if (options) {
-      cancelable = options.cancelable;
-    }
-    const monthGroup = getMonthGroupByDate(this, yearMonth);
-    if (!monthGroup) {
-      return;
-    }
-
-    if (monthGroup.loader?.executed) {
-      return;
-    }
-
-    const result = await monthGroup.loader?.execute(async (signal: AbortSignal) => {
-      await loadFromTimeBuckets(this, monthGroup, this.#options, signal);
-    }, cancelable);
-    if (result === 'LOADED') {
-      updateIntersectionMonthGroup(this, monthGroup);
-    }
-  }
-
  addAssets(assets: TimelineAsset[]) {
    const assetsToUpdate = assets.filter((asset) => !this.isExcluded(asset));
    const notUpdated = this.updateAssets(assetsToUpdate);
    addAssetsToMonthGroups(this, [...notUpdated], { order: this.#options.order ?? AssetOrder.Desc });
  }

-  async findMonthGroupForAsset(id: string) {
+  async findSegmentForAssetId(id: string) {
    if (!this.isInitialized) {
      await this.initTask.waitUntilCompletion();
    }
@@ -442,19 +213,14 @@ export class TimelineManager {
  }

  async #loadMonthGroupAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) {
-    await this.loadMonthGroup(yearMonth, options);
+    await this.loadSegment(getSegmentIdentifier(yearMonth), options);
    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];
-    await this.loadMonthGroup(month.yearMonth, { cancelable: false });
+    await this.loadSegment(getSegmentIdentifier(month.yearMonth), { cancelable: false });
    return month;
  }

@@ -497,13 +263,6 @@ export class TimelineManager {
    return [...unprocessedIds];
  }

-  refreshLayout() {
-    for (const month of this.months) {
-      updateGeometry(this, month, { invalidateHeight: true });
-    }
-    this.updateIntersections();
-  }
-
  getFirstAsset(): TimelineAsset | undefined {
    return this.months[0]?.getFirstAsset();
  }
@@ -527,7 +286,7 @@ export class TimelineManager {
    if (!monthGroup) {
      return;
    }
-    await this.loadMonthGroup(dateTime, { cancelable: false });
+    await this.loadSegment(getSegmentIdentifier(dateTime), { cancelable: false });
    const asset = monthGroup.findClosest(dateTime);
    if (asset) {
      return asset;
--- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
+++ b/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;
    }
-
-    const store = this.#group.monthGroup.timelineManager;
-    const positionTop = this.#group.absoluteDayGroupTop + this.position.top;
+    if ((this.#group as DayGroup).sortAssets) {
+      const dayGroup = this.#group as DayGroup;
+      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;
  }
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -513,7 +513,7 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt

  try {
    for (const monthGroup of timelineManager.months) {
-      await timelineManager.loadMonthGroup(monthGroup.yearMonth);
+      await timelineManager.loadSegment(monthGroup.identifier);

      if (!get(isSelectingAllAssets)) {
        assetInteraction.clearMultiselect();
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -1,3 +1,4 @@
+import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
@@ -23,11 +24,19 @@ export type TimelineDateTime = TimelineDate & {
  millisecond: number;
 };

-export type ScrubberListener = (
-  scrubberMonth: { year: number; month: number },
-  overallScrollPercent: number,
-  scrubberMonthScrollPercent: number,
-) => void | Promise<void>;
+export type ScrubberData = {
+  scrubberMonth: { year: number; month: number };
+  overallScrollPercent: number;
+  scrubberMonthScrollPercent: number;
+};
+
+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> =>
@@ -151,6 +160,14 @@ export function formatGroupTitle(_date: DateTime): string {
  return getDateLocaleString(date, { locale: get(locale) });
 }

+export const formatGroupTitleFull = (_date: DateTime): string => {
+  if (!_date.isValid) {
+    return _date.toString();
+  }
+  const date = _date as DateTime<true>;
+  return getDateLocaleString(date);
+};
+
 export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
  date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);

@@ -234,3 +251,11 @@ export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
  }
  return result;
 }
+
+export const getSegmentIdentifier = (yearMonth: TimelineYearMonth | TimelineDateTime) => ({
+  matches(segment: MonthGroup) {
+    return (
+      segment.yearMonth && segment.yearMonth.year === yearMonth.year && segment.yearMonth.month === yearMonth.month
+    );
+  },
+});
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -452,7 +452,7 @@
        {isSelectionMode}
        {singleSelect}
        {showArchiveIcon}
-        {onSelect}
+        onAssetSelect={onSelect}
        onEscape={handleEscape}
      >
        {#if viewMode !== AlbumPageViewMode.SELECT_ASSETS}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -392,7 +392,7 @@
      {assetInteraction}
      isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}
      singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
-      onSelect={handleSelectFeaturePhoto}
+      onAssetSelect={handleSelectFeaturePhoto}
      onEscape={handleEscape}
    >
      {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 { isAlbumsRoute, isPeopleRoute } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  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 { getPerson, getTagById, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
+  import { mdiArrowLeft, mdiDotsVertical, mdiPlus, mdiSelectAll } from '@mdi/js';
  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(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    terms;
-    setTimeout(() => {
-      handlePromiseError(onSearchQueryUpdate());
-    });
-  });
+  const searchResultsManager = new SearchResultsManager();

-  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(() => {
-    if (scrollY) {
-      scrollYHistory = scrollY;
+  const restoreMap = new SvelteMap<string, SegmentIdentifier>();
+
+  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 }) => {
-    // Prevent setting previousRoute to the current page.
-    if (from?.url && from.route.id !== page.route.id) {
-      previousRoute = from.url.href;
+  const onUndoDelete = (assets: TimelineAsset[]) => {
+    const segments: PhotostreamSegment[] = [];
+    for (const asset of assets) {
+      const segmentIdentifier = restoreMap.get(asset.id);
+      if (segmentIdentifier) {
+        const segment = searchResultsManager.getSegmentByIdentifier(segmentIdentifier);
+        if (segment) {
+          segments.push(segment);
+        }
+      }
    }
-    const route = from?.route?.id;
-
-    if (isPeopleRoute(route)) {
-      previousRoute = AppRoute.PHOTOS;
+    for (const segment of segments) {
+      void segment.reload(false);
    }
-
-    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);
-  };
-
-  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;
-    }
+    const allAssets = searchResultsManager.months.flatMap((segment) => segment.assets);
+    assetInteraction.selectAssets(allAssets);
  };

  function getHumanReadableDate(dateString: string) {
@@ -248,8 +178,7 @@
    cancelMultiselect(assetInteraction);

    if (terms.isNotInAlbum.toString() == 'true') {
-      const assetIdSet = new Set(assetIds);
-      searchResultAssets = searchResultAssets.filter((asset) => !assetIdSet.has(asset.id));
+      searchResultsManager.removeAssets(assetIds);
    }
  };

@@ -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
-          removeFavorite={assetInteraction.isAllFavorite}
-          onFavorite={(assetIds, isFavorite) => {
-            for (const assetId of assetIds) {
-              const asset = searchResultAssets.find((searchAsset) => searchAsset.id === assetId);
-              if (asset) {
-                asset.isFavorite = isFavorite;
-              }
-            }
-          }}
-        />
+        <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />

        <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}
-    <section>
-      <div class="uppercase ms-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums')}</div>
-      <AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
+  <SearchResults {searchResultsManager} {assetInteraction} stylePaddingHorizontalPx={16}>
+    {#if terms}
+      <section
+        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">
-        {$t('photos_and_videos')}
-      </div>
-    </section>
-  {/if}
-  <section id="search-content">
-    {#if searchResultAssets.length > 0}
-      <GalleryViewer
-        assets={searchResultAssets}
-        {assetInteraction}
-        onIntersected={loadNextPage}
-        showArchiveIcon={true}
-        {viewport}
-        onReload={onSearchQueryUpdate}
-        slidingWindowOffset={searchResultsElement.offsetTop}
-      />
-    {:else if !isLoading}
-      <div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
-        <div class="flex flex-col content-center items-center text-center">
-          <Icon icon={mdiImageOffOutline} size="3.5em" />
-          <p class="mt-5 text-3xl font-medium">{$t('no_results')}</p>
-          <p class="text-base font-normal">{$t('no_results_description')}</p>
-        </div>
-      </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}
-
-    {#if isLoading}
-      <div class="flex justify-center py-16 items-center">
-        <LoadingSpinner size="giant" />
-      </div>
-    {/if}
-  </section>
+  </SearchResults>

  <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
-            removeFavorite={assetInteraction.isAllFavorite}
-            onFavorite={(ids, isFavorite) => {
-              for (const id of ids) {
-                const asset = searchResultAssets.find((asset) => asset.id === id);
-                if (asset) {
-                  asset.isFavorite = isFavorite;
-                }
-              }
-            }}
-          />
+          <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />

          <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">
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -5,7 +5,6 @@
  import Timeline from '$lib/components/timeline/Timeline.svelte';
  import { AssetAction } from '$lib/constants';
  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
@@ -110,17 +109,7 @@
    return !!asset.latitude && !!asset.longitude;
  };

-  const handleThumbnailClick = (
-    asset: TimelineAsset,
-    timelineManager: TimelineManager,
-    dayGroup: DayGroup,
-    onClick: (
-      timelineManager: TimelineManager,
-      assets: TimelineAsset[],
-      groupTitle: string,
-      asset: TimelineAsset,
-    ) => void,
-  ) => {
+  const handleAssetOpen = (asset: TimelineAsset, defaultAssetOpen: () => void) => {
    if (hasGps(asset)) {
      locationUpdated = true;
      setTimeout(() => {
@@ -128,9 +117,9 @@
      }, 1500);
      location = { latitude: asset.latitude!, longitude: asset.longitude! };
      void setQueryValue('at', asset.id);
-    } else {
-      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+      return;
    }
+    defaultAssetOpen();
  };
 </script>

@@ -193,9 +182,9 @@
    removeAction={AssetAction.ARCHIVE}
    onEscape={handleEscape}
    withStacked
-    onThumbnailClick={handleThumbnailClick}
+    onAssetOpen={handleAssetOpen}
  >
-    {#snippet customLayout(asset: TimelineAsset)}
+    {#snippet customThumbnailLayout(asset: TimelineAsset)}
      {#if hasGps(asset)}
        <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
          {asset.city || $t('gps')}
Author	SHA1	Message	Date
midzelis	7806fe7d86	feat(web): add asset navigation and simplify photostream architecture - Add findNextAsset, findPreviousAsset, and findRandomAsset methods to PhotostreamManager - Move layout() and findAssetAbsolutePosition() to PhotostreamSegment base class - Create SimplePhotostreamManager for basic photostream functionalityw	2025-09-28 20:55:20 +00:00
midzelis	e95ca39e4f	refactor(web): convert timeline layout options to derived state - Replace createLayoutOptions() method with derived layoutOptions property for better reactivity. - Remove duplicate refreshLayout() implementation - Simplify setLayoutOptions() by removing unnecessary change tracking.	2025-09-28 20:55:19 +00:00
midzelis	990fdeccb4	refactor: remove scroll compensation logic from photostream components	2025-09-28 20:55:19 +00:00
midzelis	2561a25261	fix: reactivity warnings in searchbox	2025-09-28 20:55:19 +00:00
midzelis	666bbf2503	fix: padding for searchresults/photostream	2025-09-28 20:55:19 +00:00
midzelis	009e1def3e	feat: search results keyboard actions	2025-09-28 20:55:19 +00:00
midzelis	cc20b282f4	feat: search results page (without keyboard actions) fix: missing responsive calculation in UserPageLayout	2025-09-28 20:55:19 +00:00
midzelis	d044889cb0	feat: Extract common StreamWithViewer component - Create new StreamWithViewer component to handle asset viewer lifecycle and navigation - Move beforeNavigate/afterNavigate hooks from Timeline to StreamWithViewer - Extract asset viewer Portal rendering and close handler to wrapper component - Move timeline segment loading logic for viewed assets to StreamWithViewer - Simplify Timeline component by removing ~76 lines of navigation/viewer code - Remove showSkeleton state management from Timeline (now handled by PhotostreamWithScrubber) This separation of concerns makes the Timeline component more focused on rendering while StreamWithViewer handles all viewer-related navigation and state management.The new component can be reused by other photostream-like components that need asset viewer functionality.	2025-09-28 20:39:31 +00:00
midzelis	c144b1ad17	feat: photostream can have scrollbar, style options, standardize small/large layout sizes - Add configurable header height props for responsive layouts (smallHeaderHeight/largeHeaderHeight) - Add style customization props: styleMarginContentHorizontal, styleMarginTop, alwaysShowScrollbar - Replace hardcoded layout values with configurable props - Change root element from <section> to custom <photostream> element for better semantic structure - Move viewport width binding to inner timeline element for more accurate measurements - Simplify HMR handler by removing file-specific checks - Add segment loading check to prevent rendering unloaded segments - Add spacing margin between month groups using layout options - Change scrollbar-width from 'auto' to 'thin' for consistency - Remove unused UpdatePayload type import	2025-09-28 20:39:31 +00:00
midzelis	c424b2f0a1	feat: skeleton title is optional feat: skeleton title optional	2025-09-28 20:39:05 +00:00
midzelis	0a18d9c35e	fix: back/forward navigation won't reset scroll in timeline	2025-09-28 19:41:41 +00:00
midzelis	25dbb60574	refactor(web): extract timeline scrolling logic into common Photostream components - Extract common timeline functionality into Photostream.svelte base component - Create PhotostreamWithScrubber.svelte to handle scrubber integration - Simplify Timeline.svelte by removing ~300 lines of scrolling/scrubber logic - Add findMonthAtScrollPosition utility with binary search for better performance - Maintain all existing functionality while improving code organization	2025-09-28 19:41:41 +00:00
midzelis	a1e788e0bf	refactor(web): extract timeline selection logic into SelectableSegment and SelectableDay components - Move asset selection, range selection, and keyboard interaction logic to SelectableSegment - Extract day group selection logic to SelectableDay component - Simplify Timeline component by removing selection-related state and handlers - Fix scroll compensation handling with dedicated while loop - Remove unused keyboard handlers from Scrubber component	2025-09-28 19:41:41 +00:00
midzelis	3c39f44fa0	refactor(web): extract asset grid layout logic into AssetLayout component - Extracts the asset grid rendering logic from `MonthSegment` into a dedicated `AssetLayout` component - Simplifies `MonthSegment` by delegating layout responsibilities while maintaining all existing functionality - Renames `customLayout` prop to `customThumbnailLayout` for clarity across Timeline components ## Changes - Created new `AssetLayout.svelte` component that handles: - Asset grid rendering with proper positioning - Animation transitions - Filtering of intersecting viewer assets - Updated `MonthSegment.svelte` to use `AssetLayout` via composition pattern - Renamed `customLayout` to `customThumbnailLayout` in Timeline and related components - Moved thumbnail click and selection logic to Timeline parent component using snippets	2025-09-28 19:41:41 +00:00
midzelis	e5fce47c0c	Rename TimelineDateGroup to MonthSegment	2025-09-28 19:41:41 +00:00
midzelis	3a468a3f50	refactor(web): extract common timeline functionality into PhotostreamManager base classes Create abstract PhotostreamManager and PhotostreamSegment base classes to enable reusable timeline-like components. This refactoring extracts common viewport management, scroll handling, and segment operations from TimelineManager and MonthGroup into reusable abstractions. Changes: - Add PhotostreamManager.svelte.ts with viewport and scroll management - Add PhotostreamSegment.svelte.ts with segment positioning and intersection logic - Refactor TimelineManager to extend PhotostreamManager - Refactor MonthGroup to extend PhotostreamSegment - Add utility functions for segment identification and date formatting - Update tests to reflect new inheritance structure	2025-09-28 19:41:41 +00:00
midzelis	e600cf64b0	refactor(web): extract asset viewer logic from Timeline into TimelineAssetViewer component - Extracted asset viewer navigation and action handling logic from Timeline.svelte into a dedicated TimelineAssetViewer component - Reduces Timeline.svelte complexity by ~150 lines and improves separation of concerns - No functional changes - purely a refactoring to improve code organization ## Changes - Created new TimelineAssetViewer.svelte component containing all asset viewer-related logic - Moved handlePrevious, handleNext, handleRandom, handleClose, handlePreAction, and handleAction methods - Timeline.svelte now only passes required props to the new component - Maintained all existing functionality including navigation, asset actions, and stack management	2025-09-28 19:41:41 +00:00
midzelis	41066b1c31	refactor(web): extract timeline keyboard actions into separate component Extracts keyboard shortcuts and related functionality from Timeline component into a dedicated TimelineKeyboardActions component for better separation of concerns and maintainability.	2025-09-28 19:41:41 +00:00
midzelis	9051fa6949	refactor(web): Clarify property names in Timeline and Scrubber Renamed properties across Timeline/Scrubber components for clarity: - scrubOverallPercent → timelineScrollPercent - scrubberMonthPercent → viewportTopMonthScrollPercent - scrubberMonth → viewportTopMonth - leadout → isInLeadOutSection Additional changes: - Updated ScrubberListener signature to accept object parameter - Added detailed JSDoc comments for all Scrubber props - Fixed callback invocations to use new object syntax - Aligned Timeline's local state variables with Scrubber prop names	2025-09-28 19:41:41 +00:00