collapse on border click

packages/components/src/components/SquiggleItem.tsx

@@ -48,12 +48,18 @@ const VariableBox: React.FC<VariableBoxProps> = ({
   children,
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggleCollapsed = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
   return (
+    <div>
       <div>
         {name ? (
           <header
             className="inline-flex space-x-1 text-slate-500 font-mono text-sm cursor-pointer"
-          onClick={() => setIsCollapsed(!isCollapsed)}
+            onClick={toggleCollapsed}
           >
             {name ? (
               <Tooltip text={heading}>
@@ -65,7 +71,18 @@ const VariableBox: React.FC<VariableBoxProps> = ({
             ) : null}
           </header>
         ) : null}
-      {isCollapsed ? null : <div>{children}</div>}
+        {isCollapsed ? null : (
+          <div className="flex w-full">
+            {name ? (
+              <div
+                className="border-l-2 border-slate-200 hover:border-green-600 w-4 cursor-pointer"
+                onClick={toggleCollapsed}
+              ></div>
+            ) : null}
+            <div className="grow">{children}</div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
@@ -76,7 +93,7 @@ const VariableList: React.FC<{
   children: React.ReactNode;
 }> = ({ name, heading, children }) => (
   <VariableBox name={name} heading={heading}>
-    <div className={clsx("space-y-3", name ? "border-l pl-4 pt-1 mt-1" : null)}>
+    <div className={clsx("space-y-3", name ? "pt-1 mt-1" : null)}>
       {children}
     </div>
   </VariableBox>