feat(ui): make control layer ui exclusive to txt2img tab

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -11,6 +11,7 @@ import StatusIndicator from 'features/system/components/StatusIndicator';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
+import ParametersPanelTextToImage from 'features/ui/components/ParametersPanelTextToImage';
 import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
 import { usePanel } from 'features/ui/hooks/usePanel';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
@@ -249,7 +250,7 @@ const InvokeTabs = () => {
               onExpand={optionsPanel.onExpand}
               collapsible
             >
-              {activeTabName === 'nodes' ? <NodeEditorPanelGroup /> : <ParametersPanel />}
+              <ParametersPanelComponent />
             </Panel>
             <ResizeHandle
               id="options-main-handle"
@@ -292,3 +293,16 @@ const InvokeTabs = () => {
 };
 
 export default memo(InvokeTabs);
+
+const ParametersPanelComponent = memo(() => {
+  const activeTabName = useAppSelector(activeTabNameSelector);
+
+  if (activeTabName === 'nodes') {
+    return <NodeEditorPanelGroup />;
+  }
+  if (activeTabName === 'txt2img') {
+    return <ParametersPanelTextToImage />;
+  }
+  return <ParametersPanel />;
+});
+ParametersPanelComponent.displayName = 'ParametersPanelComponent';

invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx

@@ -1,10 +1,8 @@
-import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
 import QueueControls from 'features/queue/components/QueueControls';
-import { RegionalPromptsPanelContent } from 'features/regionalPrompts/components/RegionalPromptsPanelContent';
-import { useRegionalControlTitle } from 'features/regionalPrompts/hooks/useRegionalControlTitle';
 import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
 import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
 import { CompositingSettingsAccordion } from 'features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion';
@@ -16,7 +14,6 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 const overlayScrollbarsStyles: CSSProperties = {
   height: '100%',
@@ -24,9 +21,7 @@ const overlayScrollbarsStyles: CSSProperties = {
 };
 
 const ParametersPanel = () => {
-  const { t } = useTranslation();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const regionalControlTitle = useRegionalControlTitle();
   const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
 
   return (
@@ -37,15 +32,6 @@ const ParametersPanel = () => {
           <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
             <Flex gap={2} flexDirection="column" h="full" w="full">
               {isSDXL ? <SDXLPrompts /> : <Prompts />}
-              <Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
-                <TabList>
-                  <Tab>{t('parameters.globalSettings')}</Tab>
-                  <Tab>{regionalControlTitle}</Tab>
-                </TabList>
-
-                <TabPanels w="full" h="full">
-                  <TabPanel>
-                    <Flex gap={2} flexDirection="column" h="full" w="full">
               <ImageSettingsAccordion />
               <GenerationSettingsAccordion />
               {activeTabName !== 'txt2img' && <ControlSettingsAccordion />}
@@ -53,13 +39,6 @@ const ParametersPanel = () => {
               {isSDXL && <RefinerSettingsAccordion />}
               <AdvancedSettingsAccordion />
             </Flex>
-                  </TabPanel>
-                  <TabPanel>
-                    <RegionalPromptsPanelContent />
-                  </TabPanel>
-                </TabPanels>
-              </Tabs>
-            </Flex>
           </OverlayScrollbarsComponent>
         </Box>
       </Flex>

invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx

@@ -0,0 +1,70 @@
+import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { Prompts } from 'features/parameters/components/Prompts/Prompts';
+import QueueControls from 'features/queue/components/QueueControls';
+import { RegionalPromptsPanelContent } from 'features/regionalPrompts/components/RegionalPromptsPanelContent';
+import { useRegionalControlTitle } from 'features/regionalPrompts/hooks/useRegionalControlTitle';
+import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
+import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
+import { CompositingSettingsAccordion } from 'features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion';
+import { ControlSettingsAccordion } from 'features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion';
+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 { activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
+
+const ParametersPanelTextToImage = () => {
+  const { t } = useTranslation();
+  const activeTabName = useAppSelector(activeTabNameSelector);
+  const regionalControlTitle = useRegionalControlTitle();
+  const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
+
+  return (
+    <Flex w="full" h="full" flexDir="column" gap={2}>
+      <QueueControls />
+      <Flex w="full" h="full" position="relative">
+        <Box position="absolute" top={0} left={0} right={0} bottom={0}>
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+            <Flex gap={2} flexDirection="column" h="full" w="full">
+              {isSDXL ? <SDXLPrompts /> : <Prompts />}
+              <Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
+                <TabList>
+                  <Tab>{t('parameters.globalSettings')}</Tab>
+                  <Tab>{regionalControlTitle}</Tab>
+                </TabList>
+
+                <TabPanels w="full" h="full">
+                  <TabPanel>
+                    <Flex gap={2} flexDirection="column" h="full" w="full">
+                      <ImageSettingsAccordion />
+                      <GenerationSettingsAccordion />
+                      {activeTabName !== 'txt2img' && <ControlSettingsAccordion />}
+                      {activeTabName === 'unifiedCanvas' && <CompositingSettingsAccordion />}
+                      {isSDXL && <RefinerSettingsAccordion />}
+                      <AdvancedSettingsAccordion />
+                    </Flex>
+                  </TabPanel>
+                  <TabPanel>
+                    <RegionalPromptsPanelContent />
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </Flex>
+          </OverlayScrollbarsComponent>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default memo(ParametersPanelTextToImage);

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx

@@ -1,7 +1,7 @@
-import { Box } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui-library';
+import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay';
 import InitialImageDisplay from 'features/parameters/components/ImageToImage/InitialImageDisplay';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
-import TextToImageTabMain from 'features/ui/components/tabs/TextToImageTab';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useRef } from 'react';
@@ -42,7 +42,11 @@ const ImageToImageTab = () => {
         </Panel>
         <ResizeHandle orientation="vertical" onDoubleClick={handleDoubleClickHandle} />
         <Panel id="imageTab.content.selectedImage" order={1} defaultSize={50} minSize={25}>
-          <TextToImageTabMain />
+          <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
+            <Flex w="full" h="full">
+              <CurrentImageDisplay />
+            </Flex>
+          </Box>
         </Panel>
       </PanelGroup>
     </Box>

invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx

@@ -10,7 +10,7 @@ const TextToImageTab = () => {
   const regionalControlTitle = useRegionalControlTitle();
 
   return (
-    <Box position="relative" w="full" h="full" p={2} borderRadius="base">
+    <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
       <Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
         <TabList>
           <Tab>{t('common.viewer')}</Tab>