diff --git a/web/src/lib/components/photos-page/asset-grid-actions.svelte b/web/src/lib/components/photos-page/asset-grid-actions.svelte index 9d40e384e7..7bafd97d09 100644 --- a/web/src/lib/components/photos-page/asset-grid-actions.svelte +++ b/web/src/lib/components/photos-page/asset-grid-actions.svelte @@ -129,9 +129,9 @@ } }; - let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash); - let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0); - let idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id)); + const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash); + const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0); + const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id)); let isShortcutModalOpen = false; const handleOpenShortcutModal = async () => { diff --git a/web/src/lib/components/photos-page/asset-grid-asset-viewer.svelte b/web/src/lib/components/timeline-viewer/timeline-asset-viewer.svelte similarity index 100% rename from web/src/lib/components/photos-page/asset-grid-asset-viewer.svelte rename to web/src/lib/components/timeline-viewer/timeline-asset-viewer.svelte diff --git a/web/src/lib/components/photos-page/asset-date-group-selection-aware.svelte b/web/src/lib/components/timeline-viewer/timeline-day/selectable-timeline-day.svelte similarity index 97% rename from web/src/lib/components/photos-page/asset-date-group-selection-aware.svelte rename to web/src/lib/components/timeline-viewer/timeline-day/selectable-timeline-day.svelte index 24e9fb5394..29b6e2076a 100644 --- a/web/src/lib/components/photos-page/asset-date-group-selection-aware.svelte +++ b/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 @@ - assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)} isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)} isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)} -> +/> diff --git a/web/src/lib/components/photos-page/asset-date-group-comp.svelte b/web/src/lib/components/timeline-viewer/timeline-day/timeline-day.svelte similarity index 99% rename from web/src/lib/components/photos-page/asset-date-group-comp.svelte rename to web/src/lib/components/timeline-viewer/timeline-day/timeline-day.svelte index d1420274f9..d3d1e34ce6 100644 --- a/web/src/lib/components/photos-page/asset-date-group-comp.svelte +++ b/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, diff --git a/web/src/lib/components/timeline-viewer/timeline-viewer.svelte b/web/src/lib/components/timeline-viewer/timeline-viewer.svelte index 982895a70f..cfb29d1f88 100644 --- a/web/src/lib/components/timeline-viewer/timeline-viewer.svelte +++ b/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%" > - {#if $showAssetViewer} - + {/if} diff --git a/web/src/lib/managers/timeline-manager/day-group.svelte.ts b/web/src/lib/managers/timeline-manager/day-group.svelte.ts index 9d5008bf83..edbbc27b88 100644 --- a/web/src/lib/managers/timeline-manager/day-group.svelte.ts +++ b/web/src/lib/managers/timeline-manager/day-group.svelte.ts @@ -13,6 +13,7 @@ export class DayGroup { readonly monthGroup: MonthGroup; readonly index: number; readonly groupTitle: string; + readonly groupTitleFull: string; readonly day: number; viewerAssets: ViewerAsset[] = $state([]); @@ -31,6 +32,7 @@ export class DayGroup { this.monthGroup = monthGroup; this.day = day; this.groupTitle = groupTitle; + this.groupTitleFull = groupTitle; } get top() { diff --git a/web/src/lib/managers/timeline-manager/month-group.svelte.ts b/web/src/lib/managers/timeline-manager/month-group.svelte.ts index e406972900..52a76f2c35 100644 --- a/web/src/lib/managers/timeline-manager/month-group.svelte.ts +++ b/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); diff --git a/web/src/lib/utils/timeline-util.ts b/web/src/lib/utils/timeline-util.ts index f8cc32973f..0a4bc3b694 100644 --- a/web/src/lib/utils/timeline-util.ts +++ b/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; + return getDateLocaleString(date); +}; + export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string => date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);