@rpcbase/ui 0.235.0 → 0.237.0

package/dist/components/Notifications/NotificationsDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationsDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgF,KAAK,OAAO,EAAE,MAAM,OAAO,CAAA;AAMlH,OAAO,KAAK,EAAoB,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAsE3E,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAU,EACV,iBAAyB,EACzB,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC,0BAA0B,GAAG,IAAI,CAAC,CAAA;CAC7D,2CAwPA"}
+{"version":3,"file":"NotificationsDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationsDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgF,KAAK,OAAO,EAAE,MAAM,OAAO,CAAA;AAMlH,OAAO,KAAK,EAAoB,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAsF3E,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAU,EACV,iBAAyB,EACzB,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC,0BAA0B,GAAG,IAAI,CAAC,CAAA;CAC7D,2CAkTA"}

package/dist/components/Notifications/types.d.ts

@@ -15,17 +15,26 @@ export type NotificationSettings = {
     topicPreferences: NotificationTopicPreference[];
     lastDigestSentAt?: string;
 };
+export type NotificationDataPayload = Record<string, string>;
+export type NotificationPlatformPayload = {
+    webpush?: Record<string, unknown>;
+    fcmOptions?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+    apns?: Record<string, unknown>;
+    [key: string]: unknown;
+};
 export type NotificationItem = {
     id: string;
     topic?: string;
     title: string;
     body?: string;
-    url?: string;
+    image?: string;
+    data?: NotificationDataPayload;
+    platform?: NotificationPlatformPayload;
     createdAt: string;
     seenAt?: string;
     readAt?: string;
     archivedAt?: string;
-    metadata?: Record<string, unknown>;
 };
 export type NotificationsRealtimeState = {
     notifications: NotificationItem[];

package/dist/components/Notifications/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,eAAe,EAAE,2BAA2B,CAAA;IAC5C,gBAAgB,EAAE,2BAA2B,EAAE,CAAA;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,gBAAgB,EAAE,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,eAAe,EAAE,2BAA2B,CAAA;IAC5C,gBAAgB,EAAE,2BAA2B,EAAE,CAAA;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,QAAQ,CAAC,EAAE,2BAA2B,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,gBAAgB,EAAE,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA"}

package/dist/index16.js

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