fix: web search add to album reactivity (#13539)

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -6,8 +6,10 @@
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import type { OnAddToAlbum } from '$lib/utils/actions';
 
   export let shared = false;
+  export let onAddToAlbum: OnAddToAlbum = () => {};
 
   let showAlbumPicker = false;
 
@@ -21,13 +23,19 @@
     showAlbumPicker = false;
 
     const assetIds = [...getAssets()].map((asset) => asset.id);
-    await addAssetsToNewAlbum(albumName, assetIds);
+    const album = await addAssetsToNewAlbum(albumName, assetIds);
+    if (!album) {
+      return;
+    }
+
+    onAddToAlbum(assetIds, album.id);
   };
 
   const handleAddToAlbum = async (album: AlbumResponseDto) => {
     showAlbumPicker = false;
     const assetIds = [...getAssets()].map((asset) => asset.id);
     await addAssetsToAlbum(album.id, assetIds);
+    onAddToAlbum(assetIds, album.id);
   };
 </script>
 

web/src/lib/utils/actions.ts

@@ -8,6 +8,7 @@ export type OnDelete = (assetIds: string[]) => void;
 export type OnRestore = (ids: string[]) => void;
 export type OnLink = (assets: { still: AssetResponseDto; motion: AssetResponseDto }) => void;
 export type OnUnlink = (assets: { still: AssetResponseDto; motion: AssetResponseDto }) => void;
+export type OnAddToAlbum = (ids: string[], albumId: string) => void;
 export type OnArchive = (ids: string[], isArchived: boolean) => void;
 export type OnFavorite = (ids: string[], favorite: boolean) => void;
 export type OnStack = (ids: string[]) => void;

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

@@ -216,6 +216,11 @@
 
   const triggerAssetUpdate = () => (searchResultAssets = searchResultAssets);
 
+  const onAddToAlbum = (assetIds: string[]) => {
+    const assetIdSet = new Set(assetIds);
+    searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
+  };
+
   function getObjectKeys<T extends object>(obj: T): (keyof T)[] {
     return Object.keys(obj) as (keyof T)[];
   }
@@ -230,8 +235,8 @@
         <CreateSharedLink />
         <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} on:click={handleSelectAll} />
         <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
-          <AddToAlbum />
-          <AddToAlbum shared />
+          <AddToAlbum {onAddToAlbum} />
+          <AddToAlbum shared {onAddToAlbum} />
         </ButtonContextMenu>
         <FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />