[dyad] Update headline controls to icons - wrote 1 file(s)

src/components/headline-tree.tsx

@@ -4,9 +4,15 @@ 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 { ChevronDown, ChevronsUp, ChevronsDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface HeadlineTreeProps {
   headlines: HeadlineNode[];
@@ -137,13 +143,48 @@ export function HeadlineTree({ headlines, keyword }: HeadlineTreeProps) {
   return (
     <div className="w-full rounded-lg overflow-hidden">
       {hasCollapsibleNodes && (
-        <div className="flex items-center gap-2 p-4 border-b bg-muted/50">
-          <Button variant="outline" size="sm" onClick={expandAll}>
-            Expand All
-          </Button>
-          <Button variant="outline" size="sm" onClick={collapseAll}>
-            Collapse All
-          </Button>
+        <div className="flex items-center justify-between p-4 border-b bg-muted/50">
+          <h4 className="font-semibold text-sm text-muted-foreground">
+            Headline Structure
+          </h4>
+          <div className="flex items-center gap-1">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={expandAll}
+                    className="h-8 w-8"
+                  >
+                    <ChevronsUp className="h-4 w-4" />
+                    <span className="sr-only">Expand All</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Expand All</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={collapseAll}
+                    className="h-8 w-8"
+                  >
+                    <ChevronsDown className="h-4 w-4" />
+                    <span className="sr-only">Collapse All</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Collapse All</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </div>
       )}
       <div className="-mt-px">