add various actions for commercial purposes

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

@@ -5,6 +5,8 @@ import type { InvExpanderProps } from 'common/components/InvExpander/types';
 import { InvText } from 'common/components/InvText/wrapper';
 import { t } from 'i18next';
 import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
+import { useAppDispatch } from '../../../app/store/storeHooks';
+import { useCallback } from 'react';
 
 const buttonStyles: SystemStyleObject = {
   color: 'base.400',
@@ -23,9 +25,15 @@ export const InvExpander = ({
   children,
   label = t('common.advancedOptions'),
   defaultIsOpen = false,
+  onClick,
 }: InvExpanderProps) => {
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
 
+  const onToggleExpander = useCallback(() => {
+    onClick && onClick(isOpen);
+    onToggle();
+  }, [onClick, onToggle, isOpen]);
+
   return (
     <Flex flexDir="column" w="full">
       <Flex
@@ -35,7 +43,7 @@ export const InvExpander = ({
         gap={3}
         py={4}
         px={2}
-        onClick={onToggle}
+        onClick={onToggleExpander}
         sx={buttonStyles}
       >
         <Divider w="unset" flexGrow={1} sx={buttonStyles} />

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

@@ -1,6 +1,8 @@
+import { ThunkAction } from '@reduxjs/toolkit';
 import type { PropsWithChildren } from 'react';
 
 export type InvExpanderProps = PropsWithChildren<{
   label?: string;
   defaultIsOpen?: boolean;
+  onClick?: (isOpen: boolean) => void
 }>;

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

@@ -4,21 +4,35 @@ import {
   InvAccordionItem,
   InvAccordionPanel,
 } from 'common/components/InvAccordion/wrapper';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 import type { InvSingleAccordionProps } from './types';
 
 export const InvSingleAccordion = memo((props: InvSingleAccordionProps) => {
+  const handleAccordionClick = useCallback(
+    (isExpanded: boolean) => {
+      props.onClick && props.onClick(isExpanded);
+    },
+    [props.onClick]
+  );
+
   return (
     <InvAccordion
       allowToggle
       defaultIndex={props.defaultIsOpen ? 0 : undefined}
     >
       <InvAccordionItem>
-        <InvAccordionButton badges={props.badges}>
-          {props.label}
-        </InvAccordionButton>
-        <InvAccordionPanel>{props.children}</InvAccordionPanel>
+        {({ isExpanded }) => (
+          <>
+            <InvAccordionButton
+              badges={props.badges}
+              onClick={() => handleAccordionClick(isExpanded)}
+            >
+              {props.label}
+            </InvAccordionButton>
+            <InvAccordionPanel>{props.children}</InvAccordionPanel>
+          </>
+        )}
       </InvAccordionItem>
     </InvAccordion>
   );

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

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