From e91c7c5a30d420fe41e87a8cc717635107dc9ab0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 27 Aug 2024 17:59:21 +1000
Subject: [PATCH] feat(ui): collapsible entity groups

---
 .../CanvasEntityList/CanvasEntityList.tsx     |  2 +-
 .../common/CanvasEntityGroupList.tsx          | 54 ++++++++++++++++---
 .../common/CanvasEntityTypeIsHiddenToggle.tsx | 11 ++--
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/CanvasEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/CanvasEntityList.tsx
index dac827da5d..e09d148420 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/CanvasEntityList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/CanvasEntityList.tsx
@@ -11,7 +11,7 @@ import { memo } from 'react';
 export const CanvasEntityList = memo(() => {
   return (
     <ScrollableContent>
-      <Flex flexDir="column" gap={4} pt={2} data-testid="control-layers-layer-list" w="full" h="full">
+      <Flex flexDir="column" gap={2} pt={2} data-testid="control-layers-layer-list" w="full" h="full">
         <CanvasEntityOpacity />
         <InpaintMaskList />
         <RegionalGuidanceEntityList />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx
index 51d8ed0017..ee3c56d972 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx
@@ -1,27 +1,65 @@
-import { Flex, Spacer, Text } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Button, Collapse, Flex, Icon, Spacer, Text } from '@invoke-ai/ui-library';
+import { useBoolean } from 'common/hooks/useBoolean';
 import { CanvasEntityTypeIsHiddenToggle } from 'features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle';
 import { useEntityTypeTitle } from 'features/controlLayers/hooks/useEntityTypeTitle';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
+import { PiCaretDownBold } from 'react-icons/pi';
 
 type Props = PropsWithChildren<{
   isSelected: boolean;
   type: CanvasEntityIdentifier['type'];
 }>;
 
+const _hover: SystemStyleObject = {
+  opacity: 1,
+};
+
 export const CanvasEntityGroupList = memo(({ isSelected, type, children }: Props) => {
   const title = useEntityTypeTitle(type);
+  const collapse = useBoolean(true);
   return (
-    <Flex flexDir="column" gap={2}>
-      <Flex justifyContent="space-between" alignItems="center" gap={3}>
-        <Text color={isSelected ? 'base.200' : 'base.500'} fontWeight="semibold" userSelect="none">
-          {title}
-        </Text>
-        <Spacer />
+    <Flex flexDir="column" w="full">
+      <Flex w="full">
+        <Flex
+          flexGrow={1}
+          as={Button}
+          onClick={collapse.toggle}
+          justifyContent="space-between"
+          alignItems="center"
+          gap={3}
+          variant="unstyled"
+          p={0}
+          h={8}
+        >
+          <Icon
+            boxSize={4}
+            as={PiCaretDownBold}
+            transform={collapse.isTrue ? undefined : 'rotate(-90deg)'}
+            fill={isSelected ? 'invokeBlue.300' : 'base.300'}
+            transitionProperty="common"
+            transitionDuration="fast"
+          />
+          <Text
+            fontWeight="semibold"
+            color={isSelected ? 'invokeBlue.300' : 'base.300'}
+            userSelect="none"
+            transitionProperty="common"
+            transitionDuration="fast"
+          >
+            {title}
+          </Text>
+          <Spacer />
+        </Flex>
         {type !== 'ip_adapter' && <CanvasEntityTypeIsHiddenToggle type={type} />}
       </Flex>
-      {children}
+      <Collapse in={collapse.isTrue}>
+        <Flex flexDir="column" gap={2} pt={2}>
+          {children}
+        </Flex>
+      </Collapse>
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx
index 25ab3b9a42..3f33c2302f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx
@@ -4,6 +4,7 @@ import { useEntityTypeIsHidden } from 'features/controlLayers/hooks/useEntityTyp
 import { useEntityTypeString } from 'features/controlLayers/hooks/useEntityTypeString';
 import { allEntitiesOfTypeIsHiddenToggled } from 'features/controlLayers/store/canvasSlice';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import type { MouseEventHandler } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiEyeBold, PiEyeClosedBold } from 'react-icons/pi';
@@ -17,9 +18,13 @@ export const CanvasEntityTypeIsHiddenToggle = memo(({ type }: Props) => {
   const dispatch = useAppDispatch();
   const isHidden = useEntityTypeIsHidden(type);
   const typeString = useEntityTypeString(type);
-  const onClick = useCallback(() => {
-    dispatch(allEntitiesOfTypeIsHiddenToggled({ type }));
-  }, [dispatch, type]);
+  const onClick = useCallback<MouseEventHandler>(
+    (e) => {
+      e.stopPropagation();
+      dispatch(allEntitiesOfTypeIsHiddenToggled({ type }));
+    },
+    [dispatch, type]
+  );
 
   return (
     <IconButton