From 982e25587810406197e17da09767967bcf3d2a9f Mon Sep 17 00:00:00 2001
From: Daniel Abrao <danielpaladar@gmail.com>
Date: Sun, 14 Apr 2024 19:19:12 -0300
Subject: [PATCH] Add dynamic label to delete button located at the top toolbar

---
 .../deleteImageModal/components/DeleteImageButton.tsx     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
index 9d46a185f8..3e86c04085 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
@@ -13,13 +13,17 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
   const { onClick, isDisabled } = props;
   const { t } = useTranslation();
   const isConnected = useAppSelector((s) => s.system.isConnected);
+  const imageSelectionLength: number = (useAppSelector((s) => s.gallery.selection) || []).length;
+  const labelMessage: string = imageSelectionLength > 1 ?
+    t('gallery.deleteImage_plural', { 'count': imageSelectionLength }) :
+    t('gallery.deleteImage');
 
   return (
     <IconButton
       onClick={onClick}
       icon={<PiTrashSimpleBold />}
-      tooltip={`${t('gallery.deleteImage')} (Del)`}
-      aria-label={`${t('gallery.deleteImage')} (Del)`}
+      tooltip={labelMessage}
+      aria-label={labelMessage}
       isDisabled={isDisabled || !isConnected}
       colorScheme="error"
     />