feat(ui): viewer UX

invokeai/frontend/web/package.json

@@ -58,7 +58,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.20",
-    "@invoke-ai/ui-library": "^0.0.34",
+    "@invoke-ai/ui-library": "^0.0.36",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",

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

@@ -439,7 +439,9 @@
         "compareHelp2": "Press <Kbd>M</Kbd> to cycle through comparison modes.",
         "compareHelp3": "Press <Kbd>C</Kbd> to swap the compared images.",
         "compareHelp4": "Press <Kbd>Z</Kbd> or <Kbd>Esc</Kbd> to exit.",
-        "toggleMiniViewer": "Toggle Mini Viewer"
+        "toggleMiniViewer": "Toggle Mini Viewer",
+        "openViewer": "Open Viewer",
+        "closeViewer": "Close Viewer"
     },
     "hotkeys": {
         "searchHotkeys": "Search Hotkeys",
@@ -1723,9 +1725,11 @@
         "sendingToCanvas": "Sending to Canvas",
         "sendingToGallery": "Sending to Gallery",
         "sendToGallery": "Send To Gallery",
-        "sendToGalleryDesc": "Generations will be sent to the gallery.",
+        "sendToGalleryDesc": "Pressing Invoke generates and saves a unique image to your gallery.",
         "sendToCanvas": "Send To Canvas",
-        "sendToCanvasDesc": "Generations will be staged onto the canvas.",
+        "sendToCanvasDesc": "Pressing Invoke stages your work in progress on the canvas.",
+        "viewProgressInViewer": "View progress and outputs in the <Btn>Image Viewer</Btn>.",
+        "viewProgressOnCanvas": "View progress and stage outputs on the <Btn>Canvas</Btn>.",
         "rasterLayer_withCount_one": "$t(controlLayers.rasterLayer)",
         "controlLayer_withCount_one": "$t(controlLayers.controlLayer)",
         "inpaintMask_withCount_one": "$t(controlLayers.inpaintMask)",
@@ -2031,6 +2035,7 @@
             "events": "Events",
             "queue": "Queue",
             "metadata": "Metadata"
-        }
+        },
+        "showSendingToAlerts": "Alert When Sending to Different View"
     }
 }

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -114,13 +114,4 @@ export const useGlobalHotkeys = () => {
     },
     [dispatch, isModelManagerEnabled]
   );
-
-  useHotkeys(
-    isModelManagerEnabled ? '6' : '5',
-    () => {
-      dispatch(setActiveTab('gallery'));
-      setScopes([]);
-    },
-    [dispatch, isModelManagerEnabled]
-  );
 };

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

@@ -1,6 +1,7 @@
 import { Flex } from '@invoke-ai/ui-library';
 import IAIDroppable from 'common/components/IAIDroppable';
 import type { AddControlLayerFromImageDropData, AddRasterLayerFromImageDropData } from 'features/dnd/types';
