@rpcbase/ui 0.260.0 → 0.262.0

package/dist/index421.js

@@ -1,272 +1,474 @@
 import { cn as e } from "./index12.js";
-import { useEffect as t, useMemo as n, useState as r } from "react";
-import { Loader2 as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/Notifications/NotificationsSettings.tsx
-var s = [
-	{
-		value: "off",
-		label: "Off"
-	},
-	{
-		value: "daily",
-		label: "Daily"
-	},
-	{
-		value: "weekly",
-		label: "Weekly"
+import { DialogBackdrop as t } from "./index199.js";
+import { DialogClose as n } from "./index210.js";
+import { DialogPopup as r } from "./index280.js";
+import { DialogPortal as i } from "./index283.js";
+import { DialogRoot as a } from "./index288.js";
+import { DialogTitle as o } from "./index289.js";
+import { c as s } from "react/compiler-runtime";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Loader2 as h, MoreVertical as g, X as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/Notifications/NotificationsDrawer.tsx
+var b = (e) => {
+	let t = Date.parse(e);
+	return Number.isFinite(t) ? t : 0;
+}, x = (e) => {
+	let t = new Date(b(e));
+	return Number.isFinite(t.getTime()) ? `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}` : "unknown";
+}, S = (e) => {
+	if (e === "unknown") return "Unknown date";
+	let [t, n, r] = e.split("-"), i = Number(t), a = Number(n), o = Number(r);
+	if (!Number.isFinite(i) || !Number.isFinite(a) || !Number.isFinite(o)) return "Unknown date";
+	let s = new Date(i, a - 1, o);
+	if (!Number.isFinite(s.getTime())) return "Unknown date";
+	let c = (/* @__PURE__ */ new Date()).getFullYear() !== i;
+	return s.toLocaleDateString(void 0, c ? {
+		weekday: "short",
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	} : {
+		weekday: "short",
+		month: "short",
+		day: "numeric"
+	});
+}, C = (e) => {
+	let t = e.data?.link?.trim();
+	if (t) return t;
+	let n = e.platform?.webpush;
+	if (!n || typeof n != "object" || Array.isArray(n)) return "";
+	let r = n.fcmOptions;
+	if (!r || typeof r != "object" || Array.isArray(r)) return "";
+	let i = r.link;
+	return typeof i == "string" ? i.trim() : "";
+}, w = (e) => e.data?.linkMode === "merge_current_search" ? "merge_current_search" : "navigate", T = (e) => {
+	let t = C(e);
+	return t ? {
+		link: t,
+		mode: w(e)
+	} : null;
+}, E = (e) => e ? e.mode === "merge_current_search" ? "Open" : e.link : "", D = (e) => {
+	window.history.pushState(window.history.state, "", e), window.dispatchEvent(new PopStateEvent("popstate", { state: window.history.state }));
+}, O = (e) => {
+	if (e.mode === "merge_current_search") {
+		let t = new URL(window.location.href), n = new URL(e.link, t);
+		n.searchParams.forEach((e, n) => {
+			t.searchParams.set(n, e);
+		}), n.hash && (t.hash = n.hash), D(`${t.pathname}${t.search}${t.hash}`);
+		return;
 	}
-], c = (e) => {
-	let t = e?.digestFrequency;
-	return {
-		digestFrequency: t === "off" || t === "daily" || t === "weekly" ? t : "weekly",
-		topicPreferences: Array.isArray(e?.topicPreferences) ? e.topicPreferences.map((e) => ({
-			topic: typeof e.topic == "string" ? e.topic.trim() : "",
-			inApp: e.inApp === !0,
-			emailDigest: e.emailDigest === !0,
-			push: e.push === !0
-		})).filter((e) => e.topic.length > 0) : [],
-		...typeof e?.lastDigestSentAt == "string" ? { lastDigestSentAt: e.lastDigestSentAt } : {}
-	};
-}, l = (e) => {
-	if (!Array.isArray(e)) return [];
-	let t = /* @__PURE__ */ new Set();
-	return e.map((e) => ({
-		topic: typeof e.topic == "string" ? e.topic.trim() : "",
-		title: typeof e.title == "string" ? e.title.trim() : "",
-		description: typeof e.description == "string" ? e.description.trim() : void 0
-	})).filter((e) => e.topic.length > 0).filter((e) => t.has(e.topic) ? !1 : (t.add(e.topic), !0));
-}, u = (e, t) => {
-	let n = {
-		topic: "",
-		inApp: !0,
-		emailDigest: !0,
-		push: !1
-	}, r = new Map(e.topicPreferences.map((e) => [e.topic, e]));
-	return {
-		...e,
-		topicPreferences: t.map((e) => {
-			let t = r.get(e.topic);
-			return t ? {
-				topic: e.topic,
-				inApp: t.inApp === !0,
-				emailDigest: t.emailDigest === !0,
-				push: t.push === !0
-			} : {
-				...n,
-				topic: e.topic
-			};
-		})
-	};
-};
-function d({ className: d, topics: f }) {
-	let [p, m] = r(!0), [h, g] = r(!1), [_, v] = r(null), [y, b] = r(() => c({
-		digestFrequency: "weekly",
-		topicPreferences: []
-	})), x = n(() => l(f), [f]), S = async () => {
-		m(!0), v(null);
+	window.location.href = e.link;
+}, k = (e) => {
+	let t = [], n = null;
+	for (let r of e) {
+		let e = x(r.createdAt);
+		e !== n && (n = e, t.push({
+			key: e,
+			label: S(e),
+			items: []
+		})), t[t.length - 1].items.push(r);
+	}
+	return t;
+}, A = () => typeof window > "u" || !("Notification" in window) ? "unsupported" : window.Notification.permission, j = c(null);
+function M({ open: s, onOpenChange: c, className: p, limit: g = 50, defaultUnreadOnly: b = !1, realtimeContext: x }) {
+	let S = u(x ?? j), [C, w] = m([]), [T, E] = m(0), [D, O] = m(0), [M, F] = m(!1), [I, L] = m(null), [R, z] = m(b), [B, V] = m(() => A()), [H, U] = m(!1), W = S?.notifications ?? C, G = S?.unreadCount ?? T, K = S?.unseenCount ?? D, ee = S?.loading ?? M, q = S?.error ? S.error instanceof Error ? S.error.message : String(S.error) : I, J = f(() => W.slice(0, g), [g, W]), Y = f(() => J.filter((e) => !e.readAt), [J]), X = f(() => J.filter((e) => !!e.readAt), [J]), Z = f(() => k(Y), [Y]), te = f(() => k(X), [X]), Q = l(async ({ unreadOnly: e, markSeen: t }) => {
+		F(!0), L(null);
 		try {
-			let e = await fetch("/api/rb/notifications/settings", {
-				method: "GET",
-				credentials: "include"
-			}), t = await e.json().catch(() => null);
-			if (!e.ok || !t?.ok) {
-				v(t?.error || "Unable to load notification settings.");
+			let n = await fetch("/api/rb/notifications", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({
+					limit: g,
+					unreadOnly: e,
+					markSeen: t
+				})
+			}), r = await n.json().catch(() => null);
+			if (!n.ok || !r?.ok) {
+				L(r?.error || "Unable to load notifications.");
+				return;
+			}
+			let i = Array.isArray(r.notifications) ? r.notifications : [];
+			w(i), E(Number.isFinite(r.unreadCount) ? Math.max(0, Math.floor(r.unreadCount ?? 0)) : 0), O(Number.isFinite(r.unseenCount) ? Math.max(0, Math.floor(r.unseenCount ?? 0)) : 0);
+		} catch {
+			L("Unable to load notifications.");
+		} finally {
+			F(!1);
+		}
+	}, [g]);
+	d(() => {
+		if (s) {
+			if (S) {
+				(async () => {
+					try {
+						await fetch("/api/rb/notifications", {
+							method: "POST",
+							headers: { "Content-Type": "application/json" },
+							credentials: "include",
+							keepalive: !0,
+							body: JSON.stringify({
+								limit: 1,
+								markSeen: !0
+							})
+						});
+					} catch {
+						return;
+					}
+				})();
 				return;
 			}
-			let n = c(t.settings);
-			b(x.length > 0 ? u(n, x) : n);
+			Q({
+				unreadOnly: R,
+				markSeen: !0
+			});
+		}
+	}, [
+		s,
+		S,
+		Q,
+		R
+	]), d(() => {
+		s && (S || Q({
+			unreadOnly: R,
+			markSeen: !1
+		}));
+	}, [
+		s,
+		S,
+		Q,
+		R
+	]), d(() => {
+		if (!s || (V(A()), typeof navigator > "u" || !navigator.permissions?.query)) return;
+		let e = null, t = !1, n = () => {
+			V(A());
+		};
+		try {
+			navigator.permissions.query({ name: "notifications" }).then((r) => {
+				t || (e = r, n(), r.addEventListener("change", n));
+			}).catch(() => {});
+		} catch {
+			return;
+		}
+		return () => {
+			t = !0, e?.removeEventListener("change", n);
+		};
+	}, [s]);
+	let ne = async () => {
+		if (typeof window > "u" || !("Notification" in window)) {
+			V("unsupported");
+			return;
+		}
+		U(!0);
+		try {
+			let e = await window.Notification.requestPermission();
+			V(e);
 		} catch {
-			v("Unable to load notification settings.");
+			V(A());
 		} finally {
-			m(!1);
+			U(!1);
 		}
-	}, C = async (e) => {
-		g(!0), v(null);
+	}, re = async (e) => {
 		try {
-			let t = await fetch("/api/rb/notifications/settings", {
-				method: "PUT",
+			let t = await fetch(`/api/rb/notifications/${encodeURIComponent(e)}/read`, {
+				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
-				body: JSON.stringify({
-					digestFrequency: e.digestFrequency,
-					topicPreferences: e.topicPreferences
-				})
+				keepalive: !0,
+				body: "{}"
 			}), n = await t.json().catch(() => null);
-			if (!t.ok || !n?.ok) {
-				v(n?.error || "Unable to save notification settings.");
-				return;
-			}
-			let r = c(n.settings);
-			b(x.length > 0 ? u(r, x) : r);
+			if (!t.ok || !n?.ok) return;
+			let r = (/* @__PURE__ */ new Date()).toISOString();
+			if (S) return;
+			w((t) => {
+				let n = t.find((t) => t.id === e);
+				return n && !n.readAt && E((e) => Math.max(0, e - 1)), n && !n.seenAt && O((e) => Math.max(0, e - 1)), t.map((t) => t.id === e && !t.readAt ? {
+					...t,
+					readAt: r,
+					...t.seenAt ? {} : { seenAt: r }
+				} : t);
+			});
 		} catch {
-			v("Unable to save notification settings.");
-		} finally {
-			g(!1);
+			return;
 		}
+	}, ie = async (e) => {
+		try {
+			let t = await fetch(`/api/rb/notifications/${encodeURIComponent(e)}/archive`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: "{}"
+			}), n = await t.json().catch(() => null);
+			if (!t.ok || !n?.ok || S) return;
+			w((t) => {
+				let n = t.find((t) => t.id === e);
+				return n && !n.readAt && E((e) => Math.max(0, e - 1)), n && !n.seenAt && O((e) => Math.max(0, e - 1)), t.filter((t) => t.id !== e);
+			});
+		} catch {
+			return;
+		}
+	}, $ = () => {
+		c(!1);
 	};
-	t(() => {
-		S();
-	}, []), t(() => {
-		x.length !== 0 && b((e) => u(e, x));
-	}, [x]);
-	let w = (e, t) => {
-		let n = y.topicPreferences.some((t) => t.topic === e) ? y.topicPreferences.map((n) => n.topic === e ? t(n) : n) : [...y.topicPreferences, t({
-			topic: e,
-			inApp: !0,
-			emailDigest: !0,
-			push: !1
-		})], r = c({
-			...y,
-			topicPreferences: n
-		});
-		b(r), C(r);
-	};
-	return p ? /* @__PURE__ */ a("div", {
-		className: e("flex items-center justify-center py-10 text-muted-foreground", d),
-		children: /* @__PURE__ */ a(i, { className: "h-4 w-4 animate-spin" })
-	}) : /* @__PURE__ */ o("div", {
-		className: e("space-y-4", d),
-		children: [/* @__PURE__ */ a("div", {
-			className: "rounded-md border bg-background p-4",
-			children: /* @__PURE__ */ o("div", {
-				className: "flex items-start justify-between gap-3",
-				children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
-					className: "text-sm font-semibold",
-					children: "Email digest"
-				}), /* @__PURE__ */ a("div", {
-					className: "mt-1 text-xs text-muted-foreground",
-					children: "Choose how often we email you a summary."
-				})] }), /* @__PURE__ */ a("select", {
-					value: y.digestFrequency,
-					onChange: (e) => {
-						let t = e.target.value, n = c({
-							...y,
-							digestFrequency: t
-						});
-						b(n), C(n);
-					},
-					className: "h-9 rounded-md border bg-background px-2 text-sm",
-					children: s.map((e) => /* @__PURE__ */ a("option", {
-						value: e.value,
+	return /* @__PURE__ */ v(a, {
+		open: s,
+		onOpenChange: (e) => {
+			if (e) {
+				c(!0);
+				return;
+			}
+			$();
+		},
+		children: /* @__PURE__ */ y(i, { children: [/* @__PURE__ */ v(t, {
+			className: "fixed inset-0 z-50 bg-black/50",
+			onClick: $
+		}), /* @__PURE__ */ y(r, {
+			className: e("fixed right-0 top-0 z-50 flex h-full w-full max-w-md flex-col border-l bg-background shadow-xl outline-none", p),
+			children: [/* @__PURE__ */ y("header", {
+				className: "flex items-center justify-between gap-2 border-b px-4 py-3",
+				children: [/* @__PURE__ */ y("div", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ v(o, {
+						className: "text-sm font-semibold",
+						children: "Notifications"
+					}), /* @__PURE__ */ v("span", {
+						className: "text-xs text-muted-foreground",
+						children: G > 0 ? `${G} unread` : K > 0 ? `${K} new` : "All caught up"
+					})]
+				}), /* @__PURE__ */ y("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ v("button", {
+						type: "button",
+						onClick: () => z((e) => !e),
+						className: e("rounded-md border px-2 py-1 text-xs", R ? "bg-accent text-foreground" : "bg-background text-muted-foreground hover:bg-accent"),
+						children: R ? "Unread" : "All"
+					}), /* @__PURE__ */ v(n, {
+						type: "button",
+						"aria-label": "Close notifications",
+						className: "inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
+						onClick: $,
+						children: /* @__PURE__ */ v(_, { className: "h-4 w-4" })
+					})]
+				})]
+			}), /* @__PURE__ */ y("div", {
+				className: "flex-1 overflow-y-auto px-4 pb-3",
+				children: [/* @__PURE__ */ v(N, {
+					permission: B,
+					requesting: H,
+					onEnable: ne
+				}), ee ? /* @__PURE__ */ v("div", {
+					className: "flex items-center justify-center py-10 text-muted-foreground",
+					children: /* @__PURE__ */ v(h, { className: "h-4 w-4 animate-spin" })
+				}) : q ? /* @__PURE__ */ v("div", {
+					className: "py-10 text-center text-sm text-muted-foreground",
+					children: q
+				}) : J.length === 0 ? /* @__PURE__ */ v("div", {
+					className: "py-10 text-center text-sm text-muted-foreground",
+					children: "No notifications."
+				}) : /* @__PURE__ */ y("div", {
+					className: "flex flex-col gap-4",
+					children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+						className: "sticky top-0 z-20 -mx-4 flex h-8 items-center border-b bg-background px-4 text-xs font-semibold text-muted-foreground",
+						children: "Unread notifications"
+					}), Z.length === 0 ? /* @__PURE__ */ v("div", {
+						className: "py-6 text-center text-sm text-muted-foreground",
+						children: "No unread notifications."
+					}) : Z.map((e) => /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+						className: "sticky top-8 z-10 -mx-4 flex h-7 items-center bg-background px-4 text-[11px] font-semibold text-muted-foreground",
+						children: e.label
+					}), /* @__PURE__ */ v("div", {
+						className: "-mx-4 flex flex-col divide-y divide-border",
+						children: e.items.map((e) => /* @__PURE__ */ v(P, {
+							notification: e,
+							onMarkRead: re,
+							onArchive: ie,
+							onAction: $
+						}, e.id))
+					})] }, `unread:${e.key}`))] }), R ? null : /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+						className: "sticky top-0 z-20 -mx-4 flex h-8 items-center border-b bg-background px-4 text-xs font-semibold text-muted-foreground",
+						children: "Previous notifications"
+					}), te.length === 0 ? /* @__PURE__ */ v("div", {
+						className: "py-6 text-center text-sm text-muted-foreground",
+						children: "No previous notifications."
+					}) : te.map((e) => /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+						className: "sticky top-8 z-10 -mx-4 flex h-7 items-center bg-background px-4 text-[11px] font-semibold text-muted-foreground",
 						children: e.label
-					}, e.value))
+					}), /* @__PURE__ */ v("div", {
+						className: "-mx-4 flex flex-col divide-y divide-border",
+						children: e.items.map((e) => /* @__PURE__ */ v(P, {
+							notification: e,
+							onMarkRead: re,
+							onArchive: ie,
+							onAction: $
+						}, e.id))
+					})] }, `previous:${e.key}`))] })]
 				})]
-			})
-		}), /* @__PURE__ */ o("div", {
-			className: "rounded-md border bg-background p-4",
-			children: [
-				/* @__PURE__ */ a("div", {
-					className: "flex items-start justify-between gap-3",
-					children: /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
-						className: "text-sm font-semibold",
-						children: "Topics"
-					}), /* @__PURE__ */ a("div", {
-						className: "mt-1 text-xs text-muted-foreground",
-						children: "Choose where you receive each topic."
-					})] })
-				}),
-				x.length === 0 ? /* @__PURE__ */ a("div", {
-					className: "mt-4 text-sm text-muted-foreground",
-					children: "No topics configured."
-				}) : /* @__PURE__ */ a("div", {
-					className: "mt-4 overflow-x-auto",
-					children: /* @__PURE__ */ o("table", {
-						className: "w-full text-sm",
-						children: [/* @__PURE__ */ a("thead", { children: /* @__PURE__ */ o("tr", {
-							className: "text-left text-xs text-muted-foreground",
-							children: [
-								/* @__PURE__ */ a("th", {
-									className: "py-2 pr-4 font-medium",
-									children: "Topic"
-								}),
-								/* @__PURE__ */ a("th", {
-									className: "py-2 pr-4 font-medium",
-									children: "In-app"
-								}),
-								/* @__PURE__ */ a("th", {
-									className: "py-2 pr-4 font-medium",
-									children: "Email digest"
-								}),
-								/* @__PURE__ */ a("th", {
-									className: "py-2 pr-4 font-medium",
-									children: "Push"
-								})
-							]
-						}) }), /* @__PURE__ */ a("tbody", { children: y.topicPreferences.map((e) => {
-							let t = x.find((t) => t.topic === e.topic);
-							return /* @__PURE__ */ o("tr", {
-								className: "border-t align-top",
-								children: [
-									/* @__PURE__ */ a("td", {
-										className: "py-3 pr-4",
-										children: /* @__PURE__ */ o("div", {
-											className: "flex flex-col gap-1",
-											children: [
-												/* @__PURE__ */ a("span", {
-													className: "font-medium",
-													children: t?.title || e.topic
-												}),
-												t?.description ? /* @__PURE__ */ a("span", {
-													className: "text-xs text-muted-foreground",
-													children: t.description
-												}) : null,
-												/* @__PURE__ */ a("span", {
-													className: "text-[11px] text-muted-foreground",
-													children: e.topic
-												})
-											]
-										})
-									}),
-									/* @__PURE__ */ a("td", {
-										className: "py-3 pr-4",
-										children: /* @__PURE__ */ a("input", {
-											type: "checkbox",
-											checked: e.inApp,
-											onChange: (t) => w(e.topic, (e) => ({
-												...e,
-												inApp: t.target.checked
-											}))
-										})
-									}),
-									/* @__PURE__ */ a("td", {
-										className: "py-3 pr-4",
-										children: /* @__PURE__ */ a("input", {
-											type: "checkbox",
-											checked: e.emailDigest,
-											onChange: (t) => w(e.topic, (e) => ({
-												...e,
-												emailDigest: t.target.checked
-											}))
-										})
-									}),
-									/* @__PURE__ */ a("td", {
-										className: "py-3 pr-4",
-										children: /* @__PURE__ */ a("input", {
-											type: "checkbox",
-											checked: e.push,
-											disabled: !0,
-											className: "opacity-50",
-											"aria-label": "Push notifications (coming soon)"
-										})
-									})
-								]
-							}, e.topic);
-						}) })]
-					})
-				}),
-				_ ? /* @__PURE__ */ a("div", {
-					className: "mt-3 text-sm text-destructive",
-					children: _
-				}) : h ? /* @__PURE__ */ a("div", {
-					className: "mt-3 text-xs text-muted-foreground",
-					children: "Saving…"
-				}) : null
-			]
-		})]
+			})]
+		})] })
 	});
 }
