refactor(web): asset grid stores (#3464)

* Refactor asset grid stores

* Iterate over buckets with for..of loop

* Rebase on top of main branch changes

web/src/routes/(user)/map/+page.svelte

@@ -3,11 +3,6 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import MapSettingsModal from '$lib/components/map-page/map-settings-modal.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import {
-    assetInteractionStore,
-    isViewingAssetStoreState,
-    viewingAssetStoreState,
-  } from '$lib/stores/asset-interaction.store';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { MapMarkerResponseDto, api } from '@api';
   import { isEqual, omit } from 'lodash-es';
@@ -15,9 +10,12 @@
   import Cog from 'svelte-material-icons/Cog.svelte';
   import type { PageData } from './$types';
   import { DateTime, Duration } from 'luxon';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let data: PageData;
 
+  let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
+
   let leaflet: typeof import('$lib/components/shared-components/leaflet');
   let mapMarkers: MapMarkerResponseDto[] = [];
   let abortController: AbortController;
@@ -34,8 +32,7 @@
     if (abortController) {
       abortController.abort();
     }
-    assetInteractionStore.clearMultiselect();
-    assetInteractionStore.setIsViewingAsset(false);
+    assetViewingStore.showAssetViewer(false);
   });
 
   async function loadMapMarkers() {
@@ -83,20 +80,20 @@
   }
 
   function onViewAssets(assetIds: string[], activeAssetIndex: number) {
-    assetInteractionStore.setViewingAssetId(assetIds[activeAssetIndex]);
+    assetViewingStore.setAssetId(assetIds[activeAssetIndex]);
     viewingAssets = assetIds;
     viewingAssetCursor = activeAssetIndex;
   }
 
   function navigateNext() {
     if (viewingAssetCursor < viewingAssets.length - 1) {
-      assetInteractionStore.setViewingAssetId(viewingAssets[++viewingAssetCursor]);
+      assetViewingStore.setAssetId(viewingAssets[++viewingAssetCursor]);
     }
   }
 
   function navigatePrevious() {
     if (viewingAssetCursor > 0) {
-      assetInteractionStore.setViewingAssetId(viewingAssets[--viewingAssetCursor]);
+      assetViewingStore.setAssetId(viewingAssets[--viewingAssetCursor]);
     }
   }
 </script>
@@ -142,14 +139,14 @@
 </UserPageLayout>
 
 <Portal target="body">
-  {#if $isViewingAssetStoreState}
+  {#if $showAssetViewer}
     <AssetViewer
-      asset={$viewingAssetStoreState}
+      asset={$viewingAsset}
       showNavigation={viewingAssets.length > 1}
       on:navigate-next={navigateNext}
       on:navigate-previous={navigatePrevious}
       on:close={() => {
-        assetInteractionStore.setIsViewingAsset(false);
+        assetViewingStore.showAssetViewer(false);
       }}
     />
   {/if}

web/src/routes/(user)/partners/[userId]/+page.svelte

@@ -8,21 +8,26 @@
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import { AppRoute } from '$lib/constants';
-  import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
   import { onDestroy } from 'svelte';
   import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
   import Plus from 'svelte-material-icons/Plus.svelte';
   import type { PageData } from './$types';
+  import { createAssetStore } from '$lib/stores/assets.store';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
 
   export let data: PageData;
 
+  const assetStore = createAssetStore();
+  const assetInteractionStore = createAssetInteractionStore();
+  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
+
   onDestroy(() => {
     assetInteractionStore.clearMultiselect();
   });
 </script>
 
 <main class="grid h-screen bg-immich-bg pt-18 dark:bg-immich-dark-bg">
-  {#if $isMultiSelectStoreState}
+  {#if $isMultiSelectState}
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
       <DownloadAction />
     </AssetSelectControlBar>
@@ -44,5 +49,5 @@
       </svelte:fragment>
     </ControlAppBar>
   {/if}
-  <AssetGrid user={data.partner} />
+  <AssetGrid {assetStore} {assetInteractionStore} user={data.partner} />
 </main>

web/src/routes/(user)/photos/+page.svelte

@@ -11,8 +11,8 @@
   import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
-  import { assetStore } from '$lib/stores/assets.store';
+  import { createAssetStore } from '$lib/stores/assets.store';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { api } from '@api';
   import { onDestroy, onMount } from 'svelte';
@@ -23,6 +23,10 @@
   export let data: PageData;
   let assetCount = 1;
 
+  const assetStore = createAssetStore();
+  const assetInteractionStore = createAssetInteractionStore();
+  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
+
   onMount(async () => {
     const { data: stats } = await api.assetApi.getAssetStats();
     assetCount = stats.total;
@@ -39,12 +43,12 @@
   };
 </script>
 
-<UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
+<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton>
   <svelte:fragment slot="header">
-    {#if $isMultiSelectStoreState}
+    {#if $isMultiSelectState}
       <AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
         <CreateSharedLink />
-        <SelectAllAssets />
+        <SelectAllAssets {assetStore} {assetInteractionStore} />
         <AssetSelectContextMenu icon={Plus} title="Add">
           <AddToAlbum />
           <AddToAlbum shared />
@@ -60,7 +64,7 @@
   </svelte:fragment>
   <svelte:fragment slot="content">
     {#if assetCount}
-      <AssetGrid showMemoryLane />
+      <AssetGrid {assetStore} {assetInteractionStore} showMemoryLane />
     {:else}
       <EmptyPlaceholder text="CLICK TO UPLOAD YOUR FIRST PHOTO" actionHandler={handleUpload} />
     {/if}

web/src/routes/(user)/search/+page.svelte

@@ -25,10 +25,12 @@
   import { flip } from 'svelte/animate';
   import { onDestroy, onMount } from 'svelte';
   import { browser } from '$app/environment';
-  import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let data: PageData;
 
+  let { isViewing: showAssetViewer } = assetViewingStore;
+
   // The GalleryViewer pushes it's own history state, which causes weird
   // behavior for history.back(). To prevent that we store the previous page
   // manually and navigate back to that.
@@ -48,7 +50,7 @@
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
-    if (!$isViewingAssetStoreState) {
+    if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':
           goto(previousRoute);