Enable multi deletion on keystroke

[jungleBadger]

Summary

Files modified:

• invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
• invokeai/frontend/web/public/locales/en.json
• invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx

Explanation

I modified the CurrentImageButtons script to create a variable that stores the current image selection and uses it as a dependency in the handleDelete method.

Demo

demo-multi-delete.mp4

I also modified the DeleteImageModal to include the selection count as part of the modal title.

Related Issues / Discussions

• [bug]: multiple delete #4885
• [enhancement]: keyboard shortcuts to select/delete images #5429

QA Instructions

1. Select multiple images in the gallery by shift+clicking, similar to the Windows Explorer experience.
2. Hit the keyboard button delete.

Merge Plan

NA

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• Documentation added / updated (if applicable)

[psychedelicious]

Thanks for the PR.

I noticed that the delete button shows the single delete text even when multiple images are selected:

[psychedelicious]

I noticed that the delete button shows the single delete text even when multiple images are selected:

Sorry, what I meant was we should update <DeleteImageButton /> to use the same translation string

[jungleBadger]

I noticed that the delete button shows the single delete text even when multiple images are selected:

Sorry, what I meant was we should update <DeleteImageButton /> to use the exact translation string

Thanks for clarifying. I implemented the dynamic label on that button.

Multiple images selected

Single image selected

[psychedelicious]

Couple tweaks needed still

[psychedelicious]

Looks good, thanks for fixing this. Good user experience enhancement!