Function TreeItem

website/src/components/CodeGraphViewer.tsx:249–344

({
  node,
  depth,
  selectedFile,
  onFileClick,
  searchQuery,
}: {
  node: TreeNode;
  depth: number;
  selectedFile: string | null;
  onFileClick: (path: string | null) => void;
  searchQuery: string;
})

// ─── Tree Item ────────────────────────────────────────────────────────────────
function TreeItem({
  node,
  depth,
  selectedFile,
  onFileClick,
  searchQuery,
}: {
  node: TreeNode;
  depth: number;
  selectedFile: string | null;
  onFileClick: (path: string | null) => void;
  searchQuery: string;
}) {
  const [open, setOpen] = useState(depth < 2);

  // Auto-expand when search active
  useEffect(() => {
    if (searchQuery) setOpen(true);
  }, [searchQuery]);

  const isMatch = node.name.toLowerCase().includes(searchQuery.toLowerCase());
  const hasMatchingDescendant = (n: TreeNode): boolean =>
    n.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    n.children.some(hasMatchingDescendant);

  if (searchQuery && !hasMatchingDescendant(node) && !isMatch) return null;

  const indent = depth * 12;

  if (node.isDir) {
    return (
      <div>
        <button
          onClick={() => setOpen(o => !o)}
          className="w-full flex items-center gap-1 py-[3px] px-2 rounded-lg text-gray-400 hover:text-white hover:bg-purple-500/10 transition-colors group"
          style={{ paddingLeft: `${indent + 8}px` }}
        >
          {open
            ? <ChevronDown className="w-3 h-3 flex-shrink-0 text-gray-500" />
            : <ChevronRight className="w-3 h-3 flex-shrink-0 text-gray-500" />}
          {open
            ? <FolderOpen className="w-3.5 h-3.5 flex-shrink-0 text-amber-400 ml-0.5" />
            : <Folder className="w-3.5 h-3.5 flex-shrink-0 text-amber-400 ml-0.5" />}
          <span className="text-[13px] text-gray-300 group-hover:text-white truncate font-medium ml-1">
            {node.name}
          </span>
        </button>
        {open && (
          <div>
            {node.children.map(child => (
              <TreeItem
                key={child.path}
                node={child}
                depth={depth + 1}
                selectedFile={selectedFile}
                onFileClick={onFileClick}
                searchQuery={searchQuery}
              />