feat(ui): clearer viewer/editor context switching

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

@@ -88,6 +88,7 @@
         "negativePrompt": "Negative Prompt",
         "discordLabel": "Discord",
         "dontAskMeAgain": "Don't ask me again",
+        "editor": "Editor",
         "error": "Error",
         "file": "File",
         "folder": "Folder",
@@ -364,7 +365,7 @@
         "bulkDownloadFailed": "Download Failed",
         "problemDeletingImages": "Problem Deleting Images",
         "problemDeletingImagesDesc": "One or more images could not be deleted",
-        "backToEditor": "Back to {{tab}} (Esc)"
+        "switchTo": "Switch to {{ tab }} (Z)"
     },
     "hotkeys": {
         "searchHotkeys": "Search Hotkeys",

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -22,6 +22,7 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import type { CanvasLayer } from 'features/canvas/store/canvasTypes';
 import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes';
+import { ViewerButton } from 'features/gallery/components/ImageViewer/ViewerButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -219,97 +220,107 @@ const IAICanvasToolbar = () => {
   const value = useMemo(() => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], [layer]);
 
   return (
-    <Flex alignItems="center" gap={2} flexWrap="wrap">
-      <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
-        <FormControl isDisabled={isStaging} w="5rem">
-          <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />
-        </FormControl>
-      </Tooltip>
+    <Flex w="full" gap={2} alignItems="center">
+      <Flex flex={1} justifyContent="center">
+        <Flex gap={2} marginInlineEnd="auto" />
+      </Flex>
+      <Flex flex={1} gap={2} justifyContent="center">
+        <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
+          <FormControl isDisabled={isStaging} w="5rem">
+            <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />
+          </FormControl>
+        </Tooltip>
 
-      <IAICanvasMaskOptions />
-      <IAICanvasToolChooserOptions />
+        <IAICanvasMaskOptions />
+        <IAICanvasToolChooserOptions />
 
-      <ButtonGroup>
-        <IconButton
-          aria-label={`${t('unifiedCanvas.move')} (V)`}
-          tooltip={`${t('unifiedCanvas.move')} (V)`}
-          icon={<PiHandGrabbingBold />}
-          isChecked={tool === 'move' || isStaging}
-          onClick={handleSelectMoveTool}
-        />
-        <IconButton
-          aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
-          tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
-          icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
-          onClick={handleSetShouldShowBoundingBox}
-          isDisabled={isStaging}
-        />
-        <IconButton
-          aria-label={`${t('unifiedCanvas.resetView')} (R)`}
-          tooltip={`${t('unifiedCanvas.resetView')} (R)`}
-          icon={<PiCrosshairSimpleBold />}
-          onClick={handleClickResetCanvasView}
-        />
-      </ButtonGroup>
-
-      <ButtonGroup>
-        <IconButton
-          aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
-          tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
-          icon={<PiStackBold />}
-          onClick={handleMergeVisible}
-          isDisabled={isStaging}
-        />
-        <IconButton
-          aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
-          tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
-          icon={<PiFloppyDiskBold />}
-          onClick={handleSaveToGallery}
-          isDisabled={isStaging}
-        />
-        {isClipboardAPIAvailable && (
+        <ButtonGroup>
           <IconButton
-            aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-            tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-            icon={<PiCopyBold />}
-            onClick={handleCopyImageToClipboard}
+            aria-label={`${t('unifiedCanvas.move')} (V)`}
+            tooltip={`${t('unifiedCanvas.move')} (V)`}
+            icon={<PiHandGrabbingBold />}
+            isChecked={tool === 'move' || isStaging}
+            onClick={handleSelectMoveTool}
+          />
+          <IconButton
+            aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+            tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+            icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
+            onClick={handleSetShouldShowBoundingBox}
             isDisabled={isStaging}
           />
-        )}
-        <IconButton
-          aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
-          tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
-          icon={<PiDownloadSimpleBold />}
-          onClick={handleDownloadAsImage}
-          isDisabled={isStaging}
-        />
-      </ButtonGroup>
-      <ButtonGroup>
-        <IAICanvasUndoButton />
-        <IAICanvasRedoButton />
-      </ButtonGroup>
+          <IconButton
+            aria-label={`${t('unifiedCanvas.resetView')} (R)`}
+            tooltip={`${t('unifiedCanvas.resetView')} (R)`}
+            icon={<PiCrosshairSimpleBold />}
+            onClick={handleClickResetCanvasView}
+          />
+        </ButtonGroup>
 
-      <ButtonGroup>
-        <IconButton
-          aria-label={`${t('common.upload')}`}
-          tooltip={`${t('common.upload')}`}
-          icon={<PiUploadSimpleBold />}
-          isDisabled={isStaging}
-          {...getUploadButtonProps()}
-        />
-        <input {...getUploadInputProps()} />
-        <IconButton
-          aria-label={`${t('unifiedCanvas.clearCanvas')}`}
-          tooltip={`${t('unifiedCanvas.clearCanvas')}`}
-          icon={<PiTrashSimpleBold />}
-          onClick={handleResetCanvas}
-          colorScheme="error"
-          isDisabled={isStaging}
-        />
-      </ButtonGroup>
-      <ButtonGroup>
-        <IAICanvasSettingsButtonPopover />
-      </ButtonGroup>
+        <ButtonGroup>
+          <IconButton
+            aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
+            tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
+            icon={<PiStackBold />}
+            onClick={handleMergeVisible}
+            isDisabled={isStaging}
+          />
+          <IconButton
+            aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
+            tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
+            icon={<PiFloppyDiskBold />}
+            onClick={handleSaveToGallery}
+            isDisabled={isStaging}
+          />
+          {isClipboardAPIAvailable && (
+            <IconButton
+              aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
+              tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
+              icon={<PiCopyBold />}
+              onClick={handleCopyImageToClipboard}
+              isDisabled={isStaging}
+            />
+          )}
+          <IconButton
+            aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
+            tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
+            icon={<PiDownloadSimpleBold />}
+            onClick={handleDownloadAsImage}
+            isDisabled={isStaging}
+          />
+        </ButtonGroup>
+        <ButtonGroup>
+          <IAICanvasUndoButton />
+          <IAICanvasRedoButton />
+        </ButtonGroup>
+
+        <ButtonGroup>
+          <IconButton
+            aria-label={`${t('common.upload')}`}
+            tooltip={`${t('common.upload')}`}
+            icon={<PiUploadSimpleBold />}
+            isDisabled={isStaging}
+            {...getUploadButtonProps()}
+          />
+          <input {...getUploadInputProps()} />
+          <IconButton
+            aria-label={`${t('unifiedCanvas.clearCanvas')}`}
+            tooltip={`${t('unifiedCanvas.clearCanvas')}`}
+            icon={<PiTrashSimpleBold />}
+            onClick={handleResetCanvas}
+            colorScheme="error"
+            isDisabled={isStaging}
+          />
+        </ButtonGroup>
+        <ButtonGroup>
+          <IAICanvasSettingsButtonPopover />
+        </ButtonGroup>
+      </Flex>
+      <Flex flex={1} justifyContent="center">
+        <Flex gap={2} marginInlineStart="auto">
+          <ViewerButton />
+        </Flex>
+      </Flex>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx

@@ -4,15 +4,26 @@ import { BrushSize } from 'features/controlLayers/components/BrushSize';
 import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover';
 import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
 import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
+import { ViewerButton } from 'features/gallery/components/ImageViewer/ViewerButton';
 import { memo } from 'react';
 
 export const ControlLayersToolbar = memo(() => {
   return (
-    <Flex gap={4}>
-      <BrushSize />
-      <ToolChooser />
-      <UndoRedoButtonGroup />
-      <ControlLayersSettingsPopover />
+    <Flex w="full" gap={2}>
+      <Flex flex={1} justifyContent="center">
+        <Flex gap={2} marginInlineEnd="auto" />
+      </Flex>
+      <Flex flex={1} gap={2} justifyContent="center">
+        <BrushSize />
+        <ToolChooser />
+        <UndoRedoButtonGroup />
+        <ControlLayersSettingsPopover />
+      </Flex>
+      <Flex flex={1} justifyContent="center">
+        <Flex gap={2} marginInlineStart="auto">
+          <ViewerButton />
+        </Flex>
+      </Flex>
     </Flex>
   );
 });

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

@@ -1,24 +0,0 @@
-import { Button } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowLeftBold } from 'react-icons/pi';
-
-import { TAB_NAME_TO_TKEY, useImageViewer } from './useImageViewer';
-
-export const BackToEditorButton = () => {
-  const { t } = useTranslation();
-  const { onClose } = useImageViewer();
-  const activeTabName = useAppSelector(activeTabNameSelector);
-  const tooltip = useMemo(
-    () => t('gallery.backToEditor', { tab: t(TAB_NAME_TO_TKEY[activeTabName]) }),
-    [t, activeTabName]
-  );
-
-  return (
-    <Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} leftIcon={<PiArrowLeftBold />} variant="ghost">
-      {t('common.back')}
-    </Button>
-  );
-};

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

