feat(web): undo delete (#18729)

* feat(web): Undo asset delete * - lints and checks - Update English translation * Update delete-assets.svelte Make onUndoDelete optional in Props interface * - Ensure undo button not available on permanent delete, or trash disabled. - Enforce lint requirement for no-negated-condition * Fix formatting * fix: lint --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-07-09 03:04:16 -04:00 · 2025-06-04 11:46:07 -04:00 · 2025-06-04 11:46:07 -04:00 · 19ff39c2b9
commit 19ff39c2b9
parent 8733d1e554
12 changed files with 74 additions and 17 deletions
--- a/i18n/en.json
+++ b/i18n/en.json
@ -1841,6 +1841,7 @@
  "unable_to_setup_pin_code": "Unable to setup PIN code",
  "unarchive": "Unarchive",
  "unarchived_count": "{count, plural, other {Unarchived #}}",
+  "undo": "Undo",
  "unfavorite": "Unfavorite",
  "unhide_person": "Unhide person",
  "unknown": "Unknown",
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
  import { featureFlags } from '$lib/stores/server-config.store';
-  import { type OnDelete, deleteAssets } from '$lib/utils/actions';
+  import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
  import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
@ -10,11 +10,12 @@

  interface Props {
    onAssetDelete: OnDelete;
+    onUndoDelete?: OnUndoDelete | undefined;
    menuItem?: boolean;
    force?: boolean;
  }

-  let { onAssetDelete, menuItem = false, force = !$featureFlags.trash }: Props = $props();
+  let { onAssetDelete, onUndoDelete = undefined, menuItem = false, force = !$featureFlags.trash }: Props = $props();

  const { clearSelect, getOwnedAssets } = getAssetControlContext();

@ -34,8 +35,8 @@

  const handleDelete = async () => {
    loading = true;
-    const ids = [...getOwnedAssets()].map((a) => a.id);
-    await deleteAssets(force, onAssetDelete, ids);
+    const assets = [...getOwnedAssets()];
+    await deleteAssets(force, onAssetDelete, assets, onUndoDelete);
    clearSelect();
    isShowConfirmation = false;
    loading = false;
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@ -382,7 +382,12 @@

  const trashOrDelete = async (force: boolean = false) => {
    isShowDeleteConfirmation = false;
-    await deleteAssets(!(isTrashEnabled && !force), (assetIds) => assetStore.removeAssets(assetIds), idsSelectedAssets);
+    await deleteAssets(
+      !(isTrashEnabled && !force),
+      (assetIds) => assetStore.removeAssets(assetIds),
+      assetInteraction.selectedAssets,
+      !isTrashEnabled || force ? undefined : (assets) => assetStore.addAssets(assets),
+    );
    assetInteraction.clearMultiselect();
  };

--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@ -38,6 +38,7 @@
    onPrevious?: (() => Promise<{ id: string } | undefined>) | undefined;
    onNext?: (() => Promise<{ id: string } | undefined>) | undefined;
    onRandom?: (() => Promise<{ id: string } | undefined>) | undefined;
+    onReload?: (() => void) | undefined;
    pageHeaderOffset?: number;
    slidingWindowOffset?: number;
  }
@ -54,6 +55,7 @@
    onPrevious = undefined,
    onNext = undefined,
    onRandom = undefined,
+    onReload = undefined,
    slidingWindowOffset = 0,
    pageHeaderOffset = 0,
  }: Props = $props();
@ -255,7 +257,8 @@
    await deleteAssets(
      !(isTrashEnabled && !force),
      (assetIds) => (assets = assets.filter((asset) => !assetIds.includes(asset.id))),
-      idsSelectedAssets,
+      assetInteraction.selectedAssets,
+      onReload,
    );
    assetInteraction.clearMultiselect();
  };
@ -426,7 +429,6 @@
  };

  let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
