Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

pr_01m47d15m3e54sn21z27rpy5n9/apps/web/app/components/ui/index.tsx

347 lines10,216 bytesCodeBlame
1import { Check, Copy, Sparkles } from "lucide-react";
2import { type ComponentProps, type ReactNode, useState } from "react";
3import { Link, type LinkProps, NavLink, useLocation } from "react-router";
4
5import { isWaitingMessage, linkPaths } from "../../lib/compute";
6
7export function Field({
8 label,
9 hint,
10 children,
11}: {
12 label: string;
13 hint?: string;
14 children: ReactNode;
15}) {
16 return (
17 <label className="block">
18 <span className="mb-1.5 block text-sm font-medium text-muted">
19 {label}
20 </span>
21 {children}
22 {hint && <span className="mt-1.5 block text-xs text-faint">{hint}</span>}
23 </label>
24 );
25}
26
27const CONTROL =
28 "w-full rounded-md border border-line bg-bg px-3 py-2 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim";
29
30/**
31 * Attributes for a field that is not part of signing in. Password managers
32 * guess from names such as "name", "title" and "username" and offer to
33 * fill a login into them; these tell 1Password, LastPass, Bitwarden and
34 * Dashlane to leave the field alone. A field that states what it takes with
35 * `autoComplete` is left to them.
36 */
37export function notACredential(autoComplete?: string) {
38 if (autoComplete) return {};
39 return {
40 autoComplete: "off",
41 "data-1p-ignore": true,
42 "data-lpignore": "true",
43 "data-bwignore": true,
44 "data-form-type": "other",
45 };
46}
47
48export function Input(props: ComponentProps<"input">) {
49 return <input {...notACredential(props.autoComplete)} {...props} className={CONTROL} />;
50}
51
52export function Textarea(props: ComponentProps<"textarea">) {
53 return (
54 <textarea
55 {...notACredential(props.autoComplete)}
56 {...props}
57 className={`${CONTROL} font-mono`}
58 />
59 );
60}
61
62/** One tab in the row under a repository's or a workspace's header. */
63export function TabLink({
64 to,
65 also,
66 end,
67 icon,
68 count,
69 children,
70}: {
71 to: string;
72 /** Another path prefix under which this tab is the current one. */
73 also?: string;
74 end?: boolean;
75 icon: ReactNode;
76 count?: number;
77 children: ReactNode;
78}) {
79 const { pathname } = useLocation();
80 return (
81 <NavLink
82 to={to}
83 end={end}
84 className={({ isActive }) =>
85 `-mb-px flex items-center gap-2 border-b-2 px-1 pb-3 text-sm whitespace-nowrap transition-colors ${
86 isActive || (also && pathname.startsWith(also + "/"))
87 ? "border-accent font-medium text-fg"
88 : "border-transparent text-muted hover:text-fg"
89 }`
90 }
91 >
92 {icon}
93 {children}
94 {count != null && count > 0 && (
95 <span className="rounded-full bg-raised px-1.5 py-px text-xs text-muted">
96 {count}
97 </span>
98 )}
99 </NavLink>
100 );
101}
102
103type Variant = "primary" | "accent" | "quiet" | "danger";
104
105const BUTTON_BASE =
106 "inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium transition-colors disabled:opacity-50";
107
108const BUTTON_VARIANTS: Record<Variant, string> = {
109 primary: "bg-fg text-bg hover:bg-white",
110 accent: "bg-accent text-bg hover:bg-[#aaf5d6]",
111 quiet:
112 "border border-line text-fg/80 hover:border-line-strong hover:bg-surface hover:text-fg",
113 // For what cannot be undone: transferring, deleting.
114 danger: "border border-danger/40 text-danger hover:border-danger hover:bg-danger/10",
115};
116
117export function Button({
118 variant = "primary",
119 ...props
120}: ComponentProps<"button"> & { variant?: Variant }) {
121 return (
122 <button {...props} className={`${BUTTON_BASE} ${BUTTON_VARIANTS[variant]}`} />
123 );
124}
125
126/** A link that looks like a button. */
127export function ButtonLink({
128 variant = "primary",
129 large,
130 ...props
131}: LinkProps & { variant?: Variant; large?: boolean }) {
132 return (
133 <Link
134 {...props}
135 className={`${BUTTON_BASE} ${BUTTON_VARIANTS[variant]} ${
136 large ? "rounded-full px-5 py-2.5" : ""
137 }`}
138 />
139 );
140}
141
142/**
143 * A message with the g1t pages it names as links, such as the billing page
144 * a refusal to start compute points to.
145 */
146export function Linked({ text }: { text: string }) {
147 return (
148 <>
149 {linkPaths(text).map((piece, at) =>
150 piece.href ? (
151 <Link key={at} to={piece.href} className="underline underline-offset-2">
152 {piece.text}
153 </Link>
154 ) : (
155 piece.text
156 ),
157 )}
158 </>
159 );
160}
161
162export function ErrorText({ children }: { children: ReactNode }) {
163 if (!children) return null;
164 if (typeof children !== "string") return <p className="text-sm text-danger">{children}</p>;
165 // Waiting for a free agent slot is not an error: it starts by itself.
166 return (
167 <p className={`text-sm ${isWaitingMessage(children) ? "text-muted" : "text-danger"}`}>
168 <Linked text={children} />
169 </p>
170 );
171}
172
173/**
174 * What a workspace's plan says before someone tries to start compute it
175 * would refuse ("Agents need a paid workspace or the free trial"), with
176 * where to fix it.
177 */
178export function ComputeNote({ note }: { note: string | null | undefined }) {
179 return note ? (
180 <p className="text-sm text-muted">
181 <Linked text={note} />
182 </p>
183 ) : null;
184}
185
186/** A small outlined label. */
187export function Pill({ children }: { children: ReactNode }) {
188 return (
189 <span className="inline-flex items-center rounded-full border border-line px-2 py-0.5 text-xs text-muted">
190 {children}
191 </span>
192 );
193}
194
195const AVATAR_HUES = [82, 200, 262, 28, 330, 160];
196
197/** How g1t's agents are named: as reviewers and assignees, and as commit authors. */
198const AGENT_NAMES = new Set(["g1t-agent", "g1t agent", "g1t"]);
199
200/** Where an uploaded avatar is served, from the hash it is stored by. */
201export function avatarUrl(avatar: string): string {
202 return `/avatars/${avatar}`;
203}
204
205/**
206 * An uploaded avatar if there is one, else a letter avatar whose colour is
207 * stable for a given name. People are round; a workspace is `square`. An
208 * image that fails to load falls back to the letter.
209 */
210export function Avatar({
211 name,
212 size = 20,
213 square,
214 image,
215}: {
216 name: string;
217 size?: number;
218 square?: boolean;
219 /** The uploaded avatar's hash, as identity returns it. */
220 image?: string | null;
221}) {
222 const [failed, setFailed] = useState<string | null>(null);
223 if (image && failed !== image) {
224 return (
225 <img
226 src={avatarUrl(image)}
227 alt=""
228 aria-hidden="true"
229 width={size}
230 height={size}
231 loading="lazy"
232 decoding="async"
233 onError={() => setFailed(image)}
234 className="inline-block shrink-0 bg-raised object-cover"
235 style={{ width: size, height: size, borderRadius: square ? size * 0.24 : size }}
236 />
237 );
238 }
239 // g1t's own agents wear the agent colour and mark everywhere they appear.
240 if (AGENT_NAMES.has(name)) {
241 return (
242 <span
243 aria-hidden="true"
244 className="inline-flex shrink-0 items-center justify-center bg-merged/20 text-merged ring-1 ring-merged/40 ring-inset"
245 style={{ width: size, height: size, borderRadius: size * 0.3 }}
246 >
247 <Sparkles size={Math.round(size * 0.58)} />
248 </span>
249 );
250 }
251 let hash = 0;
252 for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) | 0;
253 const hue = AVATAR_HUES[Math.abs(hash) % AVATAR_HUES.length];
254 return (
255 <span
256 aria-hidden="true"
257 className="inline-flex shrink-0 items-center justify-center font-mono font-semibold uppercase"
258 style={{
259 width: size,
260 height: size,
261 borderRadius: square ? size * 0.24 : size,
262 fontSize: size * 0.5,
263 background: `oklch(0.4 0.09 ${hue})`,
264 color: `oklch(0.93 0.08 ${hue})`,
265 }}
266 >
267 {name[0]}
268 </span>
269 );
270}
271
272/** A line of text (usually a command) with a copy button. */
273export function CopyLine({
274 text,
275 prompt,
276}: {
277 text: string;
278 prompt?: boolean;
279}) {
280 const [copied, setCopied] = useState(false);
281 return (
282 <div className="group flex items-center gap-3 rounded-lg border border-line bg-surface py-2 pr-2 pl-3.5 font-mono text-[0.8125rem]">
283 {/* Wraps rather than hides: a command or an address is no use half seen. */}
284 <code className="min-w-0 grow whitespace-pre-wrap [overflow-wrap:anywhere]">
285 {prompt && <span className="mr-2 text-faint select-none">$</span>}
286 {/* Short words with hyphens, such as `--transport`, stay whole when
287 the line wraps; long ones, such as addresses, may still break. */}
288 {text.split(/(\s+)/).map((part, index) =>
289 part.includes("-") && part.length <= 24 ? (
290 <span key={index} className="whitespace-nowrap">
291 {part}
292 </span>
293 ) : (
294 part
295 ),
296 )}
297 </code>
298 <button
299 type="button"
300 aria-label="Copy"
301 className="shrink-0 rounded-md p-1.5 text-faint transition-colors hover:bg-raised hover:text-fg"
302 onClick={() => {
303 void navigator.clipboard.writeText(text);
304 setCopied(true);
305 setTimeout(() => setCopied(false), 1500);
306 }}
307 >
308 {copied ? <Check size={14} className="text-accent" /> : <Copy size={14} />}
309 </button>
310 </div>
311 );
312}
313
314const UNITS: [string, number][] = [
315 ["d", 86_400_000],
316 ["h", 3_600_000],
317 ["m", 60_000],
318];
319
320/** Compact relative time such as "5m ago". */
321export function TimeAgo({ at }: { at: string | number }) {
322 // Timestamps are RFC 3339 strings; a few older ones are still numbers.
323 const elapsed = Date.now() - new Date(at).getTime();
324 const unit = UNITS.find(([, size]) => elapsed >= size);
325 const label = unit ? `${Math.floor(elapsed / unit[1])}${unit[0]} ago` : "just now";
326 return (
327 // The server and the browser render at slightly different times.
328 <time dateTime={new Date(at).toISOString()} suppressHydrationWarning>
329 {label}
330 </time>
331 );
332}
333
334export function EmptyState({
335 title,
336 children,
337}: {
338 title: string;
339 children?: ReactNode;
340}) {
341 return (
342 <div className="rounded-lg border border-dashed border-line px-6 py-12 text-center">
343 <p className="font-medium">{title}</p>
344 {children && <div className="mt-1.5 text-sm text-muted">{children}</div>}
345 </div>
346 );
347}