refactor(ui): fix gallery stuff

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -4,23 +4,18 @@ import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { useDownloadImage } from 'common/hooks/useDownloadImage';
-import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice';
-import { iiLayerAdded } from 'features/controlLayers/store/canvasV2Slice';
-import { selectOptimalDimension } from 'features/controlLayers/store/selectors';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import { useImageActions } from 'features/gallery/hooks/useImageActions';
 import { sentImageToCanvas, sentImageToImg2Img } from 'features/gallery/store/actions';
 import { imageToCompareChanged } from 'features/gallery/store/gallerySlice';
 import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { toast } from 'features/toast/toast';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
 import { size } from 'lodash-es';
 import { memo, useCallback } from 'react';
-import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import {
   PiArrowsCounterClockwiseBold,
@@ -47,7 +42,6 @@ type SingleSelectionMenuItemsProps = {
 
 const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const { imageDTO } = props;
-  const optimalDimension = useAppSelector(selectOptimalDimension);
   const maySelectForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name !== imageDTO.image_name);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -86,24 +80,21 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   }, [dispatch, imageDTO]);
 
   const handleSendToImageToImage = useCallback(() => {
+    // TODO(psyche): restore send to img2img functionality
     dispatch(sentImageToImg2Img());
-    dispatch(iiLayerAdded(imageDTO));
     dispatch(setActiveTab('generation'));
-  }, [dispatch, imageDTO]);
+  }, [dispatch]);
 
   const handleSendToCanvas = useCallback(() => {
+    // TODO(psyche): restore send to canvas functionality
     dispatch(sentImageToCanvas());
-    flushSync(() => {
+    dispatch(setActiveTab('generation'));
-      dispatch(setActiveTab('canvas'));
-    });
-    dispatch(setInitialCanvasImage(imageDTO, optimalDimension));
-
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToUnifiedCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, t, optimalDimension]);
+  }, [dispatch, t]);
 
   const handleChangeBoard = useCallback(() => {
     dispatch(imagesToChangeSelected([imageDTO]));
@@ -202,14 +193,12 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       <MenuItem icon={<PiShareFatBold />} onClickCapture={handleSendToImageToImage} id="send-to-img2img">
         {t('parameters.sendToImg2Img')}
       </MenuItem>
-      {isCanvasEnabled && (
-        <MenuItem icon={<PiShareFatBold />} onClickCapture={handleSendToCanvas} id="send-to-canvas">
-          {t('parameters.sendToUnifiedCanvas')}
-        </MenuItem>
-      )}
       <MenuItem icon={<PiShareFatBold />} onClickCapture={handleSendToUpscale} id="send-to-upscale">
         {t('parameters.sendToUpscale')}
         </MenuItem>
+      <MenuItem icon={<PiShareFatBold />} onClickCapture={handleSendToCanvas} id="send-to-canvas">
+        {t('parameters.sendToUnifiedCanvas')}
+      </MenuItem>
       <MenuDivider />
       <MenuItem icon={<PiFoldersBold />} onClickCapture={handleChangeBoard}>
         {t('boards.changeBoard')}

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

@@ -4,7 +4,6 @@ import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { adHocPostProcessingRequested } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { iiLayerAdded } from 'features/controlLayers/store/canvasV2Slice';
 import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
@@ -86,8 +85,8 @@ const CurrentImageButtons = () => {
     if (!imageDTO) {
       return;
     }
+    // TODO(psyche): restore send to img2img functionality
     dispatch(sentImageToImg2Img());
-    dispatch(iiLayerAdded(imageDTO));
     dispatch(setActiveTab('generation'));
   }, [dispatch, imageDTO]);
 

invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts

@@ -1,10 +1,7 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
 import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useListImagesQuery } from 'services/api/endpoints/images';
 
@@ -12,12 +9,7 @@ import { useListImagesQuery } from 'services/api/endpoints/images';
  * Registers gallery hotkeys. This hook is a singleton.
  */
 export const useGalleryHotkeys = () => {
-  const activeTabName = useAppSelector(activeTabNameSelector);
+  // TODO(psyche): Hotkeys when staging - cannot navigate gallery with arrow keys when staging!
-  const isStaging = useAppSelector(isStagingSelector);
-  // block navigation on Unified Canvas tab when staging new images
-  const canNavigateGallery = useMemo(() => {
-    return activeTabName !== 'canvas' || !isStaging;
-  }, [activeTabName, isStaging]);
 
   const { goNext, goPrev, isNextEnabled, isPrevEnabled } = useGalleryPagination();
   const queryArgs = useAppSelector(selectListImagesQueryArgs);
@@ -41,17 +33,14 @@ export const useGalleryHotkeys = () => {
         goPrev(e.altKey ? 'alt+arrow' : 'arrow');
         return;
       }
-      canNavigateGallery && handleLeftImage(e.altKey);
+      handleLeftImage(e.altKey);
     },
-    [handleLeftImage, canNavigateGallery, isOnFirstImageOfView, goPrev, isPrevEnabled, queryResult.isFetching]
+    [handleLeftImage, isOnFirstImageOfView, goPrev, isPrevEnabled, queryResult.isFetching]
   );
 
   useHotkeys(
     ['right', 'alt+right'],
     (e) => {
-      if (!canNavigateGallery) {
-        return;
-      }
       if (isOnLastImageOfView && isNextEnabled && !queryResult.isFetching) {
         goNext(e.altKey ? 'alt+arrow' : 'arrow');
         return;
@@ -60,7 +49,7 @@ export const useGalleryHotkeys = () => {
         handleRightImage(e.altKey);
       }
     },
-    [isOnLastImageOfView, goNext, isNextEnabled, queryResult.isFetching, handleRightImage, canNavigateGallery]
+    [isOnLastImageOfView, goNext, isNextEnabled, queryResult.isFetching, handleRightImage]
   );
 
   useHotkeys(