feat(web): lighter timeline buckets (#17719)

* feat(web): lighter timeline buckets

* GalleryViewer

* weird ssr

* Remove generics from AssetInteraction

* ensure keys on getAssetInfo, alt-text

* empty - trigger ci

* re-add alt-text

* test fix

* update tests

* tests

* missing import

* fix: flappy e2e test

* lint

* revert settings

* unneeded cast

* fix after merge

* missing import

* lint

* review

* lint

* avoid abbreviations

* review comment - type safety in test

* merge conflicts

* lint

* lint/abbreviations

* fix: left-over migration

---------

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

web/src/lib/utils/layout-utils.ts

@@ -1,7 +1,10 @@
-import { getAssetRatio } from '$lib/utils/asset-utils';
 // import { TUNABLES } from '$lib/utils/tunables';
 // note: it's important that this is not imported in more than one file due to https://github.com/sveltejs/kit/issues/7805
 // import { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
+
+import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
+import { getAssetRatio } from '$lib/utils/asset-utils';
+import { isTimelineAsset } from '$lib/utils/timeline-util';
 import type { AssetResponseDto } from '@immich/sdk';
 import createJustifiedLayout from 'justified-layout';
 
@@ -26,7 +29,7 @@ export type CommonLayoutOptions = {
 };
 
 export function getJustifiedLayoutFromAssets(
-  assets: AssetResponseDto[],
+  assets: (TimelineAsset | AssetResponseDto)[],
   options: CommonLayoutOptions,
 ): CommonJustifiedLayout {
   // if (useWasm) {
@@ -87,7 +90,7 @@ class Adapter {
   }
 }
 
-export function justifiedLayout(assets: AssetResponseDto[], options: CommonLayoutOptions) {
+export function justifiedLayout(assets: (TimelineAsset | AssetResponseDto)[], options: CommonLayoutOptions) {
   const adapter = {
     targetRowHeight: options.rowHeight,
     containerWidth: options.rowWidth,
@@ -96,7 +99,7 @@ export function justifiedLayout(assets: AssetResponseDto[], options: CommonLayou
   };
 
   const result = createJustifiedLayout(
-    assets.map((g) => getAssetRatio(g)),
+    assets.map((asset) => (isTimelineAsset(asset) ? asset.ratio : getAssetRatio(asset))),
     adapter,
   );
   return new Adapter(result);