refactor(server,web): time buckets for main timeline, archived, and favorites (1) (#3537)

* refactor: time buckets

* feat(web): use new time bucket api

* feat(web): use asset grid in archive/favorites

* chore: open api

* chore: clean up uuid validation

* refactor(web): move memory lane to photos page

* Update web/src/routes/(user)/archive/+page.svelte

Co-authored-by: Sergey Kondrikov <sergey.kondrikov@gmail.com>

* fix: hide archived photos on main timeline

* fix: select exif info

---------

Co-authored-by: Sergey Kondrikov <sergey.kondrikov@gmail.com>

web/src/lib/components/album-page/asset-selection.svelte

@@ -3,7 +3,7 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import { TimeGroupEnum, type AssetResponseDto } from '@api';
+  import { TimeBucketSize, type AssetResponseDto } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
@@ -13,7 +13,7 @@
 
   const dispatch = createEventDispatcher();
 
-  const assetStore = new AssetStore({ timeGroup: TimeGroupEnum.Month });
+  const assetStore = new AssetStore({ size: TimeBucketSize.Month });
   const assetInteractionStore = createAssetInteractionStore();
   const { selectedAssets, assetsInAlbumState } = assetInteractionStore;
 

web/src/lib/components/layouts/user-page-layout.svelte

@@ -7,6 +7,9 @@
   export let hideNavbar = false;
   export let showUploadButton = false;
   export let title: string | undefined = undefined;
+  export let scrollbar = true;
+
+  $: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden pl-4';
 </script>
 
 <header>
@@ -32,7 +35,7 @@
           <slot name="buttons" />
         </div>
 
-        <div class="immich-scrollbar absolute top-16 h-[calc(100%-theme(spacing.16))] w-full overflow-y-auto p-4 pb-8">
+        <div class="{scrollbarClass} absolute top-16 h-[calc(100%-theme(spacing.16))] w-full overflow-y-auto">
           <slot />
         </div>
       </section>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -274,7 +274,7 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class="scrollbar-hidden ml-4 mr-[60px] overflow-y-auto pb-4"
+  class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-4"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
   bind:this={element}

web/src/lib/components/shared-components/empty-placeholder.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import empty1Url from '$lib/assets/empty-1.svg';
 
-  export let actionHandler: undefined | (() => Promise<void>) = undefined;
+  export let actionHandler: undefined | (() => unknown) = undefined;
   export let text = '';
   export let alt = '';
 

web/src/lib/stores/assets.store.ts

@@ -1,4 +1,4 @@
-import { api, AssetResponseDto, GetAssetCountByTimeBucketDto } from '@api';
+import { api, AssetApiGetTimeBucketsRequest, AssetResponseDto } from '@api';
 import { writable } from 'svelte/store';
 import { handleError } from '../utils/handle-error';
 
@@ -9,7 +9,7 @@ export enum BucketPosition {
   Unknown = 'unknown',
 }
 
-export type AssetStoreOptions = GetAssetCountByTimeBucketDto;
+export type AssetStoreOptions = AssetApiGetTimeBucketsRequest;
 
 export interface Viewport {
   width: number;
@@ -51,11 +51,9 @@ export class AssetStore {
   subscribe = this.store$.subscribe;
 
   async init(viewport: Viewport) {
-    const { data } = await api.assetApi.getAssetCountByTimeBucket({
-      getAssetCountByTimeBucketDto: { ...this.options, withoutThumbs: true },
-    });
+    const { data: buckets } = await api.assetApi.getTimeBuckets(this.options);
 
-    this.buckets = data.buckets.map((bucket) => {
+    this.buckets = buckets.map((bucket) => {
       const unwrappedWidth = (3 / 2) * bucket.count * THUMBNAIL_HEIGHT * (7 / 10);
       const rows = Math.ceil(unwrappedWidth / viewport.width);
       const height = rows * THUMBNAIL_HEIGHT;
@@ -101,14 +99,8 @@ export class AssetStore {
 
       bucket.cancelToken = new AbortController();
 
-      const { data: assets } = await api.assetApi.getAssetByTimeBucket(
-        {
-          getAssetByTimeBucketDto: {
-            timeBucket: [bucketDate],
-            ...this.options,
-            withoutThumbs: true,
-          },
-        },
+      const { data: assets } = await api.assetApi.getByTimeBucket(
+        { ...this.options, timeBucket: bucketDate },
         { signal: bucket.cancelToken.signal },
       );