Enable multi deletion on keystroke

invokeai/frontend/web/public/locales/en.json

@@ -326,7 +326,8 @@
         "drop": "Drop",
         "dropOrUpload": "$t(gallery.drop) or Upload",
         "dropToUpload": "$t(gallery.drop) to Upload",
-        "deleteImage": "Delete Image",
+        "deleteImage_one": "Delete Image",
+        "deleteImage_other": "Delete {{count}} Images",
         "deleteImageBin": "Deleted images will be sent to your operating system's Bin.",
         "deleteImagePermanent": "Deleted images cannot be restored.",
         "download": "Download",

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx

@@ -13,13 +13,15 @@ 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 = `${t('gallery.deleteImage', { count: imageSelectionLength })} (Del)`;
 
   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"
     />

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx

@@ -80,7 +80,7 @@ const DeleteImageModal = () => {
 
   return (
     <ConfirmationAlertDialog
-      title={t('gallery.deleteImage')}
+      title={t('gallery.deleteImage', { count: imagesToDelete.length })}
       isOpen={isModalOpen}
       onClose={handleClose}
       cancelButtonText={t('boards.cancel')}

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx

@@ -51,6 +51,7 @@ const CurrentImageButtons = () => {
   const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
   const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
+  const selection = useAppSelector((s) => s.gallery.selection);
   const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons);
 
   const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled;
@@ -102,8 +103,8 @@ const CurrentImageButtons = () => {
     if (!imageDTO) {
       return;
     }
-    dispatch(imagesToDeleteSelected([imageDTO]));
-  }, [dispatch, imageDTO]);
+    dispatch(imagesToDeleteSelected(selection));
+  }, [dispatch, imageDTO, selection]);
 
   useHotkeys(
     'Shift+U',

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -188,7 +188,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       )}
       <MenuDivider />
       <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClickCapture={handleDelete}>
-        {t('gallery.deleteImage')}
+        {t('gallery.deleteImage', { count: 1 })}
       </MenuItem>
     </>
   );

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -180,7 +180,7 @@ const GalleryImage = (props: HoverableImageProps) => {
               <IAIDndImageIcon
                 onClick={handleDelete}
                 icon={<PiTrashSimpleFill size="16px" />}
-                tooltip={t('gallery.deleteImage')}
+                tooltip={t('gallery.deleteImage', { count: 1 })}
                 styleOverrides={imageIconStyleOverrides}
               />
             )}