refactor(web): asset interaction (#14662)

* refactor(web): asset interaction

* feedback

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -16,7 +16,6 @@
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
-  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -44,8 +43,9 @@
   import { t } from 'svelte-i18n';
   import { onMount, tick } from 'svelte';
   import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.svelte';
-  import { preferences, user } from '$lib/stores/user.store';
+  import { preferences } from '$lib/stores/user.store';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 
   const MAX_ASSET_COUNT = 5000;
   let { isViewing: showAssetViewer } = assetViewingStore;
@@ -63,14 +63,9 @@
   let scrollY = $state(0);
   let scrollYHistory = 0;
 
-  const assetInteractionStore = createAssetInteractionStore();
-  const { selectedAssets } = assetInteractionStore;
+  const assetInteraction = new AssetInteraction();
 
   type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query'>;
-
-  let isMultiSelectionMode = $derived($selectedAssets.size > 0);
-  let isAllArchived = $derived([...$selectedAssets].every((asset) => asset.isArchived));
-  let isAllFavorite = $derived([...$selectedAssets].every((asset) => asset.isFavorite));
   let searchQuery = $derived($page.url.searchParams.get(QueryParameter.QUERY));
 
   onMount(() => {
@@ -86,8 +81,8 @@
       return;
     }
 
-    if (isMultiSelectionMode) {
-      $selectedAssets = new Set();
+    if (assetInteraction.selectionActive) {
+      assetInteraction.selectedAssets.clear();
       return;
     }
     if (!$preventRaceConditionSearchBar) {
@@ -131,7 +126,7 @@
     searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
   };
   const handleSelectAll = () => {
-    assetInteractionStore.selectAssets(searchResultAssets);
+    assetInteraction.selectAssets(searchResultAssets);
   };
 
   async function onSearchQueryUpdate() {
@@ -231,29 +226,31 @@
   function getObjectKeys<T extends object>(obj: T): (keyof T)[] {
     return Object.keys(obj) as (keyof T)[];
   }
-  let isAllUserOwned = $derived([...$selectedAssets].every((asset) => asset.ownerId === $user.id));
 </script>
 
 <svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} bind:scrollY />
 
 <section>
-  {#if isMultiSelectionMode}
+  {#if assetInteraction.selectionActive}
     <div class="fixed z-[100] top-0 left-0 w-full">
-      <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => cancelMultiselect(assetInteractionStore)}>
+      <AssetSelectControlBar
+        assets={assetInteraction.selectedAssets}
+        clearSelect={() => cancelMultiselect(assetInteraction)}
+      >
         <CreateSharedLink />
         <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
         <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
           <AddToAlbum {onAddToAlbum} />
           <AddToAlbum shared {onAddToAlbum} />
         </ButtonContextMenu>
-        <FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
+        <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={triggerAssetUpdate} />
 
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
           <DownloadAction menuItem />
           <ChangeDate menuItem />
           <ChangeLocation menuItem />
-          <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
-          {#if $preferences.tags.enabled && isAllUserOwned}
+          <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={triggerAssetUpdate} />
+          {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
             <TagAction menuItem />
           {/if}
           <DeleteAssets menuItem {onAssetDelete} />
@@ -333,7 +330,7 @@
       {#if searchResultAssets.length > 0}
         <GalleryViewer
           assets={searchResultAssets}
-          {assetInteractionStore}
+          {assetInteraction}
           onIntersected={loadNextPage}
           showArchiveIcon={true}
           {viewport}