feat(ui): rework comparison activation, add hotkeys

2026-02-18 07:32:23 -05:00 · 2024-05-31 20:26:34 +10:00
parent 3501636018
commit 0e5336d8fa
16 changed files with 153 additions and 161 deletions
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -46,11 +46,7 @@ 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 &&
-      s.gallery.selection.slice(-1)[0]?.image_name !== imageDTO.image_name
-  );
+  const maySelectForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name !== imageDTO.image_name);
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const isCanvasEnabled = useFeatureStatus('canvas');
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -11,7 +11,7 @@ import type { GallerySelectionDraggableData, ImageDraggableData, TypesafeDraggab
 import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
 import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
 import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
-import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
+import { imageToCompareChanged, isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,9 +46,7 @@ const GalleryImage = (props: HoverableImageProps) => {
  const { t } = useTranslation();
  const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
  const alwaysShowImageSizeBadge = useAppSelector((s) => s.gallery.alwaysShowImageSizeBadge);
-  const isSelectedForCompare = useAppSelector(
-    (s) => s.gallery.imageToCompare?.image_name === imageName && s.gallery.viewerMode === 'compare'
-  );
+  const isSelectedForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name === imageName);
  const { handleClick, isSelected, areMultiplesSelected } = useMultiselect(imageDTO);

  const customStarUi = useStore($customStarUI);
@@ -107,7 +105,8 @@ const GalleryImage = (props: HoverableImageProps) => {
  }, []);

  const onDoubleClick = useCallback(() => {
-    dispatch(viewerModeChanged('view'));
+    dispatch(isImageViewerOpenChanged(true));
+    dispatch(imageToCompareChanged(null));
  }, [dispatch]);

  const handleMouseOut = useCallback(() => {
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonToolbarButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonToolbarButtons.tsx
@@ -12,7 +12,12 @@ import {
  Switch,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { comparedImagesSwapped, comparisonModeChanged, sliderFitChanged } from 'features/gallery/store/gallerySlice';
+import {
+  comparedImagesSwapped,
+  comparisonModeChanged,
+  imageToCompareChanged,
+  sliderFitChanged,
+} from 'features/gallery/store/gallerySlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -38,20 +43,12 @@ export const ImageComparisonToolbarButtons = memo(() => {
    },
    [dispatch]
  );
+  const exitCompare = useCallback(() => {
+    dispatch(imageToCompareChanged(null));
+  }, [dispatch]);

  return (
    <>
-      <ButtonGroup variant="outline">
-        <Button onClick={setComparisonModeSlider} colorScheme={comparisonMode === 'slider' ? 'invokeBlue' : 'base'}>
-          {t('gallery.slider')}
-        </Button>
-        <Button
-          onClick={setComparisonModeSideBySide}
-          colorScheme={comparisonMode === 'side-by-side' ? 'invokeBlue' : 'base'}
-        >
-          {t('gallery.sideBySide')}
-        </Button>
-      </ButtonGroup>
      <Popover isLazy>
        <PopoverTrigger>
          <IconButton
@@ -63,13 +60,25 @@ export const ImageComparisonToolbarButtons = memo(() => {
        <PopoverContent>
          <PopoverBody>
            <Flex direction="column" gap={2}>
-              <FormControl>
+              <ButtonGroup variant="outline" size="sm" w="full">
+                <Button
+                  flex={1}
+                  onClick={setComparisonModeSlider}
+                  colorScheme={comparisonMode === 'slider' ? 'invokeBlue' : 'base'}
+                >
+                  {t('gallery.slider')}
+                </Button>
+                <Button
+                  flex={1}
+                  onClick={setComparisonModeSideBySide}
+                  colorScheme={comparisonMode === 'side-by-side' ? 'invokeBlue' : 'base'}
+                >
+                  {t('gallery.sideBySide')}
+                </Button>
+              </ButtonGroup>
+              <FormControl isDisabled={comparisonMode !== 'slider'}>
                <FormLabel>{t('gallery.sliderFitLabel')}</FormLabel>
-                <Switch
-                  isChecked={sliderFit === 'fill'}
-                  isDisabled={comparisonMode !== 'slider'}
-                  onChange={onSliderFitChanged}
-                />
+                <Switch isChecked={sliderFit === 'fill'} onChange={onSliderFitChanged} />
              </FormControl>
            </Flex>
          </PopoverBody>
@@ -77,6 +86,7 @@ export const ImageComparisonToolbarButtons = memo(() => {
      </Popover>

      <Button onClick={swapImages}>{t('gallery.swapImages')}</Button>
+      <Button onClick={exitCompare}>{t('gallery.exitCompare')}</Button>
    </>
  );
 });
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -17,18 +17,19 @@ import { ViewerToggleMenu } from './ViewerToggleMenu';
 const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];

 export const ImageViewer = memo(() => {
-  const { viewerMode, onToggle, openEditor } = useImageViewer();
+  const { isOpen, onToggle, onClose } = useImageViewer();
  const activeTabName = useAppSelector(activeTabNameSelector);
+  const isComparing = useAppSelector((s) => s.gallery.imageToCompare !== null);
  const isViewerEnabled = useMemo(() => VIEWER_ENABLED_TABS.includes(activeTabName), [activeTabName]);
  const shouldShowViewer = useMemo(() => {
    if (!isViewerEnabled) {
      return false;
    }
-    return viewerMode === 'view' || viewerMode === 'compare';
-  }, [viewerMode, isViewerEnabled]);
+    return isOpen;
+  }, [isOpen, isViewerEnabled]);

  useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
-  useHotkeys('esc', openEditor, { enabled: isViewerEnabled }, [isViewerEnabled, openEditor]);
+  useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);

  if (!shouldShowViewer) {
    return null;
@@ -58,8 +59,8 @@ export const ImageViewer = memo(() => {
          </Flex>
        </Flex>
        <Flex flex={1} gap={2} justifyContent="center">
-          {viewerMode === 'view' && <CurrentImageButtons />}
-          {viewerMode === 'compare' && <ImageComparisonToolbarButtons />}
+          {!isComparing && <CurrentImageButtons />}
+          {isComparing && <ImageComparisonToolbarButtons />}
        </Flex>
        <Flex flex={1} justifyContent="center">
          <Flex gap={2} marginInlineStart="auto">
@@ -68,8 +69,8 @@ export const ImageViewer = memo(() => {
        </Flex>
      </Flex>
      <Box w="full" h="full">
-        {viewerMode === 'view' && <CurrentImagePreview />}
-        {viewerMode === 'compare' && <ImageComparison />}
+        {!isComparing && <CurrentImagePreview />}
+        {isComparing && <ImageComparison />}
      </Box>
    </Flex>
  );
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -8,60 +8,23 @@ import {
  PopoverContent,
  PopoverTrigger,
  Text,
-  useDisclosure,
 } from '@invoke-ai/ui-library';
-import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiImagesBold, PiPencilBold } from 'react-icons/pi';
+import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiPencilBold } from 'react-icons/pi';

 import { useImageViewer } from './useImageViewer';

 export const ViewerToggleMenu = () => {
  const { t } = useTranslation();
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { viewerMode, openEditor, openViewer, openCompare } = useImageViewer();
-  const icon = useMemo(() => {
-    if (viewerMode === 'view') {
-      return <Icon as={PiEyeBold} />;
-    }
-    if (viewerMode === 'edit') {
-      return <Icon as={PiPencilBold} />;
-    }
-    if (viewerMode === 'compare') {
-      return <Icon as={PiImagesBold} />;
-    }
-  }, [viewerMode]);
-  const label = useMemo(() => {
-    if (viewerMode === 'view') {
-      return t('common.viewing');
-    }
-    if (viewerMode === 'edit') {
-      return t('common.editing');
-    }
-    if (viewerMode === 'compare') {
-      return t('common.comparing');
-    }
-  }, [t, viewerMode]);
-  const _openEditor = useCallback(() => {
-    openEditor();
-    onClose();
-  }, [onClose, openEditor]);
-  const _openViewer = useCallback(() => {
-    openViewer();
-    onClose();
-  }, [onClose, openViewer]);
-  const _openCompare = useCallback(() => {
-    openCompare();
-    onClose();
-  }, [onClose, openCompare]);
+  const { isOpen, onClose, onOpen } = useImageViewer();

  return (
-    <Popover isOpen={isOpen} onClose={onClose} onOpen={onOpen}>
+    <Popover isLazy>
      <PopoverTrigger>
        <Button variant="outline" data-testid="toggle-viewer-menu-button">
          <Flex gap={3} w="full" alignItems="center">
-            {icon}
-            <Text fontSize="md">{label}</Text>
+            {isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
+            <Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>
            <Icon as={PiCaretDownBold} />
          </Flex>
        </Button>
@@ -70,9 +33,9 @@ export const ViewerToggleMenu = () => {
        <PopoverArrow />
        <PopoverBody>
          <Flex flexDir="column">
-            <Button onClick={_openViewer} variant="ghost" h="auto" w="auto" p={2}>
+            <Button onClick={onOpen} variant="ghost" h="auto" w="auto" p={2}>
              <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={viewerMode === 'view' ? 'visible' : 'hidden'} />
+                <Icon as={PiCheckBold} visibility={isOpen ? 'visible' : 'hidden'} />
                <Flex flexDir="column" gap={2} alignItems="flex-start">
                  <Text fontWeight="semibold" color="base.100">
                    {t('common.viewing')}
@@ -83,9 +46,9 @@ export const ViewerToggleMenu = () => {
                </Flex>
              </Flex>
            </Button>
-            <Button onClick={_openEditor} variant="ghost" h="auto" w="auto" p={2}>
+            <Button onClick={onClose} variant="ghost" h="auto" w="auto" p={2}>
              <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={viewerMode === 'edit' ? 'visible' : 'hidden'} />
+                <Icon as={PiCheckBold} visibility={isOpen ? 'hidden' : 'visible'} />
                <Flex flexDir="column" gap={2} alignItems="flex-start">
                  <Text fontWeight="semibold" color="base.100">
                    {t('common.editing')}
@@ -96,19 +59,6 @@ export const ViewerToggleMenu = () => {
                </Flex>
              </Flex>
            </Button>
-            <Button onClick={_openCompare} variant="ghost" h="auto" w="auto" p={2}>
-              <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={viewerMode === 'compare' ? 'visible' : 'hidden'} />
-                <Flex flexDir="column" gap={2} alignItems="flex-start">
-                  <Text fontWeight="semibold" color="base.100">
-                    {t('common.comparing')}
-                  </Text>
-                  <Text fontWeight="normal" color="base.300">
-                    {t('common.comparingDesc')}
-                  </Text>
-                </Flex>
-              </Flex>
-            </Button>
          </Flex>
        </PopoverBody>
      </PopoverContent>
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/useImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/useImageViewer.tsx
@@ -1,26 +1,22 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
+import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { useCallback } from 'react';

 export const useImageViewer = () => {
  const dispatch = useAppDispatch();
-  const viewerMode = useAppSelector((s) => s.gallery.viewerMode);
+  const isOpen = useAppSelector((s) => s.gallery.isImageViewerOpen);

-  const openEditor = useCallback(() => {
-    dispatch(viewerModeChanged('edit'));
+  const onClose = useCallback(() => {
+    dispatch(isImageViewerOpenChanged(false));
  }, [dispatch]);

-  const openViewer = useCallback(() => {
-    dispatch(viewerModeChanged('view'));
+  const onOpen = useCallback(() => {
+    dispatch(isImageViewerOpenChanged(true));
  }, [dispatch]);

  const onToggle = useCallback(() => {
-    dispatch(viewerModeChanged(viewerMode === 'view' ? 'edit' : 'view'));
-  }, [dispatch, viewerMode]);
+    dispatch(isImageViewerOpenChanged(!isOpen));
+  }, [dispatch, isOpen]);

-  const openCompare = useCallback(() => {
-    dispatch(viewerModeChanged('compare'));
-  }, [dispatch]);
-
-  return { viewerMode, openEditor, openViewer, openCompare, onToggle };
+  return { isOpen, onOpen, onClose, onToggle };
 };
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -27,16 +27,16 @@ export const useGalleryHotkeys = () => {
    useGalleryNavigation();

  useHotkeys(
-    'left',
-    () => {
-      canNavigateGallery && handleLeftImage();
+    ['left', 'alt+left'],
+    (e) => {
+      canNavigateGallery && handleLeftImage(e.altKey);
    },
    [handleLeftImage, canNavigateGallery]
  );

  useHotkeys(
-    'right',
-    () => {
+    ['right', 'alt+right'],
+    (e) => {
      if (!canNavigateGallery) {
        return;
      }
@@ -45,29 +45,29 @@ export const useGalleryHotkeys = () => {
        return;
      }
      if (!isOnLastImage) {
-        handleRightImage();
+        handleRightImage(e.altKey);
      }
    },
    [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage, canNavigateGallery]
  );

  useHotkeys(
-    'up',
-    () => {
-      handleUpImage();
+    ['up', 'alt+up'],
+    (e) => {
+      handleUpImage(e.altKey);
    },
    { preventDefault: true },
    [handleUpImage]
  );

  useHotkeys(
-    'down',
-    () => {
+    ['down', 'alt+down'],
+    (e) => {
      if (!areImagesBelowCurrent && areMoreImagesAvailable && !isFetching) {
        handleLoadMoreImages();
        return;
      }
-      handleDownImage();
+      handleDownImage(e.altKey);
    },
    { preventDefault: true },
    [areImagesBelowCurrent, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleDownImage]
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
@@ -1,11 +1,11 @@
+import { useAltModifier } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
 import { imageItemContainerTestId } from 'features/gallery/components/ImageGrid/ImageGridItemContainer';
 import { imageListContainerTestId } from 'features/gallery/components/ImageGrid/ImageGridListContainer';
 import { virtuosoGridRefs } from 'features/gallery/components/ImageGrid/types';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
-import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
-import { imageSelected } from 'features/gallery/store/gallerySlice';
+import { imageSelected, imageToCompareChanged } from 'features/gallery/store/gallerySlice';
 import { getIsVisible } from 'features/gallery/util/getIsVisible';
 import { getScrollToIndexAlign } from 'features/gallery/util/getScrollToIndexAlign';
 import { clamp } from 'lodash-es';
@@ -106,10 +106,10 @@ const getImageFuncs = {
 };

 type UseGalleryNavigationReturn = {
-  handleLeftImage: () => void;
-  handleRightImage: () => void;
-  handleUpImage: () => void;
-  handleDownImage: () => void;
+  handleLeftImage: (alt?: boolean) => void;
+  handleRightImage: (alt?: boolean) => void;
+  handleUpImage: (alt?: boolean) => void;
+  handleDownImage: (alt?: boolean) => void;
  isOnFirstImage: boolean;
  isOnLastImage: boolean;
  areImagesBelowCurrent: boolean;
@@ -123,7 +123,15 @@ type UseGalleryNavigationReturn = {
 */
 export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
  const dispatch = useAppDispatch();
-  const lastSelectedImage = useAppSelector(selectLastSelectedImage);
+  const alt = useAltModifier();
+  const lastSelectedImage = useAppSelector((s) => {
+    const lastSelected = s.gallery.selection.slice(-1)[0] ?? null;
+    if (alt) {
+      return s.gallery.imageToCompare ?? lastSelected;
+    } else {
+      return lastSelected;
+    }
+  });
  const {
    queryResult: { data },
  } = useGalleryImages();
@@ -136,7 +144,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
  }, [lastSelectedImage, data]);

  const handleNavigation = useCallback(
-    (direction: 'left' | 'right' | 'up' | 'down') => {
+    (direction: 'left' | 'right' | 'up' | 'down', alt?: boolean) => {
      if (!data) {
        return;
      }
@@ -144,10 +152,14 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
      if (!image || index === lastSelectedImageIndex) {
        return;
      }
-      dispatch(imageSelected(image));
+      if (alt) {
+        dispatch(imageToCompareChanged(image));
+      } else {
+        dispatch(imageSelected(image));
+      }
      scrollToImage(image.image_name, index);
    },
-    [dispatch, lastSelectedImageIndex, data]
+    [data, lastSelectedImageIndex, dispatch]
  );

  const isOnFirstImage = useMemo(() => lastSelectedImageIndex === 0, [lastSelectedImageIndex]);
@@ -162,21 +174,33 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
    return lastSelectedImageIndex + imagesPerRow < loadedImagesCount;
  }, [lastSelectedImageIndex, loadedImagesCount]);

-  const handleLeftImage = useCallback(() => {
-    handleNavigation('left');
-  }, [handleNavigation]);
+  const handleLeftImage = useCallback(
+    (alt?: boolean) => {
+      handleNavigation('left', alt);
+    },
+    [handleNavigation]
+  );

-  const handleRightImage = useCallback(() => {
-    handleNavigation('right');
-  }, [handleNavigation]);
+  const handleRightImage = useCallback(
+    (alt?: boolean) => {
+      handleNavigation('right', alt);
+    },
+    [handleNavigation]
+  );

-  const handleUpImage = useCallback(() => {
-    handleNavigation('up');
-  }, [handleNavigation]);
+  const handleUpImage = useCallback(
+    (alt?: boolean) => {
+      handleNavigation('up', alt);
+    },
+    [handleNavigation]
+  );

-  const handleDownImage = useCallback(() => {
-    handleNavigation('down');
-  }, [handleNavigation]);
+  const handleDownImage = useCallback(
+    (alt?: boolean) => {
+      handleNavigation('down', alt);
+    },
+    [handleNavigation]
+  );

  return {
    handleLeftImage,
--- a/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
@@ -36,6 +36,7 @@ export const useMultiselect = (imageDTO?: ImageDTO) => {
          shiftKey: e.shiftKey,
          ctrlKey: e.ctrlKey,
          metaKey: e.metaKey,
+          altKey: e.altKey,
        })
      );
    },
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -6,7 +6,7 @@ import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';

-import type { BoardId, ComparisonMode, GalleryState, GalleryView, ViewerMode } from './types';
+import type { BoardId, ComparisonMode, GalleryState, GalleryView } from './types';
 import { IMAGE_LIMIT, INITIAL_IMAGE_LIMIT } from './types';

 const initialGalleryState: GalleryState = {
@@ -21,7 +21,7 @@ const initialGalleryState: GalleryState = {
  boardSearchText: '',
  limit: INITIAL_IMAGE_LIMIT,
  offset: 0,
-  viewerMode: 'view',
+  isImageViewerOpen: true,
  imageToCompare: null,
  comparisonMode: 'slider',
  sliderFit: 'fill',
@@ -40,7 +40,7 @@ export const gallerySlice = createSlice({
    imageToCompareChanged: (state, action: PayloadAction<ImageDTO | null>) => {
      state.imageToCompare = action.payload;
      if (action.payload) {
-        state.viewerMode = 'compare';
+        state.isImageViewerOpen = true;
      }
    },
    comparisonModeChanged: (state, action: PayloadAction<ComparisonMode>) => {
@@ -88,8 +88,12 @@ export const gallerySlice = createSlice({
    alwaysShowImageSizeBadgeChanged: (state, action: PayloadAction<boolean>) => {
      state.alwaysShowImageSizeBadge = action.payload;
    },
-    viewerModeChanged: (state, action: PayloadAction<ViewerMode>) => {
-      state.viewerMode = action.payload;
+    isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
+      if (state.isImageViewerOpen && state.imageToCompare) {
+        state.imageToCompare = null;
+        return;
+      }
+      state.isImageViewerOpen = action.payload;
    },
    comparedImagesSwapped: (state) => {
      if (state.imageToCompare) {
@@ -138,7 +142,7 @@ export const {
  boardSearchTextChanged,
  moreImagesLoaded,
  alwaysShowImageSizeBadgeChanged,
-  viewerModeChanged,
+  isImageViewerOpenChanged,
  imageToCompareChanged,
  comparisonModeChanged,
  comparedImagesSwapped,
@@ -164,5 +168,13 @@ export const galleryPersistConfig: PersistConfig<GalleryState> = {
  name: gallerySlice.name,
  initialState: initialGalleryState,
  migrate: migrateGalleryState,
-  persistDenylist: ['selection', 'selectedBoardId', 'galleryView', 'offset', 'limit', 'viewerMode', 'imageToCompare'],
+  persistDenylist: [
+    'selection',
+    'selectedBoardId',
+    'galleryView',
+    'offset',
+    'limit',
+    'isImageViewerOpen',
+    'imageToCompare',
+  ],
 };
--- a/invokeai/frontend/web/src/features/gallery/store/types.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/types.ts
@@ -8,7 +8,6 @@ export const IMAGE_LIMIT = 20;
 export type GalleryView = 'images' | 'assets';
 export type BoardId = 'none' | (string & Record<never, never>);
 export type ComparisonMode = 'slider' | 'side-by-side';
-export type ViewerMode = 'edit' | 'view' | 'compare';

 export type GalleryState = {
  selection: ImageDTO[];
@@ -25,5 +24,5 @@ export type GalleryState = {
  imageToCompare: ImageDTO | null;
  comparisonMode: ComparisonMode;
  sliderFit: 'contain' | 'fill';
-  viewerMode: ViewerMode;
+  isImageViewerOpen: boolean;
 };
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -3,7 +3,7 @@ import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/u
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent';
-import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
+import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
 import QueueControls from 'features/queue/components/QueueControls';
 import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
@@ -51,7 +51,7 @@ const ParametersPanelTextToImage = () => {
  const onChangeTabs = useCallback(
    (i: number) => {
      if (i === 1) {
-        dispatch(viewerModeChanged('edit'));
+        dispatch(isImageViewerOpenChanged(false));
      }
    },
    [dispatch]