Skip to content
Sign in

flagon-io/g1t

public
0
649 linesCodeBlameRaw
1import { Bot, CircleCheck, CircleSlash, Pencil, Trash2 } from "lucide-react";
2import type { CSSProperties, ReactNode } from "react";
3import { Form, Link } from "react-router";
4
5import type { Comment, Issue, Pull, State } from "@g1t/contracts";
6
7import { mayChangeComment } from "../lib/comments";
8import { chipStyle } from "../lib/labels";
9import { repoAt } from "../lib/markdown-plugins";
10import { Markdown } from "./markdown";
11import { IssueIcon, PullIcon } from "./work-icons";
12import { MentionTextarea } from "./mention-textarea";
13import { Avatar, ErrorText, SubmitButton, TimeAgo } from "./ui";
14import {
15 AlertDialog,
16 AlertDialogAction,
17 AlertDialogCancel,
18 AlertDialogContent,
19 AlertDialogDescription,
20 AlertDialogFooter,
21 AlertDialogHeader,
22 AlertDialogTitle,
23 AlertDialogTrigger,
24} from "./ui/alert-dialog";
25import { CheckboxOption } from "./ui/checkbox";
26import { Hint } from "./ui/hint";
27
28export { IssueIcon, PullIcon };
29
30/** Hues for the labels every repository starts with. */
31const LABEL_HUES: Record<string, number> = {
32 bug: 25,
33 feature: 150,
34 docs: 240,
35 chore: 80,
36 question: 310,
37};
38
39/** A stable hue for any other label, from its name. */
40function hueFor(name: string): number {
41 let hash = 0;
42 for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) % 360;
43 return hash;
44}
45
46/**
47 * A label's chip: in its own color when the page knows it (the
48 * repository's labels, by name), else in a hue chosen from its name.
49 */
50export function Label({ name, color }: { name: string; color?: string | null }) {
51 const hue = LABEL_HUES[name] ?? hueFor(name);
52 const own = chipStyle(color);
53 const style: CSSProperties = Object.keys(own).length > 0 ? own : {
54 color: `oklch(0.84 0.11 ${hue})`,
55 borderColor: `oklch(0.84 0.11 ${hue} / 0.35)`,
56 backgroundColor: `oklch(0.84 0.11 ${hue} / 0.1)`,
57 };
58 return (
59 <span
60 style={style}
61 className="inline-flex shrink-0 items-center rounded-full border px-2 py-px text-xs font-medium"
62 >
63 {name}
64 </span>
65 );
66}
67
68/** The people an issue is assigned to, as overlapping avatars. */
69export function AssigneeStack({ people }: { people: string[] }) {
70 if (people.length === 0) return null;
71 const shown = people.slice(0, 3);
72 return (
73 <Hint label={`Assigned to ${people.join(", ")}`}>
74 <span className="flex shrink-0 items-center">
75 <span className="sr-only">Assigned to {people.join(", ")}</span>
76 {shown.map((name, index) => (
77 <span key={name} className={`rounded-full ring-2 ring-bg ${index > 0 ? "-ml-1.5" : ""}`} aria-hidden>
78 <Avatar name={name} size={18} />
79 </span>
80 ))}
81 {people.length > shown.length && (
82 <span className="ml-1 text-xs text-faint" aria-hidden>
83 +{people.length - shown.length}
84 </span>
85 )}
86 </span>
87 </Hint>
88 );
89}
90
91/** The agent working on an issue now. */
92export function Assignee({ agent }: { agent: string }) {
93 return (
94 <Hint label={`Assigned to ${agent}`}>
95 <span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-accent/35 bg-accent/10 px-2 py-px text-xs font-medium text-accent">
96 <Bot size={12} />
97 <span className="sr-only">Assigned to </span>
98 {agent}
99 </span>
100 </Hint>
101 );
102}
103
104const PILL = "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium";
105
106/** The large state badge at the top of an issue. */
107export function IssueState({ issue }: { issue: Pick<Issue, "state" | "reason"> }) {
108 const style =
109 issue.state === "open"
110 ? "border-success/30 bg-success/10 text-success"
111 : issue.reason === "not_planned"
112 ? "border-line bg-surface text-muted"
113 : "border-merged/30 bg-merged/10 text-merged";
114 return (
115 <span className={`${PILL} ${style}`}>
116 <IssueIcon issue={issue} size={14} />
117 {issue.state === "open"
118 ? "Open"
119 : issue.reason === "not_planned"
120 ? "Closed as not planned"
121 : "Closed"}
122 </span>
123 );
124}
125
126const PULL_STYLES: Record<Pull["status"], string> = {
127 draft: "border-line bg-surface text-muted",
128 open: "border-success/30 bg-success/10 text-success",
129 merged: "border-merged/30 bg-merged/10 text-merged",
130 closed: "border-danger/30 bg-danger/10 text-danger",
131};
132
133const PULL_NAMES: Record<Pull["status"], string> = {
134 draft: "Draft",
135 open: "Open",
136 merged: "Merged",
137 closed: "Closed",
138};
139
140export function PullState({ status }: { status: Pull["status"] }) {
141 return (
142 <span className={`${PILL} ${PULL_STYLES[status]}`}>
143 <PullIcon status={status} size={14} />
144 {PULL_NAMES[status]}
145 </span>
146 );
147}
148
149/** The open and closed switch above a list. `to` is the list's own path. */
150export function StateTabs({
151 to,
152 state,
153 query = "",
154 action,
155}: {
156 to: string;
157 state: State;
158 /** Other query parameters to keep, e.g. `label=bug`. */
159 query?: string;
160 action?: ReactNode;
161}) {
162 const link = (value: State) =>
163 `${to}?${[value === "open" ? "" : "state=closed", query].filter(Boolean).join("&")}`;
164 const tab = (value: State, label: string) => (
165 <Link
166 to={link(value)}
167 className={
168 "rounded-md px-3 py-1.5 text-sm transition-colors " +
169 (state === value ? "bg-raised font-medium text-fg" : "text-muted hover:text-fg")
170 }
171 >
172 {label}
173 </Link>
174 );
175 return (
176 <div className="flex flex-wrap items-center justify-between gap-3">
177 <div className="flex gap-1 rounded-lg border border-line p-1">
178 {tab("open", "Open")}
179 {tab("closed", "Closed")}
180 </div>
181 {action}
182 </div>
183 );
184}
185
186const VERDICTS = {
187 approve: { label: "approved these changes", style: "text-success" },
188 request_changes: { label: "requested changes", style: "text-danger" },
189} as const;
190
191/**
192 * A person's name (or `children`) linking to their profile at `/u/<name>`.
193 * g1t, and names that are not usernames, stay plain text.
194 */
195export function PersonLink({
196 name,
197 className,
198 label,
199 children,
200}: {
201 name: string;
202 className?: string;
203 label?: string;
204 children?: ReactNode;
205}) {
206 // g1t itself has no profile; its name carries a small label instead.
207 if (name === "g1t" && !children) {
208 return (
209 <span className="inline-flex items-baseline gap-1">
210 <span className={className}>g1t</span>
211 <span className="rounded border border-line px-1 text-[0.625rem] leading-[1.35] font-medium text-muted">bot</span>
212 </span>
213 );
214 }
215 if (name === "g1t" || !/^[a-z0-9-]{1,39}$/i.test(name)) {
216 return <span className={className}>{children ?? name}</span>;
217 }
218 return (
219 <Link to={`/u/${name.toLowerCase()}`} className={className} aria-label={label}>
220 {children ?? name}
221 </Link>
222 );
223}
224
225/**
226 * Comments in order, then the box to add one. On a pull request, `review`
227 * says where its changes are shown and whether the viewer may give a
228 * verdict.
229 */
230/**
231 * One entry in a conversation: who, what they did and when, then what they
232 * wrote. The author's avatar sits beside it, as on any forge.
233 */
234export function TimelineItem({
235 author,
236 action,
237 at,
238 edited,
239 aside,
240 children,
241}: {
242 author: string;
243 /** What they did, after their name: "commented", "opened this". */
244 action: ReactNode;
245 at?: string;
246 /** When what they wrote was last edited, if it was. */
247 edited?: string | null;
248 /** Shown at the right of the header. */
249 aside?: ReactNode;
250 children?: ReactNode;
251}) {
252 return (
253 <div className="flex gap-3">
254 <span className="mt-1 hidden shrink-0 sm:block">
255 <PersonLink name={author} label={`${author}'s profile`}>
256 <Avatar name={author} size={32} />
257 </PersonLink>
258 </span>
259 <article className="min-w-0 grow overflow-hidden rounded-xl border border-line bg-surface">
260 <header className="flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-line bg-raised/40 px-4 py-2 text-sm text-muted">
261 <span className="sm:hidden">
262 <Avatar name={author} size={18} />
263 </span>
264 <PersonLink name={author} className="font-medium text-fg hover:underline" />
265 {action}
266 {at && <TimeAgo at={at} />}
267 {edited && (
268 <Hint
269 label={
270 <>
271 Edited <TimeAgo at={edited} />
272 </>
273 }
274 >
275 <span tabIndex={0} className="text-xs text-faint">
276 edited
277 </span>
278 </Hint>
279 )}
280 {aside && <span className="ml-auto min-w-0">{aside}</span>}
281 </header>
282 {children && <div className="px-4 py-3">{children}</div>}
283 </article>
284 </div>
285 );
286}
287
288type Review = { changesUrl: string; canJudge: boolean };
289
290/**
291 * Text with each `#12` linked to the issue or pull request of that number,
292 * and each file named in backticks shown as code, linked to its diff when
293 * `filesUrl` says where the changes are.
294 */
295function WithReferences({ text, base, filesUrl }: { text: string; base?: string; filesUrl?: string }) {
296 if (!base) return <>{text}</>;
297 return (
298 <>
299 {text.split(/(#\d+|`[^`\n]+`)/).map((part, index) =>
300 /^`[^`]+`$/.test(part) ? (
301 filesUrl ? (
302 <Link
303 key={index}
304 to={`${filesUrl}#file-${part.slice(1, -1)}`}
305 className="font-mono text-xs text-fg hover:underline"
306 >
307 {part.slice(1, -1)}
308 </Link>
309 ) : (
310 <code key={index} className="font-mono text-xs text-fg">
311 {part.slice(1, -1)}
312 </code>
313 )
314 ) : /^#\d+$/.test(part) ? (
315 // Issues and pull requests share numbers; the issue page forwards.
316 <Link
317 key={index}
318 to={`${base}/issues/${part.slice(1)}`}
319 className="font-medium text-fg hover:underline"
320 >
321 {part}
322 </Link>
323 ) : (
324 part
325 ),
326 )}
327 </>
328 );
329}
330
331/** Something that happened, as one line on the conversation's rail. */
332function TimelineEvent({ comment, base, filesUrl }: { comment: Comment; base?: string; filesUrl?: string }) {
333 return (
334 <div className="flex items-center gap-3 text-sm text-muted">
335 <span className="hidden w-8 shrink-0 justify-center sm:flex">
336 <span className="size-2 rounded-full border border-line-strong bg-bg" />
337 </span>
338 <span className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5">
339 <Avatar name={comment.author.username} size={16} />
340 <PersonLink name={comment.author.username} className="font-medium text-fg hover:underline" />
341 <span>
342 <WithReferences text={comment.body} base={base} filesUrl={filesUrl} />
343 </span>
344 <span className="text-faint">
345 · <TimeAgo at={comment.createdAt} />
346 </span>
347 </span>
348 </div>
349 );
350}
351
352/** Edit and Delete, under a comment the viewer may change. */
353function CommentActions({
354 comment,
355 can,
356 error,
357}: {
358 comment: Comment;
359 can: { edit: boolean; delete: boolean };
360 error?: string | null;
361}) {
362 return (
363 <div className="mt-3 border-t border-line pt-2 text-sm">
364 <div className="flex flex-wrap items-center gap-1">
365 {can.edit && (
366 <details className="open:order-last open:w-full">
367 <summary className="inline-flex cursor-pointer list-none items-center gap-1 rounded-md px-1.5 py-1 text-xs text-faint hover:text-fg">
368 <Pencil size={12} />
369 Edit
370 </summary>
371 <Form method="post" className="mt-2 space-y-2">
372 <input type="hidden" name="action" value="edit-comment" />
373 <input type="hidden" name="comment" value={comment.id} />
374 <MentionTextarea name="body" rows={4} defaultValue={comment.body} />
375 <SubmitButton match={{ action: "edit-comment", comment: comment.id }} pending="Saving…">
376 Save
377 </SubmitButton>
378 </Form>
379 </details>
380 )}
381 {can.delete && (
382 <AlertDialog>
383 <AlertDialogTrigger asChild>
384 <button
385 type="button"
386 className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-xs text-faint hover:text-danger"
387 >
388 <Trash2 size={12} />
389 Delete
390 </button>
391 </AlertDialogTrigger>
392 <AlertDialogContent>
393 <Form method="post" className="grid gap-4">
394 <input type="hidden" name="action" value="delete-comment" />
395 <input type="hidden" name="comment" value={comment.id} />
396 <AlertDialogHeader>
397 <AlertDialogTitle>Delete this comment?</AlertDialogTitle>
398 <AlertDialogDescription>It is removed from the conversation for everyone. This cannot be undone.</AlertDialogDescription>
399 </AlertDialogHeader>
400 <AlertDialogFooter>
401 <AlertDialogCancel>Cancel</AlertDialogCancel>
402 <AlertDialogAction asChild>
403 <button type="submit">
404 <Trash2 size={14} />
405 Delete comment
406 </button>
407 </AlertDialogAction>
408 </AlertDialogFooter>
409 </Form>
410 </AlertDialogContent>
411 </AlertDialog>
412 )}
413 </div>
414 {error && <ErrorText>{error}</ErrorText>}
415 </div>
416 );
417}
418
419/**
420 * The conversation of an issue or a pull request, oldest first: what
421 * people and agents wrote, and between those, what happened.
422 */
423export function CommentList({
424 comments,
425 review,
426 base,
427 viewerId,
428 canModerate = false,
429 failed,
430}: {
431 comments: Comment[];
432 review?: Review;
433 /** The repository's path, so that `#12` in an event can be linked. */
434 base?: string;
435 /** The signed-in viewer, who may edit and delete their own comments. */
436 viewerId?: string | null;
437 /** Maintain and up: may edit and delete anyone's comments. */
438 canModerate?: boolean;
439 /** Why editing or deleting a comment was refused, under that comment. */
440 failed?: { comment: string; error?: string | null } | null;
441}) {
442 return (
443 <>
444 {comments.map((comment) => {
445 if (comment.kind === "event") {
446 return <TimelineEvent key={comment.id} comment={comment} base={base} filesUrl={review?.changesUrl} />;
447 }
448 const verdict = comment.verdict && VERDICTS[comment.verdict];
449 const can = mayChangeComment(comment, viewerId, canModerate);
450 return (
451 <TimelineItem
452 key={comment.id}
453 author={comment.author.username}
454 at={comment.createdAt}
455 action={
456 verdict ? (
457 <span className={`flex items-center gap-1 font-medium ${verdict.style}`}>
458 {comment.verdict === "approve" ? (
459 <CircleCheck size={14} />
460 ) : (
461 <CircleSlash size={14} />
462 )}
463 {verdict.label}
464 </span>
465 ) : (
466 <span>commented</span>
467 )
468 }
469 edited={comment.editedAt}
470 aside={
471 comment.path &&
472 review && (
473 <Link
474 to={`${review.changesUrl}#file-${comment.path}`}
475 className="block truncate font-mono text-xs text-faint hover:text-fg"
476 >
477 {comment.path}
478 {comment.line != null && `:${comment.line}`}
479 </Link>
480 )
481 }
482 >
483 {comment.body && <Markdown source={comment.body} repo={repoAt(base)} />}
484 {(can.edit || can.delete) && (
485 <CommentActions comment={comment} can={can} error={failed?.comment === comment.id ? failed.error : null} />
486 )}
487 </TimelineItem>
488 );
489 })}
490 </>
491 );
492}
493
494/** Where a signed-in person writes a comment, or a review. */
495export function CommentForm({
496 author,
497 resetKey,
498 review,
499 handles,
500}: {
501 /** The viewer's username, or null if they are signed out. */
502 author: string | null;
503 /** Changes when a comment is added, which clears the box. */
504 resetKey: number;
505 review?: Review;
506 /** Teams the box offers to mention, as `@workspace/team`. */
507 handles?: readonly string[];
508}) {
509 if (!author) {
510 return (
511 <p className="text-sm text-muted">
512 <Link to="/login" className="text-fg underline underline-offset-4">
513 Sign in
514 </Link>{" "}
515 to comment.
516 </p>
517 );
518 }
519 return (
520 <div className="flex gap-3">
521 <span className="mt-1 hidden shrink-0 sm:block">
522 <Avatar name={author} size={32} />
523 </span>
524 <Form method="post" className="min-w-0 grow space-y-2" key={resetKey}>
525 <input type="hidden" name="action" value="comment" />
526 <MentionTextarea
527 name="body"
528 handles={handles}
529 rows={3}
530 placeholder={
531 review?.canJudge
532 ? "Leave a comment, or a review. Markdown works."
533 : "Leave a comment. Markdown works."
534 }
535 />
536 <div className="flex flex-wrap gap-2">
537 {/* A plain comment's verdict is none the action knows, so each button tells its own post apart. */}
538 <SubmitButton name="verdict" value="comment" match={{ action: "comment" }} pending="Commenting…">
539 Comment
540 </SubmitButton>
541 {review?.canJudge && (
542 <>
543 <SubmitButton variant="quiet" name="verdict" value="approve" match={{ action: "comment" }} pending="Approving…">
544 <CircleCheck size={14} className="text-success" />
545 Approve
546 </SubmitButton>
547 <SubmitButton
548 variant="quiet"
549 name="verdict"
550 value="request_changes"
551 match={{ action: "comment" }}
552 pending="Requesting changes…"
553 >
554 <CircleSlash size={14} className="text-danger" />
555 Request changes
556 </SubmitButton>
557 </>
558 )}
559 </div>
560 </Form>
561 </div>
562 );
563}
564
565/**
566 * Checkboxes for choosing people: the workspace's members, anyone already
567 * chosen, and a box for other usernames. Posts `name` for each ticked and
568 * `others` for the rest.
569 */
570export function PeoplePicker({
571 name,
572 members,
573 chosen,
574 placeholder = "Other usernames, comma separated",
575}: {
576 name: string;
577 members: string[];
578 chosen: string[];
579 placeholder?: string;
580}) {
581 const people = [...new Set([...members, ...chosen])];
582 return (
583 <>
584 {people.length > 0 && (
585 <div className="space-y-1.5">
586 {people.map((person) => (
587 <CheckboxOption
588 key={person}
589 name={name}
590 value={person}
591 defaultChecked={chosen.includes(person)}
592 className="items-center"
593 labelClassName="flex items-center gap-2"
594 label={
595 <>
596 <Avatar name={person} size={18} />
597 <span className="font-mono text-xs">{person}</span>
598 </>
599 }
600 />
601 ))}
602 </div>
603 )}
604 <input
605 name="others"
606 placeholder={placeholder}
607 autoComplete="off"
608 data-1p-ignore
609 className="w-full rounded-md border border-line bg-bg px-3 py-2 text-sm outline-none placeholder:text-faint hover:border-line-strong focus:border-accent-dim"
610 />
611 </>
612 );
613}
614
615/** Where each reviewer stands: their most recent verdict. */
616export function verdicts(comments: Comment[]): { reviewer: string; verdict: NonNullable<Comment["verdict"]> }[] {
617 const latest = new Map<string, NonNullable<Comment["verdict"]>>();
618 for (const comment of comments) {
619 if (comment.verdict) latest.set(comment.author.username, comment.verdict);
620 }
621 return [...latest].map(([reviewer, verdict]) => ({ reviewer, verdict }));
622}
623
624/** `2 files +12 −3`: the size of a pull request's change. */
625export function ChangeSize({ files }: { files: Pull["files"] }) {
626 if (files.length === 0) return null;
627 const additions = files.reduce((sum, file) => sum + file.additions, 0);
628 const deletions = files.reduce((sum, file) => sum + file.deletions, 0);
629 return (
630 <span className="flex shrink-0 items-center gap-1.5 font-mono text-xs text-faint">
631 <span>
632 {files.length} {files.length === 1 ? "file" : "files"}
633 </span>
634 <span className="text-success">+{additions}</span>
635 <span className="text-danger">−{deletions}</span>
636 </span>
637 );
638}
639
640/** The words of a Markdown text, without its markup, for a one-line preview. */
641export function plainText(markdown: string): string {
642 return markdown
643 .replace(/```[\s\S]*?```/g, " ")
644 .replace(/^\s{0,3}(#{1,6}|[-*+]|\d+\.)\s+/gm, "")
645 .replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1")
646 .replace(/[*_`~]/g, "")
647 .replace(/\s+/g, " ")
648 .trim();
649}