feat: Make group fileds in the inspector accordions

src/components/atoms/BlockGroupField.tsx

@@ -1,13 +1,60 @@
+import { useCallback, useRef } from "react";
+import { useLocalStorageAdopter } from "../../hooks/localStorage";
+import iconDropdown from "../../assets/icons/dropdown.svg";
+
 interface Props {
   label: string;
   children?: React.ReactNode;
+  accordionKey?: string;
 }
 
-export const BlockGroupField: React.FC<Props> = ({ label, children }) => {
+export const BlockGroupField: React.FC<Props> = ({ label, children, accordionKey }) => {
+  const { state: accordionState, setState: setAccordingState } = useLocalStorageAdopter({
+    key: accordionKey,
+    initialValue: false,
+    version: "1",
+  });
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleAccordionClick = useCallback(() => {
+    setAccordingState((v) => {
+      const next = !v;
+      if (next) {
+        setTimeout(() => {
+          contentRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+        }, 0);
+      }
+      return next;
+    });
+  }, [setAccordingState]);
+
+  const content = (
+    <div ref={contentRef} className="ml-2 pl-2 border-l border-b border-gray-400 flex flex-col gap-1">
+      {children}
+    </div>
+  );
+
+  if (!accordionKey) {
+    return (
+      <div className="flex flex-col gap-1">
+        <span>{label}:</span>
+        {content}
+      </div>
+    );
+  }
+
   return (
-    <div className="flex flex-col gap-1">
-      <span>{label}:</span>
-      <div className="ml-2 pl-2 border-l border-gray-400 flex flex-col gap-1">{children}</div>
+    <div className={"flex flex-col gap-1 " + (accordionState ? "" : "border-b border-gray-400")}>
+      <button
+        type="button"
+        className="flex items-center justify-between hover:bg-gray-200"
+        onClick={handleAccordionClick}
+      >
+        {label}:
+        <img src={iconDropdown} alt="" className={"ml-auto w-4 h-4 " + (accordionState ? "rotate-180" : "")} />
+      </button>
+      {accordionState ? content : undefined}
     </div>
   );
 };

src/components/shapeInspectorPanel/ClipInspector.tsx

@@ -41,7 +41,7 @@ export const ClipInspector: React.FC<Props> = ({ targetShape, updateTargetShape,
   );
 
   return (
-    <BlockGroupField label="Clip">
+    <BlockGroupField label="Clip" accordionKey="clip-inspector">
       <InlineField label="Clip within parent group">
         <ToggleInput value={targetShape.clipping} onChange={handleClippingChange} />
       </InlineField>

src/components/shapeInspectorPanel/GroupConstraintInspector.tsx

@@ -35,7 +35,7 @@ export const GroupConstraintInspector: React.FC<Props> = ({ targetShape, updateT
   );
 
   return (
-    <BlockGroupField label="Group constraints">
+    <BlockGroupField label="Group constraints" accordionKey="group-constraint-inspector">
       <BlockField label="Vertical fixed">
         <div className="w-56 flex flex-wrap justify-end gap-1">
           {gcIcons.map((icon, i) => (