From 8a4b0bf2eb55da4674c96d764427b8daf8293d8f Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 5 Jul 2023 10:47:20 -0400
Subject: [PATCH 1/2] only show delete icon if big enough

---
 .../web/src/features/gallery/components/GalleryImage.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx
index ea0b3b0fd8b..41c536759ae 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx
@@ -23,9 +23,11 @@ export const makeSelector = (image_name: string) =>
     ({ gallery }) => {
       const isSelected = gallery.selection.includes(image_name);
       const selectionCount = gallery.selection.length;
+      const galleryImageMinimumWidth = gallery.galleryImageMinimumWidth;
       return {
         isSelected,
         selectionCount,
+        galleryImageMinimumWidth,
       };
     },
     defaultSelectorOptions
@@ -44,7 +46,8 @@ const GalleryImage = (props: HoverableImageProps) => {
 
   const localSelector = useMemo(() => makeSelector(image_name), [image_name]);
 
-  const { isSelected, selectionCount } = useAppSelector(localSelector);
+  const { isSelected, selectionCount, galleryImageMinimumWidth } =
+    useAppSelector(localSelector);
 
   const dispatch = useAppDispatch();
 
@@ -113,7 +116,9 @@ const GalleryImage = (props: HoverableImageProps) => {
               draggableData={draggableData}
               isSelected={isSelected}
               minSize={0}
-              onClickReset={handleDelete}
+              onClickReset={
+                galleryImageMinimumWidth > 60 ? handleDelete : undefined
+              }
               resetIcon={<FaTrash />}
               resetTooltip="Delete image"
               imageSx={{ w: 'full', h: 'full' }}

From 21a7990cdd4a0da7061d296b1600530483f8d273 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 6 Jul 2023 22:34:11 +1000
Subject: [PATCH 2/2] feat(ui): remove delete image button in gallery

it was really easy to accidentally click, just commented out, easy to add back or add a setting for it in the future
---
 .../src/features/gallery/components/GalleryImage.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx
index 41c536759ae..a8d4c84adc2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx
@@ -23,11 +23,10 @@ export const makeSelector = (image_name: string) =>
     ({ gallery }) => {
       const isSelected = gallery.selection.includes(image_name);
       const selectionCount = gallery.selection.length;
-      const galleryImageMinimumWidth = gallery.galleryImageMinimumWidth;
+
       return {
         isSelected,
         selectionCount,
-        galleryImageMinimumWidth,
       };
     },
     defaultSelectorOptions
@@ -46,8 +45,7 @@ const GalleryImage = (props: HoverableImageProps) => {
 
   const localSelector = useMemo(() => makeSelector(image_name), [image_name]);
 
-  const { isSelected, selectionCount, galleryImageMinimumWidth } =
-    useAppSelector(localSelector);
+  const { isSelected, selectionCount } = useAppSelector(localSelector);
 
   const dispatch = useAppDispatch();
 
@@ -116,13 +114,11 @@ const GalleryImage = (props: HoverableImageProps) => {
               draggableData={draggableData}
               isSelected={isSelected}
               minSize={0}
-              onClickReset={
-                galleryImageMinimumWidth > 60 ? handleDelete : undefined
-              }
+              onClickReset={handleDelete}
               resetIcon={<FaTrash />}
               resetTooltip="Delete image"
               imageSx={{ w: 'full', h: 'full' }}
-              withResetIcon
+              // withResetIcon // removed bc it's too easy to accidentally delete images
               isDropDisabled={true}
               isUploadDisabled={true}
             />