| 1 | import { AtSign, BellRing, CornerDownLeft, GitPullRequest, Bell, MessageCircle, MessagesSquare, ShieldAlert, X } from "lucide-react"; |
| 2 | import { type FormEvent, type ReactNode, useLayoutEffect, useRef, useState } from "react"; |
| 3 | |
| 4 | import type { FeedNotification, NotificationKind } from "@g1t/contracts"; |
| 5 | |
| 6 | import { NotificationCardActions } from "./card-actions"; |
| 7 | import { MemberAvatar } from "../chat/marks"; |
| 8 | |
| 9 | import { closeOffer, currentSink, declinePush, dismiss, enablePush, useNotifyState } from "../../lib/notify-client"; |
| 10 | import { TOAST_GUESS, TOAST_MS, canQuickReply, hiddenToFit, notificationActions, quickReplyRequest } from "../../lib/notify-store"; |
| 11 | import { Avatar } from "../ui/avatar"; |
| 12 | import { 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. */ |
| 15 | const 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. */ |
| 25 | const DESKTOP_MARGIN = 84; |
| 26 | const PHONE_MARGIN = 112; |
| 27 | |
| 28 | /** Said to you, so drawn in the accent. */ |
| 29 | const 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. |
| 34 | const 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 | |
| 44 | function ActorAvatar({ notification }: { notification: FeedNotification }) { |
| 45 | const { actor } = notification; |
| 46 | if (actor.kind === "user" || actor.kind === "agent") { |
| 47 | return <MemberAvatar member={{ kind: actor.kind, id: actor.id, name: actor.name, avatar: actor.avatar ?? null }} size={32} />; |
| 48 | } |
| 49 | return <Avatar name={actor.name} system={actor.id === "g1t"} square size={32} />; |
| 50 | } |
| 51 | |
| 52 | function QuickReply({ notification, onSent }: { notification: FeedNotification; onSent: () => void }) { |
| 53 | const [text, setText] = useState(""); |
| 54 | const [state, setState] = useState<"idle" | "sending" | "sent" | "failed">("idle"); |
| 55 | const first = notification.actor.name.split(" ")[0]; |
| 56 | const send = async (event: FormEvent) => { |
| 57 | event.preventDefault(); |
| 58 | const request = quickReplyRequest(notification, text); |
| 59 | if (!request || state === "sending") return; |
| 60 | setState("sending"); |
| 61 | try { |
| 62 | const response = await fetch(request.url, { |
| 63 | method: "POST", |
| 64 | headers: { "content-type": "application/json" }, |
| 65 | body: JSON.stringify(request.body), |
| 66 | }); |
| 67 | const answer = (await response.json().catch(() => null)) as { ok?: boolean } | null; |
| 68 | if (!response.ok || !answer?.ok) throw new Error("not sent"); |
| 69 | setState("sent"); |
| 70 | setText(""); |
| 71 | setTimeout(onSent, 900); |
| 72 | } catch { |
| 73 | setState("failed"); |
| 74 | } |
| 75 | }; |
| 76 | if (state === "sent") { |
| 77 | return <p className="px-3 pb-3 text-xs text-success">Sent</p>; |
| 78 | } |
| 79 | return ( |
| 80 | <form onSubmit={send} className="px-3 pb-3"> |
| 81 | <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"> |
| 82 | <input |
| 83 | value={text} |
| 84 | onChange={(event) => { |
| 85 | setText(event.target.value); |
| 86 | if (state === "failed") setState("idle"); |
| 87 | }} |
| 88 | placeholder={`Reply to ${first}…`} |
| 89 | aria-label={`Reply to ${notification.actor.name}`} |
| 90 | autoComplete="off" |
| 91 | data-1p-ignore |
| 92 | className="h-7 min-w-0 grow bg-transparent text-[0.8125rem] text-fg outline-none placeholder:text-faint" |
| 93 | /> |
| 94 | <Button |
| 95 | type="submit" |
| 96 | disabled={!text.trim() || state === "sending"} |
| 97 | aria-label="Send reply" |
| 98 | variant="accent" |
| 99 | size="icon-xs" |
| 100 | className="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 | |
| 110 | function ToastCard({ notification, paused }: { notification: FeedNotification; paused: boolean }) { |
| 111 | const kind = KIND[notification.kind] ?? { label: "Notifications", icon: <Bell /> }; |
| 112 | const loud = LOUD.has(notification.kind); |
| 113 | // A card's actions (Approve more, Stop, File work item…): 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-surface 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-0.75 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 | variant="ghost" |
| 146 | size="icon" |
| 147 | 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" |
| 148 | > |
| 149 | <X size={14} /> |
| 150 | </Button> |
| 151 | {card && <NotificationCardActions notification={notification} className="px-3 pb-3 sm:pl-14" />} |
| 152 | {!card && canQuickReply(notification) && <QuickReply notification={notification} onSent={() => dismiss(notification.id)} />} |
| 153 | <span aria-hidden="true" className="absolute inset-x-0 bottom-0 h-px bg-line"> |
| 154 | <span |
| 155 | className="g1t-toast-timer block h-full bg-accent/70" |
| 156 | style={{ animationDuration: `${card ? TOAST_MS * 2 : TOAST_MS}ms`, animationPlayState: paused ? "paused" : "running" }} |
| 157 | onAnimationEnd={() => dismiss(notification.id)} |
| 158 | /> |
| 159 | </span> |
| 160 | </div> |
| 161 | ); |
| 162 | } |
| 163 | |
| 164 | /** The offer to turn on browser notifications, after the first DM or mention toast. */ |
| 165 | function PushOffer() { |
| 166 | const [busy, setBusy] = useState(false); |
| 167 | return ( |
| 168 | <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"> |
| 169 | <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-accent/15 text-accent"> |
| 170 | <BellRing size={16} /> |
| 171 | </span> |
| 172 | <p className="min-w-0 grow text-[0.8125rem] leading-snug text-fg">Get notified when someone messages you</p> |
| 173 | <Button |
| 174 | type="button" |
| 175 | disabled={busy} |
| 176 | onClick={async () => { |
| 177 | setBusy(true); |
| 178 | await enablePush(); |
| 179 | setBusy(false); |
| 180 | closeOffer(); |
| 181 | }} |
| 182 | variant="accent" |
| 183 | size="xs" |
| 184 | className="px-2.5 font-semibold transition-opacity hover:opacity-90 disabled:opacity-60" |
| 185 | > |
| 186 | {busy ? "Turning on…" : "Turn on"} |
| 187 | </Button> |
| 188 | <Button type="button" aria-label="No thanks" onClick={declinePush} variant="ghost" size="icon" className="size-6 text-faint"> |
| 189 | <X size={14} /> |
| 190 | </Button> |
| 191 | </div> |
| 192 | ); |
| 193 | } |
| 194 | |
| 195 | /** |
| 196 | * The toasts: bottom right on a computer, along the top on a phone, three |
| 197 | * at most, each gone after six seconds unless the pointer or the keyboard |
| 198 | * is on them. |
| 199 | */ |
| 200 | export function Toaster() { |
| 201 | const { toasts, offer } = useNotifyState(); |
| 202 | const [hovered, setHovered] = useState(false); |
| 203 | const [focused, setFocused] = useState(false); |
| 204 | const [hidden, setHidden] = useState(0); |
| 205 | const [, setResized] = useState(0); |
| 206 | const stack = useRef<HTMLElement | null>(null); |
| 207 | const heights = useRef(new Map<string, number>()); |
| 208 | |
| 209 | // Taller than the screen: the oldest fold into "+N more", newest kept. |
| 210 | useLayoutEffect(() => { |
| 211 | const element = stack.current; |
| 212 | if (!element) return; |
| 213 | for (const card of element.querySelectorAll<HTMLElement>("[data-toast-id]")) heights.current.set(card.dataset.toastId!, card.offsetHeight); |
| 214 | const live = new Set(toasts.map((t) => t.notification.id)); |
| 215 | for (const id of heights.current.keys()) if (!live.has(id)) heights.current.delete(id); |
| 216 | const offerHeight = element.querySelector<HTMLElement>("[data-offer]")?.offsetHeight ?? 0; |
| 217 | const phone = window.matchMedia("(max-width: 639px)").matches; |
| 218 | const available = window.innerHeight - (phone ? PHONE_MARGIN : DESKTOP_MARGIN); |
| 219 | const fit = hiddenToFit( |
| 220 | toasts.map((t) => heights.current.get(t.notification.id) ?? TOAST_GUESS), |
| 221 | available, |
| 222 | offerHeight, |
| 223 | ); |
| 224 | if (fit !== hidden) setHidden(fit); |
| 225 | }); |
| 226 | useLayoutEffect(() => { |
| 227 | const onResize = () => setResized((n) => n + 1); |
| 228 | window.addEventListener("resize", onResize); |
| 229 | return () => window.removeEventListener("resize", onResize); |
| 230 | }, []); |
| 231 | |
| 232 | if (!toasts.length && !offer) return null; |
| 233 | const paused = hovered || focused; |
| 234 | const folded = toasts.slice(0, hidden); |
| 235 | const shown = toasts.slice(hidden); |
| 236 | return ( |
| 237 | <section |
| 238 | ref={stack} |
| 239 | aria-label="Notifications" |
| 240 | aria-live="polite" |
| 241 | onMouseEnter={() => setHovered(true)} |
| 242 | onMouseLeave={() => setHovered(false)} |
| 243 | onFocus={() => setFocused(true)} |
| 244 | onBlur={(event) => { |
| 245 | if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false); |
| 246 | }} |
| 247 | 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" |
| 248 | > |
| 249 | <style>{STYLES}</style> |
| 250 | {offer && ( |
| 251 | <div data-offer> |
| 252 | <PushOffer /> |
| 253 | </div> |
| 254 | )} |
| 255 | {folded.length > 0 && ( |
| 256 | <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"> |
| 257 | <span className="font-medium text-fg tabular-nums">+{folded.length} more</span> |
| 258 | <Button |
| 259 | type="button" |
| 260 | onClick={() => folded.forEach((t) => dismiss(t.notification.id))} |
| 261 | aria-label={`Clear ${folded.length} older ${folded.length === 1 ? "notification" : "notifications"}`} |
| 262 | variant="ghost" |
| 263 | size="inline" |
| 264 | className="rounded-full px-2 py-0.5 text-faint font-normal" |
| 265 | > |
| 266 | Clear |
| 267 | </Button> |
| 268 | </div> |
| 269 | )} |
| 270 | {shown.map((toast) => ( |
| 271 | <div key={toast.notification.id} data-toast-id={toast.notification.id}> |
| 272 | <ToastCard notification={toast.notification} paused={paused} /> |
| 273 | </div> |
| 274 | ))} |
| 275 | </section> |
| 276 | ); |
| 277 | } |