-  let idsSelectedAssets = $derived(assetInteraction.selectedAssets.map((selectedAsset) => selectedAsset.id));

  $effect(() => {
    if (!lastAssetMouseEvent) {
--- a/web/src/lib/utils/actions.ts
+++ b/web/src/lib/utils/actions.ts
@ -1,12 +1,13 @@
 import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import type { AssetStore, TimelineAsset } from '$lib/stores/assets-store.svelte';
 import type { StackResponse } from '$lib/utils/asset-utils';
-import { AssetVisibility, deleteAssets as deleteBulk } from '@immich/sdk';
+import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { handleError } from './handle-error';

 export type OnDelete = (assetIds: string[]) => void;
+export type OnUndoDelete = (assets: TimelineAsset[]) => void;
 export type OnRestore = (ids: string[]) => void;
 export type OnLink = (assets: { still: TimelineAsset; motion: TimelineAsset }) => void;
 export type OnUnlink = (assets: { still: TimelineAsset; motion: TimelineAsset }) => void;
@ -17,9 +18,15 @@ export type OnStack = (result: StackResponse) => void;
 export type OnUnstack = (assets: TimelineAsset[]) => void;
 export type OnSetVisibility = (ids: string[]) => void;

-export const deleteAssets = async (force: boolean, onAssetDelete: OnDelete, ids: string[]) => {
+export const deleteAssets = async (
+  force: boolean,
+  onAssetDelete: OnDelete,
+  assets: TimelineAsset[],
+  onUndoDelete: OnUndoDelete | undefined = undefined,
+) => {
  const $t = get(t);
  try {
+    const ids = assets.map((a) => a.id);
    await deleteBulk({ assetBulkDeleteDto: { ids, force } });
    onAssetDelete(ids);

@ -28,12 +35,28 @@ export const deleteAssets = async (force: boolean, onAssetDelete: OnDelete, ids:
        ? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
        : $t('assets_trashed_count', { values: { count: ids.length } }),
      type: NotificationType.Info,
+      ...(onUndoDelete &&
+        !force && {
+          button: { text: $t('undo'), onClick: () => undoDeleteAssets(onUndoDelete, assets) },
+          timeout: 5000,
+        }),
    });
  } catch (error) {
    handleError(error, $t('errors.unable_to_delete_assets'));
  }
 };

+const undoDeleteAssets = async (onUndoDelete: OnUndoDelete, assets: TimelineAsset[]) => {
+  const $t = get(t);
+  try {
+    const ids = assets.map((a) => a.id);
+    await restoreAssets({ bulkIdsDto: { ids } });
+    onUndoDelete?.(assets);
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_restore_assets'));
+  }
+};
+
 /**
 * Update the asset stack state in the asset store based on the provided stack response.
 * This function updates the stack information so that the icon is shown for the primary asset
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -87,6 +87,7 @@
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
  import type { PageData } from './$types';
+  import { type TimelineAsset } from '$lib/stores/assets-store.svelte';

  interface Props {
    data: PageData;
@ -317,6 +318,11 @@
    await refreshAlbum();
  };

+  const handleUndoRemoveAssets = async (assets: TimelineAsset[]) => {
+    assetStore.addAssets(assets);
+    await refreshAlbum();
+  };
+
  const handleUpdateThumbnail = async (assetId: string) => {
    if (viewMode !== AlbumPageViewMode.SELECT_THUMBNAIL) {
      return;
@ -623,7 +629,7 @@
            <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
          {/if}
          {#if assetInteraction.isAllUserOwned}
-            <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
+            <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} onUndoDelete={handleUndoRemoveAssets} />
          {/if}
        </ButtonContextMenu>
      </AssetSelectControlBar>
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -13,6 +13,7 @@
  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
  import { AssetAction } from '$lib/constants';

+  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { AssetStore } from '$lib/stores/assets-store.svelte';
  import { AssetVisibility } from '@immich/sdk';
@ -20,7 +21,6 @@
  import { onDestroy } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
-  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';

  interface Props {
    data: PageData;
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -92,7 +92,11 @@
        <TagAction menuItem />
      {/if}
      <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
-      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <DeleteAssets
+        menuItem
+        onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
+        onUndoDelete={(assets) => assetStore.addAssets(assets)}
+      />
    </ButtonContextMenu>
  </AssetSelectControlBar>
 {/if}
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -122,6 +122,7 @@
          {viewport}
          showAssetName={true}
          pageHeaderOffset={54}
+          onReload={triggerAssetUpdate}
        />
      </div>
    {/if}
@ -170,7 +171,7 @@
        {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
          <TagAction menuItem />
        {/if}
-        <DeleteAssets menuItem onAssetDelete={triggerAssetUpdate} />
+        <DeleteAssets menuItem onAssetDelete={triggerAssetUpdate} onUndoDelete={triggerAssetUpdate} />
        <hr />
        <AssetJobActions />
      </ButtonContextMenu>
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -351,6 +351,11 @@
    await updateAssetCount();
  };

+  const handleUndoDeleteAssets = async (assets: TimelineAsset[]) => {
+    assetStore.addAssets(assets);
+    await updateAssetCount();
+  };
+
  let person = $derived(data.person);

  let thumbnailData = $derived(getPeopleThumbnailUrl(person));
@ -532,7 +537,11 @@
          <TagAction menuItem />
        {/if}
        <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
-        <DeleteAssets menuItem onAssetDelete={(assetIds) => handleDeleteAssets(assetIds)} />
+        <DeleteAssets
+          menuItem
+          onAssetDelete={(assetIds) => handleDeleteAssets(assetIds)}
+          onUndoDelete={(assets) => handleUndoDeleteAssets(assets)}
+        />
      </ButtonContextMenu>
    </AssetSelectControlBar>
  {:else}
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@ -150,7 +150,11 @@
      {#if $preferences.tags.enabled}
        <TagAction menuItem />
      {/if}
-      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <DeleteAssets
+        menuItem
+        onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
+        onUndoDelete={(assets) => assetStore.addAssets(assets)}
+      />
      <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
      <hr />
      <AssetJobActions />
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -301,7 +301,7 @@
          {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
            <TagAction menuItem />
          {/if}
-          <DeleteAssets menuItem {onAssetDelete} />
+          <DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
          <hr />
          <AssetJobActions />
        </ButtonContextMenu>
@ -382,6 +382,7 @@
        showArchiveIcon={true}
        {viewport}
        pageHeaderOffset={54}
+        onReload={onSearchQueryUpdate}
      />
    {:else if !isLoading}
      <div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
@ -444,7 +445,7 @@
            {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
              <TagAction menuItem />
            {/if}
-            <DeleteAssets menuItem {onAssetDelete} />
+            <DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
            <hr />
            <AssetJobActions />
          </ButtonContextMenu>