@rpcbase/ui 0.236.0 → 0.238.0

package/dist/index16.js

@@ -1,30 +1,30 @@
 import { j as t } from "./index30.js";
-import { c as X } from "./index28.js";
-import { useContext as q, useState as z, useMemo as B, useCallback as H, useEffect as Y, createContext as Q, useRef as G } from "react";
-import { X as Z, Loader2 as _, MoreVertical as ee } from "lucide-react";
-import { cn as K } from "./index2.js";
-import { DialogRoot as te } from "./index34.js";
-import { DialogPortal as ne } from "./index39.js";
-import { DialogBackdrop as oe } from "./index38.js";
-import { DialogPopup as re } from "./index36.js";
-import { DialogTitle as se } from "./index40.js";
-import { DialogClose as ie } from "./index35.js";
-const V = (s) => {
-  const e = Date.parse(s);
+import { c as te } from "./index28.js";
+import { useContext as ie, useState as U, useRef as H, useMemo as G, useCallback as re, useEffect as W, createContext as se } from "react";
+import { X as ae, Loader2 as ce, MoreVertical as le } from "lucide-react";
+import { cn as V } from "./index2.js";
+import { DialogRoot as de } from "./index34.js";
+import { DialogPortal as ue } from "./index39.js";
+import { DialogBackdrop as me } from "./index38.js";
+import { DialogPopup as fe } from "./index36.js";
+import { DialogTitle as xe } from "./index40.js";
+import { DialogClose as he } from "./index35.js";
+const ne = (o) => {
+  const e = Date.parse(o);
   return Number.isFinite(e) ? e : 0;
-}, ae = (s) => {
-  const e = new Date(V(s));
+}, pe = (o) => {
+  const e = new Date(ne(o));
   if (!Number.isFinite(e.getTime())) return "unknown";
-  const n = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), c = String(e.getDate()).padStart(2, "0");
-  return `${n}-${i}-${c}`;
-}, ce = (s) => {
-  if (s === "unknown") return "Unknown date";
-  const [e, n, i] = s.split("-"), c = Number(e), l = Number(n), r = Number(i);
-  if (!Number.isFinite(c) || !Number.isFinite(l) || !Number.isFinite(r)) return "Unknown date";
-  const U = new Date(c, l - 1, r);
-  if (!Number.isFinite(U.getTime())) return "Unknown date";
-  const x = (/* @__PURE__ */ new Date()).getFullYear() !== c;
-  return U.toLocaleDateString(void 0, x ? {
+  const n = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0");
+  return `${n}-${r}-${a}`;
+}, be = (o) => {
+  if (o === "unknown") return "Unknown date";
+  const [e, n, r] = o.split("-"), a = Number(e), y = Number(n), i = Number(r);
+  if (!Number.isFinite(a) || !Number.isFinite(y) || !Number.isFinite(i)) return "Unknown date";
+  const c = new Date(a, y - 1, i);
+  if (!Number.isFinite(c.getTime())) return "Unknown date";
+  const m = (/* @__PURE__ */ new Date()).getFullYear() !== a;
+  return c.toLocaleDateString(void 0, m ? {
     weekday: "short",
     month: "short",
     day: "numeric",
@@ -34,65 +34,88 @@ const V = (s) => {
     month: "short",
     day: "numeric"
   });
-}, le = (s) => {
-  const e = s.platform?.webpush;
-  if (!e || typeof e != "object" || Array.isArray(e)) return "";
-  const n = e.fcmOptions;
-  return !n || typeof n != "object" || Array.isArray(n) ? "" : typeof n.link == "string" ? n.link : "";
-}, J = (s) => {
+}, ge = (o) => {
+  const e = o.data?.link?.trim();
+  if (e) return e;
+  const n = o.platform?.webpush;
+  if (!n || typeof n != "object" || Array.isArray(n)) return "";
+  const r = n.fcmOptions;
+  if (!r || typeof r != "object" || Array.isArray(r)) return "";
+  const a = r.link;
+  return typeof a == "string" ? a.trim() : "";
+}, ye = (o) => o.data?.linkMode === "merge_current_search" ? "merge_current_search" : "navigate", we = (o) => {
+  const e = ge(o);
+  return e ? {
+    link: e,
+    mode: ye(o)
+  } : null;
+}, ve = (o) => {
+  window.history.pushState(window.history.state, "", o), window.dispatchEvent(new PopStateEvent("popstate", {
+    state: window.history.state
+  }));
+}, Ne = (o) => {
+  if (o.mode === "merge_current_search") {
+    const e = new URL(window.location.href), n = new URL(o.link, e);
+    n.searchParams.forEach((r, a) => {
+      e.searchParams.set(a, r);
+    }), n.hash && (e.hash = n.hash), ve(`${e.pathname}${e.search}${e.hash}`);
+    return;
+  }
+  window.location.href = o.link;
+}, Z = (o) => {
   const e = [];
   let n = null;
-  for (const i of s) {
-    const c = ae(i.createdAt);
-    c !== n && (n = c, e.push({
-      key: c,
-      label: ce(c),
+  for (const r of o) {
+    const a = pe(r.createdAt);
+    a !== n && (n = a, e.push({
+      key: a,
+      label: be(a),
       items: []
-    })), e[e.length - 1].items.push(i);
+    })), e[e.length - 1].items.push(r);
   }
   return e;
-}, de = Q(null);
-function we({
-  open: s,
+}, J = () => typeof window > "u" || !("Notification" in window) ? "unsupported" : window.Notification.permission, je = se(null);
+function Be({
+  open: o,
   onOpenChange: e,
   className: n,
-  limit: i = 50,
-  defaultUnreadOnly: c = !1,
-  realtimeContext: l
+  limit: r = 50,
+  defaultUnreadOnly: a = !1,
+  realtimeContext: y
 }) {
-  const r = q(l ?? de), [U, D] = z([]), [x, S] = z(0), [b, y] = z(0), [I, E] = z(!1), [P, L] = z(null), [d, M] = z(c), v = r?.notifications ?? U, j = r?.unreadCount ?? x, N = r?.unseenCount ?? b, R = r?.loading ?? I, w = r?.error ? r.error instanceof Error ? r.error.message : String(r.error) : P, m = B(() => v.slice(0, i), [i, v]), T = B(() => m.filter((o) => !o.readAt), [m]), F = B(() => m.filter((o) => !!o.readAt), [m]), k = B(() => J(T), [T]), A = B(() => J(F), [F]), p = H(async ({
-    unreadOnly: o,
-    markSeen: a
+  const i = ie(y ?? je), [c, w] = U([]), [m, u] = U(0), [x, f] = U(0), [v, M] = U(!1), [q, L] = U(null), [h, K] = U(a), [O, p] = U(() => J()), [$, k] = U(!1), A = H(null), C = i?.notifications ?? c, R = i?.unreadCount ?? m, S = i?.unseenCount ?? x, z = i?.loading ?? v, T = i?.error ? i.error instanceof Error ? i.error.message : String(i.error) : q, b = G(() => C.slice(0, r), [r, C]), E = G(() => b.filter((s) => !s.readAt), [b]), D = G(() => b.filter((s) => !!s.readAt), [b]), F = G(() => Z(E), [E]), B = G(() => Z(D), [D]), I = re(async ({
+    unreadOnly: s,
+    markSeen: d
   }) => {
-    E(!0), L(null);
+    M(!0), L(null);
     try {
-      const g = await fetch("/api/rb/notifications", {
+      const j = await fetch("/api/rb/notifications", {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         credentials: "include",
         body: JSON.stringify({
-          limit: i,
-          unreadOnly: o,
-          markSeen: a
+          limit: r,
+          unreadOnly: s,
+          markSeen: d
         })
-      }), u = await g.json().catch(() => null);
-      if (!g.ok || !u?.ok) {
-        L(u?.error || "Unable to load notifications.");
+      }), l = await j.json().catch(() => null);
+      if (!j.ok || !l?.ok) {
+        L(l?.error || "Unable to load notifications.");
         return;
       }
-      const C = Array.isArray(u.notifications) ? u.notifications : [];
-      D(C), S(Number.isFinite(u.unreadCount) ? Math.max(0, Math.floor(u.unreadCount ?? 0)) : 0), y(Number.isFinite(u.unseenCount) ? Math.max(0, Math.floor(u.unseenCount ?? 0)) : 0);
+      const P = Array.isArray(l.notifications) ? l.notifications : [];
+      w(P), u(Number.isFinite(l.unreadCount) ? Math.max(0, Math.floor(l.unreadCount ?? 0)) : 0), f(Number.isFinite(l.unseenCount) ? Math.max(0, Math.floor(l.unseenCount ?? 0)) : 0);
     } catch {
       L("Unable to load notifications.");
     } finally {
-      E(!1);
+      M(!1);
     }
-  }, [i]);
-  Y(() => {
-    if (s) {
-      if (r) {
+  }, [r]);
+  W(() => {
+    if (o) {
+      if (i) {
         (async () => {
           try {
             await fetch("/api/rb/notifications", {
@@ -113,20 +136,53 @@ function we({
         })();
         return;
       }
-      p({
-        unreadOnly: d,
+      I({
+        unreadOnly: h,
         markSeen: !0
       });
     }
-  }, [s, r, p, d]), Y(() => {
-    s && (r || p({
-      unreadOnly: d,
+  }, [o, i, I, h]), W(() => {
+    o && (i || I({
+      unreadOnly: h,
       markSeen: !1
     }));
-  }, [s, r, p, d]);
-  const $ = async (o) => {
+  }, [o, i, I, h]), W(() => {
+    if (!o || (p(J()), typeof navigator > "u" || !navigator.permissions?.query)) return;
+    let s = null, d = !1;
+    const j = () => {
+      p(J());
+    };
+    try {
+      navigator.permissions.query({
+        name: "notifications"
+      }).then((l) => {
+        d || (s = l, j(), l.addEventListener("change", j));
+      }).catch(() => {
+      });
+    } catch {
+      return;
+    }
+    return () => {
+      d = !0, s?.removeEventListener("change", j);
+    };
+  }, [o]);
+  const Y = async () => {
+    if (typeof window > "u" || !("Notification" in window)) {
+      p("unsupported");
+      return;
+    }
+    k(!0);
     try {
-      const a = await fetch(`/api/rb/notifications/${encodeURIComponent(o)}/read`, {
+      const s = await window.Notification.requestPermission();
+      p(s);
+    } catch {
+      p(J());
+    } finally {
+      k(!1);
+    }
+  }, _ = async (s) => {
+    try {
+      const d = await fetch(`/api/rb/notifications/${encodeURIComponent(s)}/read`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -134,167 +190,207 @@ function we({
         credentials: "include",
         keepalive: !0,
         body: "{}"
-      }), g = await a.json().catch(() => null);
-      if (!a.ok || !g?.ok) return;
-      const u = (/* @__PURE__ */ new Date()).toISOString();
-      if (r) return;
-      D((C) => {
-        const f = C.find((h) => h.id === o);
-        return f && !f.readAt && S((h) => Math.max(0, h - 1)), f && !f.seenAt && y((h) => Math.max(0, h - 1)), C.map((h) => h.id === o && !h.readAt ? {
-          ...h,
-          readAt: u,
-          ...h.seenAt ? {} : {
-            seenAt: u
+      }), j = await d.json().catch(() => null);
+      if (!d.ok || !j?.ok) return;
+      const l = (/* @__PURE__ */ new Date()).toISOString();
+      if (i) return;
+      w((P) => {
+        const g = P.find((N) => N.id === s);
+        return g && !g.readAt && u((N) => Math.max(0, N - 1)), g && !g.seenAt && f((N) => Math.max(0, N - 1)), P.map((N) => N.id === s && !N.readAt ? {
+          ...N,
+          readAt: l,
+          ...N.seenAt ? {} : {
+            seenAt: l
           }
-        } : h);
+        } : N);
       });
     } catch {
       return;
     }
-  }, O = async (o) => {
+  }, Q = async (s) => {
     try {
-      const a = await fetch(`/api/rb/notifications/${encodeURIComponent(o)}/archive`, {
+      const d = await fetch(`/api/rb/notifications/${encodeURIComponent(s)}/archive`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         credentials: "include",
         body: "{}"
-      }), g = await a.json().catch(() => null);
-      if (!a.ok || !g?.ok || r) return;
-      D((u) => {
-        const C = u.find((f) => f.id === o);
-        return C && !C.readAt && S((f) => Math.max(0, f - 1)), C && !C.seenAt && y((f) => Math.max(0, f - 1)), u.filter((f) => f.id !== o);
+      }), j = await d.json().catch(() => null);
+      if (!d.ok || !j?.ok || i) return;
+      w((l) => {
+        const P = l.find((g) => g.id === s);
+        return P && !P.readAt && u((g) => Math.max(0, g - 1)), P && !P.seenAt && f((g) => Math.max(0, g - 1)), l.filter((g) => g.id !== s);
       });
     } catch {
       return;
     }
+  }, X = () => {
+    e(!1), A.current?.unmount();
+  }, oe = (s) => {
+    if (s) {
+      e(!0);
+      return;
+    }
+    X();
   };
-  return /* @__PURE__ */ t.jsx(te, { open: s, onOpenChange: e, children: /* @__PURE__ */ t.jsxs(ne, { children: [
-    /* @__PURE__ */ t.jsx(oe, { className: "fixed inset-0 z-50 bg-black/50" }),
-    /* @__PURE__ */ t.jsxs(re, { className: K("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", n), children: [
+  return /* @__PURE__ */ t.jsx(de, { open: o, onOpenChange: oe, actionsRef: A, children: /* @__PURE__ */ t.jsxs(ue, { children: [
+    /* @__PURE__ */ t.jsx(me, { className: "fixed inset-0 z-50 bg-black/50" }),
+    /* @__PURE__ */ t.jsxs(fe, { className: V("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", n), children: [
       /* @__PURE__ */ t.jsxs("header", { className: "flex items-center justify-between gap-2 border-b px-4 py-3", children: [
         /* @__PURE__ */ t.jsxs("div", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ t.jsx(se, { className: "text-sm font-semibold", children: "Notifications" }),
-          /* @__PURE__ */ t.jsx("span", { className: "text-xs text-muted-foreground", children: j > 0 ? `${j} unread` : N > 0 ? `${N} new` : "All caught up" })
+          /* @__PURE__ */ t.jsx(xe, { className: "text-sm font-semibold", children: "Notifications" }),
+          /* @__PURE__ */ t.jsx("span", { className: "text-xs text-muted-foreground", children: R > 0 ? `${R} unread` : S > 0 ? `${S} new` : "All caught up" })
         ] }),
         /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ t.jsx("button", { type: "button", onClick: () => M((o) => !o), className: K("rounded-md border px-2 py-1 text-xs", d ? "bg-accent text-foreground" : "bg-background text-muted-foreground hover:bg-accent"), children: d ? "Unread" : "All" }),
-          /* @__PURE__ */ t.jsx(ie, { render: /* @__PURE__ */ t.jsx("button", { type: "button", className: "inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent" }), children: /* @__PURE__ */ t.jsx(Z, { className: "h-4 w-4" }) })
+          /* @__PURE__ */ t.jsx("button", { type: "button", onClick: () => K((s) => !s), className: V("rounded-md border px-2 py-1 text-xs", h ? "bg-accent text-foreground" : "bg-background text-muted-foreground hover:bg-accent"), children: h ? "Unread" : "All" }),
+          /* @__PURE__ */ t.jsx(he, { render: /* @__PURE__ */ t.jsx("button", { type: "button", className: "inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent" }), children: /* @__PURE__ */ t.jsx(ae, { className: "h-4 w-4" }) })
         ] })
       ] }),
-      /* @__PURE__ */ t.jsx("div", { className: "flex-1 overflow-y-auto px-4 pb-3", children: R ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center justify-center py-10 text-muted-foreground", children: /* @__PURE__ */ t.jsx(_, { className: "h-4 w-4 animate-spin" }) }) : w ? /* @__PURE__ */ t.jsx("div", { className: "py-10 text-center text-sm text-muted-foreground", children: w }) : m.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-10 text-center text-sm text-muted-foreground", children: "No notifications." }) : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ t.jsxs("div", { children: [
-          /* @__PURE__ */ t.jsx("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" }),
-          k.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No unread notifications." }) : k.map((o) => /* @__PURE__ */ t.jsxs("div", { children: [
-            /* @__PURE__ */ t.jsx("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: o.label }),
-            /* @__PURE__ */ t.jsx("div", { className: "-mx-4 flex flex-col divide-y divide-border", children: o.items.map((a) => /* @__PURE__ */ t.jsx(W, { notification: a, onMarkRead: $, onArchive: O }, a.id)) })
-          ] }, `unread:${o.key}`))
-        ] }),
-        d ? null : /* @__PURE__ */ t.jsxs("div", { children: [
-          /* @__PURE__ */ t.jsx("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" }),
-          A.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No previous notifications." }) : A.map((o) => /* @__PURE__ */ t.jsxs("div", { children: [
-            /* @__PURE__ */ t.jsx("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: o.label }),
-            /* @__PURE__ */ t.jsx("div", { className: "-mx-4 flex flex-col divide-y divide-border", children: o.items.map((a) => /* @__PURE__ */ t.jsx(W, { notification: a, onMarkRead: $, onArchive: O }, a.id)) })
-          ] }, `previous:${o.key}`))
+      /* @__PURE__ */ t.jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-3", children: [
+        /* @__PURE__ */ t.jsx(ke, { permission: O, requesting: $, onEnable: Y }),
+        z ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center justify-center py-10 text-muted-foreground", children: /* @__PURE__ */ t.jsx(ce, { className: "h-4 w-4 animate-spin" }) }) : T ? /* @__PURE__ */ t.jsx("div", { className: "py-10 text-center text-sm text-muted-foreground", children: T }) : b.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-10 text-center text-sm text-muted-foreground", children: "No notifications." }) : /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ t.jsxs("div", { children: [
+            /* @__PURE__ */ t.jsx("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" }),
+            F.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No unread notifications." }) : F.map((s) => /* @__PURE__ */ t.jsxs("div", { children: [
+              /* @__PURE__ */ t.jsx("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: s.label }),
+              /* @__PURE__ */ t.jsx("div", { className: "-mx-4 flex flex-col divide-y divide-border", children: s.items.map((d) => /* @__PURE__ */ t.jsx(ee, { notification: d, onMarkRead: _, onArchive: Q, onAction: X }, d.id)) })
+            ] }, `unread:${s.key}`))
+          ] }),
+          h ? null : /* @__PURE__ */ t.jsxs("div", { children: [
+            /* @__PURE__ */ t.jsx("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" }),
+            B.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No previous notifications." }) : B.map((s) => /* @__PURE__ */ t.jsxs("div", { children: [
+              /* @__PURE__ */ t.jsx("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: s.label }),
+              /* @__PURE__ */ t.jsx("div", { className: "-mx-4 flex flex-col divide-y divide-border", children: s.items.map((d) => /* @__PURE__ */ t.jsx(ee, { notification: d, onMarkRead: _, onArchive: Q, onAction: X }, d.id)) })
+            ] }, `previous:${s.key}`))
+          ] })
         ] })
-      ] }) })
+      ] })
     ] })
   ] }) });
 }
-function W(s) {
-  const e = X.c(47), {
+function ke(o) {
+  const e = te.c(13), {
+    permission: n,
+    requesting: r,
+    onEnable: a
+  } = o;
+  if (n === "granted")
+    return null;
+  if (n === "unsupported") {
+    let v;
+    return e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ t.jsx("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." }), e[0] = v) : v = e[0], v;
+  }
+  const y = n === "denied", i = y ? "Browser notifications are blocked." : "Browser notifications are not enabled.";
+  let c;
+  e[1] !== i ? (c = /* @__PURE__ */ t.jsx("div", { className: "text-sm font-medium", children: i }), e[1] = i, e[2] = c) : c = e[2];
+  const w = y ? "Enable notifications for this site in your browser settings, then click again." : "Enable browser notifications to receive important alerts.";
+  let m;
+  e[3] !== w ? (m = /* @__PURE__ */ t.jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: w }), e[3] = w, e[4] = m) : m = e[4];
+  const u = r ? "Enabling..." : "Enable browser notifications";
+  let x;
+  e[5] !== a || e[6] !== r || e[7] !== u ? (x = /* @__PURE__ */ t.jsx("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: a, children: u }), e[5] = a, e[6] = r, e[7] = u, e[8] = x) : x = e[8];
+  let f;
+  return e[9] !== c || e[10] !== m || e[11] !== x ? (f = /* @__PURE__ */ t.jsxs("div", { className: "mt-3 rounded-md border bg-muted/40 p-3", children: [
+    c,
+    m,
+    x
+  ] }), e[9] = c, e[10] = m, e[11] = x, e[12] = f) : f = e[12], f;
+}
+function ee(o) {
+  const e = te.c(48), {
     notification: n,
-    onMarkRead: i,
-    onArchive: c
-  } = s, [l, r] = z(!1), U = G(null), D = G(null), x = !n.readAt;
-  let S;
-  e[0] !== n ? (S = le(n), e[0] = n, e[1] = S) : S = e[1];
-  const b = S;
-  let y;
+    onMarkRead: r,
+    onArchive: a,
+    onAction: y
+  } = o, [i, c] = U(!1), w = H(null), m = H(null), u = !n.readAt;
+  let x;
+  e[0] !== n ? (x = we(n), e[0] = n, e[1] = x) : x = e[1];
+  const f = x, v = f?.link ?? "";
+  let M;
   if (e[2] !== n.createdAt) {
     e: {
-      const O = new Date(V(n.createdAt));
-      if (!Number.isFinite(O.getTime())) {
-        y = "";
+      const B = new Date(ne(n.createdAt));
+      if (!Number.isFinite(B.getTime())) {
+        M = "";
         break e;
       }
-      y = O.toLocaleString();
+      M = B.toLocaleString();
     }
-    e[2] = n.createdAt, e[3] = y;
+    e[2] = n.createdAt, e[3] = M;
   } else
-    y = e[3];
-  const I = y;
-  let E, P;
-  e[4] !== l ? (E = () => {
-    if (!l)
+    M = e[3];
+  const q = M;
+  let L, h;
+  e[4] !== i ? (L = () => {
+    if (!i)
       return;
-    const O = (a) => {
-      const g = a.target;
-      g instanceof Node && (U.current?.contains(g) || D.current?.contains(g) || r(!1));
-    }, o = (a) => {
-      a.key === "Escape" && (r(!1), D.current?.focus());
+    const B = (Y) => {
+      const _ = Y.target;
+      _ instanceof Node && (w.current?.contains(_) || m.current?.contains(_) || c(!1));
+    }, I = (Y) => {
+      Y.key === "Escape" && (c(!1), m.current?.focus());
     };
-    return document.addEventListener("pointerdown", O), document.addEventListener("keydown", o), () => {
-      document.removeEventListener("pointerdown", O), document.removeEventListener("keydown", o);
+    return document.addEventListener("pointerdown", B), document.addEventListener("keydown", I), () => {
+      document.removeEventListener("pointerdown", B), document.removeEventListener("keydown", I);
     };
-  }, P = [l], e[4] = l, e[5] = E, e[6] = P) : (E = e[5], P = e[6]), Y(E, P);
-  const L = x ? "bg-primary/5" : "bg-background";
-  let d;
-  e[7] !== L ? (d = K("group flex w-full gap-3 px-4 py-3 hover:bg-accent/40", L), e[7] = L, e[8] = d) : d = e[8];
-  let M;
-  e[9] !== x || e[10] !== b || e[11] !== n.id || e[12] !== i ? (M = () => {
-    x && i(n.id), b && (window.location.href = b);
-  }, e[9] = x, e[10] = b, e[11] = n.id, e[12] = i, e[13] = M) : M = e[13];
-  let v;
-  e[14] !== n.title ? (v = /* @__PURE__ */ t.jsx("div", { className: "truncate text-sm font-semibold", children: n.title }), e[14] = n.title, e[15] = v) : v = e[15];
-  let j;
-  e[16] !== n.body ? (j = n.body ? /* @__PURE__ */ t.jsx("div", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: n.body }) : null, e[16] = n.body, e[17] = j) : j = e[17];
-  let N;
-  e[18] !== v || e[19] !== j ? (N = /* @__PURE__ */ t.jsxs("div", { className: "min-w-0", children: [
-    v,
-    j
-  ] }), e[18] = v, e[19] = j, e[20] = N) : N = e[20];
-  let R;
-  e[21] !== b ? (R = b ? /* @__PURE__ */ t.jsx("div", { className: "mt-2 truncate text-xs text-primary", children: b }) : null, e[21] = b, e[22] = R) : R = e[22];
-  let w;
-  e[23] !== I ? (w = I ? /* @__PURE__ */ t.jsx("div", { className: "mt-2 text-[11px] text-muted-foreground", children: I }) : null, e[23] = I, e[24] = w) : w = e[24];
-  let m;
-  e[25] !== N || e[26] !== R || e[27] !== w || e[28] !== M ? (m = /* @__PURE__ */ t.jsxs("button", { type: "button", className: "min-w-0 flex-1 text-left", onClick: M, children: [
-    N,
-    R,
-    w
-  ] }), e[25] = N, e[26] = R, e[27] = w, e[28] = M, e[29] = m) : m = e[29];
-  let T, F;
-  e[30] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (T = () => {
-    r(ue);
-  }, F = /* @__PURE__ */ t.jsx(ee, { className: "h-4 w-4" }), e[30] = T, e[31] = F) : (T = e[30], F = e[31]);
+  }, h = [i], e[4] = i, e[5] = L, e[6] = h) : (L = e[5], h = e[6]), W(L, h);
+  const K = u ? "bg-primary/5" : "bg-background";
+  let O;
+  e[7] !== K ? (O = V("group flex w-full gap-3 px-4 py-3 hover:bg-accent/40", K), e[7] = K, e[8] = O) : O = e[8];
+  let p;
+  e[9] !== f || e[10] !== u || e[11] !== n.id || e[12] !== y || e[13] !== r ? (p = () => {
+    u && r(n.id), f && (y(), Ne(f));
+  }, e[9] = f, e[10] = u, e[11] = n.id, e[12] = y, e[13] = r, e[14] = p) : p = e[14];
+  let $;
+  e[15] !== n.title ? ($ = /* @__PURE__ */ t.jsx("div", { className: "truncate text-sm font-semibold", children: n.title }), e[15] = n.title, e[16] = $) : $ = e[16];
   let k;
-  e[32] !== l ? (k = /* @__PURE__ */ t.jsx("button", { ref: D, 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": l, onClick: T, children: F }), e[32] = l, e[33] = k) : k = e[33];
+  e[17] !== n.body ? (k = n.body ? /* @__PURE__ */ t.jsx("div", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: n.body }) : null, e[17] = n.body, e[18] = k) : k = e[18];
   let A;
-  e[34] !== x || e[35] !== l || e[36] !== n.id || e[37] !== c || e[38] !== i ? (A = l ? /* @__PURE__ */ t.jsxs("div", { ref: U, role: "menu", className: K("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: [
+  e[19] !== $ || e[20] !== k ? (A = /* @__PURE__ */ t.jsxs("div", { className: "min-w-0", children: [
+    $,
+    k
+  ] }), e[19] = $, e[20] = k, e[21] = A) : A = e[21];
+  let C;
+  e[22] !== v ? (C = v ? /* @__PURE__ */ t.jsx("div", { className: "mt-2 truncate text-xs text-primary", children: v }) : null, e[22] = v, e[23] = C) : C = e[23];
+  let R;
+  e[24] !== q ? (R = q ? /* @__PURE__ */ t.jsx("div", { className: "mt-2 text-[11px] text-muted-foreground", children: q }) : null, e[24] = q, e[25] = R) : R = e[25];
+  let S;
+  e[26] !== A || e[27] !== C || e[28] !== R || e[29] !== p ? (S = /* @__PURE__ */ t.jsxs("button", { type: "button", className: "min-w-0 flex-1 text-left", onClick: p, children: [
+    A,
+    C,
+    R
+  ] }), e[26] = A, e[27] = C, e[28] = R, e[29] = p, e[30] = S) : S = e[30];
+  let z, T;
+  e[31] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = () => {
+    c(Ae);
+  }, T = /* @__PURE__ */ t.jsx(le, { className: "h-4 w-4" }), e[31] = z, e[32] = T) : (z = e[31], T = e[32]);
+  let b;
+  e[33] !== i ? (b = /* @__PURE__ */ t.jsx("button", { ref: m, 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": i, onClick: z, children: T }), e[33] = i, e[34] = b) : b = e[34];
+  let E;
+  e[35] !== u || e[36] !== i || e[37] !== n.id || e[38] !== a || e[39] !== r ? (E = i ? /* @__PURE__ */ t.jsxs("div", { ref: w, role: "menu", className: V("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__ */ t.jsx("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: () => {
-      r(!1), c(n.id);
+      c(!1), a(n.id);
     }, children: "Archive" }),
-    /* @__PURE__ */ t.jsx("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: !x, onClick: () => {
-      r(!1), i(n.id);
+    /* @__PURE__ */ t.jsx("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: !u, onClick: () => {
+      c(!1), r(n.id);
     }, children: "Mark as read" })
-  ] }) : null, e[34] = x, e[35] = l, e[36] = n.id, e[37] = c, e[38] = i, e[39] = A) : A = e[39];
-  let p;
-  e[40] !== k || e[41] !== A ? (p = /* @__PURE__ */ t.jsxs("div", { className: "relative flex items-start", children: [
-    k,
-    A
-  ] }), e[40] = k, e[41] = A, e[42] = p) : p = e[42];
-  let $;
-  return e[43] !== m || e[44] !== p || e[45] !== d ? ($ = /* @__PURE__ */ t.jsxs("div", { className: d, children: [
-    m,
-    p
-  ] }), e[43] = m, e[44] = p, e[45] = d, e[46] = $) : $ = e[46], $;
+  ] }) : null, e[35] = u, e[36] = i, e[37] = n.id, e[38] = a, e[39] = r, e[40] = E) : E = e[40];
+  let D;
+  e[41] !== b || e[42] !== E ? (D = /* @__PURE__ */ t.jsxs("div", { className: "relative flex items-start", children: [
+    b,
+    E
+  ] }), e[41] = b, e[42] = E, e[43] = D) : D = e[43];
+  let F;
+  return e[44] !== S || e[45] !== D || e[46] !== O ? (F = /* @__PURE__ */ t.jsxs("div", { className: O, children: [
+    S,
+    D
+  ] }), e[44] = S, e[45] = D, e[46] = O, e[47] = F) : F = e[47], F;
 }
-function ue(s) {
-  return !s;
+function Ae(o) {
+  return !o;
 }
 export {
-  we as NotificationsDrawer
+  Be as NotificationsDrawer
 };
 //# sourceMappingURL=index16.js.map