+import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { memo } from 'react';
 
 const addRasterLayerFromImageDropData: AddRasterLayerFromImageDropData = {
@@ -14,6 +15,12 @@ const addControlLayerFromImageDropData: AddControlLayerFromImageDropData = {
 };
 
 export const CanvasDropArea = memo(() => {
+  const imageViewer = useImageViewer();
+
+  if (imageViewer.isOpen) {
+    return null;
+  }
+
   return (
     <>
       <Flex position="absolute" top={0} right={0} bottom="50%" left={0} gap={2} pointerEvents="none">

invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx → invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx

@@ -7,7 +7,7 @@ import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/Canva
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
 import { memo } from 'react';
 
-export const CanvasPanelContent = memo(() => {
+export const CanvasLayersPanelContent = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
 
   return (
@@ -22,4 +22,4 @@ export const CanvasPanelContent = memo(() => {
   );
 });
 
-CanvasPanelContent.displayName = 'CanvasPanelContent';
+CanvasLayersPanelContent.displayName = 'CanvasLayersPanelContent';

invokeai/frontend/web/src/features/controlLayers/components/CanvasTabContent.tsx → invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx

@@ -6,6 +6,7 @@ import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea
 import { Filter } from 'features/controlLayers/components/Filters/Filter';
 import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
 import { CanvasSelectedEntityStatusAlert } from 'features/controlLayers/components/HUD/CanvasSelectedEntityStatusAlert';
+import { SendingToGalleryAlert } from 'features/controlLayers/components/HUD/CanvasSendingToGalleryAlert';
 import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
 import { StagingAreaIsStagingGate } from 'features/controlLayers/components/StagingArea/StagingAreaIsStagingGate';
 import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
@@ -14,9 +15,10 @@ import { Transform } from 'features/controlLayers/components/Transform/Transform
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { TRANSPARENCY_CHECKERBOARD_PATTERN_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
 import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
+import { GatedImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import { memo, useCallback, useRef } from 'react';
 
-export const CanvasTabContent = memo(() => {
+export const CanvasMainPanelContent = memo(() => {
   const ref = useRef<HTMLDivElement>(null);
   const dynamicGrid = useAppSelector(selectDynamicGrid);
   const showHUD = useAppSelector(selectShowHUD);
@@ -76,8 +78,9 @@ export const CanvasTabContent = memo(() => {
                   <CanvasHUD />
                 </Flex>
               )}
-              <Flex position="absolute" top={1} insetInlineEnd={1} pointerEvents="none">
+              <Flex flexDir="column" position="absolute" top={1} insetInlineEnd={1} pointerEvents="none" gap={2}>
                 <CanvasSelectedEntityStatusAlert />
+                <SendingToGalleryAlert />
               </Flex>
             </CanvasManagerProviderGate>
           </Flex>
@@ -97,8 +100,9 @@ export const CanvasTabContent = memo(() => {
         </CanvasManagerProviderGate>
       </Flex>
       <CanvasDropArea />
+      <GatedImageViewer />
     </Flex>
   );
 });
 
-CanvasTabContent.displayName = 'CanvasTabContent';
+CanvasMainPanelContent.displayName = 'CanvasMainPanelContent';

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

@@ -1,30 +1,47 @@
 import { useDndContext } from '@dnd-kit/core';
-import { Box, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { Box, Button, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
-import { CanvasPanelContent } from 'features/controlLayers/components/CanvasPanelContent';
-import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
-import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
+import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
 import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { atom } from 'nanostores';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
-export const CanvasRightPanelContent = memo(() => {
+const $tabIndex = atom(0);
+export const setRightPanelTabToLayers = () => $tabIndex.set(0);
+export const setRightPanelTabToGallery = () => $tabIndex.set(1);
+
+export const CanvasRightPanel = memo(() => {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
-  const [tab, setTab] = useState(0);
+  const tabIndex = useStore($tabIndex);
   useScopeOnFocus('gallery', ref);
+  const imageViewer = useImageViewer();
+  const onClickViewerToggleButton = useCallback(() => {
+    if ($tabIndex.get() !== 1) {
+      $tabIndex.set(1);
+    }
+    imageViewer.toggle();
+  }, [imageViewer]);
+  useHotkeys('z', imageViewer.toggle);
 
   return (
-    <Tabs index={tab} onChange={setTab} w="full" h="full" display="flex" flexDir="column">
+    <Tabs index={tabIndex} onChange={$tabIndex.set} w="full" h="full" display="flex" flexDir="column">
       <TabList alignItems="center">
-        <PanelTabs setTab={setTab} />
+        <PanelTabs />
         <Spacer />
-        <CanvasSendToToggle />
+        <Button size="sm" variant="ghost" onClick={onClickViewerToggleButton}>
+          {imageViewer.isOpen ? t('gallery.closeViewer') : t('gallery.openViewer')}
+        </Button>
       </TabList>
       <TabPanels w="full" h="full">
         <TabPanel w="full" h="full" p={0} pt={3}>
-          <CanvasPanelContent />
+          <CanvasLayersPanelContent />
         </TabPanel>
         <TabPanel w="full" h="full" p={0} pt={3}>
           <GalleryPanelContent />
@@ -34,30 +51,29 @@ export const CanvasRightPanelContent = memo(() => {
   );
 });
 
-CanvasRightPanelContent.displayName = 'CanvasRightPanelContent';
+CanvasRightPanel.displayName = 'CanvasRightPanel';
 
-const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
+const PanelTabs = memo(() => {
   const { t } = useTranslation();
   const activeEntityCount = useAppSelector(selectEntityCountActive);
-  const sendToCanvas = useAppSelector(selectSendToCanvas);
   const tabTimeout = useRef<number | null>(null);
   const dndCtx = useDndContext();
 
   const onOnMouseOverLayersTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setTab(0);
+        setRightPanelTabToLayers();
       }
     }, 300);
-  }, [dndCtx.active, setTab]);
+  }, [dndCtx.active]);
 
   const onOnMouseOverGalleryTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setTab(1);
+        setRightPanelTabToGallery();
       }
     }, 300);
-  }, [dndCtx.active, setTab]);
+  }, [dndCtx.active]);
 
   const onMouseOut = useCallback(() => {
     if (tabTimeout.current) {
@@ -78,15 +94,9 @@ const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
         <Box as="span" w="full">
           {layersTabLabel}
         </Box>
-        {sendToCanvas && (
-          <Box position="absolute" top={2} right={2} h={2} w={2} bg="invokeYellow.300" borderRadius="full" />
-        )}
       </Tab>
       <Tab position="relative" onMouseOver={onOnMouseOverGalleryTab} onMouseOut={onMouseOut}>
         {t('gallery.gallery')}
-        {!sendToCanvas && (
-          <Box position="absolute" top={2} right={2} h={2} w={2} bg="invokeYellow.300" borderRadius="full" />
-        )}
       </Tab>
     </>
   );