fix(ui): next/prev image buttons

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

@@ -62,7 +62,6 @@ const CurrentImagePreview = () => {
           }}
         />
       )}
-      {!shouldShowImageDetails && <NextPrevImageButtons />}
       {shouldShowImageDetails && image && 'metadata' in image && (
         <Box
           sx={{
@@ -77,6 +76,7 @@ const CurrentImagePreview = () => {
           <ImageMetadataViewer image={image} />
         </Box>
       )}
+      {!shouldShowImageDetails && <NextPrevImageButtons />}
     </Flex>
   );
 };

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

@@ -110,28 +110,6 @@ export const ImageGalleryPanel = () => {
     [shouldPinGallery]
   );
 
-  useHotkeys(
-    'left',
-    () => {
-      dispatch(selectPrevImage());
-    },
-    {
-      enabled: !isStaging || activeTabName !== 'unifiedCanvas',
-    },
-    [isStaging, activeTabName]
-  );
-
-  useHotkeys(
-    'right',
-    () => {
-      dispatch(selectNextImage());
-    },
-    {
-      enabled: !isStaging || activeTabName !== 'unifiedCanvas',
-    },
-    [isStaging, activeTabName]
-  );
-
   useHotkeys(
     'shift+g',
     () => {

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

@@ -1,18 +1,14 @@
 import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { isEqual } from 'lodash-es';
+import { clamp, isEqual } from 'lodash-es';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { gallerySelector } from '../store/gallerySelectors';
 import { RootState } from 'app/store/store';
-import { selectResultsEntities } from '../store/resultsSlice';
+import { imageSelected } from '../store/gallerySlice';
-// import {
+import { useHotkeys } from 'react-hotkeys-hook';
-//   GalleryCategory,
-//   selectNextImage,
-//   selectPrevImage,
-// } from '../store/gallerySlice';
 
 const nextPrevButtonTriggerAreaStyles: ChakraProps['sx'] = {
   height: '100%',
@@ -40,12 +36,32 @@ export const nextPrevImageButtonsSelector = createSelector(
       (i) => i === selectedImage.name
     );
 
+    const nextImageIndex = clamp(
+      currentImageIndex + 1,
+      0,
+      state[currentCategory].ids.length - 1
+    );
+
+    const prevImageIndex = clamp(
+      currentImageIndex - 1,
+      0,
+      state[currentCategory].ids.length - 1
+    );
+
+    const nextImageId = state[currentCategory].ids[nextImageIndex];
+    const prevImageId = state[currentCategory].ids[prevImageIndex];
+
+    const nextImage = state[currentCategory].entities[nextImageId];
+    const prevImage = state[currentCategory].entities[prevImageId];
+
     const imagesLength = state[currentCategory].ids.length;
 
     return {
       isOnFirstImage: currentImageIndex === 0,
       isOnLastImage:
         !isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
+      nextImage,
+      prevImage,
     };
   },
   {
@@ -59,28 +75,43 @@ const NextPrevImageButtons = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const { isOnFirstImage, isOnLastImage } = useAppSelector(
+  const { isOnFirstImage, isOnLastImage, nextImage, prevImage } =
-    nextPrevImageButtonsSelector
+    useAppSelector(nextPrevImageButtonsSelector);
-  );
 
   const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
     useState<boolean>(false);
 
-  const handleCurrentImagePreviewMouseOver = () => {
+  const handleCurrentImagePreviewMouseOver = useCallback(() => {
     setShouldShowNextPrevButtons(true);
-  };
+  }, []);
 
-  const handleCurrentImagePreviewMouseOut = () => {
+  const handleCurrentImagePreviewMouseOut = useCallback(() => {
     setShouldShowNextPrevButtons(false);
-  };
+  }, []);
 
-  const handleClickPrevButton = () => {
+  const handlePrevImage = useCallback(() => {
-    dispatch(selectPrevImage());
+    dispatch(imageSelected(prevImage));
-  };
+  }, [dispatch, prevImage]);
 
-  const handleClickNextButton = () => {
+  const handleNextImage = useCallback(() => {
-    dispatch(selectNextImage());
+    dispatch(imageSelected(nextImage));
-  };
+  }, [dispatch, nextImage]);
+
+  useHotkeys(
+    'left',
+    () => {
+      handlePrevImage();
+    },
+    [prevImage]
+  );
+
+  useHotkeys(
+    'right',
+    () => {
+      handleNextImage();
+    },
+    [nextImage]
+  );
 
   return (
     <Flex
@@ -104,7 +135,7 @@ const NextPrevImageButtons = () => {
             aria-label={t('accessibility.previousImage')}
             icon={<FaAngleLeft size={64} />}
             variant="unstyled"
-            onClick={handleClickPrevButton}
+            onClick={handlePrevImage}
             boxSize={16}
             sx={nextPrevButtonStyles}
           />
@@ -123,7 +154,7 @@ const NextPrevImageButtons = () => {
             aria-label={t('accessibility.nextImage')}
             icon={<FaAngleRight size={64} />}
             variant="unstyled"
-            onClick={handleClickNextButton}
+            onClick={handleNextImage}
             boxSize={16}
             sx={nextPrevButtonStyles}
           />

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -41,40 +41,6 @@ export const gallerySlice = createSlice({
     ) => {
       state.selectedImage = action.payload;
     },
-    // selectNextImage: (state) => {
-    //   const { currentImage } = state;
-    //   if (!currentImage) return;
-    //   const tempImages =
-    //     state.categories[currentImage.category as GalleryCategory].images;
-
-    //   if (currentImage) {
-    //     const currentImageIndex = tempImages.findIndex(
-    //       (i) => i.uuid === currentImage.uuid
-    //     );
-    //     if (currentImageIndex < tempImages.length - 1) {
-    //       const newCurrentImage = tempImages[currentImageIndex + 1];
-    //       state.currentImage = newCurrentImage;
-    //       state.currentImageUuid = newCurrentImage.uuid;
-    //     }
-    //   }
-    // },
-    // selectPrevImage: (state) => {
-    //   const { currentImage } = state;
-    //   if (!currentImage) return;
-    //   const tempImages =
-    //     state.categories[currentImage.category as GalleryCategory].images;
-
-    //   if (currentImage) {
-    //     const currentImageIndex = tempImages.findIndex(
-    //       (i) => i.uuid === currentImage.uuid
-    //     );
-    //     if (currentImageIndex > 0) {
-    //       const newCurrentImage = tempImages[currentImageIndex - 1];
-    //       state.currentImage = newCurrentImage;
-    //       state.currentImageUuid = newCurrentImage.uuid;
-    //     }
-    //   }
-    // },
     setGalleryImageMinimumWidth: (state, action: PayloadAction<number>) => {
       state.galleryImageMinimumWidth = action.payload;
     },