[dyad] Make headline sections collapsible - wrote 1 file(s)

src/components/headline-tree.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import type { HeadlineNode } from "@/app/actions";
 import { KeywordHighlighter } from "./keyword-highlighter";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface HeadlineTreeProps {
   headlines: HeadlineNode[];
@@ -18,11 +21,19 @@ const HeadlineNodeDisplay = ({
   level: number;
   keyword?: string | null;
 }) => {
+  const isCollapsible =
+    node.level === 2 && node.children && node.children.length > 0;
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
   return (
     <>
       <div
-        className="flex items-center gap-3 py-2.5 pr-4 border-t"
+        className={cn(
+          "flex items-center gap-3 py-2.5 pr-4 border-t",
+          isCollapsible && "cursor-pointer hover:bg-muted/50"
+        )}
         style={{ paddingLeft: `${16 + level * 24}px` }}
+        onClick={() => isCollapsible && setIsCollapsed(!isCollapsed)}
       >
         <Badge
           variant="secondary"
@@ -36,15 +47,25 @@ const HeadlineNodeDisplay = ({
         <p className="text-sm text-muted-foreground flex-shrink-0 w-10 text-right">
           {node.length}
         </p>
+        {isCollapsible && (
+          <ChevronDown
+            className={cn(
+              "h-4 w-4 text-muted-foreground transition-transform",
+              !isCollapsed && "rotate-180"
+            )}
+          />
+        )}
       </div>
-      {node.children?.map((child, index) => (
+      {node.children &&
-        <HeadlineNodeDisplay
+        (!isCollapsible || !isCollapsed) &&
-          key={index}
+        node.children.map((child, index) => (
-          node={child}
+          <HeadlineNodeDisplay
-          level={level + 1}
+            key={index}
-          keyword={keyword}
+            node={child}
-        />
+            level={level + 1}
-      ))}
+            keyword={keyword}
+          />
+        ))}
     </>
   );
 };