diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte index 260a06c478..2ead425759 100644 --- a/web/src/lib/components/photos-page/asset-date-group.svelte +++ b/web/src/lib/components/photos-page/asset-date-group.svelte @@ -33,12 +33,8 @@ assetInteraction: AssetInteraction; customLayout?: Snippet<[TimelineAsset]>; onSelect: (asset: TimelineAsset) => void; - - // onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void; - // onSelectAssets: (asset: TimelineAsset) => void; - // onSelectAssetCandidates: (asset: TimelineAsset | null) => void; onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void; - scrollTop: (top: number) => void; + onScrollToTop: () => void; onThumbnailClick?: ( asset: TimelineAsset, timelineManager: TimelineManager, @@ -63,7 +59,7 @@ customLayout, onSelect, onScrollCompensation, - scrollTop, + onScrollToTop, onThumbnailClick, }: Props = $props(); @@ -74,7 +70,7 @@ actionLib.timelineManager = timelineManager; actionLib.singleSelect = singleSelect; actionLib.onSelect = onSelect; - actionLib.scrollTop = scrollTop; + actionLib.onScrollToTop = onScrollToTop; }); let isMouseOverGroup = $state(false); diff --git a/web/src/lib/components/photos-page/asset-grid-without-scrubber.svelte b/web/src/lib/components/photos-page/asset-grid-without-scrubber.svelte index 4e07b92790..986d973d81 100644 --- a/web/src/lib/components/photos-page/asset-grid-without-scrubber.svelte +++ b/web/src/lib/components/photos-page/asset-grid-without-scrubber.svelte @@ -132,6 +132,7 @@ const scrollToTop = () => { scrollTo(0); }; + const onScrollToTop = scrollToTop; const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => { // the following method may trigger any layouts, so need to @@ -139,7 +140,7 @@ const height = monthGroup!.findAssetAbsolutePosition(assetId); while (timelineManager.scrollCompensation.monthGroup) { - handleScrollCompensation(timelineManager.scrollCompensation); + scrollCompensation(timelineManager.scrollCompensation); timelineManager.clearScrollCompensation(); } return height; @@ -247,7 +248,7 @@ // note: don't throttle, debounch, or otherwise do this function async - it causes flicker const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0); - const handleScrollCompensation = ({ heightDelta, scrollTop }: { heightDelta?: number; scrollTop?: number }) => { + const scrollCompensation = ({ heightDelta, scrollTop }: { heightDelta?: number; scrollTop?: number }) => { if (heightDelta !== undefined) { scrollBy(heightDelta); } else if (scrollTop !== undefined) { @@ -259,6 +260,7 @@ // causing bad perf, and also, disrupting focus of those elements. updateSlidingWindow(); }; + const onScrollCompensation = scrollCompensation; const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height); @@ -346,8 +348,8 @@ {singleSelect} {monthGroup} {onSelect} - {scrollTop} - onScrollCompensation={handleScrollCompensation} + {onScrollToTop} + {onScrollCompensation} {customLayout} {onThumbnailClick} /> diff --git a/web/src/lib/components/photos-page/date-group-actions-lib.svelte.ts b/web/src/lib/components/photos-page/date-group-actions-lib.svelte.ts index 1521091267..dac2548b9a 100644 --- a/web/src/lib/components/photos-page/date-group-actions-lib.svelte.ts +++ b/web/src/lib/components/photos-page/date-group-actions-lib.svelte.ts @@ -10,7 +10,7 @@ import { searchStore } from '$lib/stores/search.svelte'; */ export class DateGroupActionLib { onSelect: (asset: TimelineAsset) => void = () => void 0; - scrollTop: (top: number) => void = () => void 0; + onScrollToTop: () => void = () => void 0; assetInteraction: AssetInteraction = $state(new AssetInteraction()); timelineManager: TimelineManager = $state(new TimelineManager()); singleSelect: boolean = $state(false); @@ -94,7 +94,7 @@ export class DateGroupActionLib { this.onSelect(asset); if (this.singleSelect) { - this.scrollTop(0); + this.onScrollToTop(); return; }