Skip to content
Sign up

flagon-io/g1t

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