From 48eede59b921ded677c96b36b34f6197bf25d14a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 10 Jun 2024 00:55:27 +0530
Subject: [PATCH] refactor: dedicated icon for permanently delete (#10052)

Motivation
----------
It's a follow up to #10028. I think it would be better user experience if one can tell by the icon what the delete button is about to do.

I hope I caught all the occurences where one can permanently delete assets.

How to test
-----------
1. Visit e.g. `/trash`
2. If you select some assets, the delete button in the top right corner
   looks different.
---
 web/src/lib/components/asset-viewer/delete-button.svelte      | 4 ++--
 .../lib/components/photos-page/actions/delete-assets.svelte   | 4 ++--
 .../trash/[[photos=photos]]/[[assetId=id]]/+page.svelte       | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/delete-button.svelte b/web/src/lib/components/asset-viewer/delete-button.svelte
index 597092fbc8..0d330b3a09 100644
--- a/web/src/lib/components/asset-viewer/delete-button.svelte
+++ b/web/src/lib/components/asset-viewer/delete-button.svelte
@@ -2,7 +2,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { mdiDeleteOutline } from '@mdi/js';
+  import { mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
   import { type AssetResponseDto } from '@immich/sdk';
 
   export let asset: AssetResponseDto;
@@ -18,7 +18,7 @@
 {#if asset.isTrashed}
   <CircleIconButton
     color="opaque"
-    icon={mdiDeleteOutline}
+    icon={mdiDeleteForeverOutline}
     on:click={() => dispatch('permanentlyDelete')}
     title={$t('permanently_delete')}
   />
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index b83fc6629f..3e8f9dd8fe 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -3,7 +3,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
+  import { mdiTimerSand, mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
   import { type OnDelete, deleteAssets } from '$lib/utils/actions';
   import DeleteAssetDialog from '../delete-asset-dialog.svelte';
   import { t } from 'svelte-i18n';
@@ -43,7 +43,7 @@
 {:else if loading}
   <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
 {:else}
-  <CircleIconButton title={label} icon={mdiDeleteOutline} on:click={handleTrash} />
+  <CircleIconButton title={label} icon={mdiDeleteForeverOutline} on:click={handleTrash} />
 {/if}
 
 {#if isShowConfirmation}
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 53740f153b..4f8c0a6ad4 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -20,7 +20,7 @@
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { emptyTrash, restoreTrash } from '@immich/sdk';
-  import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
+  import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
   import type { PageData } from './$types';
   import { handlePromiseError } from '$lib/utils';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@@ -106,7 +106,7 @@
       </LinkButton>
       <LinkButton on:click={() => handleEmptyTrash()} disabled={$isMultiSelectState}>
         <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiDeleteOutline} size="18" />
+          <Icon path={mdiDeleteForeverOutline} size="18" />
           Empty trash
         </div>
       </LinkButton>