fix(web): restore button in asset viewer (#8935)

* fix(web): restore button added to trashed asset-view to restore single item

* fixed the asset-viewer menu to update upon restoration

* prettier formatting complete, testing passed

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -20,6 +20,7 @@
     mdiFolderDownloadOutline,
     mdiHeart,
     mdiHeartOutline,
+    mdiHistory,
     mdiImageAlbum,
     mdiImageMinusOutline,
     mdiImageOutline,
@@ -52,6 +53,7 @@
 
   type MenuItemEvent =
     | 'addToAlbum'
+    | 'restoreAsset'
     | 'addToSharedAlbum'
     | 'asProfileImage'
     | 'setAsAlbumCover'
@@ -70,6 +72,7 @@
     delete: void;
     toggleArchive: void;
     addToAlbum: void;
+    restoreAsset: void;
     addToSharedAlbum: void;
     asProfileImage: void;
     setAsAlbumCover: void;
@@ -208,12 +211,16 @@
             {#if showDownloadButton}
               <MenuOption icon={mdiFolderDownloadOutline} on:click={() => onMenuClick('download')} text="Download" />
             {/if}
-            <MenuOption icon={mdiImageAlbum} on:click={() => onMenuClick('addToAlbum')} text="Add to album" />
+            {#if asset.isTrashed}
-            <MenuOption
+              <MenuOption icon={mdiHistory} on:click={() => onMenuClick('restoreAsset')} text="Restore" />
-              icon={mdiShareVariantOutline}
+            {:else}
-              on:click={() => onMenuClick('addToSharedAlbum')}
+              <MenuOption icon={mdiImageAlbum} on:click={() => onMenuClick('addToAlbum')} text="Add to album" />
-              text="Add to shared album"
+              <MenuOption
-            />
+                icon={mdiShareVariantOutline}
+                on:click={() => onMenuClick('addToSharedAlbum')}
+                text="Add to shared album"
+              />
+            {/if}
 
             {#if isOwner}
               {#if hasStackChildren}

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

@@ -27,6 +27,7 @@
     getActivityStatistics,
     getAllAlbums,
     runAssetJobs,
+    restoreAssets,
     updateAsset,
     updateAlbumInfo,
     type ActivityResponseDto,
@@ -403,6 +404,22 @@
     await handleGetAllAlbums();
   };
 
+  const handleRestoreAsset = async () => {
+    try {
+      await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
+      asset.isTrashed = false;
+
+      dispatch('action', { type: AssetAction.RESTORE, asset });
+
+      notificationController.show({
+        type: NotificationType.Info,
+        message: `Restored asset`,
+      });
+    } catch (error) {
+      handleError(error, 'Error restoring asset');
+    }
+  };
+
   const toggleArchive = async () => {
     try {
       const data = await updateAsset({
@@ -556,6 +573,7 @@
           on:delete={() => trashOrDelete()}
           on:favorite={toggleFavorite}
           on:addToAlbum={() => openAlbumPicker(false)}
+          on:restoreAsset={() => handleRestoreAsset()}
           on:addToSharedAlbum={() => openAlbumPicker(true)}
           on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
           on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}

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

@@ -169,6 +169,7 @@
     switch (action) {
       case removeAction:
       case AssetAction.TRASH:
+      case AssetAction.RESTORE:
       case AssetAction.DELETE: {
         // find the next asset to show or close the viewer
         (await handleNext()) || (await handlePrevious()) || handleClose();

web/src/lib/constants.ts

@@ -5,7 +5,7 @@ export enum AssetAction {
   UNFAVORITE = 'unfavorite',
   TRASH = 'trash',
   DELETE = 'delete',
-  // RESTORE = 'restore',
+  RESTORE = 'restore',
   ADD = 'add',
 }