feat(web): improve feedback for favorite and archive actions (#7232)

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -11,7 +11,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-  export let onArchive: OnArchive | undefined = undefined;
+  export let onArchive: OnArchive;
 
   export let menuItem = false;
   export let unarchive = false;
@@ -39,7 +39,7 @@
         asset.isArchived = isArchived;
       }
 
-      onArchive?.(ids, isArchived);
+      onArchive(ids, isArchived);
 
       notificationController.show({
         message: `${isArchived ? 'Archived' : 'Unarchived'} ${ids.length}`,

web/src/lib/components/photos-page/actions/favorite-action.svelte

@@ -11,7 +11,7 @@
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-  export let onFavorite: OnFavorite | undefined = undefined;
+  export let onFavorite: OnFavorite;
 
   export let menuItem = false;
   export let removeFavorite: boolean;
@@ -40,7 +40,7 @@
         asset.isFavorite = isFavorite;
       }
 
-      onFavorite?.(ids, isFavorite);
+      onFavorite(ids, isFavorite);
 
       notificationController.show({
         message: isFavorite ? `Added ${ids.length} to favorites` : `Removed ${ids.length} from favorites`,

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

@@ -25,6 +25,7 @@
   export let viewport: Viewport;
   export let singleSelect = false;
   export let withStacked = false;
+  export let showArchiveIcon = false;
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
@@ -170,6 +171,7 @@
           >
             <Thumbnail
               showStackedIcon={withStacked}
+              {showArchiveIcon}
               {asset}
               {groupIndex}
               on:click={() => assetClickHandler(asset, groupAssets, groupTitle)}

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

@@ -28,6 +28,7 @@
   export let assetInteractionStore: AssetInteractionStore;
   export let removeAction: AssetAction | null = null;
   export let withStacked = false;
+  export let showArchiveIcon = false;
   export let isShared = false;
   export let album: AlbumResponseDto | null = null;
   export let isShowDeleteConfirmation = false;
@@ -425,6 +426,7 @@
             {#if intersecting}
               <AssetDateGroup
                 {withStacked}
+                {showArchiveIcon}
                 {assetStore}
                 {assetInteractionStore}
                 {isSelectionMode}

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

@@ -416,6 +416,10 @@ export class AssetStore {
     return nextBucket.assets[0]?.id || null;
   }
 
+  triggerUpdate() {
+    this.emit(false);
+  }
+
   private emit(recalculate: boolean) {
     if (recalculate) {
       this.assets = this.buckets.flatMap(({ assets }) => assets);

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -127,6 +127,7 @@
   $: isOwned = $user.id == album.ownerId;
   $: isAllUserOwned = [...$selectedAssets].every((asset) => asset.ownerId === $user.id);
   $: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);
+  $: isAllArchived = [...$selectedAssets].every((asset) => asset.isArchived);
   $: {
     assetGridWidth = isShowActivity ? globalWidth - (globalWidth < 768 ? 360 : 460) : globalWidth;
   }
@@ -473,9 +474,9 @@
         </AssetSelectContextMenu>
         <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
           {#if isAllUserOwned}
-            <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+            <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
+            <ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
           {/if}
-          <ArchiveAction menuItem />
           <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if isOwned || isAllUserOwned}
             <RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
@@ -591,6 +592,7 @@
           isShared={album.sharedUsers.length > 0}
           isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
           singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
+          showArchiveIcon
           on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
           on:escape={handleEscape}
         >

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

@@ -39,7 +39,7 @@
     <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
       <DownloadAction menuItem />
-      <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+      <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
     </AssetSelectContextMenu>
   </AssetSelectControlBar>
 {/if}

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

@@ -42,7 +42,7 @@
     <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
       <DownloadAction menuItem />
-      <ArchiveAction menuItem unarchive={isAllArchive} />
+      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => assetStore.removeAssets(ids)} />
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
     </AssetSelectContextMenu>

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -446,7 +446,7 @@
       <DeleteAssets onAssetDelete={(assetId) => $assetStore.removeAsset(assetId)} />
       <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
         <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
-        <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+        <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
         <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
         <MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
         <ChangeDate menuItem />

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

@@ -65,7 +65,7 @@
       onAssetDelete={(assetId) => assetStore.removeAsset(assetId)}
     />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
-      <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+      <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
       <DownloadAction menuItem />
       <ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} />
       {#if $selectedAssets.size > 1}

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

@@ -223,6 +223,8 @@
 
     return personNames.join(', ');
   }
+
+  const triggerAssetUpdate = () => (searchResultAssets = searchResultAssets);
 </script>
 
 <section>
@@ -239,8 +241,8 @@
 
         <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
           <DownloadAction menuItem />
-          <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+          <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
-          <ArchiveAction menuItem unarchive={isAllArchived} />
+          <ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
           <ChangeDate menuItem />
           <ChangeLocation menuItem />
         </AssetSelectContextMenu>