feat(web): Scroll to asset in gridview; increase gridview perf; reduce memory; scrollbar ticks in fixed position (#10646)

* Squashed

* Change strategy - now pre-measure buckets offscreen, so don't need to worry about sub-bucket scroll preservation

* Reduce jank on scroll, delay DOM updates until after scroll

* css opt, log measure time

* Trickle out queue while scrolling, flush when stopped

* yay

* Cleanup cleanup...

* everybody...

* everywhere...

* Clean up cleanup!

* Everybody do their share

* CLEANUP!

* package-lock ?

* dynamic measure, todo

* Fix web test

* type lint

* fix e2e

* e2e test

* Better scrollbar

* Tuning, and more tunables

* Tunable tweaks, more tunables

* Scrollbar dots and viewport events

* lint

* Tweaked tunnables, use requestIdleCallback for garbage tasks, bug fixes

* New tunables, and don't update url by default

* Bug fixes

* Bug fix, with debug

* Fix flickr, fix graybox bug, reduced debug

* Refactor/cleanup

* Fix

* naming

* Final cleanup

* review comment

* Forgot to update this after naming change

* scrubber works, with debug

* cleanup

* Rename scrollbar to scrubber

* rename  to

* left over rename and change to previous album bar

* bugfix addassets, comments

* missing destroy(), cleanup

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -1,9 +1,38 @@
+import type { AssetBucket } from '$lib/stores/assets.store';
 import { locale } from '$lib/stores/preferences.store';
 import type { AssetResponseDto } from '@immich/sdk';
-import { groupBy, sortBy } from 'lodash-es';
+import type createJustifiedLayout from 'justified-layout';
+import { groupBy, memoize, sortBy } from 'lodash-es';
 import { DateTime } from 'luxon';
 import { get } from 'svelte/store';
 
+export type DateGroup = {
+  date: DateTime;
+  groupTitle: string;
+  assets: AssetResponseDto[];
+  height: number;
+  heightActual: boolean;
+  intersecting: boolean;
+  geometry: Geometry;
+  bucket: AssetBucket;
+};
+export type ScrubberListener = (
+  bucketDate: string | undefined,
+  overallScrollPercent: number,
+  bucketScrollPercent: number,
+) => void | Promise<void>;
+export type ScrollTargetListener = ({
+  bucket,
+  dateGroup,
+  asset,
+  offset,
+}: {
+  bucket: AssetBucket;
+  dateGroup: DateGroup;
+  asset: AssetResponseDto;
+  offset: number;
+}) => void;
+
 export const fromLocalDateTime = (localDateTime: string) =>
   DateTime.fromISO(localDateTime, { zone: 'UTC', locale: get(locale) });
 
@@ -48,20 +77,48 @@ export function formatGroupTitle(_date: DateTime): string {
   return date.toLocaleString(groupDateFormat);
 }
 
-export function splitBucketIntoDateGroups(
-  assets: AssetResponseDto[],
-  locale: string | undefined,
-): AssetResponseDto[][] {
-  const grouped = groupBy(assets, (asset) =>
+type Geometry = ReturnType<typeof createJustifiedLayout> & {
+  containerWidth: number;
+};
+
+function emptyGeometry() {
+  return {
+    containerWidth: 0,
+    containerHeight: 0,
+    widowCount: 0,
+    boxes: [],
+  };
+}
+
+const formatDateGroupTitle = memoize(formatGroupTitle);
+
+export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string | undefined): DateGroup[] {
+  const grouped = groupBy(bucket.assets, (asset) =>
     fromLocalDateTime(asset.localDateTime).toLocaleString(groupDateFormat, { locale }),
   );
-  return sortBy(grouped, (group) => assets.indexOf(group[0]));
+  const sorted = sortBy(grouped, (group) => bucket.assets.indexOf(group[0]));
+  return sorted.map((group) => {
+    const date = fromLocalDateTime(group[0].localDateTime).startOf('day');
+    return {
+      date,
+      groupTitle: formatDateGroupTitle(date),
+      assets: group,
+      height: 0,
+      heightActual: false,
+      intersecting: false,
+      geometry: emptyGeometry(),
+      bucket: bucket,
+    };
+  });
 }
 
 export type LayoutBox = {
+  aspectRatio: number;
   top: number;
-  left: number;
   width: number;
+  height: number;
+  left: number;
+  forcedAspectRatio?: boolean;
 };
 
 export function calculateWidth(boxes: LayoutBox[]): number {
@@ -71,6 +128,14 @@ export function calculateWidth(boxes: LayoutBox[]): number {
       width = box.left + box.width;
     }
   }
-
   return width;
 }
+
+export function findTotalOffset(element: HTMLElement, stop: HTMLElement) {
+  let offset = 0;
+  while (element.offsetParent && element !== stop) {
+    offset += element.offsetTop;
+    element = element.offsetParent as HTMLElement;
+  }
+  return offset;
+}