feat(web): force delete with shift key (#6239)

* feat: force delete with shift key

* fix: types import

* pr feedback

* fix: permanently delete assets

* fix: format

* fix: remove unused variable

* change info title

* simplify

* fix: rename function name

* pr feedback

* simplify

* pr feedback

* add toggle in the user settings

* fix: trash settings, input label, and wording

---------

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

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

@@ -7,8 +7,9 @@
   import { handleError } from '$lib/utils/handle-error';
   import { api } from '@api';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { OnArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiArchiveArrowUpOutline, mdiArchiveArrowDownOutline, mdiTimerSand } from '@mdi/js';
+  import type { OnArchive } from '$lib/utils/actions';
 
   export let onArchive: OnArchive | undefined = undefined;
 

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -1,23 +1,18 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import { api } from '@api';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { createEventDispatcher } from 'svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
+  import { OnDelete, deleteAssets } from '$lib/utils/actions';
+  import DeleteAssetDialog from '../delete-asset-dialog.svelte';
 
-  export let onAssetDelete: OnAssetDelete;
+  export let onAssetDelete: OnDelete;
   export let menuItem = false;
   export let force = !$featureFlags.trash;
 
-  const { clearSelect, getOwnedAssets } = getAssetControlContext();
+  const { getOwnedAssets } = getAssetControlContext();
 
   const dispatch = createEventDispatcher<{
     escape: void;
@@ -37,28 +32,12 @@
 
   const handleDelete = async () => {
     loading = true;
-
-    try {
-      const ids = Array.from(getOwnedAssets())
-        .filter((a) => !a.isExternal)
-        .map((a) => a.id);
-      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids, force } });
-      for (const id of ids) {
-        onAssetDelete(id);
-      }
-
-      notificationController.show({
-        message: `${force ? 'Permanently deleted' : 'Trashed'} ${ids.length} assets`,
-        type: NotificationType.Info,
-      });
-
-      clearSelect();
-    } catch (e) {
-      handleError(e, 'Error deleting assets');
-    } finally {
-      isShowConfirmation = false;
-      loading = false;
-    }
+    const ids = Array.from(getOwnedAssets())
+      .filter((a) => !a.isExternal)
+      .map((a) => a.id);
+    await deleteAssets(force, onAssetDelete, ids);
+    isShowConfirmation = false;
+    loading = false;
   };
 
   const escape = () => {
@@ -76,23 +55,10 @@
 {/if}
 
 {#if isShowConfirmation}
-  <ConfirmDialogue
-    title="Permanently Delete Asset{getOwnedAssets().size > 1 ? 's' : ''}"
-    confirmText="Delete"
+  <DeleteAssetDialog
+    size={getOwnedAssets().size}
     on:confirm={handleDelete}
     on:cancel={() => (isShowConfirmation = false)}
     on:escape={escape}
-  >
-    <svelte:fragment slot="prompt">
-      <p>
-        Are you sure you want to permanently delete
-        {#if getOwnedAssets().size > 1}
-          these <b>{getOwnedAssets().size}</b> assets? This will also remove them from their album(s).
-        {:else}
-          this asset? This will also remove it from its album(s).
-        {/if}
-      </p>
-      <p><b>You cannot undo this action!</b></p>
-    </svelte:fragment>
-  </ConfirmDialogue>
+  />
 {/if}

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

@@ -7,8 +7,9 @@
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
   import { api } from '@api';
-  import { OnFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
+  import type { OnFavorite } from '$lib/utils/actions';
 
   export let onFavorite: OnFavorite | undefined = undefined;
 

web/src/lib/components/photos-page/actions/restore-assets.svelte

@@ -7,8 +7,9 @@
   import { api } from '@api';
   import Icon from '$lib/components/elements/icon.svelte';
   import Button from '../../elements/buttons/button.svelte';
-  import { OnRestore, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiHistory } from '@mdi/js';
+  import type { OnRestore } from '$lib/utils/actions';
 
   export let onRestore: OnRestore | undefined = undefined;
 

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

@@ -1,12 +1,13 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { api } from '@api';
-  import { OnStack, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
+  import type { OnStack } from '$lib/utils/actions';
 
   export let onStack: OnStack | undefined = undefined;