Tree View

"use client";
import { useEffect, useState } from "react";
import { ChevronRight, ChevronDown, Folder, FileText } from "lucide-react";

type State = "collapsed" | "partial" | "all-open";

type Node = { name: string; children?: Node[] };
const TREE: Node[] = [
{
  name: "src",
  children: [
    {
      name: "components",
      children: [
        { name: "Modal.tsx" },
        { name: "Tabs.tsx" },
      ],
    },
    { name: "app", children: [{ name: "page.tsx" }, { name: "layout.tsx" }] },
  ],
},
{ name: "content", children: [{ name: "patterns" }, { name: "effects" }] },
{ name: "README.md" },
];

function TreeNode({
node,
level,
expanded,
toggle,
path,
}: {
node: Node;
level: number;
expanded: Set<string>;
toggle: (p: string) => void;
path: string;
}) {
const hasChildren = node.children && node.children.length > 0;
const isOpen = expanded.has(path);

return (
  <div>
    <button
      onClick={() => hasChildren && toggle(path)}
      className="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-xs hover:bg-background/60"
      style={{ paddingLeft: 4 + level * 14 }}
    >
      {hasChildren ? (
        isOpen ? (
          <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
        ) : (
          <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
        )
      ) : (
        <span className="w-3" />
      )}
      {hasChildren ? (
        <Folder className="h-3.5 w-3.5 shrink-0 text-lab-accent" />
      ) : (
        <FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
      )}
      <span>{node.name}</span>
    </button>
    {hasChildren && isOpen && (
      <div>
        {node.children!.map((c, i) => (
          <TreeNode
            key={i}
            node={c}
            level={level + 1}
            expanded={expanded}
            toggle={toggle}
            path={`${path}/${c.name}`}
          />
        ))}
      </div>
    )}
  </div>
);
}

function collectAllPaths(nodes: Node[], parent = ""): string[] {
return nodes.flatMap((n) => {
  const p = `${parent}/${n.name}`;
  return n.children ? [p, ...collectAllPaths(n.children, p)] : [];
});
}

export function TreeView({ state = "partial" }: { state?: State }) {
const [expanded, setExpanded] = useState<Set<string>>(new Set());
useEffect(() => {
  if (state === "collapsed") setExpanded(new Set());
  else if (state === "partial") setExpanded(new Set(["/src", "/content"]));
  else setExpanded(new Set(collectAllPaths(TREE)));
}, [state]);

return (
  <div className="w-full max-w-sm rounded-lg border border-border bg-background/30 p-2">
    {TREE.map((n, i) => (
      <TreeNode
        key={i}
        node={n}
        level={0}
        expanded={expanded}
        toggle={(p) =>
          setExpanded((prev) => {
            const next = new Set(prev);
            if (next.has(p)) next.delete(p);
            else next.add(p);
            return next;
          })
        }
        path={`/${n.name}`}
      />
    ))}
  </div>
);
}