feat(ui): reorg parameter panel to make room for controlnet

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

@@ -10,6 +10,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import {
   controlNetAdded,
   controlNetSelector,
+  isControlNetEnabledToggled,
 } from 'features/controlNet/store/controlNetSlice';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { map } from 'lodash-es';
@@ -18,19 +19,22 @@ import { v4 as uuidv4 } from 'uuid';
 const selector = createSelector(
   controlNetSelector,
   (controlNet) => {
-    const { controlNets } = controlNet;
+    const { controlNets, isEnabled } = controlNet;
 
-    return { controlNets };
+    return { controlNets, isEnabled };
   },
   defaultSelectorOptions
 );
 
 const ParamControlNetCollapse = () => {
   const { t } = useTranslation();
-  const { isOpen, onToggle } = useDisclosure();
-  const { controlNets } = useAppSelector(selector);
+  const { controlNets, isEnabled } = useAppSelector(selector);
   const dispatch = useAppDispatch();
 
+  const handleClickControlNetToggle = useCallback(() => {
+    dispatch(isControlNetEnabledToggled());
+  }, [dispatch]);
+
   const handleClickedAddControlNet = useCallback(() => {
     dispatch(controlNetAdded({ controlNetId: uuidv4() }));
   }, [dispatch]);
@@ -38,9 +42,9 @@ const ParamControlNetCollapse = () => {
   return (
     <IAICollapse
       label={'ControlNet'}
-      // label={t('parameters.seamCorrectionHeader')}
-      isOpen={isOpen}
-      onToggle={onToggle}
+      isOpen={isEnabled}
+      onToggle={handleClickControlNetToggle}
+      withSwitch
     >
       <Flex sx={{ alignItems: 'flex-end' }}>
         <IAIIconButton

invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx

@@ -0,0 +1,17 @@
+import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
+import ParamSeed from './ParamSeed';
+import ParamSeedShuffle from './ParamSeedShuffle';
+import ParamSeedRandomize from './ParamSeedRandomize';
+
+const ParamSeedFull = () => {
+  return (
+    <Flex sx={{ gap: 4, alignItems: 'center' }}>
+      <ParamSeed />
+      <ParamSeedShuffle />
+      <ParamSeedRandomize />
+    </Flex>
+  );
+};
+
+export default memo(ParamSeedFull);

invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedRandomize.tsx

@@ -2,30 +2,10 @@ import { ChangeEvent, memo } from 'react';
 
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
-import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
-
-// export default function RandomizeSeed() {
-//   const dispatch = useAppDispatch();
-//   const { t } = useTranslation();
-
-//   const shouldRandomizeSeed = useAppSelector(
-//     (state: RootState) => state.generation.shouldRandomizeSeed
-//   );
-
-//   const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) =>
-//     dispatch(setShouldRandomizeSeed(e.target.checked));
-
-//   return (
-//     <Switch
-//       aria-label={t('parameters.randomizeSeed')}
-//       isChecked={shouldRandomizeSeed}
-//       onChange={handleChangeShouldRandomizeSeed}
-//     />
-//   );
-// }
+import { FormControl, FormLabel, Switch, Tooltip } from '@chakra-ui/react';
+import IAISwitch from 'common/components/IAISwitch';
 
 const ParamSeedRandomize = () => {
   const dispatch = useAppDispatch();
@@ -38,6 +18,14 @@ const ParamSeedRandomize = () => {
   const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) =>
     dispatch(setShouldRandomizeSeed(e.target.checked));
 
+  return (
+    <IAISwitch
+      label={t('common.random')}
+      isChecked={shouldRandomizeSeed}
+      onChange={handleChangeShouldRandomizeSeed}
+    />
+  );
+
   return (
     <FormControl
       sx={{

invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx

@@ -3,9 +3,11 @@ import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
+import IAIIconButton from 'common/components/IAIIconButton';
 import randomInt from 'common/util/randomInt';
 import { setSeed } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
+import { FaRandom } from 'react-icons/fa';
 
 export default function ParamSeedShuffle() {
   const dispatch = useAppDispatch();
@@ -17,6 +19,17 @@ export default function ParamSeedShuffle() {
   const handleClickRandomizeSeed = () =>
     dispatch(setSeed(randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)));
 
+  return (
+    <IAIIconButton
+      size="sm"
+      isDisabled={shouldRandomizeSeed}
+      aria-label={t('parameters.shuffle')}
+      tooltip={t('parameters.shuffle')}
+      onClick={handleClickRandomizeSeed}
+      icon={<FaRandom />}
+    />
+  );
+
   return (
     <IAIButton
       size="sm"