Improve consistency between scrollTop and scrollTo

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

@@ -32,7 +32,7 @@
     styleMarginRightOverride?: string;
     onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
     onSelect?: (asset: TimelineAsset) => void;
-    header?: Snippet<[handleScrollTop: (top: number) => void]>;
+    header?: Snippet<[scrollToFunction: (top: number) => void]>;
     children?: Snippet;
     empty?: Snippet;
     handleTimelineScroll?: () => void;
@@ -86,20 +86,12 @@
       element.scrollTo({ top });
     }
   };
-  const scrollTop = (top: number) => {
+
-    if (element) {
-      element.scrollTop = top;
-    }
-  };
   const scrollBy = (y: number) => {
     if (element) {
       element.scrollBy(0, y);
     }
   };
-  const scrollToTop = () => {
-    scrollTo(0);
-  };
-  const onScrollToTop = scrollToTop;
 
   const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
     // the following method may trigger any layouts, so need to
@@ -158,7 +150,7 @@
     }
     if (!scrolled) {
       // if the asset is not found, scroll to the top
-      scrollToTop();
+      scrollTo(0);
     }
     showSkeleton = false;
   };
@@ -207,7 +199,7 @@
   }}
 />
 
-{@render header?.(scrollTop)}
+{@render header?.(scrollTo)}
 
 <!-- Right margin MUST be equal to the width of scrubber -->
 <section
@@ -274,8 +266,12 @@
             {singleSelect}
             {monthGroup}
             {onAssetOpen}
-            {onSelect}
+            onSelect={(isSingleSelect: boolean, asset: TimelineAsset) => {
-            {onScrollToTop}
+              if (isSingleSelect) {
+                scrollTo(0);
+              }
+              onSelect?.(asset);
+            }}
             {onScrollCompensation}
           />
         </div>

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

@@ -133,13 +133,13 @@
     scrubberMonth,
     overallScrollPercent,
     scrubberMonthScrollPercent,
-    handleScrollTop,
+    scrollToFunction,
   }) => {
     if (!scrubberMonth || timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
       // edge case - scroll limited due to size of content, must adjust - use use the overall percent instead
       const maxScroll = timelineManager.getMaxScroll();
       const offset = maxScroll * overallScrollPercent;
-      handleScrollTop?.(offset);
+      scrollToFunction?.(offset);
     } else {
       const monthGroup = timelineManager.months.find(
         ({ yearMonth: { year, month } }) => year === scrubberMonth.year && month === scrubberMonth.month,
@@ -147,7 +147,7 @@
       if (!monthGroup) {
         return;
       }
-      scrollToMonthGroupAndOffset(monthGroup, scrubberMonthScrollPercent, handleScrollTop);
+      scrollToMonthGroupAndOffset(monthGroup, scrubberMonthScrollPercent, scrollToFunction);
     }
   };
 
@@ -185,7 +185,7 @@
   {empty}
   {handleTimelineScroll}
 >
-  {#snippet header(handleScrollTop)}
+  {#snippet header(scrollTo)}
     {#if timelineManager.months.length > 0}
       <Scrubber
         {timelineManager}
@@ -196,7 +196,7 @@
         {scrubOverallPercent}
         {scrubberMonthPercent}
         {scrubberMonth}
-        onScrub={(args) => onScrub({ ...args, handleScrollTop })}
+        onScrub={(args) => onScrub({ ...args, scrollToFunction: scrollTo })}
         bind:scrubberWidth
       />
     {/if}

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

@@ -24,9 +24,8 @@
     customThumbnailLayout?: Snippet<[TimelineAsset]>;
 
     onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
+    onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
     onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-    onScrollToTop: () => void;
   }
 
   let {
@@ -41,7 +40,6 @@
     onAssetOpen,
     onSelect,
     onScrollCompensation,
-    onScrollToTop,
   }: Props = $props();
 
   let lastAssetMouseEvent: TimelineAsset | null = $state(null);
@@ -161,10 +159,10 @@
     if (!asset) {
       return;
     }
-    onSelect?.(asset);
+    onSelect?.(singleSelect, asset);
 
     if (singleSelect) {
-      onScrollToTop();
+      // onScrollToTop();
 
       return;
     }

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

@@ -27,7 +27,7 @@ export type ScrubberListener = (args: {
   scrubberMonth: { year: number; month: number };
   overallScrollPercent: number;
   scrubberMonthScrollPercent: number;
-  handleScrollTop?: (top: number) => void;
+  scrollToFunction?: (top: number) => void;
 }) => void | Promise<void>;
 
 // used for AssetResponseDto.dateTimeOriginal, amongst others