Skip to content
Sign up

flagon-io/g1t

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