Sign in

flagon-io/g1t

public

g1t/apps/web/app/components/repo-view.tsx

233 lines8,266 bytesCodeBlame
1import { BookOpen, File, Folder, FolderGit2 } from "lucide-react";
2import { Link } from "react-router";
3
4import type { Blame, BlobView as Blob, Commit, TreeView as Tree } from "@g1t/contracts";
5
6import { BlameView } from "./blame-view";
7import { CodeLines } from "./code-lines";
8
9import { AgentSetup } from "./agent-setup";
10import { CloneBox } from "./clone-box";
11import { Markdown } from "./markdown";
12import { Avatar, CopyLine, TimeAgo } from "./ui";
13
14function encodePath(path: string): string {
15 return path.split("/").map(encodeURIComponent).join("/");
16}
17
18function Breadcrumbs({
19 base,
20 repo,
21 gitRef,
22 path,
23}: {
24 base: string;
25 repo: string;
26 gitRef: string;
27 path: string;
28}) {
29 const segments = path.split("/").filter(Boolean);
30 if (segments.length === 0) return null;
31 return (
32 <p className="mb-4 font-mono text-sm text-muted">
33 <Link to={`${base}/tree/${gitRef}`} className="text-accent hover:underline">
34 {repo}
35 </Link>
36 {segments.map((segment, i) => {
37 const to = encodePath(segments.slice(0, i + 1).join("/"));
38 const last = i === segments.length - 1;
39 return (
40 <span key={to}>
41 <span className="mx-1.5 text-faint">/</span>
42 {last ? (
43 <span className="font-medium text-fg">{segment}</span>
44 ) : (
45 <Link
46 to={`${base}/tree/${gitRef}/${to}`}
47 className="text-accent hover:underline"
48 >
49 {segment}
50 </Link>
51 )}
52 </span>
53 );
54 })}
55 </p>
56 );
57}
58
59/** The bar above a file listing describing the latest commit. */
60function CommitBar({ commit, gitRef }: { commit: Commit; gitRef: string }) {
61 return (
62 <div className="flex items-center gap-3 border-b border-line bg-surface px-4 py-2.5 text-sm">
63 <Avatar name={commit.author.name} />
64 <span className="shrink-0 font-medium">{commit.author.name}</span>
65 <span className="truncate text-muted">{commit.message.split("\n")[0]}</span>
66 <span className="ml-auto flex shrink-0 items-center gap-3 text-xs text-faint">
67 <span className="rounded-full border border-line px-2 py-0.5 font-mono text-accent">
68 {gitRef}
69 </span>
70 <span className="font-mono">{commit.hash.slice(0, 7)}</span>
71 <TimeAgo at={commit.authoredAt} />
72 </span>
73 </div>
74 );
75}
76
77export function TreeView({ tree }: { tree: Tree }) {
78 const { repo, ref, path, head, entries, readme } = tree;
79 const base = `/${repo.namespace}/${repo.name}`;
80 const prefix = path ? `${encodePath(path)}/` : "";
81 const cloneUrl = `https://g1t.sh${base}.git`;
82
83 if (!head) {
84 return (
85 <div className="mx-auto max-w-2xl rounded-xl border border-line bg-surface p-8">
86 <h2 className="text-lg font-semibold tracking-tight">
87 This repository is empty
88 </h2>
89 <p className="mt-1 text-sm text-muted">
90 Push an existing project to it. Use an access token as the password.
91 </p>
92 <div className="mt-5 space-y-2">
93 <CopyLine prompt text={`git remote add g1t ${cloneUrl}`} />
94 <CopyLine prompt text={`git push -u g1t ${ref}`} />
95 </div>
96 <h3 className="mt-7 text-sm font-medium">Or have your coding agent start it</h3>
97 <p className="mt-1 text-sm text-muted">
98 Connect it to g1t, then ask it to build the first version of{" "}
99 <span className="font-mono text-fg">{repo.name}</span> and push it here.
100 </p>
101 <AgentSetup className="mt-3" />
102 </div>
103 );
104 }
105
106 return (
107 <div className="grid gap-6 lg:grid-cols-[1fr_18rem]">
108 <div className="min-w-0">
109 <Breadcrumbs base={base} repo={repo.name} gitRef={ref} path={path} />
110 <div className="overflow-hidden rounded-xl border border-line">
111 <CommitBar commit={head} gitRef={ref} />
112 <ul className="divide-y divide-line text-sm">
113 {entries.map((entry) => {
114 const isTree = entry.kind === "tree";
115 const Icon = isTree ? Folder : entry.kind === "gitlink" ? FolderGit2 : File;
116 return (
117 <li key={entry.name}>
118 <Link
119 to={`${base}/${isTree ? "tree" : "blob"}/${ref}/${prefix}${encodeURIComponent(entry.name)}`}
120 className="flex items-center gap-3 px-4 py-2 transition-colors hover:bg-surface"
121 >
122 <Icon
123 size={15}
124 className={isTree ? "text-accent-dim" : "text-faint"}
125 />
126 <span className="font-mono text-[0.8125rem]">{entry.name}</span>
127 </Link>
128 </li>
129 );
130 })}
131 </ul>
132 </div>
133
134 {readme?.text != null && (
135 <section className="mt-6 overflow-hidden rounded-xl border border-line">
136 <h2 className="flex items-center gap-2 border-b border-line bg-surface px-4 py-2.5 text-sm font-medium">
137 <BookOpen size={15} className="text-faint" />
138 {readme.name}
139 </h2>
140 <div className="p-6">
141 {/\.(md|markdown)$/i.test(readme.name) ? (
142 <Markdown
143 source={readme.text}
144 repo={{ namespace: repo.namespace, name: repo.name }}
145 // Relative links in a README point into the repository.
146 base={`/${repo.namespace}/${repo.name}/blob/${ref}${path ? `/${path}` : ""}`}
147 />
148 ) : (
149 <pre className="whitespace-pre-wrap text-sm"><code>{readme.text}</code></pre>
150 )}
151 </div>
152 </section>
153 )}
154 </div>
155
156 {!path && (
157 <aside className="space-y-6">
158 <section>
159 <h2 className="text-sm font-medium">Clone</h2>
160 <div className="mt-2">
161 <CloneBox path={`${repo.namespace}/${repo.name}`} />
162 </div>
163 </section>
164 <section>
165 <h2 className="text-sm font-medium">About</h2>
166 <p className="mt-2 text-sm text-muted">
167 {repo.description ?? "No description."}
168 </p>
169 <p className="mt-3 text-xs text-faint">
170 Created <TimeAgo at={repo.createdAt} />
171 </p>
172 </section>
173 </aside>
174 )}
175 </div>
176 );
177}
178
179export function BlobView({
180 blob,
181 html,
182 blame,
183}: {
184 blob: Blob;
185 /** Syntax-highlighted HTML per line, when the language is known. */
186 html: string[] | null;
187 /** Shown instead of the plain file when asked for, with HTML per line. */
188 blame?: { blame: Blame; lines: string[] | null } | null;
189}) {
190 const { repo, ref, path, size, text } = blob;
191 const lines = text?.replace(/\n$/, "").split("\n");
192 const base = `/${repo.namespace}/${repo.name}`;
193 const toggle = (label: string, on: boolean, search: string) => (
194 <Link
195 to={{ search }}
196 preventScrollReset
197 className={`rounded px-2 py-0.5 transition-colors ${on ? "bg-raised text-fg" : "hover:text-fg"}`}
198 >
199 {label}
200 </Link>
201 );
202 return (
203 <div>
204 <Breadcrumbs
205 base={`/${repo.namespace}/${repo.name}`}
206 repo={repo.name}
207 gitRef={ref}
208 path={path}
209 />
210 <div className="overflow-hidden rounded-xl border border-line">
211 <div className="flex items-center gap-3 border-b border-line bg-surface px-4 py-2.5 text-xs text-muted">
212 {lines && <span>{lines.length.toLocaleString("en-US")} lines</span>}
213 <span>{size.toLocaleString("en-US")} bytes</span>
214 {lines && (
215 <span className="ml-auto flex rounded-md border border-line p-0.5">
216 {toggle("Code", !blame, "")}
217 {toggle("Blame", Boolean(blame), "?blame=1")}
218 </span>
219 )}
220 </div>
221 {blame && lines ? (
222 <BlameView base={base} path={path} lines={lines} html={blame.lines} blame={blame.blame} />
223 ) : lines ? (
224 <CodeLines lines={lines} html={html} />
225 ) : (
226 <p className="p-6 text-sm text-muted">
227 This file is binary or too large to show.
228 </p>
229 )}
230 </div>
231 </div>
232 );
233}