Rename and relocate timeline-related components

• Move asset-grid-asset-viewer to timeline-asset-viewer in timeline-viewer/
• Move asset-date-group-selection-aware to selectable-timeline-day in timeline-viewer/timeline-day/
• Move asset-date-group-comp to timeline-day in timeline-viewer/timeline-day/
• Update all imports in timeline-viewer.svelte

web/src/lib/components/photos-page/asset-grid-actions.svelte

@@ -129,9 +129,9 @@
     }
   };
 
-  let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
+  const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
-  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  let idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
+  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
   let isShortcutModalOpen = false;
 
   const handleOpenShortcutModal = async () => {

web/src/lib/components/timeline-viewer/timeline-day/selectable-timeline-day.svelte

@@ -7,10 +7,11 @@
   import { uploadAssetsStore } from '$lib/stores/upload';
   import { navigate } from '$lib/utils/navigation';
 
-  import AssetDateGroupComp from '$lib/components/photos-page/asset-date-group-comp.svelte';
+  import TimelineDay from '$lib/components/timeline-viewer/timeline-day/timeline-day.svelte';
   import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import { assetsSnapshot, type Snippet } from '$lib/managers/timeline-manager/utils.svelte';
+  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
   import { searchStore } from '$lib/stores/search.svelte';
+  import type { Snippet } from 'svelte';
 
   let { isUploading } = uploadAssetsStore;
 
@@ -22,11 +23,13 @@
     monthGroup: MonthGroup;
     timelineManager: TimelineManager;
     assetInteraction: AssetInteraction;
+
     customLayout?: Snippet<[TimelineAsset]>;
+
+    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
     onSelect: (asset: TimelineAsset) => void;
     onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
     onScrollToTop: () => void;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
   }
 
   let {
@@ -36,12 +39,12 @@
     showArchiveIcon,
     monthGroup = $bindable(),
     assetInteraction,
-    timelineManager,
     customLayout,
+    timelineManager,
+    onAssetOpen,
     onSelect,
     onScrollCompensation,
     onScrollToTop,
-    onAssetOpen,
   }: Props = $props();
 
   let lastAssetMouseEvent: TimelineAsset | null = $state(null);
@@ -259,7 +262,7 @@
 
 <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
 
-<AssetDateGroupComp
+<TimelineDay
   {customLayout}
   {isSelectionMode}
   {singleSelect}
@@ -267,7 +270,6 @@
   {showArchiveIcon}
   {monthGroup}
   {timelineManager}
-  {onThumbnailClick}
   {onScrollCompensation}
   onHover={handleOnHover}
   onAssetOpen={handleOnAssetOpen}
@@ -277,4 +279,4 @@
   isAssetSelected={(asset) => assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
   isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)}
   isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)}
-></AssetDateGroupComp>
+/>

web/src/lib/components/timeline-viewer/timeline-day/timeline-day.svelte

@@ -24,6 +24,7 @@
     showArchiveIcon: boolean;
     monthGroup: MonthGroup;
     timelineManager: TimelineManager;
+
     customLayout?: Snippet<[TimelineAsset]>;
 
     onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
@@ -46,6 +47,7 @@
     showArchiveIcon,
     monthGroup,
     timelineManager,
+
     customLayout,
 
     onScrollCompensation,

web/src/lib/components/timeline-viewer/timeline-viewer.svelte

@@ -2,10 +2,10 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/stores';
   import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import AssetDateGroupSelectionAware from '$lib/components/photos-page/asset-date-group-selection-aware.svelte';
   import AssetGridActions from '$lib/components/photos-page/asset-grid-actions.svelte';
-  import AssetGridAssetViewer from '$lib/components/photos-page/asset-grid-asset-viewer.svelte';
   import Skeleton from '$lib/components/timeline-viewer/skeleton.svelte';
+  import TimelineAssetViewer from '$lib/components/timeline-viewer/timeline-asset-viewer.svelte';
+  import SelectableTimelineDay from '$lib/components/timeline-viewer/timeline-day/selectable-timeline-day.svelte';
   import { AssetAction } from '$lib/constants';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -316,7 +316,7 @@
           style:transform={`translate3d(0,${absoluteHeight}px,0)`}
           style:width="100%"
         >
-          <AssetDateGroupSelectionAware
+          <SelectableTimelineDay
             {withStacked}
             {showArchiveIcon}
             {assetInteraction}
@@ -344,15 +344,7 @@
 
 <Portal target="body">
   {#if $showAssetViewer}
-    <AssetGridAssetViewer
+    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
-      bind:showSkeleton
-      {timelineManager}
-      {removeAction}
-      {withStacked}
-      {isShared}
-      {album}
-      {person}
-    />
   {/if}
 </Portal>
 

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

@@ -13,6 +13,7 @@ export class DayGroup {
   readonly monthGroup: MonthGroup;
   readonly index: number;
   readonly groupTitle: string;
+  readonly groupTitleFull: string;
   readonly day: number;
   viewerAssets: ViewerAsset[] = $state([]);
 
@@ -31,6 +32,7 @@ export class DayGroup {
     this.monthGroup = monthGroup;
     this.day = day;
     this.groupTitle = groupTitle;
+    this.groupTitleFull = groupTitle;
   }
 
   get top() {

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

@@ -4,6 +4,7 @@ import { CancellableTask } from '$lib/utils/cancellable-task';
 import { handleError } from '$lib/utils/handle-error';
 import {
   formatGroupTitle,
+  formatGroupTitleFull,
   formatMonthGroupTitle,
   fromTimelinePlainDate,
   fromTimelinePlainDateTime,
@@ -222,7 +223,8 @@ export class MonthGroup {
       addContext.setDayGroup(dayGroup, localDateTime);
     } else {
       const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
+      const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
+      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
       this.dayGroups.push(dayGroup);
       addContext.setDayGroup(dayGroup, localDateTime);
       addContext.newDayGroups.add(dayGroup);

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

@@ -152,6 +152,14 @@ export function formatGroupTitle(_date: DateTime): string {
   return getDateLocaleString(date, { locale: get(locale) });
 }
 
+export const formatGroupTitleFull = (_date: DateTime): string => {
+  if (!_date.isValid) {
+    return _date.toString();
+  }
+  const date = _date as DateTime<true>;
+  return getDateLocaleString(date);
+};
+
 export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
   date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);