feat(ui): add progress image toggle to current image buttons

Author: psychedelicious

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

@@ -526,7 +526,7 @@
     },
     "settings": {
         "models": "Models",
-        "displayInProgress": "Display In-Progress Images",
+        "displayInProgress": "Display Progress Images",
         "saveSteps": "Save images every n steps",
         "confirmOnDelete": "Confirm On Delete",
         "displayHelpIcons": "Display Help Icons",

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

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { isEqual, isString } from 'lodash-es';
+import { isEqual } from 'lodash-es';
 
 import {
   ButtonGroup,
@@ -25,8 +25,8 @@ import {
 } from 'features/ui/store/uiSelectors';
 import {
   setActiveTab,
-  setShouldHidePreview,
   setShouldShowImageDetails,
+  setShouldShowProgressInViewer,
 } from 'features/ui/store/uiSlice';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -37,18 +37,14 @@ import {
   FaDownload,
   FaExpand,
   FaExpandArrowsAlt,
-  FaEye,
-  FaEyeSlash,
   FaGrinStars,
+  FaHourglassHalf,
   FaQuoteRight,
   FaSeedling,
   FaShare,
   FaShareAlt,
-  FaTrash,
-  FaWrench,
 } from 'react-icons/fa';
 import { gallerySelector } from '../store/gallerySelectors';
-import DeleteImageModal from './DeleteImageModal';
 import { useCallback } from 'react';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { useGetUrl } from 'common/util/getUrl';
@@ -90,7 +86,11 @@ const currentImageButtonsSelector = createSelector(
 
     const { isLightboxOpen } = lightbox;
 
-    const { shouldShowImageDetails, shouldHidePreview } = ui;
+    const {
+      shouldShowImageDetails,
+      shouldHidePreview,
+      shouldShowProgressInViewer,
+    } = ui;
 
     const { selectedImage } = gallery;
 
@@ -112,6 +112,7 @@ const currentImageButtonsSelector = createSelector(
       seed: selectedImage?.metadata?.seed,
       prompt: selectedImage?.metadata?.positive_conditioning,
       negativePrompt: selectedImage?.metadata?.negative_conditioning,
+      shouldShowProgressInViewer,
     };
   },
   {
@@ -145,6 +146,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     image,
     canDeleteImage,
     shouldConfirmOnDelete,
+    shouldShowProgressInViewer,
   } = useAppSelector(currentImageButtonsSelector);
 
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
@@ -229,10 +231,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     });
   }, [toaster, shouldTransformUrls, getUrl, t, image]);
 
-  const handlePreviewVisibility = useCallback(() => {
-    dispatch(setShouldHidePreview(!shouldHidePreview));
-  }, [dispatch, shouldHidePreview]);
-
   const handleClickUseAllParameters = useCallback(() => {
     recallAllParameters(image);
   }, [image, recallAllParameters]);
@@ -386,6 +384,10 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     }
   }, [shouldConfirmOnDelete, onDeleteDialogOpen, handleDelete]);
 
+  const handleClickProgressImagesToggle = useCallback(() => {
+    dispatch(setShouldShowProgressInViewer(!shouldShowProgressInViewer));
+  }, [dispatch, shouldShowProgressInViewer]);
+
   useHotkeys('delete', handleInitiateDelete, [
     image,
     shouldConfirmOnDelete,
@@ -412,8 +414,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
           <IAIPopover
             triggerComponent={
               <IAIIconButton
-                isDisabled={!image}
                 aria-label={`${t('parameters.sendTo')}...`}
+                tooltip={`${t('parameters.sendTo')}...`}
+                isDisabled={!image}
                 icon={<FaShareAlt />}
               />
             }
@@ -465,21 +468,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
               </Link>
             </Flex>
           </IAIPopover>
-          {/* <IAIIconButton
-            icon={shouldHidePreview ? <FaEyeSlash /> : <FaEye />}
-            tooltip={
-              !shouldHidePreview
-                ? t('parameters.hidePreview')
-                : t('parameters.showPreview')
-            }
-            aria-label={
-              !shouldHidePreview
-                ? t('parameters.hidePreview')
-                : t('parameters.showPreview')
-            }
-            isChecked={shouldHidePreview}
-            onClick={handlePreviewVisibility}
-          /> */}
           {isLightboxEnabled && (
             <IAIIconButton
               icon={<FaExpand />}
@@ -604,6 +592,16 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
           />
         </ButtonGroup>
 
+        <ButtonGroup isAttached={true}>
+          <IAIIconButton
+            aria-label={t('settings.displayInProgress')}
+            tooltip={t('settings.displayInProgress')}
+            icon={<FaHourglassHalf />}
+            isChecked={shouldShowProgressInViewer}
+            onClick={handleClickProgressImagesToggle}
+          />
+        </ButtonGroup>
+
         <ButtonGroup isAttached={true}>
           <DeleteImageButton image={image} />
         </ButtonGroup>