@@ -0,0 +1,37 @@
+import { Button } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useImageViewer } from './useImageViewer';
+
+export const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = {
+  generation: 'ui.tabs.generationTab',
+  canvas: 'ui.tabs.canvasTab',
+  workflows: 'ui.tabs.workflowsTab',
+  models: 'ui.tabs.modelsTab',
+  queue: 'ui.tabs.queueTab',
+};
+
+export const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = {
+  generation: 'ui.tabs.generation',
+  canvas: 'ui.tabs.canvas',
+  workflows: 'ui.tabs.workflows',
+  models: 'ui.tabs.models',
+  queue: 'ui.tabs.queue',
+};
+
+export const EditorButton = () => {
+  const { t } = useTranslation();
+  const { onClose } = useImageViewer();
+  const activeTabName = useAppSelector(activeTabNameSelector);
+  const tooltip = useMemo(() => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY[activeTabName]) }), [t, activeTabName]);
+
+  return (
+    <Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="ghost">
+      {t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
+    </Button>
+  );
+};

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

@@ -10,9 +10,9 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { memo, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { BackToEditorButton } from './BackToEditorButton';
 import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
+import { EditorButton } from './EditorButton';
 
 const initial: AnimationProps['initial'] = {
   opacity: 0,
@@ -39,13 +39,14 @@ export const ImageViewer = memo(() => {
     return isOpen;
   }, [isOpen, isViewerEnabled]);
 
-  useHotkeys('shift+s', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
+  useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
   useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);
 
   return (
     <AnimatePresence>
       {shouldShowViewer && (
         <Flex
+          key="imageViewer"
           as={motion.div}
           initial={initial}
           animate={animate}
@@ -76,7 +77,7 @@ export const ImageViewer = memo(() => {
             </Flex>
             <Flex flex={1} justifyContent="center">
               <Flex gap={2} marginInlineStart="auto">
-                <BackToEditorButton />
+                <EditorButton />
               </Flex>
             </Flex>
           </Flex>

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

@@ -0,0 +1,17 @@
+import { Button } from '@invoke-ai/ui-library';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useImageViewer } from './useImageViewer';
+
+export const ViewerButton = () => {
+  const { t } = useTranslation();
+  const { onOpen } = useImageViewer();
+  const tooltip = useMemo(() => t('gallery.switchTo', { tab: t('common.viewer') }), [t]);
+
+  return (
+    <Button aria-label={tooltip} tooltip={tooltip} onClick={onOpen} variant="ghost" pointerEvents="auto">
+      {t('common.viewer')}
+    </Button>
+  );
+};

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

@@ -1,16 +1,7 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
-import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { useCallback } from 'react';
 
-export const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = {
-  generation: 'ui.tabs.generation',
-  canvas: 'ui.tabs.canvas',
-  workflows: 'ui.tabs.workflows',
-  models: 'ui.tabs.models',
-  queue: 'ui.tabs.queue',
-};
-
 export const useImageViewer = () => {
   const dispatch = useAppDispatch();
   const isOpen = useAppSelector((s) => s.gallery.isImageViewerOpen);

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx

@@ -1,5 +1,6 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { ViewerButton } from 'features/gallery/components/ImageViewer/ViewerButton';
 import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton';
 import ClearFlowButton from 'features/nodes/components/flow/panels/TopPanel/ClearFlowButton';
 import SaveWorkflowButton from 'features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton';
@@ -22,6 +23,7 @@ const TopCenterPanel = () => {
       <ClearFlowButton />
       <SaveWorkflowButton />
       <WorkflowLibraryMenu />
+      <ViewerButton />
     </Flex>
   );
 };