From 1a9d2f1701ee7d939d803c74ad865a700a2e9f80 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 6 Oct 2023 19:10:50 +1100
Subject: [PATCH] feat(ui): spruce up control adapter ui

---
 invokeai/frontend/web/public/locales/en.json       |  4 ++++
 .../components/ControlAdapterConfig.tsx            | 14 ++++++++++----
 .../ParamControlAdaptersCollapse.tsx               |  5 ++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index b10861072b..dac9536063 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -131,6 +131,10 @@
         "upload": "Upload"
     },
     "controlnet": {
+        "controlAdapter": "Control Adapter",
+        "controlnet": "$t(controlnet.controlAdapter) #{{number}} (Control Net)",
+        "ip_adapter": "$t(controlnet.controlAdapter) #{{number}} (IP Adapter)",
+        "t2i_adapter": "$t(controlnet.controlAdapter) #{{number}} (T2I Adapter)",
         "amult": "a_mult",
         "autoConfigure": "Auto configure processor",
         "balanced": "Balanced",
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index 37683568ba..4b4713e3fa 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -27,8 +27,8 @@ import ParamControlAdapterControlMode from './parameters/ParamControlAdapterCont
 import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapterProcessorSelect';
 import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode';
 
-const ControlAdapterConfig = (props: { id: string }) => {
-  const { id } = props;
+const ControlAdapterConfig = (props: { id: string; number: number }) => {
+  const { id, number } = props;
   const controlAdapterType = useControlAdapterType(id);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -75,13 +75,19 @@ const ControlAdapterConfig = (props: { id: string }) => {
         },
       }}
     >
-      <Flex sx={{ gap: 2, alignItems: 'center' }}>
+      <Flex
+        sx={{ gap: 2, alignItems: 'center', justifyContent: 'space-between' }}
+      >
         <IAISwitch
-          tooltip={t('controlnet.toggleControlNet')}
+          label={t(`controlnet.${controlAdapterType}`, { number })}
           aria-label={t('controlnet.toggleControlNet')}
           isChecked={isEnabled}
           onChange={handleToggleIsEnabled}
+          formControlProps={{ w: 'full' }}
+          formLabelProps={{ fontWeight: 600 }}
         />
+      </Flex>
+      <Flex sx={{ gap: 2, alignItems: 'center' }}>
         <Box
           sx={{
             w: 'full',
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlAdapters/ParamControlAdaptersCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlAdapters/ParamControlAdaptersCollapse.tsx
index a5f0203ace..bba64c43aa 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlAdapters/ParamControlAdaptersCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlAdapters/ParamControlAdaptersCollapse.tsx
@@ -90,11 +90,10 @@ const ParamControlAdaptersCollapse = () => {
             T2I Adapter
           </IAIButton>
         </ButtonGroup>
-        <Divider />
         {controlAdapterIds.map((id, i) => (
           <Fragment key={id}>
-            {i > 0 && <Divider />}
-            <ControlAdapterConfig id={id} />
+            <Divider />
+            <ControlAdapterConfig id={id} number={i + 1} />
           </Fragment>
         ))}
       </Flex>