Sign in

flagon-io/g1t

public

g1t/apps/web/app/routes/repo/branches.tsx

146 lines6,506 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Branches and Tags pages, each file's last commit, and the branch menu on files1import { GitBranch, Search } from "lucide-react";
2import { Form, Link } from "react-router";
3
4import type { Route } from "./+types/branches";
5import { ActiveBranches } from "../../components/branches";
6import { Avatar, EmptyState, TimeAgo, notACredential } from "../../components/ui";
7import { readBranches } from "../../lib/branches.server";
8import { page } from "../../lib/meta";
9import { deployments, repos, work } from "../../lib/services.server";
10import { getViewer, unwrap } from "../../lib/session.server";
11
12/** The most branches read for one page; past that, search narrows them. */
13const BRANCHES_READ = 60;
14/** A branch whose last commit is older than this is stale. */
15const STALE_DAYS = 90;
16
17export function meta({ params, ...args }: Route.MetaArgs) {
18 return page(args, { title: `Branches · ${params.owner}/${params.repo} · g1t` });
19}
20
21export async function loader({ params, context, request }: Route.LoaderArgs) {
22 const path = { namespace: params.owner, name: params.repo };
23 const viewer = getViewer(context);
24 const query = new URL(request.url).searchParams.get("q")?.trim().toLowerCase() || null;
25 const soft = <T,>(promise: Promise<T>): Promise<T | null> => promise.catch(() => null);
26 const [repo, list, pulls, deploys] = await Promise.all([
27 repos.get(path, viewer),
28 repos.branches(path, viewer),
29 soft(work.listPulls(path, viewer, "open")),
30 // Previews are for people with a role here; everyone else sees none.
31 soft(deployments.list({ workspace: params.owner, slug: params.repo }, viewer)),
32 ]);
33 const found = unwrap(repo);
The agents' empty state keeps its link in the sentence; Branches leaves out the merge queue's working branches34 // The merge queue's own branches (g1t-queue/<entry>) are its working
35 // copies, not anyone's branch to look at.
36 const all = unwrap(list).filter((branch) => !branch.name.startsWith("g1t-queue/"));
Branches and Tags pages, each file's last commit, and the branch menu on files37 const matching = query ? all.filter((branch) => branch.name === found.defaultBranch || branch.name.toLowerCase().includes(query)) : all;
38 const read = await readBranches(
39 path,
40 viewer,
41 {
42 defaultBranch: found.defaultBranch,
43 branches: matching,
44 pulls: pulls?.ok ? pulls.value : [],
45 previews: deploys?.ok ? deploys.value.live.filter((app) => app.kind === "preview") : [],
46 },
47 BRANCHES_READ,
48 );
49 const staleBefore = Date.now() - STALE_DAYS * 86_400_000;
50 const isStale = (at: string | undefined) => at != null && Date.parse(at) < staleBefore;
51 return {
52 main: found.defaultBranch,
53 head: read.head,
54 active: read.shown.filter((branch) => !isStale(branch.commit?.at)),
55 stale: read.shown.filter((branch) => isStale(branch.commit?.at)),
56 // Every branch but the default, and how many matched the search.
57 total: all.length - 1,
58 matched: read.total,
59 unread: Math.max(0, read.total - read.shown.length),
60 query,
61 };
62}
63
64export default function Branches({ loaderData, params }: Route.ComponentProps) {
65 const { main, head, active, stale, total, matched, unread, query } = loaderData;
66 const base = `/${params.owner}/${params.repo}`;
67 return (
68 <div className="space-y-6">
69 <div className="flex flex-wrap items-center justify-between gap-3">
70 <h2 className="text-lg font-semibold tracking-tight">
71 Branches <span className="font-normal text-faint">{total + 1}</span>
72 </h2>
73 <Form method="get" role="search" className="relative w-full sm:w-72">
74 <Search size={14} className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-faint" />
75 <input
76 name="q"
77 defaultValue={query ?? ""}
78 {...notACredential()}
79 placeholder="Search branches"
80 aria-label="Search branches"
81 className="h-8 w-full rounded-md border border-line bg-surface pr-3 pl-8 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim"
82 />
83 </Form>
84 </div>
85
86 <section>
87 <h3 className="mb-2 text-sm font-medium text-muted">Default</h3>
88 <div className="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-xl border border-line bg-surface px-4 py-3">
89 <GitBranch size={15} className="shrink-0 text-faint" />
90 <Link to={`${base}/tree/${encodeURIComponent(main)}`} className="font-mono text-[0.8125rem] font-medium hover:text-accent">
91 {main}
92 </Link>
93 <span className="rounded-full border border-line px-2 py-px text-xs text-muted">default</span>
94 {head && (
95 <span className="flex min-w-0 grow basis-64 items-center gap-1.5 text-xs text-muted">
96 <Avatar name={head.author} size={13} />
97 <span className="shrink-0">{head.author}</span>
98 <span className="text-faint">·</span>
99 <Link to={`${base}/commit/${head.hash}`} className="min-w-0 truncate hover:text-fg" title={head.message}>
100 {head.message}
101 </Link>
102 <span className="shrink-0 text-faint">
103 · <TimeAgo at={head.at} />
104 </span>
105 </span>
106 )}
107 </div>
108 </section>
109
110 {query && (
111 <p className="text-sm text-muted">
112 {matched} of {total} {total === 1 ? "branch matches" : "branches match"} “{query}”.{" "}
113 <Link to={`${base}/branches`} className="text-fg hover:underline">
114 Clear
115 </Link>
116 </p>
117 )}
118
119 {active.length > 0 && (
120 <section>
121 <h3 className="mb-2 text-sm font-medium text-muted">Active</h3>
122 <ActiveBranches branches={active} base={base} main={main} />
123 </section>
124 )}
125 {stale.length > 0 && (
126 <section>
127 <h3 className="mb-2 text-sm font-medium text-muted">Stale</h3>
128 <p className="-mt-1 mb-2 text-xs text-faint">No commits in the last 90 days.</p>
129 <ActiveBranches branches={stale} base={base} main={main} />
130 </section>
131 )}
132 {active.length === 0 && stale.length === 0 && (
133 <EmptyState title={query ? "No branch matches" : "Only the default branch"}>
134 {query
135 ? "Try another part of the name."
136 : "Branches agents and people push show here, each with its pull request, checks and how far it has moved from the default branch."}
137 </EmptyState>
138 )}
139 {unread > 0 && (
140 <p className="text-xs text-faint">
141 {unread} more {unread === 1 ? "branch is" : "branches are"} not shown. Search to find one by name.
142 </p>
143 )}
144 </div>
145 );
146}