Search results use photostream

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 TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
+  import SelectableTimelineDaygroup from '$lib/components/timeline/internal-components/selectable-timeline-daygroup.svelte';
+  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.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';
@@ -71,21 +77,66 @@
 
 <BaseTimeline
   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 })}
+    <SelectableTimelineMonth
+      {segment}
+      {onScrollCompensationMonthInDOM}
+      {timelineManager}
+      {assetInteraction}
+      {isSelectionMode}
+      {singleSelect}
+    >
+      {#snippet content({ onAssetOpen, onAssetSelect, onHover })}
+        <SelectableTimelineDaygroup {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}
+        </SelectableTimelineDaygroup>
+      {/snippet}
+    </SelectableTimelineMonth>
+  {/snippet}
+</BaseTimeline>
 
 <TimelineKeyboardActions
   scrollToAsset={(asset) => viewer?.scrollToAsset(asset) ?? false}