feat(ui): more tweaking controlnet ui

invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx

@@ -1,4 +1,12 @@
-import { Flex, useDisclosure } from '@chakra-ui/react';
+import {
+  Flex,
+  Spacer,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import IAICollapse from 'common/components/IAICollapse';
 import { memo, useCallback } from 'react';
@@ -13,22 +21,23 @@ import {
   isControlNetEnabledToggled,
 } from 'features/controlNet/store/controlNetSlice';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { map } from 'lodash-es';
+import { map, startCase } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
+import { CloseIcon } from '@chakra-ui/icons';
 
 const selector = createSelector(
   controlNetSelector,
   (controlNet) => {
     const { controlNets, isEnabled } = controlNet;
 
-    return { controlNets, isEnabled };
+    return { controlNetsArray: map(controlNets), isEnabled };
   },
   defaultSelectorOptions
 );
 
 const ParamControlNetCollapse = () => {
   const { t } = useTranslation();
-  const { controlNets, isEnabled } = useAppSelector(selector);
+  const { controlNetsArray, isEnabled } = useAppSelector(selector);
   const dispatch = useAppDispatch();
 
   const handleClickControlNetToggle = useCallback(() => {
@@ -46,17 +55,35 @@ const ParamControlNetCollapse = () => {
       onToggle={handleClickControlNetToggle}
       withSwitch
     >
-      <Flex sx={{ alignItems: 'flex-end' }}>
-        <IAIIconButton
-          size="sm"
-          aria-label="Add ControlNet"
-          onClick={handleClickedAddControlNet}
-          icon={<FaPlus />}
-        />
-      </Flex>
-      {map(controlNets, (c) => (
-        <ControlNet key={c.controlNetId} controlNet={c} />
-      ))}
+      <Tabs
+        isFitted
+        orientation="horizontal"
+        variant="line"
+        size="sm"
+        colorScheme="accent"
+      >
+        <TabList alignItems="center" borderBottomColor="base.800" pb={4}>
+          {controlNetsArray.map((c, i) => (
+            <Tab key={`tab_${c.controlNetId}`} borderTopRadius="base">
+              {i + 1}
+            </Tab>
+          ))}
+          <IAIIconButton
+            marginInlineStart={2}
+            size="sm"
+            aria-label="Add ControlNet"
+            onClick={handleClickedAddControlNet}
+            icon={<FaPlus />}
+          />
+        </TabList>
+        <TabPanels>
+          {controlNetsArray.map((c) => (
+            <TabPanel key={`tabPanel_${c.controlNetId}`} sx={{ p: 0 }}>
+              <ControlNet controlNet={c} />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
     </IAICollapse>
   );
 };