Sign in

flagon-io/g1t

public

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

144 lines6,331 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);
34 const all = unwrap(list);
35 const matching = query ? all.filter((branch) => branch.name === found.defaultBranch || branch.name.toLowerCase().includes(query)) : all;
36 const read = await readBranches(
37 path,
38 viewer,
39 {
40 defaultBranch: found.defaultBranch,
41 branches: matching,
42 pulls: pulls?.ok ? pulls.value : [],
43 previews: deploys?.ok ? deploys.value.live.filter((app) => app.kind === "preview") : [],
44 },
45 BRANCHES_READ,
46 );
47 const staleBefore = Date.now() - STALE_DAYS * 86_400_000;
48 const isStale = (at: string | undefined) => at != null && Date.parse(at) < staleBefore;
49 return {
50 main: found.defaultBranch,
51 head: read.head,
52 active: read.shown.filter((branch) => !isStale(branch.commit?.at)),
53 stale: read.shown.filter((branch) => isStale(branch.commit?.at)),
54 // Every branch but the default, and how many matched the search.
55 total: all.length - 1,
56 matched: read.total,
57 unread: Math.max(0, read.total - read.shown.length),
58 query,
59 };
60}
61
62export default function Branches({ loaderData, params }: Route.ComponentProps) {
63 const { main, head, active, stale, total, matched, unread, query } = loaderData;
64 const base = `/${params.owner}/${params.repo}`;
65 return (
66 <div className="space-y-6">
67 <div className="flex flex-wrap items-center justify-between gap-3">
68 <h2 className="text-lg font-semibold tracking-tight">
69 Branches <span className="font-normal text-faint">{total + 1}</span>
70 </h2>
71 <Form method="get" role="search" className="relative w-full sm:w-72">
72 <Search size={14} className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-faint" />
73 <input
74 name="q"
75 defaultValue={query ?? ""}
76 {...notACredential()}
77 placeholder="Search branches"
78 aria-label="Search branches"
79 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"
80 />
81 </Form>
82 </div>
83
84 <section>
85 <h3 className="mb-2 text-sm font-medium text-muted">Default</h3>
86 <div className="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-xl border border-line bg-surface px-4 py-3">
87 <GitBranch size={15} className="shrink-0 text-faint" />
88 <Link to={`${base}/tree/${encodeURIComponent(main)}`} className="font-mono text-[0.8125rem] font-medium hover:text-accent">
89 {main}
90 </Link>
91 <span className="rounded-full border border-line px-2 py-px text-xs text-muted">default</span>
92 {head && (
93 <span className="flex min-w-0 grow basis-64 items-center gap-1.5 text-xs text-muted">
94 <Avatar name={head.author} size={13} />
95 <span className="shrink-0">{head.author}</span>
96 <span className="text-faint">·</span>
97 <Link to={`${base}/commit/${head.hash}`} className="min-w-0 truncate hover:text-fg" title={head.message}>
98 {head.message}
99 </Link>
100 <span className="shrink-0 text-faint">
101 · <TimeAgo at={head.at} />
102 </span>
103 </span>
104 )}
105 </div>
106 </section>
107
108 {query && (
109 <p className="text-sm text-muted">
110 {matched} of {total} {total === 1 ? "branch matches" : "branches match"} “{query}”.{" "}
111 <Link to={`${base}/branches`} className="text-fg hover:underline">
112 Clear
113 </Link>
114 </p>
115 )}
116
117 {active.length > 0 && (
118 <section>
119 <h3 className="mb-2 text-sm font-medium text-muted">Active</h3>
120 <ActiveBranches branches={active} base={base} main={main} />
121 </section>
122 )}
123 {stale.length > 0 && (
124 <section>
125 <h3 className="mb-2 text-sm font-medium text-muted">Stale</h3>
126 <p className="-mt-1 mb-2 text-xs text-faint">No commits in the last 90 days.</p>
127 <ActiveBranches branches={stale} base={base} main={main} />
128 </section>
129 )}
130 {active.length === 0 && stale.length === 0 && (
131 <EmptyState title={query ? "No branch matches" : "Only the default branch"}>
132 {query
133 ? "Try another part of the name."
134 : "Branches agents and people push show here, each with its pull request, checks and how far it has moved from the default branch."}
135 </EmptyState>
136 )}
137 {unread > 0 && (
138 <p className="text-xs text-faint">
139 {unread} more {unread === 1 ? "branch is" : "branches are"} not shown. Search to find one by name.
140 </p>
141 )}
142 </div>
143 );
144}