Skip to content
Sign up

flagon-io/g1t

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