Skip to content
Sign up

flagon-io/g1t

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