client/src/components/SidebarTree.jsx

import { Link } from "react-router-dom";
import { useDroppable } from "@dnd-kit/core";
function TreeNode({ node, currentCardId, depth, onNavigate }) {
  const { isOver, setNodeRef } = useDroppable({
    id: `card-${node._id}`,
    data: {
      type: "card",
      cardId: node._id
    }
  });
  return (
    <li ref={setNodeRef}>
      <Link
        className={`tree-link ${currentCardId === node._id ? "active" : ""} ${isOver ? "drop-target" : ""}`}
        style={{ paddingLeft: `${depth * 16 + 12}px` }}
        to={`/app/${node._id}`}
        onClick={onNavigate}
      >
        {node.title}
      </Link>
      {node.children.length > 0 && (
        <ul className="tree-list">
          {node.children.map((child) => (
            <TreeNode
              key={child._id}
              node={child}
              currentCardId={currentCardId}
              depth={depth + 1}
              onNavigate={onNavigate}
            />
          ))}
        </ul>
      )}
    </li>
  );
}
export function SidebarTree({ roots, currentCardId, onNavigate }) {
  return (
    <ul className="tree-list">
      {roots.map((root) => (
        <TreeNode
          key={root._id}
          node={root}
          currentCardId={currentCardId}
          depth={0}
          onNavigate={onNavigate}
        />
      ))}
    </ul>
  );
}