refactor(web): asset store (#3528)

* refactor(web): asset store

* chore: remove TODO

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

@@ -1,19 +1,19 @@
 <script lang="ts">
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { AssetStore } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { AssetResponseDto } from '@api';
+  import { TimeGroupEnum, type AssetResponseDto } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
   import AssetGrid from '../photos-page/asset-grid.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import { createAssetStore } from '$lib/stores/assets.store';
-  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
 
   const dispatch = createEventDispatcher();
 
-  const assetStore = createAssetStore();
+  const assetStore = new AssetStore({ timeGroup: TimeGroupEnum.Month });
   const assetInteractionStore = createAssetInteractionStore();
   const { selectedAssets, assetsInAlbumState } = assetInteractionStore;
 

web/src/lib/components/asset-viewer/intersection-observer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { BucketPosition } from '$lib/models/asset-grid-state';
-  import { onMount } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
+  import { BucketPosition } from '$lib/stores/assets.store';
+  import { createEventDispatcher, onMount } from 'svelte';
 
   export let once = false;
   export let top = 0;

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { BucketPosition, type AssetStore } from '$lib/stores/assets.store';
+  import { handleError } from '$lib/utils/handle-error';
   import SelectAll from 'svelte-material-icons/SelectAll.svelte';
   import TimerSand from 'svelte-material-icons/TimerSand.svelte';
-  import { handleError } from '../../../utils/handle-error';
-  import { BucketPosition } from '$lib/models/asset-grid-state';
-  import type { AssetStore } from '$lib/stores/assets.store';
-  import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { get } from 'svelte/store';
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -13,12 +13,13 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { AssetStore } from '$lib/stores/assets.store';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import type { Viewport } from '$lib/stores/assets.store';
 
   export let assets: AssetResponseDto[];
   export let bucketDate: string;
   export let bucketHeight: number;
   export let isAlbumSelectionMode = false;
-  export let viewportWidth: number;
+  export let viewport: Viewport;
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
@@ -45,7 +46,7 @@
     for (let group of assetsGroupByDate) {
       const justifiedLayoutResult = justifiedLayout(group.map(getAssetRatio), {
         boxSpacing: 2,
-        containerWidth: Math.floor(viewportWidth),
+        containerWidth: Math.floor(viewport.width),
         containerPadding: 0,
         targetRowHeightTolerance: 0.15,
         targetRowHeight: 235,
@@ -59,7 +60,7 @@
   })();
 
   $: {
-    if (actualBucketHeight && actualBucketHeight != 0 && actualBucketHeight != bucketHeight) {
+    if (actualBucketHeight && actualBucketHeight !== 0 && actualBucketHeight != bucketHeight) {
       const heightDelta = assetStore.updateBucket(bucketDate, actualBucketHeight);
       if (heightDelta !== 0) {
         scrollTimeline(heightDelta);
@@ -143,12 +144,7 @@
   };
 </script>
 
-<section
-  id="asset-group-by-date"
-  class="flex flex-wrap gap-x-12"
-  bind:clientHeight={actualBucketHeight}
-  bind:clientWidth={viewportWidth}
->
+<section id="asset-group-by-date" class="flex flex-wrap gap-x-12" bind:clientHeight={actualBucketHeight}>
   {#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
     {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
     <!-- Asset Group By Date -->

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

@@ -1,10 +1,8 @@
 <script lang="ts">
-  import { BucketPosition } from '$lib/models/asset-grid-state';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { locale } from '$lib/stores/preferences.store';
   import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
-  import type { UserResponseDto } from '@api';
-  import { AssetResponseDto, TimeGroupEnum, api } from '@api';
+  import type { AssetResponseDto } from '@api';
   import { DateTime } from 'luxon';
   import { onDestroy, onMount } from 'svelte';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
@@ -21,11 +19,10 @@
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import type { AssetStore } from '$lib/stores/assets.store';
+  import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
   import { isSearchEnabled } from '$lib/stores/search.store';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
 
-  export let user: UserResponseDto | undefined = undefined;
   export let isAlbumSelectionMode = false;
   export let showMemoryLane = false;
 
@@ -36,8 +33,7 @@
 
   let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
 
-  let viewportHeight = 0;
-  let viewportWidth = 0;
+  const viewport: Viewport = { width: 0, height: 0 };
   let assetGridElement: HTMLElement;
   let showShortcuts = false;
 
@@ -45,23 +41,13 @@
 
   onMount(async () => {
     document.addEventListener('keydown', onKeyboardPress);
-    const { data: timeBuckets } = await api.assetApi.getAssetCountByTimeBucket({
-      getAssetCountByTimeBucketDto: {
-        timeGroup: TimeGroupEnum.Month,
-        userId: user?.id,
-        withoutThumbs: true,
-      },
-    });
-
-    assetStore.init({ width: viewportHeight, height: viewportWidth }, timeBuckets.buckets, user?.id);
+    await assetStore.init(viewport);
   });
 
   onDestroy(() => {
     if (browser) {
       document.removeEventListener('keydown', onKeyboardPress);
     }
-
-    assetStore.init({ width: 0, height: 0 }, [], undefined);
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
@@ -292,10 +278,10 @@
   <ShowShortcuts on:close={() => (showShortcuts = !showShortcuts)} />
 {/if}
 
-{#if viewportHeight && $assetStore.initialized && $assetStore.timelineHeight > viewportHeight}
+{#if $assetStore.timelineHeight > viewport.height}
   <Scrollbar
     {assetStore}
-    scrollbarHeight={viewportHeight}
+    scrollbarHeight={viewport.height}
     scrollTop={lastScrollPosition}
     on:onscrollbarclick={(e) => handleScrollbarClick(e.detail)}
     on:onscrollbardrag={(e) => handleScrollbarDrag(e.detail)}
@@ -306,8 +292,8 @@
 <section
   id="asset-grid"
   class="scrollbar-hidden mb-4 ml-4 mr-[60px] overflow-y-auto"
-  bind:clientHeight={viewportHeight}
-  bind:clientWidth={viewportWidth}
+  bind:clientHeight={viewport.height}
+  bind:clientWidth={viewport.width}
   bind:this={assetGridElement}
   on:scroll={handleTimelineScroll}
 >
@@ -337,7 +323,7 @@
                 assets={bucket.assets}
                 bucketDate={bucket.bucketDate}
                 bucketHeight={bucket.bucketHeight}
-                {viewportWidth}
+                {viewport}
               />
             {/if}
           </div>