refactor: delete confirm modal (#25135)

web/src/lib/components/timeline/Timeline.svelte

@@ -46,7 +46,6 @@
     album?: AlbumResponseDto;
     albumUsers?: UserResponseDto[];
     person?: PersonResponseDto;
-    isShowDeleteConfirmation?: boolean;
     onSelect?: (asset: TimelineAsset) => void;
     onEscape?: () => void;
     children?: Snippet;
@@ -79,7 +78,6 @@
     album,
     albumUsers = [],
     person,
-    isShowDeleteConfirmation = $bindable(false),
     onSelect = () => {},
     onEscape = () => {},
     children,
@@ -600,7 +598,6 @@
   scrollToAsset={(asset) => scrollToAsset(asset) ?? false}
   {timelineManager}
   {assetInteraction}
-  bind:isShowDeleteConfirmation
   {onEscape}
 />
 

web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte

@@ -1,55 +1,48 @@
 <script lang="ts">
-  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
   import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, modalManager } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
 
-  interface Props {
+  type Props = {
     onAssetDelete: OnDelete;
     onUndoDelete?: OnUndoDelete | undefined;
     menuItem?: boolean;
     force?: boolean;
-  }
+  };
 
-  let {
-    onAssetDelete,
-    onUndoDelete = undefined,
-    menuItem = false,
-    force = !featureFlagsManager.value.trash,
-  }: Props = $props();
+  let { onAssetDelete, onUndoDelete = undefined, menuItem = false, force: forceRequested }: Props = $props();
+
+  const force = $derived(forceRequested || !featureFlagsManager.value.trash);
+  let label = $derived(force ? $t('permanently_delete') : $t('delete'));
+  let loading = $state(false);
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
-  let isShowConfirmation = $state(false);
-  let loading = $state(false);
+  const onAction = async () => {
+    const assets = getOwnedAssets();
 
-  let label = $derived(force ? $t('permanently_delete') : $t('delete'));
-
-  const handleTrash = async () => {
-    if (force) {
-      isShowConfirmation = true;
-      return;
+    if (force && $showDeleteModal) {
+      const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: assets.length });
+      if (!confirmed) {
+        return;
+      }
     }
 
-    await handleDelete();
-  };
-
-  const handleDelete = async () => {
     loading = true;
-    const assets = [...getOwnedAssets()];
     await deleteAssets(force, onAssetDelete, assets, onUndoDelete);
     clearSelect();
-    isShowConfirmation = false;
     loading = false;
   };
 </script>
 
 {#if menuItem}
-  <MenuOption text={label} icon={mdiDeleteOutline} onClick={handleTrash} />
+  <MenuOption text={label} icon={mdiDeleteOutline} onClick={onAction} />
 {:else if loading}
   <IconButton
     shape="round"
@@ -66,14 +59,6 @@
     variant="ghost"
     aria-label={label}
     icon={mdiDeleteForeverOutline}
-    onclick={handleTrash}
-  />
-{/if}
-
-{#if isShowConfirmation}
-  <DeleteAssetDialog
-    size={getOwnedAssets().length}
-    onConfirm={handleDelete}
-    onCancel={() => (isShowConfirmation = false)}
+    onclick={onAction}
   />
 {/if}

web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
-  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
   import {
     setFocusToAsset as setFocusAssetInit,
     setFocusTo as setFocusToInit,
@@ -10,6 +9,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
   import NavigateToDateModal from '$lib/modals/NavigateToDateModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -22,53 +22,42 @@
   import { AssetVisibility } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
 
-  interface Props {
+  type Props = {
     timelineManager: TimelineManager;
     assetInteraction: AssetInteraction;
-    isShowDeleteConfirmation: boolean;
     onEscape?: () => void;
     scrollToAsset: (asset: TimelineAsset) => boolean;
-  }
+  };
 
-  let {
-    timelineManager = $bindable(),
-    assetInteraction,
-    isShowDeleteConfirmation = $bindable(false),
-    onEscape,
-    scrollToAsset,
-  }: Props = $props();
+  let { timelineManager = $bindable(), assetInteraction, onEscape, scrollToAsset }: Props = $props();
 
   const { isViewing: showAssetViewer } = assetViewingStore;
 
-  const trashOrDelete = async (force: boolean = false) => {
-    isShowDeleteConfirmation = false;
+  const trashOrDelete = async (forceRequested?: boolean) => {
+    const force = forceRequested || !featureFlagsManager.value.trash;
+    const selectedAssets = assetInteraction.selectedAssets;
+
+    if ($showDeleteModal && force) {
+      const confirmed = await modalManager.show(AssetDeleteConfirmModal, { size: selectedAssets.length });
+      if (!confirmed) {
+        return;
+      }
+    }
+
     await deleteAssets(
-      !(isTrashEnabled && !force),
+      force,
       (assetIds) => timelineManager.removeAssets(assetIds),
-      assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.upsertAssets(assets),
+      selectedAssets,
+      force ? undefined : (assets) => timelineManager.upsertAssets(assets),
     );
     assetInteraction.clearMultiselect();
   };
 
   const onDelete = () => {
     const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
-
-    if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
     handlePromiseError(trashOrDelete(hasTrashedAsset));
   };
 
-  const onForceDelete = () => {
-    if ($showDeleteModal) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(true));
-  };
-
   const onStackAssets = async () => {
     const result = await stackAssets(assetInteraction.selectedAssets);
 
@@ -118,9 +107,7 @@
     }
   };
 
-  const isTrashEnabled = $derived(featureFlagsManager.value.trash);
   const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
   let isShortcutModalOpen = false;
 
   const handleOpenShortcutModal = async () => {
@@ -176,7 +163,7 @@
       if (assetInteraction.selectionActive) {
         shortcuts.push(
           { shortcut: { key: 'Delete' }, onShortcut: onDelete },
-          { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
+          { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
           { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
           { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
           { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
@@ -189,11 +176,3 @@
 </script>
 
 <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />
-
-{#if isShowDeleteConfirmation}
-  <DeleteAssetDialog
-    size={idsSelectedAssets.length}
-    onCancel={() => (isShowDeleteConfirmation = false)}
-    onConfirm={() => handlePromiseError(trashOrDelete(true))}
-  />
-{/if}