Rename things

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

@@ -85,8 +85,8 @@
     onerror={setErrored}
     style:width={widthStyle}
     style:height={heightStyle}
-    style:filter={hidden ? 'grayscale(50%)' : 'none'}
     style:opacity={hidden ? '0.5' : '1'}
+    style:filter="blur(7px)"
     src={url}
     alt={loaded || errored ? altText : ''}
     {title}

web/src/lib/components/photos-page/memory-lane.svelte

@@ -88,6 +88,7 @@
         >
           <img
             class="h-full w-full rounded-xl object-cover"
+            style:filter="blur(5px)"
             src={getAssetThumbnailUrl(memory.assets[0].id)}
             alt={$t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } })}
             draggable="false"

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import AssetLayout from '$lib/components/timeline/base-components/AssetLayout.svelte';
+  import BaseTimelineViewer from '$lib/components/timeline/base-components/Stream.svelte';
+  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/SelectableSegment.svelte';
+  import Skeleton from '$lib/elements/Skeleton.svelte';
+  import { SearchStreamManager } from '$lib/managers/timeline-manager/SearchStreamManager.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+
+  let { isViewing: showAssetViewer } = assetViewingStore;
+
+  interface Props {
+    searchTerms: any;
+  }
+
+  let { searchTerms }: Props = $props();
+
+  let viewer: BaseTimelineViewer | undefined = $state();
+  let showSkeleton: boolean = $state(true);
+
+  const timelineManager = new SearchStreamManager(searchTerms, { isSmartSearchEnabled: true });
+  timelineManager.init();
+  const assetInteraction = new AssetInteraction();
+</script>
+
+<BaseTimelineViewer
+  showScrollbar={true}
+  enableRouting={false}
+  {timelineManager}
+  isShowDeleteConfirmation={true}
+  {showSkeleton}
+>
+  {#snippet skeleton({ segment })}
+    <Skeleton height={segment.height - segment.timelineManager.headerHeight} title={''} />
+  {/snippet}
+  {#snippet segment({ segment, onScrollCompensationMonthInDOM })}
+    <SelectableTimelineMonth
+      {segment}
+      {onScrollCompensationMonthInDOM}
+      {timelineManager}
+      {assetInteraction}
+      isSelectionMode={false}
+      singleSelect={false}
+    >
+      {#snippet content({ onAssetOpen, onAssetSelect, onHover })}
+        <AssetLayout
+          photostreamManager={timelineManager}
+          viewerAssets={segment.viewerAssets}
+          height={segment.height}
+          width={timelineManager.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={() => onHover(asset)}
+              selected={isAssetSelected}
+              selectionCandidate={isAssetSelectionCandidate}
+              thumbnailWidth={position.width}
+              thumbnailHeight={position.height}
+            />
+          {/snippet}
+        </AssetLayout>
+      {/snippet}
+    </SelectableTimelineMonth>
+  {/snippet}
+</BaseTimelineViewer>

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

@@ -1,10 +1,16 @@
 <script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import TimelineKeyboardActions from '$lib/components/timeline/actions/timeline-keyboard-actions.svelte';
-  import BaseTimeline from '$lib/components/timeline/base-components/base-timeline.svelte';
+  import StreamWithScrubber from '$lib/components/timeline/base-components/StreamWithScrubber.svelte';
+  import TimelineMonth from '$lib/components/timeline/base-components/Segment.svelte';
+  import SelectableDayGroup from '$lib/components/timeline/internal-components/SelectableDayGroup.svelte';
+  import SelectableSegment from '$lib/components/timeline/internal-components/SelectableSegment.svelte';
   import TimelineAssetViewer from '$lib/components/timeline/internal-components/timeline-asset-viewer.svelte';
   import type { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import Skeleton from '$lib/elements/Skeleton.svelte';
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import { 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 { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -65,27 +71,72 @@
     empty,
   }: Props = $props();
 
-  let viewer: BaseTimeline | undefined = $state();
+  let viewer: StreamWithScrubber | undefined = $state();
   let showSkeleton: boolean = $state(true);
 </script>
 
-<BaseTimeline
+<StreamWithScrubber
   bind:this={viewer}
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
   {enableRouting}
   {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
   {isShowDeleteConfirmation}
   {showSkeleton}
-  {onAssetOpen}
-  {onSelect}
   {children}
   {empty}
-/>
+>
+  {#snippet skeleton({ segment })}
+    <Skeleton
+      height={segment.height - segment.timelineManager.headerHeight}
+      title={(segment as MonthGroup).monthGroupTitle}
+    />
+  {/snippet}
+  {#snippet segment({ segment, onScrollCompensationMonthInDOM })}
+    <SelectableSegment
+      {segment}
+      {onScrollCompensationMonthInDOM}
+      {timelineManager}
+      {assetInteraction}
+      {isSelectionMode}
+      {singleSelect}
+    >
+      {#snippet content({ onAssetOpen, onAssetSelect, onHover })}
+        <SelectableDayGroup {timelineManager} {assetInteraction} {onAssetSelect}>
+          {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
+            <TimelineMonth
+              {assetInteraction}
+              {customThumbnailLayout}
+              {singleSelect}
+              monthGroup={segment as MonthGroup}
+              {timelineManager}
+              {onDayGroupSelect}
+            >
+              {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
+                {@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
+                {@const isAssetSelected =
+                  assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
+                {@const isAssetDisabled = timelineManager.albumAssets.has(asset.id)}
+                <Thumbnail
+                  showStackedIcon={withStacked}
+                  {showArchiveIcon}
+                  {asset}
+                  {groupIndex}
+                  onClick={() => onAssetOpen(asset)}
+                  onSelect={() => onDayGroupAssetSelect(dayGroup, asset)}
+                  onMouseEvent={() => onHover(asset)}
+                  selected={isAssetSelected}
+                  selectionCandidate={isAssetSelectionCandidate}
+                  disabled={isAssetDisabled}
+                  thumbnailWidth={position.width}
+                  thumbnailHeight={position.height}
+                />
+              {/snippet}
+            </TimelineMonth>
+          {/snippet}
+        </SelectableDayGroup>
+      {/snippet}
+    </SelectableSegment>
+  {/snippet}
+</StreamWithScrubber>
 
 <TimelineKeyboardActions
   scrollToAsset={(asset) => viewer?.scrollToAsset(asset) ?? false}

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

web/src/lib/components/timeline/base-components/Segment.svelte

@@ -0,0 +1,118 @@
+<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 { fly } from 'svelte/transition';
+
+  import AssetLayout from '$lib/components/timeline/base-components/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 && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected)}
+        <div
+          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
+          class="inline-block pe-2 hover:cursor-pointer"
+          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>

web/src/lib/components/timeline/base-components/Stream.svelte

@@ -2,37 +2,43 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/stores';
   import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
-  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
   import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import type { PhotostreamManager } from '$lib/managers/timeline-manager/PhotostreamManager.svelte';
+  import type { PhotostreamSegment } from '$lib/managers/timeline-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';
   import type { UpdatePayload } from 'vite';
 
   interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
+    segment: Snippet<
+      [
+        {
+          segment: PhotostreamSegment;
+          scrollToFunction: (top: number) => void;
+          onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+        },
+      ]
+    >;
+    skeleton: Snippet<
+      [
+        {
+          segment: PhotostreamSegment;
+        },
+      ]
+    >;
 
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
+    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: TimelineManager;
-    assetInteraction: AssetInteraction;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
+    timelineManager: PhotostreamManager;
+
     showSkeleton?: boolean;
     isShowDeleteConfirmation?: boolean;
     styleMarginRightOverride?: string;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
+
     header?: Snippet<[scrollToFunction: (top: number) => void]>;
     children?: Snippet;
     empty?: Snippet;
@@ -40,22 +46,16 @@
   }
 
   let {
-    customThumbnailLayout,
+    segment,
 
-    isSelectionMode = false,
-    singleSelect = false,
     enableRouting,
     timelineManager = $bindable(),
-    assetInteraction,
-    withStacked = false,
     showSkeleton = $bindable(true),
-    showArchiveIcon = false,
     styleMarginRightOverride,
     isShowDeleteConfirmation = $bindable(false),
-
-    onAssetOpen,
-    onSelect,
+    showScrollbar,
     children,
+    skeleton,
     empty,
     header,
     handleTimelineScroll = () => {},
@@ -96,7 +96,7 @@
     updateSlidingWindow();
   };
 
-  const scrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
+  const handleTriggeredScrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
     const { heightDelta, scrollTop } = compensation;
     if (heightDelta !== undefined) {
       scrollBy(heightDelta);
@@ -106,16 +106,16 @@
     timelineManager.clearScrollCompensation();
   };
 
-  const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
+  const getAssetHeight = (assetId: string, monthGroup: PhotostreamSegment) => {
     // the following method may trigger any layouts, so need to
     // handle any scroll compensation that may have been set
-    const height = monthGroup!.findAssetAbsolutePosition(assetId);
+    const height = monthGroup.findAssetAbsolutePosition(assetId);
 
     // this is in a while loop, since scrollCompensations invoke scrolls
     // which may load months, triggering more scrollCompensations. Call
     // this in a loop, until no more layouts occur.
     while (timelineManager.scrollCompensation.monthGroup) {
-      scrollCompensation(timelineManager.scrollCompensation);
+      handleTriggeredScrollCompensation(timelineManager.scrollCompensation);
     }
     return height;
   };
@@ -129,8 +129,8 @@
     return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
   };
 
-  const scrollToAssetId = async (assetId: string) => {
-    const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
+  export const scrollToAssetId = (assetId: string) => {
+    const monthGroup = timelineManager.getSegmentForAssetId(assetId);
     if (!monthGroup) {
       return false;
     }
@@ -145,16 +145,6 @@
     return true;
   };
 
-  export const scrollToAsset = (asset: TimelineAsset) => {
-    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(asset.id, monthGroup);
-    scrollTo(height);
-    return true;
-  };
-
   const completeNav = async () => {
     const scrollTarget = $gridScrollTarget?.at;
     let scrolled = false;
@@ -219,8 +209,14 @@
 <!-- Right margin MUST be equal to the width of scrubber -->
 <section
   id="asset-grid"
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
+  class={[
+    'h-full overflow-y-auto outline-none',
+    { 'scrollbar-hidden': !showScrollbar },
+    { 'm-0': isEmpty },
+    { 'ms-0': !isEmpty },
+  ]}
   style:margin-right={styleMarginRightOverride}
+  style:scrollbar-width={showScrollbar ? 'auto' : 'none'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
   bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
@@ -247,50 +243,26 @@
       {/if}
     </section>
 
-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
-      {@const display = monthGroup.intersecting}
+    {#each timelineManager.months as monthGroup (monthGroup.id)}
+      {@const shouldDisplay = monthGroup.intersecting}
       {@const absoluteHeight = monthGroup.top}
-
-      {#if !monthGroup.isLoaded}
-        <div
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <Skeleton
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
-            title={monthGroup.monthGroupTitle}
-          />
-        </div>
-      {:else if display}
-        <div
-          class="month-group"
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <SelectableTimelineMonth
-            {customThumbnailLayout}
-            {withStacked}
-            {showArchiveIcon}
-            {assetInteraction}
-            {timelineManager}
-            {isSelectionMode}
-            {singleSelect}
-            {monthGroup}
-            {onAssetOpen}
-            onSelect={(isSingleSelect: boolean, asset: TimelineAsset) => {
-              if (isSingleSelect) {
-                scrollTo(0);
-              }
-              onSelect?.(asset);
-            }}
-            onScrollCompensationMonthInDOM={scrollCompensation}
-          />
-        </div>
-      {/if}
+      <div
+        class="month-group"
+        style:height={monthGroup.height + 'px'}
+        style:position="absolute"
+        style:transform={`translate3d(0,${absoluteHeight}px,0)`}
+        style:width="100%"
+      >
+        {#if !shouldDisplay}
+          {@render skeleton({ segment: monthGroup })}
+        {:else}
+          {@render segment({
+            segment: monthGroup,
+            scrollToFunction: scrollTo,
+            onScrollCompensationMonthInDOM: handleTriggeredScrollCompensation,
+          })}
+        {/if}
+      </div>
     {/each}
     <!-- spacer for lead-out -->
     <div
@@ -308,7 +280,6 @@
     contain: strict;
     scrollbar-width: none;
   }
-
   .month-group {
     contain: layout size paint;
     transform-style: flat;

web/src/lib/components/timeline/base-components/StreamWithScrubber.svelte

@@ -1,52 +1,50 @@
 <script lang="ts">
-  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
+  import BaseTimelineViewer from '$lib/components/timeline/base-components/Stream.svelte';
   import Scrubber from '$lib/components/timeline/Scrubber.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 { PhotostreamSegment } from '$lib/managers/timeline-manager/PhotostreamSegment.svelte';
   import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { findMonthAtScrollPosition, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
   import type { Snippet } from 'svelte';
 
   interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
     /** `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;
-    assetInteraction: AssetInteraction;
 
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
     showSkeleton?: boolean;
-
     isShowDeleteConfirmation?: boolean;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
 
+    segment: Snippet<
+      [
+        {
+          segment: PhotostreamSegment;
+          onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+        },
+      ]
+    >;
+    skeleton: Snippet<
+      [
+        {
+          segment: PhotostreamSegment;
+        },
+      ]
+    >;
     children?: Snippet;
     empty?: Snippet;
   }
 
   let {
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
     enableRouting,
     timelineManager = $bindable(),
-    assetInteraction,
 
-    withStacked = false,
-    showArchiveIcon = false,
     showSkeleton = $bindable(true),
     isShowDeleteConfirmation = $bindable(false),
-    onAssetOpen,
-    onSelect = () => {},
+    segment,
+    skeleton,
     children,
     empty,
   }: Props = $props();
@@ -160,27 +158,21 @@
     handleScrollTop?.(scrollToTop);
   };
   let baseTimelineViewer: BaseTimelineViewer | undefined = $state();
-  export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAsset(asset) ?? false;
+  export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAssetId(asset.id) ?? false;
 </script>
 
 <BaseTimelineViewer
   bind:this={baseTimelineViewer}
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
   {enableRouting}
   {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
   {showSkeleton}
   {isShowDeleteConfirmation}
   styleMarginRightOverride={scrubberWidth + 'px'}
-  {onAssetOpen}
-  {onSelect}
+  {handleTimelineScroll}
+  {segment}
+  {skeleton}
   {children}
   {empty}
-  {handleTimelineScroll}
 >
   {#snippet header(scrollToFunction)}
     {#if timelineManager.months.length > 0}

web/src/lib/components/timeline/base-components/skeleton.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  interface Props {
-    height: number;
-    title: string;
-  }
-
-  let { height = 0, title }: Props = $props();
-</script>
-
-<div class="overflow-clip" style:height={height + 'px'}>
-  <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 w-full" data-skeleton="true"></div>
-</div>
-
-<style>
-  [data-skeleton] {
-    background-image: url('/light_skeleton.png');
-    background-repeat: repeat;
-    background-size: 235px, 235px;
-  }
-  @media (max-width: 767px) {
-    [data-skeleton] {
-      background-size: 100px, 100px;
-    }
-  }
-  :global(.dark) [data-skeleton] {
-    background-image: url('/dark_skeleton.png');
-  }
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  [data-skeleton] {
-    visibility: hidden;
-    animation:
-      0s linear 0.1s forwards delayedVisibility,
-      pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-</style>

web/src/lib/components/timeline/base-components/timeline-month.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.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 { uploadAssetsStore } from '$lib/stores/upload';
-  import { Icon } from '@immich/ui';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { flip } from 'svelte/animate';
-  import { fly, scale } from 'svelte/transition';
-
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { Snippet } from 'svelte';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-
-    onHover: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
-
-    // these should be replaced with reactive properties in timeline-manager.svelte.ts
-    isDayGroupSelected: (dayGroup: DayGroup) => boolean;
-    isAssetSelected: (asset: TimelineAsset) => boolean;
-    isAssetSelectionCandidate: (asset: TimelineAsset) => boolean;
-    isAssetDisabled: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup,
-    timelineManager,
-    onScrollCompensationMonthInDOM,
-
-    onHover,
-    onAssetOpen,
-    onAssetSelect,
-    onDayGroupSelect,
-
-    isDayGroupSelected,
-    isAssetSelected,
-    isAssetSelectionCandidate,
-    isAssetDisabled,
-  }: Props = $props();
-
-  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
-
-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
-    return intersectables.filter((intersectable) => intersectable.intersecting);
-  }
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
-    }
-  });
-</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;
-      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 && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected(dayGroup))}
-        <div
-          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
-          class="inline-block pe-2 hover:cursor-pointer"
-          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if isDayGroupSelected(dayGroup)}
-            <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>
-
-    <!-- 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!}
-
-        <!-- 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={() => onAssetOpen?.(dayGroup, assetSnapshot(asset))}
-            onSelect={() => onAssetSelect(dayGroup, assetSnapshot(asset))}
-            onMouseEvent={() => onHover(dayGroup, assetSnapshot(asset))}
-            selected={isAssetSelected(asset)}
-            selectionCandidate={isAssetSelectionCandidate(asset)}
-            disabled={isAssetDisabled(asset)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customThumbnailLayout}
-            {@render customThumbnailLayout(asset)}
-          {/if}
-        </div>
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>

web/src/lib/components/timeline/internal-components/SelectableDayGroup.svelte

@@ -0,0 +1,63 @@
+<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 { PhotostreamManager } from '$lib/managers/timeline-manager/PhotostreamManager.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;
+    timelineManager: PhotostreamManager;
+    assetInteraction: AssetInteraction;
+  }
+
+  let { content, assetInteraction, timelineManager, onAssetSelect }: Props = $props();
+
+  // called when clicking asset with shift key pressed or with mouse
+  const onDayGroupAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    onAssetSelect(asset);
+
+    const assetsInDayGroup = dayGroup.getAssets();
+    const groupTitle = dayGroup.groupTitle;
+
+    // Check if all assets are selected in a group to toggle the group selection's icon
+    const selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
+      assetInteraction.hasSelectedAsset(asset.id),
+    ).length;
+    // if all assets are selected in a group, add the group to selected group
+    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
+      assetInteraction.addGroupToMultiselectGroup(groupTitle);
+    } else {
+      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
+    }
+  };
+
+  const onDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
+    const group = dayGroup.groupTitle;
+    if (assetInteraction.selectedGroup.has(group)) {
+      assetInteraction.removeGroupFromMultiselectGroup(group);
+      for (const asset of assets) {
+        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+      }
+    } else {
+      assetInteraction.addGroupToMultiselectGroup(group);
+      for (const asset of assets) {
+        onAssetSelect(asset);
+      }
+    }
+  };
+</script>
+
+{@render content({
+  onDayGroupSelect,
+  onDayGroupAssetSelect,
+})}

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

@@ -0,0 +1,196 @@
+<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/timeline-manager/PhotostreamManager.svelte';
+  import type { PhotostreamSegment } from '$lib/managers/timeline-manager/PhotostreamSegment.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import { searchStore } from '$lib/stores/search.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: Snippet<
+      [
+        {
+          onAssetOpen: (asset: TimelineAsset) => void;
+          onAssetSelect: (asset: TimelineAsset) => void;
+          onHover: (asset: TimelineAsset) => void;
+        },
+      ]
+    >;
+    segment: PhotostreamSegment;
+    isSelectionMode: boolean;
+    singleSelect: boolean;
+    timelineManager: PhotostreamManager;
+    assetInteraction: AssetInteraction;
+    onAssetOpen?: (asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+    onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
+    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+  }
+
+  let {
+    segment,
+    content,
+    isSelectionMode,
+    singleSelect,
+    assetInteraction,
+    timelineManager,
+    onAssetOpen,
+    onSelect,
+    onScrollCompensationMonthInDOM,
+  }: Props = $props();
+
+  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
+  let shiftKeyIsDown = $state(false);
+  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+
+  $effect(() => {
+    if (!lastAssetMouseEvent || !lastAssetMouseEvent) {
+      assetInteraction.clearAssetSelectionCandidates();
+    }
+    if (shiftKeyIsDown && lastAssetMouseEvent) {
+      void selectAssetCandidates(lastAssetMouseEvent);
+    }
+    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) => {
+    void onSelectAssets(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;
+    }
+  };
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (searchStore.isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === 'Shift') {
+      event.preventDefault();
+      shiftKeyIsDown = false;
+    }
+  };
+
+  const handleOnHover = (asset: TimelineAsset) => {
+    if (assetInteraction.selectionActive) {
+      void selectAssetCandidates(asset);
+    }
+    lastAssetMouseEvent = asset;
+  };
+
+  const onSelectAssets = async (asset: TimelineAsset) => {
+    if (!asset) {
+      return;
+    }
+    onSelect?.(singleSelect, 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 = await timelineManager.retrieveRange(assetInteraction.assetSelectionStart, asset);
+      for (const asset of assets) {
+        if (deselect) {
+          assetInteraction.removeAssetFromMultiselectGroup(asset.id);
+        } else {
+          handleSelectAsset(asset);
+        }
+      }
+    }
+    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
+  };
+
+  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 = async (endAsset: TimelineAsset) => {
+    if (!shiftKeyIsDown) {
+      return;
+    }
+
+    const startAsset = assetInteraction.assetSelectionStart;
+    if (!startAsset) {
+      return;
+    }
+
+    const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
+    assetInteraction.setAssetSelectionCandidates(assets);
+  };
+
+  $effect.root(() => {
+    if (timelineManager.scrollCompensation.monthGroup === segment) {
+      onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
+    }
+  });
+</script>
+
+<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
+
+{@render content({
+  onAssetOpen: handleOnAssetOpen,
+  onAssetSelect: handleSelectAsset,
+  onHover: handleOnHover,
+})}

web/src/lib/components/timeline/internal-components/selectable-timeline-month.svelte

@@ -1,276 +0,0 @@
-<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 { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { navigate } from '$lib/utils/navigation';
-
-  import TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    onAssetOpen,
-    onSelect,
-    onScrollCompensationMonthInDOM,
-  }: Props = $props();
-
-  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
-  let shiftKeyIsDown = $state(false);
-  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    if (!lastAssetMouseEvent || !lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
-    }
-    if (shiftKeyIsDown && lastAssetMouseEvent) {
-      void selectAssetCandidates(lastAssetMouseEvent);
-    }
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const defaultAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      handleAssetSelect(dayGroup, asset);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (onAssetOpen) {
-      onAssetOpen(dayGroup, asset, () => defaultAssetOpen(dayGroup, asset));
-      return;
-    }
-    defaultAssetOpen(dayGroup, asset);
-  };
-
-  // called when clicking asset with shift key pressed or with mouse
-  const handleAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    void onSelectAssets(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
-    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 handleSelectAsset = (asset: TimelineAsset) => {
-    if (!timelineManager.albumAssets.has(asset.id)) {
-      assetInteraction.selectAsset(asset);
-    }
-  };
-
-  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 handleOnHover = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (assetInteraction.selectionActive) {
-      void selectAssetCandidates(asset);
-    }
-    lastAssetMouseEvent = asset;
-  };
-
-  const handleDayGroupSelect = (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) {
-        handleSelectAsset(asset);
-      }
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const onSelectAssets = async (asset: TimelineAsset) => {
-    if (!asset) {
-      return;
-    }
-    onSelect?.(singleSelect, asset);
-
-    if (singleSelect) {
-      // onScrollToTop();
-
-      return;
-    }
-
-    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
-    const deselect = assetInteraction.hasSelectedAsset(asset.id);
-
-    // Select/deselect already loaded assets
-    if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
-      }
-      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-    } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        handleSelectAsset(candidate);
-      }
-      handleSelectAsset(asset);
-    }
-
-    assetInteraction.clearAssetSelectionCandidates();
-
-    if (assetInteraction.assetSelectionStart && rangeSelection) {
-      let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
-      let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
-
-      if (startBucket === null || endBucket === null) {
-        return;
-      }
-
-      // Select/deselect assets in range (start,end)
-      let started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === endBucket) {
-          break;
-        }
-        if (started) {
-          await timelineManager.loadMonthGroup(monthGroup.yearMonth);
-          for (const asset of monthGroup.assetsIterator()) {
-            if (deselect) {
-              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-            } else {
-              handleSelectAsset(asset);
-            }
-          }
-        }
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-      }
-
-      // Update date group selection in range [start,end]
-      started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-        if (started) {
-          // Split month group into day groups and check each group
-          for (const dayGroup of monthGroup.dayGroups) {
-            const dayGroupTitle = dayGroup.groupTitle;
-            if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
-              assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
-            } else {
-              assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
-            }
-          }
-        }
-        if (monthGroup === endBucket) {
-          break;
-        }
-      }
-    }
-
-    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
-  };
-
-  const selectAssetCandidates = async (endAsset: TimelineAsset) => {
-    if (!shiftKeyIsDown) {
-      return;
-    }
-
-    const startAsset = assetInteraction.assetSelectionStart;
-    if (!startAsset) {
-      return;
-    }
-
-    const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
-    assetInteraction.setAssetSelectionCandidates(assets);
-  };
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
-
-<TimelineMonth
-  {customThumbnailLayout}
-  {singleSelect}
-  {withStacked}
-  {showArchiveIcon}
-  {monthGroup}
-  {timelineManager}
-  {onScrollCompensationMonthInDOM}
-  onHover={handleOnHover}
-  onAssetOpen={handleOnAssetOpen}
-  onAssetSelect={handleAssetSelect}
-  onDayGroupSelect={handleDayGroupSelect}
-  isDayGroupSelected={(dayGroup: DayGroup) => assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-  isAssetSelected={(asset) => assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
-  isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)}
-  isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)}
-/>

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

@@ -0,0 +1,298 @@
+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 { clamp, debounce } from 'lodash-es';
+
+import type { PhotostreamSegment, SegmentIdentifier } from '$lib/managers/timeline-manager/PhotostreamSegment.svelte';
+import type { AssetDescriptor, TimelineAsset, TimelineManagerLayoutOptions, Viewport } from './types';
+
+export abstract class PhotostreamManager {
+  isInitialized = $state(false);
+  topSectionHeight = $state(0);
+  bottomSectionHeight = $state(60);
+  abstract get months(): PhotostreamSegment[];
+  timelineHeight = $derived.by(
+    () => this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight,
+  );
+  assetCount = $derived.by(() => this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
+
+  topIntersectingMonthGroup: PhotostreamSegment | undefined = $state();
+
+  visibleWindow = $derived.by(() => ({
+    top: this.#scrollTop,
+    bottom: this.#scrollTop + this.viewportHeight,
+  }));
+
+  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);
+  scrollCompensation: {
+    heightDelta: number | undefined;
+    scrollTop: number | undefined;
+    monthGroup: PhotostreamSegment | 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();
+    }
+  }
+
+  #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();
+    }
+  }
+
+  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;
+      }
+    }
+  }
+
+  async init() {
+    this.isInitialized = false;
+    await this.initTask.execute(async () => 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();
+  }
+
+  createLayoutOptions() {
+    const viewportWidth = this.viewportWidth;
+
+    return {
+      spacing: 2,
+      heightTolerance: 0.15,
+      rowHeight: this.#rowHeight,
+      rowWidth: Math.floor(viewportWidth),
+    };
+  }
+
+  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;
+    }
+
+    const result = await segment.load(cancelable);
+    if (result === 'LOADED') {
+      updateIntersectionMonthGroup(this, segment);
+    }
+  }
+
+  getSegmentByIdentifier(identifier: SegmentIdentifier) {
+    return this.months.find((segment) => identifier.matches(segment));
+  }
+
+  getSegmentForAssetId(assetId: String) {
+    for (const month of this.months) {
+      const asset = month.assets.find((asset) => asset.id === assetId);
+      if (asset) {
+        return month;
+      }
+    }
+  }
+
+  refreshLayout() {
+    for (const month of this.months) {
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+    this.updateIntersections();
+  }
+
+  getMaxScrollPercent() {
+    const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
+    return (totalHeight - this.viewportHeight) / totalHeight;
+  }
+
+  getMaxScroll() {
+    return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
+  }
+
+  async retrieveRange(start: AssetDescriptor, end: AssetDescriptor) {
+    const range: TimelineAsset[] = [];
+    let collecting = false;
+
+    for (const month of this.months) {
+      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;
+  }
+}

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

@@ -0,0 +1,150 @@
+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/timeline-manager/PhotostreamManager.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+
+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);
+  percent = $state(0);
+
+  assetsCount = $derived.by(() => (this.isLoaded ? this.viewerAssets.length : this.initialCount));
+  loader = new CancellableTask(
+    () => this.markLoaded(),
+    () => this.markCanceled,
+    () => this.handleLoadError,
+  );
+  isHeightActual = $state(false);
+
+  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) {
+      this.load(true);
+    } else {
+      this.cancel();
+    }
+  }
+
+  get intersecting() {
+    return this.#intersecting;
+  }
+
+  async load(cancelable: boolean): Promise<'DONE' | 'WAITED' | 'CANCELED' | 'LOADED' | 'ERRORED'> {
+    return await this.loader?.execute(async (signal: AbortSignal) => {
+      await this.fetch(signal);
+    }, cancelable);
+  }
+
+  protected abstract fetch(signal: AbortSignal): Promise<void>;
+
+  get assets(): TimelineAsset[] {
+    return this.#assets;
+  }
+
+  abstract get viewerAssets(): ViewerAsset[];
+
+  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;
+  }
+
+  protected handleLoadError(error: unknown) {
+    const _$t = get(t);
+    handleError(error, _$t('errors.failed_to_load_assets'));
+  }
+
+  cancel() {
+    this.loader?.cancel();
+  }
+
+  layout(_noDefer: boolean) {}
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    this.intersecting = intersecting;
+    this.actuallyIntersecting = actuallyIntersecting;
+  }
+
+  abstract findAssetAbsolutePosition(assetId: string): number;
+}

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

@@ -0,0 +1,45 @@
+import { PhotostreamManager } from '$lib/managers/timeline-manager/PhotostreamManager.svelte';
+import { SearchStreamSegment } from '$lib/managers/timeline-manager/SearchStreamSegment.svelte';
+import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
+
+export type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'> & { isVisible: boolean };
+
+export class SearchStreamManager extends PhotostreamManager {
+  #isSmartSearchEnabled: boolean;
+
+  #searchTerms: SearchTerms;
+  #months: SearchStreamSegment[] = $state([]);
+
+  constructor(searchTerms: SearchTerms, options: { isSmartSearchEnabled: boolean }) {
+    super();
+    this.#searchTerms = searchTerms;
+    this.#isSmartSearchEnabled = options.isSmartSearchEnabled;
+  }
+
+  async init() {
+    this.isInitialized = false;
+    await this.initTask.execute(async () => {
+      // add some months to start the searches
+      for (let i = 1; i < 3; i++) {
+        this.#months.push(new SearchStreamSegment(this, { ...this.#searchTerms, page: i }));
+      }
+    }, true);
+
+    this.updateViewportGeometry(false);
+  }
+
+  get months(): SearchStreamSegment[] {
+    return this.#months;
+  }
+
+  get isSmartSearchEnabled() {
+    return this.#isSmartSearchEnabled;
+  }
+
+  loadNextPage() {
+    debugger;
+    // note: pages are 1-based
+    this.#months.push(new SearchStreamSegment(this, { ...this.#searchTerms, page: this.#months.length + 1 }));
+    this.updateViewportGeometry(false);
+  }
+}

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

@@ -0,0 +1,99 @@
+import { PhotostreamSegment, type SegmentIdentifier } from '$lib/managers/timeline-manager/PhotostreamSegment.svelte';
+import type { SearchStreamManager, SearchTerms } from '$lib/managers/timeline-manager/SearchStreamManager.svelte';
+import { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+import { getJustifiedLayoutFromAssets, getPosition } from '$lib/utils/layout-utils';
+import { toTimelineAsset } from '$lib/utils/timeline-util';
+import { searchAssets, searchSmart } from '@immich/sdk';
+import { isEqual } from 'lodash-es';
+
+export class SearchStreamSegment extends PhotostreamSegment {
+  manager: SearchStreamManager;
+  #identifier: SegmentIdentifier;
+  #id: string;
+  #searchTerms: SearchTerms;
+
+  #viewerAssets: ViewerAsset[] = $state([]);
+
+  constructor(manager: SearchStreamManager, searchTerms: SearchTerms) {
+    super();
+    this.manager = manager;
+    this.#searchTerms = searchTerms;
+    this.#id = JSON.stringify(searchTerms);
+    this.#identifier = {
+      matches(segment: SearchStreamSegment) {
+        return isEqual(segment.#searchTerms, searchTerms);
+      },
+    };
+    this.initialCount = searchTerms.size || 100;
+  }
+
+  get timelineManager(): SearchStreamManager {
+    return this.manager;
+  }
+
+  get identifier(): SegmentIdentifier {
+    return this.#identifier;
+  }
+
+  get id(): string {
+    return this.#id;
+  }
+
+  async fetch(signal: AbortSignal): Promise<void> {
+    const searchDto: SearchTerms = {
+      ...this.#searchTerms,
+      withExif: true,
+      isVisible: true,
+    };
+
+    const { assets } =
+      ('query' in searchDto || 'queryAssetId' in searchDto) && this.manager.isSmartSearchEnabled
+        ? await searchSmart({ smartSearchDto: searchDto }, { signal })
+        : await searchAssets({ metadataSearchDto: searchDto }, { signal });
+    this.#viewerAssets = assets.items.map((asset) => new ViewerAsset(this, toTimelineAsset(asset)));
+    this.layout();
+  }
+
+  layout(): void {
+    const timelineAssets = this.#viewerAssets.map((viewerAsset) => viewerAsset.asset);
+    const rowWidth = Math.floor(this.timelineManager.viewportWidth);
+    const rowHeight = rowWidth < 850 ? 100 : 235;
+
+    const geometry = getJustifiedLayoutFromAssets(timelineAssets, {
+      spacing: 2,
+      heightTolerance: 0.15,
+      rowHeight,
+      rowWidth,
+    });
+    //  this.width = geometry.containerWidth;
+    this.height = timelineAssets.length === 0 ? 0 : geometry.containerHeight;
+    for (let i = 0; i < this.#viewerAssets.length; i++) {
+      const position = getPosition(geometry, i);
+      this.#viewerAssets[i].position = position;
+    }
+  }
+
+  get viewerAssets(): ViewerAsset[] {
+    return this.#viewerAssets;
+  }
+
+  findAssetAbsolutePosition(assetId: string) {
+    const viewerAsset = this.#viewerAssets.find((viewAsset) => viewAsset.id === assetId);
+    if (viewerAsset) {
+      if (!viewerAsset.position) {
+        console.warn('No position for asset');
+        return -1;
+      }
+      return this.top + viewerAsset.position.top + this.timelineManager.headerHeight;
+    }
+    return -1;
+  }
+
+  updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
+    super.updateIntersection({ intersecting, actuallyIntersecting });
+    // if we're the last month, try to load next month
+    if (intersecting && this.timelineManager.months[this.timelineManager.months.length - 1] === this) {
+      this.timelineManager.loadNextPage();
+    }
+  }
+}

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

@@ -1,27 +1,23 @@
+import type { PhotostreamManager } from '$lib/managers/timeline-manager/PhotostreamManager.svelte';
+import type { PhotostreamSegment } from '$lib/managers/timeline-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,
 ) {
@@ -58,7 +54,7 @@ export function calculateMonthGroupIntersecting(
  * Calculate intersection for viewer assets with additional parameters like header height and scroll compensation
  */
 export function calculateViewerAssetIntersecting(
-  timelineManager: TimelineManager,
+  timelineManager: PhotostreamManager,
   positionTop: number,
   positionHeight: number,
   expandTop: number = INTERSECTION_EXPAND_TOP,

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

@@ -1,8 +1,14 @@
+import type { PhotostreamManager } from '$lib/managers/timeline-manager/PhotostreamManager.svelte';
+import type { PhotostreamSegment } from '$lib/managers/timeline-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) {

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);
     }
 

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

@@ -1,7 +1,5 @@
 import { AssetOrder, type TimeBucketAssetResponseDto } from '@immich/sdk';
 
-import { CancellableTask } from '$lib/utils/cancellable-task';
-import { handleError } from '$lib/utils/handle-error';
 import {
   formatGroupTitle,
   formatGroupTitleFull,
@@ -9,15 +7,16 @@ import {
   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/timeline-manager/PhotostreamSegment.svelte';
 import { SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { GroupInsertionCache } from './group-insertion-cache.svelte';
@@ -25,71 +24,49 @@ 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);
   }
 
   get lastDayGroup() {
@@ -100,9 +77,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() {
@@ -244,67 +221,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)) {
@@ -318,7 +243,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) {
@@ -376,4 +301,26 @@ export class MonthGroup {
   cancel() {
     this.loader?.cancel();
   }
+
+  layout(noDefer: boolean) {
+    layoutMonthGroup(this.timelineManager, this, noDefer);
+  }
+
+  #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();
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
 import { 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 { TimelineManager } from './timeline-manager.svelte';
@@ -92,7 +92,7 @@ describe('TimelineManager', () => {
     });
   });
 
-  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 +128,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 +198,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 +215,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 +240,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 +341,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 +374,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 +388,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 +477,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 +523,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();
     });
   });

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 {
   addAssetsToMonthGroups,
   runAssetOperation,
@@ -23,6 +26,7 @@ import {
   retrieveRange as retrieveRangeUtil,
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
+import { PhotostreamManager } from '$lib/managers/timeline-manager/PhotostreamManager.svelte';
 import { DayGroup } from './day-group.svelte';
 import { isMismatched, updateObject } from './internal/utils.svelte';
 import { MonthGroup } from './month-group.svelte';
@@ -32,30 +36,14 @@ import type {
   Direction,
   ScrubberMonth,
   TimelineAsset,
-  TimelineManagerLayoutOptions,
   TimelineManagerOptions,
-  Viewport,
 } from './types';
 
-export class TimelineManager {
-  isInitialized = $state(false);
-  months: MonthGroup[] = $state([]);
-  topSectionHeight = $state(0);
-  bottomSectionHeight = $state(60);
-  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(
     () => {
@@ -73,121 +61,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?: {
@@ -199,7 +82,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;
     }
@@ -235,75 +118,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) {
@@ -314,16 +146,17 @@ 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);
   }
@@ -333,36 +166,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();
   }
 
@@ -377,39 +182,6 @@ 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);
@@ -443,7 +215,7 @@ 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);
   }
 
@@ -455,7 +227,7 @@ export class TimelineManager {
   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;
   }
 
@@ -528,7 +300,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;

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

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

web/src/lib/utils/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();

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

@@ -30,6 +30,12 @@ export type ScrubberListener = (scrubberData: {
   scrollToFunction?: (top: number) => void;
 }) => void | Promise<void>;
 
+export const getSegmentIdentifier = (yearMonth: TimelineYearMonth | TimelineDateTime) => ({
+  matches(segment: any) {
+    return segment.yearMonth && segment.yearMonth.year === yearMonth.year && segment.yearMonth.month === yearMonth.month;
+  },
+});
+
 // used for AssetResponseDto.dateTimeOriginal, amongst others
 export const fromISODateTime = (isoDateTime: string, timeZone: string): DateTime<true> =>
   DateTime.fromISO(isoDateTime, { zone: timeZone, locale: get(locale) }) as DateTime<true>;

web/src/routes/(user)/explore/+page.svelte

@@ -96,6 +96,7 @@
             >
               <div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">
                 <img
+                  style:filter="blur(10px)"
                   src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
                   alt={item.value}
                   class="object-cover aspect-square w-full"

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

@@ -5,7 +5,6 @@
   import AlbumCardGroup from '$lib/components/album-page/album-card-group.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';
@@ -20,6 +19,7 @@
   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 Gallery from '$lib/components/timeline/Gallery.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
@@ -31,20 +31,16 @@
   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 { IconButton } from '@immich/ui';
+  import { mdiArrowLeft, mdiDotsVertical, mdiPlus, mdiSelectAll } from '@mdi/js';
   import { tick } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -139,43 +135,51 @@
   };
 
   async function onSearchQueryUpdate() {
+    debugger;
     nextPage = 1;
     searchResultAssets = [];
     searchResultAlbums = [];
-    await loadNextPage(true);
+    // 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 searchTerms = $derived.by(() => ({
+    withExif: true,
+    isVisible: true,
+    language: $lang,
+    ...terms,
+  }));
 
-    const searchDto: SearchTerms = {
-      page: nextPage,
-      withExif: true,
-      isVisible: true,
-      language: $lang,
-      ...terms,
-    };
+  // // eslint-disable-next-line svelte/valid-prop-names-in-kit-pages
+  // export const loadNextPage = async (force?: boolean) => {
+  //   if (!nextPage || (isLoading && !force)) {
+  //     return;
+  //   }
+  //   isLoading = true;
 
-    try {
-      const { albums, assets } =
-        ('query' in searchDto || 'queryAssetId' in searchDto) && smartSearchEnabled
-          ? await searchSmart({ smartSearchDto: searchDto })
-          : await searchAssets({ metadataSearchDto: searchDto });
+  //   const searchDto: SearchTerms = {
+  //     page: nextPage,
+  //     withExif: true,
+  //     isVisible: true,
+  //     language: $lang,
+  //     ...terms,
+  //   };
 
-      searchResultAlbums.push(...albums.items);
-      searchResultAssets.push(...assets.items.map((asset) => toTimelineAsset(asset)));
+  //   try {
+  //     const { albums, assets } =
+  //       ('query' in searchDto || 'queryAssetId' in searchDto) && smartSearchEnabled
+  //         ? await searchSmart({ smartSearchDto: searchDto })
+  //         : await searchAssets({ metadataSearchDto: searchDto });
 
-      nextPage = Number(assets.nextPage) || 0;
-    } catch (error) {
-      handleError(error, $t('loading_search_results_failed'));
-    } finally {
-      isLoading = false;
-    }
-  };
+  //     searchResultAlbums.push(...albums.items);
+  //     searchResultAssets.push(...assets.items.map((asset) => toTimelineAsset(asset)));
+
+  //     nextPage = Number(assets.nextPage) || 0;
+  //   } catch (error) {
+  //     handleError(error, $t('loading_search_results_failed'));
+  //   } finally {
+  //     isLoading = false;
+  //   }
+  // };
 
   function getHumanReadableDate(dateString: string) {
     const date = parseUtcDate(dateString).startOf('day');
@@ -359,7 +363,7 @@
 {/if}
 
 <section
-  class="mb-12 bg-immich-bg dark:bg-immich-dark-bg m-4 max-h-screen"
+  class="mb-0 bg-immich-bg dark:bg-immich-dark-bg m-4 max-h-screen"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
   bind:this={searchResultsElement}
@@ -374,8 +378,12 @@
       </div>
     </section>
   {/if}
-  <section id="search-content">
-    {#if searchResultAssets.length > 0}
+  <section id="search-content" class="h-[calc(100dvh-144px)]">
+    {#key searchTerms}
+      <Gallery {searchTerms}></Gallery>
+    {/key}
+    <!-- {#if searchResultAssets.length > 0}
+      <Gallery {searchTerms}></Gallery>
       <GalleryViewer
         assets={searchResultAssets}
         {assetInteraction}
@@ -399,7 +407,7 @@
       <div class="flex justify-center py-16 items-center">
         <LoadingSpinner size="giant" />
       </div>
-    {/if}
+    {/if} -->
   </section>
 
   <section>