Skip to content
Sign up

flagon-io/g1t

public
0
287 linesCodeBlameRaw
1import { AtSign, BellRing, CornerDownLeft, GitPullRequest, Hourglass, Bell, MessageCircle, MessagesSquare, ShieldAlert, X } from "lucide-react";
2import { type FormEvent, type ReactNode, useLayoutEffect, useRef, useState } from "react";
3
4import type { FeedNotification, NotificationKind } from "@g1t/contracts";
5
6import { NotificationCardActions } from "./card-actions";
7import { MemberAvatar } from "../chat/marks";
8
9import { closeOffer, currentSink, declinePush, dismiss, enablePush, useNotifyState } from "../../lib/notify-client";
10import { TOAST_GUESS, TOAST_MS, canQuickReply, hiddenToFit, notificationActions, quickReplyRequest } from "../../lib/notify-store";
11import { Avatar } from "../ui/avatar";
12import { Button } from "../ui/button";
13
14const KIND: Record<NotificationKind, { label: string; icon: ReactNode }> = {
15 dm: { label: "Direct message", icon: <MessageCircle /> },
16 mention: { label: "Mentioned you", icon: <AtSign /> },
17 thread_reply: { label: "Replied in a thread", icon: <MessagesSquare /> },
18 inbox: { label: "Notifications", icon: <Bell /> },
19 agent_waiting: { label: "Waiting on you", icon: <Hourglass /> },
20 approval: { label: "Needs your review", icon: <GitPullRequest /> },
21 security: { label: "Security alert", icon: <ShieldAlert /> },
22};
23
24/** Room kept clear of the stack: the top bar and the edge on a computer; the top inset and the tab bar on a phone. */
25const DESKTOP_MARGIN = 84;
26const PHONE_MARGIN = 112;
27
28/** Said to you, so drawn in the accent. */
29const LOUD: ReadonlySet<NotificationKind> = new Set(["dm", "mention", "agent_waiting", "approval", "security"]);
30
31// The toast's entrance (up from the corner on a computer, down from the top
32// on a phone) and its timer, a line that empties over TOAST_MS. Paused while
33// the pointer or the keyboard is on the stack.
34const STYLES = `
35@keyframes g1t-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
36@keyframes g1t-toast-in-top { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
37@keyframes g1t-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
38.g1t-toast { animation: g1t-toast-in 0.26s cubic-bezier(0.16, 1, 0.3, 1); }
39@media (max-width: 639px) { .g1t-toast { animation-name: g1t-toast-in-top; } }
40.g1t-toast-timer { animation: g1t-toast-timer linear forwards; transform-origin: left; }
41@media (prefers-reduced-motion: reduce) { .g1t-toast { animation: none; } }
42`;
43
44function ActorAvatar({ notification }: { notification: FeedNotification }) {
45 const { actor } = notification;
46 if (actor.kind === "user" || actor.kind === "agent") {
47 return (
48 <MemberAvatar
49 member={{ kind: actor.kind, id: actor.id, name: actor.name, avatar: actor.avatar ?? null, avatar_seed: actor.avatar_seed ?? null, look: actor.look ?? null }}
50 size={32}
51 />
52 );
53 }
54 return <Avatar name={actor.name} system={actor.id === "g1t"} square size={32} />;
55}
56
57function QuickReply({ notification, onSent }: { notification: FeedNotification; onSent: () => void }) {
58 const [text, setText] = useState("");
59 const [state, setState] = useState<"idle" | "sending" | "sent" | "failed">("idle");
60 const first = notification.actor.name.split(" ")[0];
61 const send = async (event: FormEvent) => {
62 event.preventDefault();
63 const request = quickReplyRequest(notification, text);
64 if (!request || state === "sending") return;
65 setState("sending");
66 try {
67 const response = await fetch(request.url, {
68 method: "POST",
69 headers: { "content-type": "application/json" },
70 body: JSON.stringify(request.body),
71 });
72 const answer = (await response.json().catch(() => null)) as { ok?: boolean } | null;
73 if (!response.ok || !answer?.ok) throw new Error("not sent");
74 setState("sent");
75 setText("");
76 setTimeout(onSent, 900);
77 } catch {
78 setState("failed");
79 }
80 };
81 if (state === "sent") {
82 return <p className="px-3 pb-3 text-xs text-success">Sent</p>;
83 }
84 return (
85 <form onSubmit={send} className="px-3 pb-3">
86 <div className="flex items-center gap-1.5 rounded-lg bg-bg/80 py-1 pr-1 pl-2.5 ring-1 ring-line transition-shadow focus-within:ring-accent-dim">
87 <input
88 value={text}
89 onChange={(event) => {
90 setText(event.target.value);
91 if (state === "failed") setState("idle");
92 }}
93 placeholder={`Reply to ${first}…`}
94 aria-label={`Reply to ${notification.actor.name}`}
95 autoComplete="off"
96 data-1p-ignore
97 className="h-7 min-w-0 grow bg-transparent text-[0.8125rem] text-fg outline-none placeholder:text-faint"
98 />
99 <Button
100 type="submit"
101 disabled={!text.trim() || state === "sending"}
102 aria-label="Send reply"
103 variant="accent"
104 size="icon-xs"
105 className="transition-opacity disabled:opacity-30"
106 >
107 <CornerDownLeft size={14} />
108 </Button>
109 </div>
110 {state === "failed" && <p className="mt-1.5 text-xs text-danger">That didn't send. Open the conversation to try again.</p>}
111 </form>
112 );
113}
114
115function ToastCard({ notification, paused }: { notification: FeedNotification; paused: boolean }) {
116 const kind = KIND[notification.kind];
117 const loud = LOUD.has(notification.kind);
118 // A card's actions (Approve more, Stop, File issue…): more time to decide.
119 const card = notificationActions(notification).length > 0;
120 const open = () => {
121 dismiss(notification.id);
122 currentSink().open(notification.href);
123 };
124 return (
125 <div
126 role="status"
127 className="g1t-toast group/toast pointer-events-auto relative overflow-hidden rounded-xl bg-surface shadow-[0_0_0_6px_var(--color-bg),0_20px_48px_-12px_rgba(0,0,0,0.9)] ring-1 ring-line-strong"
128 >
129 {loud && <span aria-hidden="true" className="absolute inset-y-0 left-0 w-[3px] bg-accent" />}
130 <button type="button" onClick={open} className="flex w-full items-start gap-3 p-3 pr-9 text-left outline-none focus-visible:bg-raised/60">
131 <span className="mt-0.5 shrink-0">
132 <ActorAvatar notification={notification} />
133 </span>
134 <span className="min-w-0 grow">
135 <span className="flex items-baseline gap-2">
136 <span className="truncate text-[0.8125rem] font-semibold text-fg">{notification.title}</span>
137 <span className="shrink-0 text-[0.6875rem] text-faint">now</span>
138 </span>
139 <span className={`mt-0.5 flex items-center gap-1 text-[0.6875rem] font-medium [&_svg]:size-3 ${loud ? "text-accent" : "text-faint"}`}>
140 {kind.icon}
141 {kind.label}
142 </span>
143 {notification.body && <span className="mt-1 line-clamp-2 block text-[0.8125rem] leading-snug text-muted">{notification.body}</span>}
144 </span>
145 </button>
146 <Button
147 type="button"
148 aria-label="Dismiss"
149 onClick={() => dismiss(notification.id)}
150 variant="ghost" size="icon"
151 className="absolute top-2 right-2 size-6 text-faint opacity-0 transition-opacity group-hover/toast:opacity-100 focus-visible:opacity-100 max-sm:opacity-100"
152 >
153 <X size={14} />
154 </Button>
155 {card && <NotificationCardActions notification={notification} className="px-3 pb-3 sm:pl-14" />}
156 {!card && canQuickReply(notification) && <QuickReply notification={notification} onSent={() => dismiss(notification.id)} />}
157 <span aria-hidden="true" className="absolute inset-x-0 bottom-0 h-px bg-line">
158 <span
159 className="g1t-toast-timer block h-full bg-accent/70"
160 style={{ animationDuration: `${card ? TOAST_MS * 2 : TOAST_MS}ms`, animationPlayState: paused ? "paused" : "running" }}
161 onAnimationEnd={() => dismiss(notification.id)}
162 />
163 </span>
164 </div>
165 );
166}
167
168/** The offer to turn on browser notifications, after the first DM or mention toast. */
169function PushOffer() {
170 const [busy, setBusy] = useState(false);
171 return (
172 <div className="g1t-toast pointer-events-auto flex items-center gap-3 rounded-xl bg-surface p-3 shadow-[0_0_0_6px_var(--color-bg),0_20px_48px_-12px_rgba(0,0,0,0.9)] ring-1 ring-accent/35">
173 <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-accent/15 text-accent">
174 <BellRing size={16} />
175 </span>
176 <p className="min-w-0 grow text-[0.8125rem] leading-snug text-fg">Get notified when someone messages you</p>
177 <Button
178 type="button"
179 disabled={busy}
180 onClick={async () => {
181 setBusy(true);
182 await enablePush();
183 setBusy(false);
184 closeOffer();
185 }}
186 variant="accent"
187 size="xs"
188 className="px-2.5 font-semibold transition-opacity hover:opacity-90 disabled:opacity-60"
189 >
190 {busy ? "Turning on…" : "Turn on"}
191 </Button>
192 <Button
193 type="button"
194 aria-label="No thanks"
195 onClick={declinePush}
196 variant="ghost" size="icon"
197 className="size-6 text-faint"
198 >
199 <X size={14} />
200 </Button>
201 </div>
202 );
203}
204
205/**
206 * The toasts: bottom right on a computer, along the top on a phone, three
207 * at most, each gone after six seconds unless the pointer or the keyboard
208 * is on them.
209 */
210export function Toaster() {
211 const { toasts, offer } = useNotifyState();
212 const [hovered, setHovered] = useState(false);
213 const [focused, setFocused] = useState(false);
214 const [hidden, setHidden] = useState(0);
215 const [, setResized] = useState(0);
216 const stack = useRef<HTMLElement | null>(null);
217 const heights = useRef(new Map<string, number>());
218
219 // Taller than the screen: the oldest fold into "+N more", newest kept.
220 useLayoutEffect(() => {
221 const element = stack.current;
222 if (!element) return;
223 for (const card of element.querySelectorAll<HTMLElement>("[data-toast-id]")) heights.current.set(card.dataset.toastId!, card.offsetHeight);
224 const live = new Set(toasts.map((t) => t.notification.id));
225 for (const id of heights.current.keys()) if (!live.has(id)) heights.current.delete(id);
226 const offerHeight = element.querySelector<HTMLElement>("[data-offer]")?.offsetHeight ?? 0;
227 const phone = window.matchMedia("(max-width: 639px)").matches;
228 const available = window.innerHeight - (phone ? PHONE_MARGIN : DESKTOP_MARGIN);
229 const fit = hiddenToFit(
230 toasts.map((t) => heights.current.get(t.notification.id) ?? TOAST_GUESS),
231 available,
232 offerHeight,
233 );
234 if (fit !== hidden) setHidden(fit);
235 });
236 useLayoutEffect(() => {
237 const onResize = () => setResized((n) => n + 1);
238 window.addEventListener("resize", onResize);
239 return () => window.removeEventListener("resize", onResize);
240 }, []);
241
242 if (!toasts.length && !offer) return null;
243 const paused = hovered || focused;
244 const folded = toasts.slice(0, hidden);
245 const shown = toasts.slice(hidden);
246 return (
247 <section
248 ref={stack}
249 aria-label="Notifications"
250 aria-live="polite"
251 onMouseEnter={() => setHovered(true)}
252 onMouseLeave={() => setHovered(false)}
253 onFocus={() => setFocused(true)}
254 onBlur={(event) => {
255 if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false);
256 }}
257 className="pointer-events-none fixed z-[65] flex flex-col gap-2 max-sm:inset-x-3 max-sm:top-[calc(env(safe-area-inset-top)+0.75rem)] max-sm:flex-col-reverse sm:right-5 sm:bottom-5 sm:w-[376px]"
258 >
259 <style>{STYLES}</style>
260 {offer && (
261 <div data-offer>
262 <PushOffer />
263 </div>
264 )}
265 {folded.length > 0 && (
266 <div className="pointer-events-auto flex h-[30px] items-center justify-between gap-2 self-center rounded-full bg-surface pr-1 pl-3 text-xs text-muted shadow-[0_0_0_6px_var(--color-bg),0_10px_30px_-10px_rgba(0,0,0,0.9)] ring-1 ring-line-strong">
267 <span className="font-medium text-fg tabular-nums">+{folded.length} more</span>
268 <Button
269 type="button"
270 onClick={() => folded.forEach((t) => dismiss(t.notification.id))}
271 aria-label={`Clear ${folded.length} older ${folded.length === 1 ? "notification" : "notifications"}`}
272 variant="ghost"
273 size="inline"
274 className="rounded-full px-2 py-0.5 text-faint font-normal"
275 >
276 Clear
277 </Button>
278 </div>
279 )}
280 {shown.map((toast) => (
281 <div key={toast.notification.id} data-toast-id={toast.notification.id}>
282 <ToastCard notification={toast.notification} paused={paused} />
283 </div>
284 ))}
285 </section>
286 );
287}