Adds staging area hotkeys, disables gallery left/right when staging

frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -30,6 +30,7 @@ import {
   setShouldShowStagingImage,
   setShouldShowStagingOutline,
 } from 'features/canvas/store/canvasSlice';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 const selector = createSelector(
   [canvasSelector],
@@ -75,6 +76,43 @@ const IAICanvasStagingAreaToolbar = () => {
     dispatch(setShouldShowStagingOutline(true));
   }, [dispatch]);
 
+  useHotkeys(
+    ['left'],
+    () => {
+      handlePrevImage();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    ['right'],
+    () => {
+      handleNextImage();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    ['enter'],
+    () => {
+      handleAccept();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  const handlePrevImage = () => dispatch(prevStagingAreaImage());
+  const handleNextImage = () => dispatch(nextStagingAreaImage());
+  const handleAccept = () => dispatch(commitStagingAreaImage());
+
   if (!currentStagingAreaImage) return null;
 
   return (
@@ -90,34 +128,30 @@ const IAICanvasStagingAreaToolbar = () => {
     >
       <ButtonGroup isAttached>
         <IAIIconButton
-          tooltip="Previous"
-          tooltipProps={{ placement: 'bottom' }}
-          aria-label="Previous"
+          tooltip="Previous (Left)"
+          aria-label="Previous (Left)"
           icon={<FaArrowLeft />}
-          onClick={() => dispatch(prevStagingAreaImage())}
+          onClick={handlePrevImage}
           data-selected={true}
           isDisabled={isOnFirstImage}
         />
         <IAIIconButton
-          tooltip="Next"
-          tooltipProps={{ placement: 'bottom' }}
-          aria-label="Next"
+          tooltip="Next (Right)"
+          aria-label="Next (Right)"
           icon={<FaArrowRight />}
-          onClick={() => dispatch(nextStagingAreaImage())}
+          onClick={handleNextImage}
           data-selected={true}
           isDisabled={isOnLastImage}
         />
         <IAIIconButton
-          tooltip="Accept"
-          tooltipProps={{ placement: 'bottom' }}
-          aria-label="Accept"
+          tooltip="Accept (Enter)"
+          aria-label="Accept (Enter)"
           icon={<FaCheck />}
-          onClick={() => dispatch(commitStagingAreaImage())}
+          onClick={handleAccept}
           data-selected={true}
         />
         <IAIIconButton
           tooltip="Show/Hide"
-          tooltipProps={{ placement: 'bottom' }}
           aria-label="Show/Hide"
           data-alert={!shouldShowStagingImage}
           icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
@@ -128,7 +162,6 @@ const IAICanvasStagingAreaToolbar = () => {
         />
         <IAIIconButton
           tooltip="Discard All"
-          tooltipProps={{ placement: 'bottom' }}
           aria-label="Discard All"
           icon={<FaTrash />}
           onClick={() => dispatch(discardStagedImages())}

frontend/src/features/gallery/components/ImageGallery.tsx

@@ -63,6 +63,7 @@ export default function ImageGallery() {
     areMoreImagesAvailable,
     galleryWidth,
     isLightBoxOpen,
+    isStaging,
   } = useAppSelector(imageGallerySelector);
 
   const [galleryMinWidth, setGalleryMinWidth] = useState<number>(300);
@@ -158,13 +159,27 @@ export default function ImageGallery() {
     [shouldShowGallery, shouldPinGallery]
   );
 
-  useHotkeys('left', () => {
-    dispatch(selectPrevImage());
-  });
+  useHotkeys(
+    'left',
+    () => {
+      dispatch(selectPrevImage());
+    },
+    {
+      enabled: !isStaging,
+    },
+    [isStaging]
+  );
 
-  useHotkeys('right', () => {
-    dispatch(selectNextImage());
-  });
+  useHotkeys(
+    'right',
+    () => {
+      dispatch(selectNextImage());
+    },
+    {
+      enabled: !isStaging,
+    },
+    [isStaging]
+  );
 
   useHotkeys(
     'shift+g',

frontend/src/features/gallery/store/gallerySliceSelectors.ts

@@ -5,14 +5,16 @@ import { OptionsState } from 'features/options/store/optionsSlice';
 import { SystemState } from 'features/system/store/systemSlice';
 import { GalleryState } from './gallerySlice';
 import _ from 'lodash';
+import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 
 export const imageGallerySelector = createSelector(
   [
     (state: RootState) => state.gallery,
     (state: RootState) => state.options,
+    isStagingSelector,
     activeTabNameSelector,
   ],
-  (gallery: GalleryState, options: OptionsState, activeTabName) => {
+  (gallery: GalleryState, options: OptionsState, isStaging, activeTabName) => {
     const {
       categories,
       currentCategory,
@@ -46,6 +48,7 @@ export const imageGallerySelector = createSelector(
       currentCategory,
       galleryWidth,
       isLightBoxOpen,
+      isStaging,
     };
   },
   {

frontend/src/features/system/components/HotkeysModal/HotkeysModal.tsx

@@ -113,12 +113,12 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
     {
       title: 'Previous Image',
       desc: 'Display the previous image in gallery',
-      hotkey: 'Arrow left',
+      hotkey: 'Arrow Left',
     },
     {
       title: 'Next Image',
       desc: 'Display the next image in gallery',
-      hotkey: 'Arrow right',
+      hotkey: 'Arrow Right',
     },
     {
       title: 'Toggle Gallery Pin',
@@ -223,6 +223,21 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       desc: 'Reset Canvas View',
       hotkey: 'R',
     },
+    {
+      title: 'Previous Image',
+      desc: 'Previous Staging Area Image',
+      hotkey: 'Arrow Left',
+    },
+    {
+      title: 'Next Image',
+      desc: 'Next Staging Area Image',
+      hotkey: 'Arrow Right',
+    },
+    {
+      title: 'Accept Image',
+      desc: 'Accept Current Staging Area Image',
+      hotkey: 'Enter',
+    },
   ];
 
   const renderHotkeyModalItems = (hotkeys: HotkeyList[]) => {