+function N(e) {
+	let t = s(13), { permission: n, requesting: r, onEnable: i } = e;
+	if (n === "granted") return null;
+	if (n === "unsupported") {
+		let e;
+		return t[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ v("div", {
+			className: "mt-3 rounded-md border bg-muted/40 p-3 text-sm text-muted-foreground",
+			children: "Browser notifications are not supported by this browser."
+		}), t[0] = e) : e = t[0], e;
+	}
+	let a = n === "denied", o = a ? "Browser notifications are blocked." : "Browser notifications are not enabled.", c;
+	t[1] === o ? c = t[2] : (c = /* @__PURE__ */ v("div", {
+		className: "text-sm font-medium",
+		children: o
+	}), t[1] = o, t[2] = c);
+	let l = a ? "Enable notifications for this site in your browser settings, then click again." : "Enable browser notifications to receive important alerts.", u;
+	t[3] === l ? u = t[4] : (u = /* @__PURE__ */ v("div", {
+		className: "mt-1 text-xs text-muted-foreground",
+		children: l
+	}), t[3] = l, t[4] = u);
+	let d = r ? "Enabling..." : "Enable browser notifications", f;
+	t[5] !== i || t[6] !== r || t[7] !== d ? (f = /* @__PURE__ */ v("button", {
+		type: "button",
+		className: "mt-3 inline-flex h-8 items-center rounded-md border bg-background px-2.5 text-xs font-medium hover:bg-accent disabled:pointer-events-none disabled:opacity-50",
+		disabled: r,
+		onClick: i,
+		children: d
+	}), t[5] = i, t[6] = r, t[7] = d, t[8] = f) : f = t[8];
+	let p;
+	return t[9] !== c || t[10] !== u || t[11] !== f ? (p = /* @__PURE__ */ y("div", {
+		className: "mt-3 rounded-md border bg-muted/40 p-3",
+		children: [
+			c,
+			u,
+			f
+		]
+	}), t[9] = c, t[10] = u, t[11] = f, t[12] = p) : p = t[12], p;
+}
+function P(t) {
+	let n = s(49), { notification: r, onMarkRead: i, onArchive: a, onAction: o } = t, [c, l] = m(!1), u = p(null), f = p(null), h = !r.readAt, _, x;
+	n[0] === r ? (_ = n[1], x = n[2]) : (_ = T(r), x = E(_), n[0] = r, n[1] = _, n[2] = x);
+	let S = x, C;
+	if (n[3] !== r.createdAt) {
+		bb0: {
+			let e = new Date(b(r.createdAt));
+			if (!Number.isFinite(e.getTime())) {
+				C = "";
+				break bb0;
+			}
+			C = e.toLocaleString();
+		}
+		n[3] = r.createdAt, n[4] = C;
+	} else C = n[4];
+	let w = C, D, k;
+	n[5] === c ? (D = n[6], k = n[7]) : (D = () => {
+		if (!c) return;
+		let e = (e) => {
+			let t = e.target;
+			t instanceof Node && (u.current?.contains(t) || f.current?.contains(t) || l(!1));
+		}, t = (e) => {
+			e.key === "Escape" && (l(!1), f.current?.focus());
+		};
+		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
+		};
+	}, k = [c], n[5] = c, n[6] = D, n[7] = k), d(D, k);
+	let A = h ? "bg-primary/5" : "bg-background", j;
+	n[8] === A ? j = n[9] : (j = e("group flex w-full gap-3 px-4 py-3 hover:bg-accent/40", A), n[8] = A, n[9] = j);
+	let M;
+	n[10] !== _ || n[11] !== h || n[12] !== r.id || n[13] !== o || n[14] !== i ? (M = () => {
+		h && i(r.id), _ && (o(), O(_));
+	}, n[10] = _, n[11] = h, n[12] = r.id, n[13] = o, n[14] = i, n[15] = M) : M = n[15];
+	let N;
+	n[16] === r.title ? N = n[17] : (N = /* @__PURE__ */ v("div", {
+		className: "truncate text-sm font-semibold",
+		children: r.title
+	}), n[16] = r.title, n[17] = N);
+	let P;
+	n[18] === r.body ? P = n[19] : (P = r.body ? /* @__PURE__ */ v("div", {
+		className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground",
+		children: r.body
+	}) : null, n[18] = r.body, n[19] = P);
+	let I;
+	n[20] !== N || n[21] !== P ? (I = /* @__PURE__ */ y("div", {
+		className: "min-w-0",
+		children: [N, P]
+	}), n[20] = N, n[21] = P, n[22] = I) : I = n[22];
+	let L;
+	n[23] === S ? L = n[24] : (L = S ? /* @__PURE__ */ v("div", {
+		className: "mt-2 truncate text-xs text-primary",
+		children: S
+	}) : null, n[23] = S, n[24] = L);
+	let R;
+	n[25] === w ? R = n[26] : (R = w ? /* @__PURE__ */ v("div", {
+		className: "mt-2 text-[11px] text-muted-foreground",
+		children: w
+	}) : null, n[25] = w, n[26] = R);
+	let z;
+	n[27] !== I || n[28] !== L || n[29] !== R || n[30] !== M ? (z = /* @__PURE__ */ y("button", {
+		type: "button",
+		className: "min-w-0 flex-1 text-left",
+		onClick: M,
+		children: [
+			I,
+			L,
+			R
+		]
+	}), n[27] = I, n[28] = L, n[29] = R, n[30] = M, n[31] = z) : z = n[31];
+	let B, V;
+	n[32] === Symbol.for("react.memo_cache_sentinel") ? (B = () => {
+		l(F);
+	}, V = /* @__PURE__ */ v(g, { className: "h-4 w-4" }), n[32] = B, n[33] = V) : (B = n[32], V = n[33]);
+	let H;
+	n[34] === c ? H = n[35] : (H = /* @__PURE__ */ v("button", {
+		ref: f,
+		type: "button",
+		className: "inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
+		"aria-label": "Notification options",
+		"aria-haspopup": "menu",
+		"aria-expanded": c,
+		onClick: B,
+		children: V
+	}), n[34] = c, n[35] = H);
+	let U;
+	n[36] !== h || n[37] !== c || n[38] !== r.id || n[39] !== a || n[40] !== i ? (U = c ? /* @__PURE__ */ y("div", {
+		ref: u,
+		role: "menu",
+		className: e("absolute right-0 top-full z-50 mt-1 min-w-[10rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "animate-in fade-in-0 zoom-in-95"),
+		children: [/* @__PURE__ */ v("button", {
+			type: "button",
+			role: "menuitem",
+			className: "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground",
+			onClick: () => {
+				l(!1), a(r.id);
+			},
+			children: "Archive"
+		}), /* @__PURE__ */ v("button", {
+			type: "button",
+			role: "menuitem",
+			className: "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+			disabled: !h,
+			onClick: () => {
+				l(!1), i(r.id);
+			},
+			children: "Mark as read"
+		})]
+	}) : null, n[36] = h, n[37] = c, n[38] = r.id, n[39] = a, n[40] = i, n[41] = U) : U = n[41];
+	let W;
+	n[42] !== H || n[43] !== U ? (W = /* @__PURE__ */ y("div", {
+		className: "relative flex items-start",
+		children: [H, U]
+	}), n[42] = H, n[43] = U, n[44] = W) : W = n[44];
+	let G;
+	return n[45] !== z || n[46] !== W || n[47] !== j ? (G = /* @__PURE__ */ y("div", {
+		className: j,
+		children: [z, W]
+	}), n[45] = z, n[46] = W, n[47] = j, n[48] = G) : G = n[48], G;
+}
+function F(e) {
+	return !e;
+}
 //#endregion
-export { d as NotificationsSettings };
+export { M as NotificationsDrawer };
 
 //# sourceMappingURL=index421.js.map