Spaces:
Paused
Paused
File size: 3,083 Bytes
b152fd5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import type { Goal } from "@paperclipai/shared";
import { Link } from "@/lib/router";
import { StatusBadge } from "./StatusBadge";
import { ChevronRight } from "lucide-react";
import { cn } from "../lib/utils";
import { useState } from "react";
interface GoalTreeProps {
goals: Goal[];
goalLink?: (goal: Goal) => string;
onSelect?: (goal: Goal) => void;
}
interface GoalNodeProps {
goal: Goal;
children: Goal[];
allGoals: Goal[];
depth: number;
goalLink?: (goal: Goal) => string;
onSelect?: (goal: Goal) => void;
}
function GoalNode({ goal, children, allGoals, depth, goalLink, onSelect }: GoalNodeProps) {
const [expanded, setExpanded] = useState(true);
const hasChildren = children.length > 0;
const link = goalLink?.(goal);
const inner = (
<>
{hasChildren ? (
<button
className="p-0.5"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setExpanded(!expanded);
}}
>
<ChevronRight
className={cn("h-3 w-3 transition-transform", expanded && "rotate-90")}
/>
</button>
) : (
<span className="w-4" />
)}
<span className="text-xs text-muted-foreground capitalize">{goal.level}</span>
<span className="flex-1 truncate">{goal.title}</span>
<StatusBadge status={goal.status} />
</>
);
const classes = cn(
"flex items-center gap-2 px-3 py-1.5 text-sm transition-colors cursor-pointer hover:bg-accent/50",
);
return (
<div>
{link ? (
<Link
to={link}
className={cn(classes, "no-underline text-inherit")}
style={{ paddingLeft: `${depth * 16 + 12}px` }}
>
{inner}
</Link>
) : (
<div
className={classes}
style={{ paddingLeft: `${depth * 16 + 12}px` }}
onClick={() => onSelect?.(goal)}
>
{inner}
</div>
)}
{hasChildren && expanded && (
<div>
{children.map((child) => (
<GoalNode
key={child.id}
goal={child}
children={allGoals.filter((g) => g.parentId === child.id)}
allGoals={allGoals}
depth={depth + 1}
goalLink={goalLink}
onSelect={onSelect}
/>
))}
</div>
)}
</div>
);
}
export function GoalTree({ goals, goalLink, onSelect }: GoalTreeProps) {
const goalIds = new Set(goals.map((g) => g.id));
const roots = goals.filter((g) => !g.parentId || !goalIds.has(g.parentId));
if (goals.length === 0) {
return <p className="text-sm text-muted-foreground">No goals.</p>;
}
return (
<div className="border border-border py-1">
{roots.map((goal) => (
<GoalNode
key={goal.id}
goal={goal}
children={goals.filter((g) => g.parentId === goal.id)}
allGoals={goals}
depth={0}
goalLink={goalLink}
onSelect={onSelect}
/>
))}
</div>
);
}
|