Sign in

flagon-io/g1t

public

g1t/apps/web/app/components/branches.tsx

100 lines4,501 bytesCodeBlame
1import { ArrowDown, ArrowUp, GitBranch, GitPullRequest, Globe } from "lucide-react";
2import { Link } from "react-router";
3
4import type { Pull } from "@g1t/contracts";
5
6import { count } from "../lib/branches";
7import { CheckBadge } from "./checks";
8import { host } from "./deploy";
9import { Avatar, TimeAgo } from "./ui";
10
11export type ActiveBranch = {
12 name: string;
13 commit: { hash: string; message: string; author: string; at: string } | null;
14 ahead: number;
15 behind: number;
16 aheadMore: boolean;
17 behindMore: boolean;
18 pull: { number: number; title: string; checkStatus: Pull["checkStatus"]; draft: boolean } | null;
19 preview: string | null;
20};
21
22/** Branches other than the default, newest first, with how far each has moved and what is open on it. */
23export function ActiveBranches({ branches, base, main }: { branches: ActiveBranch[]; base: string; main: string }) {
24 return (
25 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
26 {branches.map((branch) => (
27 <li key={branch.name} className="flex flex-wrap items-start gap-x-3 gap-y-1.5 px-4 py-3">
28 <GitBranch size={15} className="mt-0.5 shrink-0 text-faint" />
29 <span className="min-w-0 grow basis-48">
30 <Link
31 to={`${base}/tree/${encodeURIComponent(branch.name)}`}
32 className="block truncate font-mono text-[0.8125rem] font-medium hover:text-accent"
33 >
34 {branch.name}
35 </Link>
36 {branch.commit && (
37 <span className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted">
38 <Avatar name={branch.commit.author} size={13} />
39 <span className="shrink-0">{branch.commit.author}</span>
40 <span className="text-faint">·</span>
41 <Link
42 to={`${base}/commit/${branch.commit.hash}`}
43 className="min-w-0 truncate hover:text-fg"
44 title={branch.commit.message}
45 >
46 {branch.commit.message}
47 </Link>
48 <span className="shrink-0 text-faint">
49 · <TimeAgo at={branch.commit.at} />
50 </span>
51 </span>
52 )}
53 </span>
54 <span className="ml-6.5 flex shrink-0 flex-wrap items-center gap-2 text-xs sm:ml-0">
55 <span
56 className="inline-flex items-center gap-1.5 rounded-md border border-line px-1.5 py-0.5 font-mono tabular-nums text-muted"
57 title={`${count(branch.ahead, branch.aheadMore)} commits ahead of ${main}, ${count(branch.behind, branch.behindMore)} behind`}
58 >
59 <span className="inline-flex items-center gap-0.5">
60 <ArrowUp size={11} className="text-accent" />
61 {count(branch.ahead, branch.aheadMore)}
62 </span>
63 <span className="inline-flex items-center gap-0.5">
64 <ArrowDown size={11} className={branch.behind > 0 || branch.behindMore ? "text-warn" : "text-faint"} />
65 {count(branch.behind, branch.behindMore)}
66 </span>
67 </span>
68 {branch.pull ? (
69 <Link
70 to={`${base}/pull/${branch.pull.number}`}
71 className="inline-flex items-center gap-1.5 rounded-md border border-line px-1.5 py-0.5 text-muted hover:border-line-strong hover:text-fg"
72 title={branch.pull.title}
73 >
74 <GitPullRequest size={12} className={branch.pull.draft ? "text-faint" : "text-accent"} />#{branch.pull.number}
75 <CheckBadge status={branch.pull.checkStatus} />
76 </Link>
77 ) : (
78 <Link
79 to={`${base}/pulls/new?branch=${encodeURIComponent(branch.name)}`}
80 className="rounded-md px-1.5 py-0.5 text-faint hover:text-fg"
81 >
82 Open a pull request
83 </Link>
84 )}
85 {branch.preview && (
86 <a
87 href={branch.preview}
88 className="inline-flex max-w-48 items-center gap-1 truncate rounded-md border border-line px-1.5 py-0.5 text-muted hover:border-line-strong hover:text-fg"
89 title={host(branch.preview)}
90 >
91 <Globe size={12} className="shrink-0 text-merged" />
92 Preview
93 </a>
94 )}
95 </span>
96 </li>
97 ))}
98 </ul>
99 );
100}