experiment(ui): settings dockable

invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx

@@ -18,7 +18,7 @@ export const Prompts = memo(() => {
   const isFLUX = useAppSelector(selectIsFLUX);
   const isChatGPT4o = useAppSelector(selectIsChatGTP4o);
   return (
-    <Flex flexDir="column" gap={2}>
+    <Flex flexDir="column" gap={2} overflow="scroll" p={2} h="full">
       <ParamPositivePrompt />
       {withStylePrompts && <ParamSDXLPositiveStylePrompt />}
       {!isFLUX && !isChatGPT4o && <ParamNegativePrompt />}

invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx

@@ -85,7 +85,15 @@ export const AdvancedSettingsAccordion = memo(() => {
   });
 
   return (
-    <Flex gap={4} alignItems="center" p={2} flexDir="column" data-testid="advanced-settings-accordion">
+    <Flex
+      gap={4}
+      alignItems="center"
+      p={2}
+      flexDir="column"
+      data-testid="advanced-settings-accordion"
+      overflow="scroll"
+      h="full"
+    >
       <Flex gap={4} w="full">
         {isFLUX ? <ParamFLUXVAEModelSelect /> : <ParamVAEModelSelect />}
         {!isFLUX && !isSD3 && <ParamVAEPrecision />}

invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx

@@ -74,7 +74,7 @@ export const GenerationSettingsAccordion = memo(() => {
     //   isOpen={isOpenAccordion}
     //   onToggle={onToggleAccordion}
     // >
-    <Box p={2} data-testid="generation-accordion">
+    <Box p={2} data-testid="generation-accordion" overflow="scroll" h="full">
       <Flex gap={4} flexDir="column" pb={isApiModel ? 4 : 0}>
         <DisabledModelWarning />
         <MainModelPicker />

invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx

@@ -69,31 +69,32 @@ export const ImageSettingsAccordion = memo(() => {
     //   isOpen={isOpenAccordion}
     //   onToggle={onToggleAccordion}
     // >
-      <Flex
-        px={2}
-        pb={isApiModel ? 4 : 0}
-        w="full"
-        h="full"
-        flexDir="column"
-        data-testid="image-settings-accordion"
-      >
-        <BboxSettings />
-        {!isApiModel && <ParamSeed py={3} />}
-        {!isApiModel && (
-          <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
-            <Flex gap={4} pb={4} flexDir="column">
-              {(isFLUX || isSD3) && <ParamOptimizedDenoisingToggle />}
-              <BboxScaleMethod />
-              {scaleMethod !== 'none' && (
-                <FormControlGroup formLabelProps={scalingLabelProps}>
-                  <BboxScaledWidth />
-                  <BboxScaledHeight />
-                </FormControlGroup>
-              )}
-            </Flex>
-          </Expander>
-        )}
-      </Flex>
+    <Flex
+      p={2}
+      pb={isApiModel ? 2 : 0}
+      w="full"
+      h="full"
+      flexDir="column"
+      data-testid="image-settings-accordion"
+      overflow="scroll"
+    >
+      <BboxSettings />
+      {!isApiModel && <ParamSeed py={3} />}
+      {!isApiModel && (
+        <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
+          <Flex gap={4} pb={4} flexDir="column">
+            {(isFLUX || isSD3) && <ParamOptimizedDenoisingToggle />}
+            <BboxScaleMethod />
+            {scaleMethod !== 'none' && (
+              <FormControlGroup formLabelProps={scalingLabelProps}>
+                <BboxScaledWidth />
+                <BboxScaledHeight />
+              </FormControlGroup>
+            )}
+          </Flex>
+        </Expander>
+      )}
+    </Flex>
     // </StandaloneAccordion>
   );
 });

invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx

@@ -59,7 +59,7 @@ const RefinerSettingsAccordionContent: React.FC = memo(() => {
 
   return (
     <FormControlGroup isDisabled={!isRefinerModelSelected}>
-      <Flex p={4} gap={4} flexDir="column" minW={0}>
+      <Flex p={2} gap={4} flexDir="column" minW={0} overflow="scroll" h="full">
         <ParamSDXLRefinerModelSelect />
         <FormControlGroup formLabelProps={stepsScaleLabelProps} isDisabled={!isRefinerModelSelected}>
           <ParamSDXLRefinerScheduler />

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

@@ -10,9 +10,14 @@ import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/Canva
 import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import { BoardsListPanelContent } from 'features/gallery/components/BoardsListPanelContent';
 import { Gallery } from 'features/gallery/components/Gallery';
+import { Prompts } from 'features/parameters/components/Prompts/Prompts';
 import QueueControls from 'features/queue/components/QueueControls';
+import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
+import { CompositingSettingsAccordion } from 'features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion';
+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 { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { LeftPanelContent } from 'features/ui/components/LeftPanelContent';
 import { MainPanelContent } from 'features/ui/components/MainPanelContent';
 import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
 import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
@@ -46,7 +51,6 @@ const MyCustomTab = (props: IDockviewPanelHeaderProps) => {
 };
 
 const components: IDockviewReactProps['components'] = {
-  settings: LeftPanelContent,
   main: MainPanelContent,
   boards: BoardsListPanelContent,
   gallery: Gallery,
@@ -56,6 +60,12 @@ const components: IDockviewReactProps['components'] = {
     </CanvasManagerProviderGate>
   ),
   queueControls: QueueControls,
+  prompts: Prompts,
+  imageSettings: ImageSettingsAccordion,
+  generationSettings: GenerationSettingsAccordion,
+  compositingSettings: CompositingSettingsAccordion,
+  advancedSettings: AdvancedSettingsAccordion,
+  refinerSettings: RefinerSettingsAccordion,
 };
 
 const theme: DockviewTheme = {
@@ -150,25 +160,73 @@ export const AppContent = memo(() => {
       title: 'Workspace',
       minimumWidth: 200,
     });
-    const settingsPanel = event.api.addPanel({
-      id: 'settings',
-      title: 'Settings',
-      component: 'settings',
+    const queueControls = event.api.addPanel({
+      id: 'queue-controls',
+      title: 'Queue Controls',
+      component: 'queueControls',
+      // floating: true,
+      // initialHeight: 48 + 24,
+      initialHeight: 48,
+      maximumHeight: 48,
+      minimumWidth: LEFT_PANEL_MIN_SIZE_PX,
       initialWidth: LEFT_PANEL_MIN_SIZE_PX,
       position: {
         direction: 'left',
         referencePanel: mainPanel,
       },
     });
-    event.api.addPanel({
-      id: 'queue-controls',
-      title: 'Queue Controls',
-      component: 'queueControls',
-      // floating: true,
-      initialHeight: 48 + 24,
+    const promptsPanel = event.api.addPanel({
+      id: 'prompts',
+      title: 'Prompts',
+      component: 'prompts',
       position: {
-        direction: 'above',
-        referencePanel: settingsPanel,
+        direction: 'below',
+        referencePanel: queueControls,
+      },
+    });
+    const imagePanel = event.api.addPanel({
+      id: 'imageSettings',
+      title: 'Image Settings',
+      component: 'imageSettings',
+      position: {
+        direction: 'below',
+        referencePanel: promptsPanel,
+      },
+    });
+    const genPanel = event.api.addPanel({
+      id: 'generationSettings',
+      title: 'Generation Settings',
+      component: 'generationSettings',
+      position: {
+        direction: 'within',
+        referencePanel: imagePanel,
+      },
+    });
+    const compPanel = event.api.addPanel({
+      id: 'compositingSettings',
+      title: 'Compositing Settings',
+      component: 'compositingSettings',
+      position: {
+        direction: 'below',
+        referencePanel: imagePanel,
+      },
+    });
+    const advancedPanel = event.api.addPanel({
+      id: 'advancedSettings',
+      title: 'Advanced Settings',
+      component: 'advancedSettings',
+      position: {
+        direction: 'within',
+        referencePanel: compPanel,
+      },
+    });
+    event.api.addPanel({
+      id: 'refinerSettings',
+      title: 'Refiner Settings',
+      component: 'refinerSettings',
+      position: {
+        direction: 'within',
+        referencePanel: advancedPanel,
       },
     });
     const boardsPanel = event.api.addPanel({