feat(ui): get layouts working

psychedelicious · psychedelicious · commit 2039cee10820 · 2025-06-19T23:49:37.000+10:00
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
@@ -14,7 +14,7 @@ export const CanvasLayersPanel = memo(() => {
 
   return (
     <CanvasManagerProviderGate>
-      <Flex flexDir="column" gap={2} w="full" h="full">
+      <Flex flexDir="column" gap={2} w="full" h="full" p={2}>
         <EntityListSelectedEntityActionBar />
         <Divider py={0} />
         <ParamDenoisingStrength />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
@@ -11,7 +11,7 @@ export const CanvasLaunchpadPanel = memo(() => {
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
       <Flex flexDir="column" w="full" h="full" gap={4} px={12} maxW={768} pt="20%">
-        <Heading mb={4}>Get started with Invoke.</Heading>
+        <Heading mb={4}>Edit and refine on Canvas.</Heading>
         <Flex flexDir="column" gap={8}>
           <Grid gridTemplateColumns="1fr 1fr" gap={8}>
             <InitialStateMainModelPicker />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel.tsx
@@ -16,7 +16,7 @@ export const GenerateLaunchpadPanel = memo(() => {
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
       <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
-        <Heading mb={4}>Get started with Invoke.</Heading>
+        <Heading mb={4}>Generate images from text prompts.</Heading>
         <Flex flexDir="column" gap={8}>
           <Grid gridTemplateColumns="1fr 1fr" gap={8}>
             <InitialStateMainModelPicker />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/UpscalingLaunchpadPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/UpscalingLaunchpadPanel.tsx
@@ -0,0 +1,13 @@
+import { Flex, Heading } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+
+export const UpscalingLaunchpadPanel = memo(() => {
+  return (
+    <Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
+      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
+        <Heading mb={4}>Upscale and add detail.</Heading>
+      </Flex>
+    </Flex>
+  );
+});
+UpscalingLaunchpadPanel.displayName = 'UpscalingLaunchpadPanel';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
@@ -1,4 +1,4 @@
-import { Divider, Flex, Heading } from '@invoke-ai/ui-library';
+import { Divider, Flex } from '@invoke-ai/ui-library';
 import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
@@ -29,10 +29,6 @@ export const CanvasToolbar = memo(() => {
 
   return (
     <Flex w="full" gap={2} alignItems="center" px={2}>
-      <Heading size="sm" me={2}>
-        Canvas
-      </Heading>
-      <Divider orientation="vertical" />
       <ToolColorPicker />
       <ToolSettings />
       <Flex alignItems="center" h="full" flexGrow={1} justifyContent="flex-end">
@@ -48,7 +44,6 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarNewSessionMenuButton />
         <CanvasSettingsPopover />
       </Flex>
-      <Divider orientation="vertical" />
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/system/store/configSlice.ts b/invokeai/frontend/web/src/features/system/store/configSlice.ts
@@ -2,6 +2,8 @@ import type { PayloadAction, Selector } from '@reduxjs/toolkit';
 import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import type { AppConfig, NumericalParameterConfig, PartialAppConfig } from 'app/types/invokeai';
+import type { TabName } from 'features/ui/store/uiTypes';
+import { ALL_TABS } from 'features/ui/store/uiTypes';
 import { merge } from 'lodash-es';
 
 const baseDimensionConfig: NumericalParameterConfig = {
@@ -225,3 +227,12 @@ export const selectIsClientSideUploadEnabled = createConfigSelector((config) =>
 export const selectAllowPublishWorkflows = createConfigSelector((config) => config.allowPublishWorkflows);
 export const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
 export const selectShouldShowCredits = createConfigSelector((config) => config.shouldShowCredits);
+export const selectEnabledTabs = createConfigSelector((config) => {
+  const enabledTabs: TabName[] = [];
+  for (const tab of ALL_TABS) {
+    if (!config.disabledTabs.includes(tab)) {
+      enabledTabs.push(tab);
+    }
+  }
+  return enabledTabs;
+});
diff --git a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
@@ -1,10 +1,14 @@
 import 'dockview/dist/styles/dockview.css';
 import 'features/ui/styles/dockview-theme-invoke.css';
 
-import { Flex } from '@invoke-ai/ui-library';
+import { TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
-import { AutoLayout } from 'features/ui/layouts/AutoLayout';
+import { CanvasTabAutoLayout } from 'features/ui/layouts/canvas-tab-auto-layout';
+import { GenerateTabAutoLayout } from 'features/ui/layouts/generate-tab-auto-layout';
+import { UpscalingTabAutoLayout } from 'features/ui/layouts/upscaling-tab-auto-layout';
+import { selectActiveTabIndex } from 'features/ui/store/uiSelectors';
 import { $isLeftPanelOpen, $isRightPanelOpen } from 'features/ui/store/uiSlice';
 import type { CSSProperties } from 'react';
 import { memo } from 'react';
@@ -16,6 +20,7 @@ const onRightPanelCollapse = (isCollapsed: boolean) => $isRightPanelOpen.set(!is
 
 export const AppContent = memo(() => {
   // const tab = useAppSelector(selectActiveTab);
+  const tabIndex = useAppSelector(selectActiveTabIndex);
   // const imperativePanelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   useDndMonitor();
 
@@ -93,10 +98,22 @@ export const AppContent = memo(() => {
   // });
 
   return (
-    <Flex id="invoke-app-tabs" w="full" h="full" p={0} overflow="hidden">
-      <VerticalNavBar />
-      <AutoLayout />
-    </Flex>
+    <Tabs index={tabIndex} display="flex" w="full" h="full" p={0} overflow="hidden">
+      <TabList>
+        <VerticalNavBar />
+      </TabList>
+      <TabPanels w="full" h="full" p={0}>
+        <TabPanel w="full" h="full" p={0}>
+          <GenerateTabAutoLayout />
+        </TabPanel>
+        <TabPanel w="full" h="full" p={0}>
+          <CanvasTabAutoLayout />
+        </TabPanel>
+        <TabPanel w="full" h="full" p={0}>
+          <UpscalingTabAutoLayout />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   );
 });
 AppContent.displayName = 'AppContent';
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx
@@ -22,7 +22,7 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const ParametersPanelTextToImage = () => {
+export const ParametersPanelCanvas = memo(() => {
   const isSDXL = useAppSelector(selectIsSDXL);
   const isCogview4 = useAppSelector(selectIsCogView4);
   const isStylePresetsMenuOpen = useStore($isStylePresetsMenuOpen);
@@ -55,6 +55,6 @@ const ParametersPanelTextToImage = () => {
       </Flex>
     </Flex>
   );
-};
+});
 
-export default memo(ParametersPanelTextToImage);
+ParametersPanelCanvas.displayName = 'ParametersPanelCanvas';
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelGenerate.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelGenerate.tsx
@@ -0,0 +1,58 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { selectIsCogView4, selectIsSDXL } from 'features/controlLayers/store/paramsSlice';
+import { Prompts } from 'features/parameters/components/Prompts/Prompts';
+import { useIsApiModel } from 'features/parameters/hooks/useIsApiModel';
+import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
+import { GenerationSettingsAccordion } from 'features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion';
+import { ImageSettingsAccordion } from 'features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion';
+import { RefinerSettingsAccordion } from 'features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion';
+import { StylePresetMenu } from 'features/stylePresets/components/StylePresetMenu';
+import { StylePresetMenuTrigger } from 'features/stylePresets/components/StylePresetMenuTrigger';
+import { $isStylePresetsMenuOpen } from 'features/stylePresets/store/stylePresetSlice';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
+
+const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
+
+export const ParametersPanelGenerate = memo(() => {
+  const isSDXL = useAppSelector(selectIsSDXL);
+  const isCogview4 = useAppSelector(selectIsCogView4);
+  const isStylePresetsMenuOpen = useStore($isStylePresetsMenuOpen);
+
+  const isApiModel = useIsApiModel();
+
+  return (
+    <Flex w="full" h="full" flexDir="column" gap={2}>
+      <StylePresetMenuTrigger />
+      <Flex w="full" h="full" position="relative">
+        <Box position="absolute" top={0} left={0} right={0} bottom={0}>
+          {isStylePresetsMenuOpen && (
+            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+              <Flex gap={2} flexDirection="column" h="full" w="full">
+                <StylePresetMenu />
+              </Flex>
+            </OverlayScrollbarsComponent>
+          )}
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+            <Flex gap={2} flexDirection="column" h="full" w="full">
+              <Prompts />
+              <ImageSettingsAccordion />
+              <GenerationSettingsAccordion />
+              {isSDXL && <RefinerSettingsAccordion />}
+              {!isCogview4 && !isApiModel && <AdvancedSettingsAccordion />}
+            </Flex>
+          </OverlayScrollbarsComponent>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+});
+
+ParametersPanelGenerate.displayName = 'ParametersPanelGenerate';
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx
@@ -17,7 +17,7 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const ParametersPanelUpscale = () => {
+export const ParametersPanelUpscale = memo(() => {
   const isStylePresetsMenuOpen = useStore($isStylePresetsMenuOpen);
 
   return (
@@ -44,6 +44,6 @@ const ParametersPanelUpscale = () => {
       </Flex>
     </Flex>
   );
-};
+});
 
-export default memo(ParametersPanelUpscale);
+ParametersPanelUpscale.displayName = 'ParametersPanelUpscale';
diff --git a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { IconButton, Tab, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
@@ -26,13 +26,14 @@ export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: React
   return (
     <Tooltip label={label} placement="end">
       <IconButton
+        as={Tab}
         p={0}
         ref={ref}
         onClick={selectTab}
         icon={icon}
         size="md"
         fontSize="24px"
-        variant="appTab"
+        variant="link"
         data-selected={activeTabName === tab}
         aria-label={label}
         data-testid={label}
diff --git a/invokeai/frontend/web/src/features/ui/layouts/CanvasTabLeftPanel.tsx b/invokeai/frontend/web/src/features/ui/layouts/CanvasTabLeftPanel.tsx
@@ -0,0 +1,16 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import QueueControls from 'features/queue/components/QueueControls';
+import { ParametersPanelCanvas } from 'features/ui/components/ParametersPanels/ParametersPanelCanvas';
+import { memo } from 'react';
+
+export const CanvasTabLeftPanel = memo(() => {
+  return (
+    <Flex flexDir="column" w="full" h="full" gap={2} py={2} pe={2}>
+      <QueueControls />
+      <Box position="relative" w="full" h="full">
+        <ParametersPanelCanvas />
+      </Box>
+    </Flex>
+  );
+});
+CanvasTabLeftPanel.displayName = 'CanvasTabLeftPanel';
diff --git a/invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx b/invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx
@@ -66,6 +66,7 @@ export const CanvasWorkspacePanel = memo(() => {
       alignItems="center"
       justifyContent="center"
       overflow="hidden"
+      p={2}
     >
       <CanvasManagerProviderGate>
         <CanvasToolbar />
diff --git a/invokeai/frontend/web/src/features/ui/layouts/GenerateTabLeftPanel.tsx b/invokeai/frontend/web/src/features/ui/layouts/GenerateTabLeftPanel.tsx
@@ -0,0 +1,16 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import QueueControls from 'features/queue/components/QueueControls';
+import { ParametersPanelGenerate } from 'features/ui/components/ParametersPanels/ParametersPanelGenerate';
+import { memo } from 'react';
+
+export const GenerateTabLeftPanel = memo(() => {
+  return (
+    <Flex flexDir="column" w="full" h="full" gap={2} py={2} pe={2}>
+      <QueueControls />
+      <Box position="relative" w="full" h="full">
+        <ParametersPanelGenerate />
+      </Box>
+    </Flex>
+  );
+});
+GenerateTabLeftPanel.displayName = 'GenerateTabLeftPanel';
diff --git a/invokeai/frontend/web/src/features/ui/layouts/UpscalingTabLeftPanel.tsx b/invokeai/frontend/web/src/features/ui/layouts/UpscalingTabLeftPanel.tsx
@@ -0,0 +1,16 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import QueueControls from 'features/queue/components/QueueControls';
+import { ParametersPanelUpscale } from 'features/ui/components/ParametersPanels/ParametersPanelUpscale';
+import { memo } from 'react';
+
+export const UpscalingTabLeftPanel = memo(() => {
+  return (
+    <Flex flexDir="column" w="full" h="full" gap={2} py={2} pe={2}>
+      <QueueControls />
+      <Box position="relative" w="full" h="full">
+        <ParametersPanelUpscale />
+      </Box>
+    </Flex>
+  );
+});
+UpscalingTabLeftPanel.displayName = 'UpscalingTabLeftPanel';
diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
diff --git a/invokeai/frontend/web/src/features/ui/layouts/use-did-render-tab.ts b/invokeai/frontend/web/src/features/ui/layouts/use-did-render-tab.ts
diff --git a/invokeai/frontend/web/src/features/ui/layouts/use-on-first-visible.ts b/invokeai/frontend/web/src/features/ui/layouts/use-on-first-visible.ts
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSelectors.ts b/invokeai/frontend/web/src/features/ui/store/uiSelectors.ts
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
