change actions to be for any InvExpander or InvSingleAccordion that has id passed in

invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx

@@ -6,6 +6,8 @@ import { InvText } from 'common/components/InvText/wrapper';
 import { t } from 'i18next';
 import { useCallback } from 'react';
 import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
+import { useAppDispatch } from '../../../app/store/storeHooks';
+import { expanderToggled } from '../../../features/parameters/store/actions';
 
 const buttonStyles: SystemStyleObject = {
   color: 'base.400',
@@ -24,14 +26,18 @@ export const InvExpander = ({
   children,
   label = t('common.advancedOptions'),
   defaultIsOpen = false,
-  onClick,
+  id,
 }: InvExpanderProps) => {
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
+  const dispatch = useAppDispatch();
 
   const onToggleExpander = useCallback(() => {
-    onClick && onClick(isOpen);
+    if (id) {
+      dispatch(expanderToggled({ id, isOpen }));
+    }
+
     onToggle();
-  }, [onClick, onToggle, isOpen]);
+  }, [id, dispatch, onToggle, isOpen]);
 
   return (
     <Flex flexDir="column" w="full">

invokeai/frontend/web/src/common/components/InvExpander/types.ts

@@ -4,4 +4,5 @@ export type InvExpanderProps = PropsWithChildren<{
   label?: string;
   defaultIsOpen?: boolean;
   onClick?: (isOpen: boolean) => void;
+  id?: string;
 }>;

invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx

@@ -7,11 +7,16 @@ import {
 import { memo, useCallback } from 'react';
 
 import type { InvSingleAccordionProps } from './types';
+import { singleAccordionExpanded } from '../../../features/parameters/store/actions';
+import { useAppDispatch } from '../../../app/store/storeHooks';
 
 export const InvSingleAccordion = memo((props: InvSingleAccordionProps) => {
+  const dispatch = useAppDispatch();
   const handleAccordionClick = useCallback(
-    (isExpanded: boolean) => {
+    (isOpen: boolean) => {
-      props.onClick && props.onClick(isExpanded);
+      if (props.id) {
+        dispatch(singleAccordionExpanded({ id: props.id, isOpen }));
+      }
     },
     [props]
   );

invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts

@@ -4,5 +4,5 @@ export type InvSingleAccordionProps = PropsWithChildren<{
   label: string;
   badges?: (string | number)[];
   defaultIsOpen?: boolean;
-  onClick?: (isOpen?: boolean) => void;
+  id?: string;
 }>;

invokeai/frontend/web/src/features/parameters/store/actions.ts

@@ -9,13 +9,10 @@ export const modelSelected = createAction<MainModelField>(
   'generation/modelSelected'
 );
 
-export const imageAdvancedOptionsExpanded = createAction(
+export const expanderToggled = createAction<{ id: string, isOpen: boolean }>(
-  'parameters/imageAdvancedOptionsExpanded'
+  'parameters/expanderToggled'
 );
-export const generationAdvancedOptionsExpanded = createAction(
+export const singleAccordionExpanded = createAction<{ id: string, isOpen: boolean }>(
-  'parameters/generationAdvancedOptionsExpanded'
+  'parameters/singleAccordionExpanded'
 );
 
-export const advancedPanelExpanded = createAction(
-  'parameters/advancedPanelExpanded'
-);

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

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/layout';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvSingleAccordion } from 'common/components/InvSingleAccordion/InvSingleAccordion';
@@ -10,9 +10,8 @@ import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSea
 import ParamSeamlessYAxis from 'features/parameters/components/Seamless/ParamSeamlessYAxis';
 import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
 import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
-import { advancedPanelExpanded } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const labelProps: InvLabelProps = {
@@ -52,23 +51,9 @@ const selectBadges = createMemoizedSelector(
 export const AdvancedSettingsAccordion = memo(() => {
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const onAccordionClick = useCallback(
-    (isOpen?: boolean) => {
-      if (!isOpen) {
-        dispatch(advancedPanelExpanded());
-      }
-    },
-    [dispatch]
-  );
 
   return (
-    <InvSingleAccordion
+    <InvSingleAccordion label={t('accordions.advanced.title')} badges={badges}>
-      label={t('accordions.advanced.title')}
-      badges={badges}
-      onClick={onAccordionClick}
-    >
       <Flex gap={4} alignItems="center" p={4} flexDir="column">
         <Flex gap={4} w="full">
           <ParamVAEModelSelect />

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

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/layout';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvExpander } from 'common/components/InvExpander/InvExpander';
@@ -20,10 +20,9 @@ import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
 import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
 import ParamSteps from 'features/parameters/components/Core/ParamSteps';
 import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
-import { generationAdvancedOptionsExpanded } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { size } from 'lodash-es';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const labelProps: InvLabelProps = {
@@ -48,16 +47,6 @@ const badgesSelector = createMemoizedSelector(
 export const GenerationSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const { loraTabBadges, accordionBadges } = useAppSelector(badgesSelector);
-  const dispatch = useAppDispatch();
-
-  const onToggleExpander = useCallback(
-    (isOpen?: boolean) => {
-      if (!isOpen) {
-        dispatch(generationAdvancedOptionsExpanded());
-      }
-    },
-    [dispatch]
-  );
 
   return (
     <InvSingleAccordion
@@ -78,7 +67,7 @@ export const GenerationSettingsAccordion = memo(() => {
               <ParamMainModelSelect />
               <SyncModelsIconButton />
             </Flex>
-            <InvExpander onClick={onToggleExpander}>
+            <InvExpander>
               <Flex gap={4} flexDir="column" pb={4}>
                 <InvControlGroup labelProps={labelProps}>
                   <ParamScheduler />

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

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvExpander } from 'common/components/InvExpander/InvExpander';
@@ -16,10 +16,9 @@ import ImageToImageStrength from 'features/parameters/components/ImageToImage/Im
 import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput';
 import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize';
 import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
-import { imageAdvancedOptionsExpanded } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ImageSizeCanvas } from './ImageSizeCanvas';
@@ -74,16 +73,6 @@ const scalingLabelProps: InvLabelProps = {
 export const ImageSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const { badges, activeTabName } = useAppSelector(selector);
-  const dispatch = useAppDispatch();
-
-  const onToggleExpander = useCallback(
-    (isOpen?: boolean) => {
-      if (!isOpen) {
-        dispatch(imageAdvancedOptionsExpanded());
-      }
-    },
-    [dispatch]
-  );
 
   return (
     <InvSingleAccordion
@@ -97,7 +86,7 @@ export const ImageSettingsAccordion = memo(() => {
         ) : (
           <ImageSizeLinear />
         )}
-        <InvExpander onClick={onToggleExpander}>
+        <InvExpander>
           <Flex gap={4} pb={4} flexDir="column">
             <Flex gap={4} alignItems="center">
               <ParamSeedNumberInput />