BranchTree

1"use client";
2 
3import { GitBranchIcon, SquareLock01Icon } from "@hugeicons/core-free-icons";
4import { HugeiconsIcon } from "@hugeicons/react";
5import { useState } from "react";
6import type { ComponentProps } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10/** Compute lifecycle, mirrored from ComputeStatus. Drives the node color. */
11export type ComputeState = "active" | "idle" | "scaling" | "suspended";
12 
13export interface Branch {
14  id: string;
15  name: string;
16  /** The project's default branch: its node wears a primary ring. */
17  default?: boolean;
18  /** A protected branch: shows a lock. */
19  protected?: boolean;
20  /** The parent branch's id; the edge is drawn from it. */
21  parent?: string;
22  /** Compute state, painted onto the node dot. */
23  state?: ComputeState;
24  /** ISO timestamp of the branch's last update, shown as relative time. */
25  updatedAt?: string;
26}
27 
28interface TreeNode {
29  branch: Branch;
30  depth: number;
31  row: number;
32}
33 
34/* ─────────────────────────────────────────────────────────
35 * GEOMETRY
36 *
37 *  The graph is a real node-link drawing, not indent guides.
38 *  Rows stack at a fixed height; a branch sits in the lane of
39 *  its depth. Each child's edge leaves its parent's lane,
40 *  runs down, and curves (a fixed-radius quarter turn) into
41 *  the child's node. Node color is the compute state; the
42 *  default branch and the selected branch wear a ring.
43 * ───────────────────────────────────────────────────────── */
44const ROW_H = 46;
45const LANE_W = 22;
46const PAD_X = 18;
47const DOT_R = 3.5;
48const CORNER = 12;
49 
50const laneX = (depth: number) => PAD_X + depth * LANE_W;
51const rowY = (row: number) => row * ROW_H + ROW_H / 2;
52 
53/** Staggered entrance: edges draw, nodes pop, rows fade, top to bottom. */
54const STAGGER = 0.06;
55const DRAW = 0.45;
56const POP = 0.32;
57 
58const BRANCH_TREE_STYLES = `
59@keyframes neon-bt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
60@keyframes neon-bt-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
61@keyframes neon-bt-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
62@media (prefers-reduced-motion: reduce) {
63  [data-slot="branch-tree"] * { animation: none !important; }
64}
65`;
66 
67// … truncated