@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/shell/notification-center.js

@@ -1,264 +1,268 @@
 "use client";
-import { jsxs as a, jsx as e, Fragment as H } from "react/jsx-runtime";
-import * as $ from "react";
-import { useRef as B, useCallback as v } from "react";
-import { formatRelativeTime as G } from "../ui/lib/date-utils.js";
-import { Popover as X, PopoverTrigger as _, PopoverContent as q } from "../ui/popover.js";
-import { Tooltip as J, TooltipTrigger as L, TooltipContent as Q } from "../ui/tooltip.js";
-import { IconBell as U, IconChecks as V, IconInbox as W, IconX as Z } from "@tabler/icons-react";
-import { Icon as x } from "../ui/icon.js";
-import { cn as f } from "../ui/lib/utils.js";
-import { Spinner as ee } from "../ui/spinner.js";
-import { u as te, m as w } from "../_chunks/framer.js";
-function C(t, d) {
-  return t.getFullYear() === d.getFullYear() && t.getMonth() === d.getMonth() && t.getDate() === d.getDate();
+import { a as e, n as t } from "../_chunks/framer.js";
+import { durations as n } from "../ui/lib/motion.js";
+import { cn as r } from "../ui/lib/utils.js";
+import { Spinner as i } from "../ui/spinner.js";
+import { Icon as a } from "../ui/icon.js";
+import { useIsMobile as o } from "../hooks/use-mobile.js";
+import { i as s, r as c, t as l } from "../_chunks/popover.js";
+import { Sheet as ee, SheetContent as u, SheetTitle as d, SheetTrigger as te } from "../ui/sheet.js";
+import { Tooltip as f, TooltipContent as p, TooltipTrigger as m } from "../ui/tooltip.js";
+import { formatRelativeTime as h } from "../ui/lib/date-utils.js";
+import * as g from "react";
+import { useCallback as _, useRef as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { IconBell as S, IconChecks as C, IconInbox as w, IconX as T } from "@tabler/icons-react";
+//#region src/shell/notification-center.tsx
+function E(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-function se(t) {
-  const d = new Date(t), l = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
-  return n.setDate(l.getDate() - 1), C(d, l) ? "Today" : C(d, n) ? "Yesterday" : "Earlier";
+function D(e) {
+	let t = new Date(e), n = /* @__PURE__ */ new Date(), r = /* @__PURE__ */ new Date();
+	return r.setDate(n.getDate() - 1), E(t, n) ? "Today" : E(t, r) ? "Yesterday" : "Earlier";
 }
-const R = {
-  INFO: "bg-info-9",
-  IMPORTANT: "bg-warning-9",
-  CRITICAL: "bg-error-9"
+var O = {
+	INFO: "bg-info-9",
+	IMPORTANT: "bg-warning-9",
+	CRITICAL: "bg-error-9"
 };
-function re({
-  notification: t,
-  onRead: d,
-  onNavigate: l,
-  getRoute: n,
-  onDismiss: c
-}) {
-  const p = n(t), g = () => {
-    t.isRead || d(t.id), p && l(p);
-  };
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      onClick: g,
-      onKeyDown: (r) => {
-        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), g());
-      },
-      className: f(
-        "group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard",
-        "hover:bg-surface-raised",
-        !t.isRead && "bg-accent-1"
-      ),
-      children: [
-        /* @__PURE__ */ e("div", { className: "mt-ds-02b flex shrink-0", children: /* @__PURE__ */ e(
-          "span",
-          {
-            className: f(
-              "h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard",
-              R[t.tier] || R.INFO,
-              t.isRead ? "opacity-20" : "opacity-100"
-            )
-          }
-        ) }),
-        /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ e(
-            "p",
-            {
-              className: f(
-                "truncate text-ds-md text-surface-fg",
-                !t.isRead && "font-semibold"
-              ),
-              children: t.title
-            }
-          ),
-          t.body && /* @__PURE__ */ e("p", { className: "mt-ds-01 line-clamp-2 text-ds-sm text-surface-fg-subtle", children: t.body }),
-          /* @__PURE__ */ a("div", { className: "mt-ds-02 flex items-center gap-ds-03", children: [
-            /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: G(t.createdAt) }),
-            t.project && /* @__PURE__ */ a(H, { children: [
-              /* @__PURE__ */ e("span", { className: "text-surface-fg-subtle", children: "·" }),
-              /* @__PURE__ */ e("span", { className: "truncate text-ds-sm text-surface-fg-subtle", children: t.project.title })
-            ] })
-          ] }),
-          t.actions && t.actions.length > 0 && /* @__PURE__ */ e("div", { className: "mt-ds-03 flex items-center gap-ds-02", children: t.actions.map((r) => /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: (i) => {
-                i.stopPropagation(), r.onClick(t.id);
-              },
-              onKeyDown: (i) => i.stopPropagation(),
-              className: f(
-                "rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard",
-                r.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : r.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"
-              ),
-              children: r.label
-            },
-            r.label
-          )) })
-        ] }),
-        c && /* @__PURE__ */ e(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Dismiss notification: ${t.title}`,
-            onClick: (r) => {
-              r.stopPropagation(), c(t.id);
-            },
-            onKeyDown: (r) => r.stopPropagation(),
-            className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
-            children: /* @__PURE__ */ e(x, { icon: Z, size: "sm" })
-          }
-        )
-      ]
-    }
-  );
+function k({ notification: e, onRead: t, onNavigate: n, getRoute: i, onDismiss: o }) {
+	let s = i(e), c = () => {
+		e.isRead || t(e.id), s && n(s);
+	};
+	return /* @__PURE__ */ x("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: c,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c());
+		},
+		className: r("group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard", "hover:bg-surface-raised", !e.isRead && "bg-accent-1"),
+		children: [
+			/* @__PURE__ */ b("div", {
+				className: "mt-ds-02b flex shrink-0",
+				children: /* @__PURE__ */ b("span", { className: r("h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard", O[e.tier] || O.INFO, e.isRead ? "opacity-20" : "opacity-100") })
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ b("p", {
+						className: r("truncate text-ds-md text-surface-fg", !e.isRead && "font-semibold"),
+						children: e.title
+					}),
+					e.body && /* @__PURE__ */ b("p", {
+						className: "mt-ds-01 line-clamp-2 text-ds-sm text-surface-fg-subtle",
+						children: e.body
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "mt-ds-02 flex items-center gap-ds-03",
+						children: [/* @__PURE__ */ b("span", {
+							className: "text-ds-sm text-surface-fg-subtle",
+							children: h(e.createdAt)
+						}), e.project && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
+							className: "text-surface-fg-subtle",
+							children: "·"
+						}), /* @__PURE__ */ b("span", {
+							className: "truncate text-ds-sm text-surface-fg-subtle",
+							children: e.project.title
+						})] })]
+					}),
+					e.actions && e.actions.length > 0 && /* @__PURE__ */ b("div", {
+						className: "mt-ds-03 flex items-center gap-ds-02",
+						children: e.actions.map((t) => /* @__PURE__ */ b("button", {
+							type: "button",
+							onClick: (n) => {
+								n.stopPropagation(), t.onClick(e.id);
+							},
+							onKeyDown: (e) => e.stopPropagation(),
+							className: r("rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard", t.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : t.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"),
+							children: t.label
+						}, t.label))
+					})
+				]
+			}),
+			o && /* @__PURE__ */ b("button", {
+				type: "button",
+				"aria-label": `Dismiss notification: ${e.title}`,
+				onClick: (t) => {
+					t.stopPropagation(), o(e.id);
+				},
+				onKeyDown: (e) => e.stopPropagation(),
+				className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
+				children: /* @__PURE__ */ b(a, {
+					icon: T,
+					size: "sm"
+				})
+			})
+		]
+	});
 }
-const ae = $.forwardRef(
-  ({
-    notifications: t = [],
-    unreadCount: d,
-    open: l,
-    onOpenChange: n,
-    isLoading: c = !1,
-    hasMore: p = !1,
-    onFetchMore: g,
-    onMarkRead: b,
-    onMarkAllRead: r,
-    onNavigate: i,
-    getNotificationRoute: D,
-    onDismiss: I,
-    headerActions: k,
-    emptyState: T,
-    footerSlot: y,
-    popoverClassName: j,
-    className: P,
-    ...O
-  }, z) => {
-    const N = B(null), h = te(), o = d ?? t.filter((s) => !s.isRead).length, K = D ?? (() => null), Y = v(
-      (s) => {
-        n?.(!1), i?.(s);
-      },
-      [i, n]
-    ), E = v(
-      (s) => {
-        b?.(s);
-      },
-      [b]
-    ), F = v(() => {
-      const s = N.current;
-      !s || c || !p || s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && g?.();
-    }, [c, p, g]), S = t.reduce(
-      (s, u) => {
-        const m = se(u.createdAt);
-        return s[m] || (s[m] = []), s[m].push(u), s;
-      },
-      {}
-    ), A = ["Today", "Yesterday", "Earlier"];
-    return /* @__PURE__ */ a(X, { open: l, onOpenChange: n, children: [
-      /* @__PURE__ */ a(J, { children: [
-        /* @__PURE__ */ e(L, { asChild: !0, children: /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ a(
-          "button",
-          {
-            ...O,
-            ref: z,
-            "aria-label": o > 0 ? `Notifications, ${o} unread` : "Notifications",
-            className: f(
-              "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover",
-              P
-            ),
-            children: [
-              /* @__PURE__ */ e(x, { icon: U, size: "sm" }),
-              o > 0 && /* @__PURE__ */ e(
-                w.span,
-                {
-                  initial: { rotate: 0 },
-                  animate: h ? void 0 : { rotate: [0, -3, 3, -1, 1, 0] },
-                  transition: h ? { duration: 0 } : { duration: 0.4, ease: "easeInOut" },
-                  className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
-                  children: o > 99 ? "99+" : o
-                }
-              )
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ e(Q, { side: "bottom", align: "center", children: "Notifications" })
-      ] }),
-      /* @__PURE__ */ a(
-        q,
-        {
-          className: f(
-            "w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
-            j
-          ),
-          sideOffset: 8,
-          align: "end",
-          children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                /* @__PURE__ */ e("h3", { className: "text-ds-md font-semibold text-surface-fg", children: "Notifications" }),
-                o > 0 && /* @__PURE__ */ e("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11", children: o })
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                o > 0 && r && /* @__PURE__ */ a(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: r,
-                    className: "flex items-center gap-ds-02 text-ds-sm text-surface-fg-subtle transition-colors hover:text-accent-11",
-                    children: [
-                      /* @__PURE__ */ e(x, { icon: V, size: "sm" }),
-                      "Mark all read"
-                    ]
-                  }
-                ),
-                k
-              ] })
-            ] }),
-            /* @__PURE__ */ a(
-              "div",
-              {
-                ref: N,
-                onScroll: F,
-                className: "max-h-[420px] overflow-y-auto",
-                children: [
-                  t.length === 0 ? T || /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center px-ds-05 py-ds-09", children: [
-                    /* @__PURE__ */ e("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised", children: /* @__PURE__ */ e(x, { icon: W, size: "lg", className: "text-surface-fg-subtle" }) }),
-                    /* @__PURE__ */ e("p", { className: "mt-ds-04 text-ds-md text-surface-fg-subtle", children: "No notifications yet" }),
-                    /* @__PURE__ */ e("p", { className: "mt-ds-02 text-ds-sm text-surface-fg-subtle", children: "You're all caught up!" })
-                  ] }) : A.map((s) => {
-                    const u = S[s];
-                    return !u || u.length === 0 ? null : /* @__PURE__ */ a("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-medium text-surface-fg-subtle", children: s }) }),
-                      u.map((m, M) => /* @__PURE__ */ e(
-                        w.div,
-                        {
-                          initial: h ? void 0 : { opacity: 0 },
-                          animate: { opacity: 1 },
-                          transition: h ? { duration: 0 } : { delay: M * 0.03 },
-                          children: /* @__PURE__ */ e(
-                            re,
-                            {
-                              notification: m,
-                              onRead: E,
-                              onNavigate: Y,
-                              getRoute: K,
-                              onDismiss: I
-                            }
-                          )
-                        },
-                        m.id
-                      ))
-                    ] }, s);
-                  }),
-                  c && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-ds-05", children: /* @__PURE__ */ e(ee, {}) })
-                ]
-              }
-            ),
-            y && /* @__PURE__ */ e("div", { className: "border-t border-surface-border-strong px-ds-05 py-ds-03", children: y })
-          ]
-        }
-      )
-    ] });
-  }
-);
-ae.displayName = "NotificationCenter";
-export {
-  ae as NotificationCenter
-};
+var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: T, onOpenChange: E, isLoading: O = !1, hasMore: A = !1, onFetchMore: j, onMarkRead: M, onMarkAllRead: N, onNavigate: P, getNotificationRoute: F, onDismiss: I, headerActions: L, emptyState: R, footerSlot: z, popoverClassName: B, className: V, ...H }, U) => {
+	let W = v(null), G = t(), K = o(), q = g ?? h.filter((e) => !e.isRead).length, J = F ?? (() => null), Y = _((e) => {
+		E?.(!1), P?.(e);
+	}, [P, E]), X = _((e) => {
+		M?.(e);
+	}, [M]), Z = _(() => {
+		let e = W.current;
+		!e || O || !A || e.scrollTop + e.clientHeight >= e.scrollHeight - 50 && j?.();
+	}, [
+		O,
+		A,
+		j
+	]), ne = h.reduce((e, t) => {
+		let n = D(t.createdAt);
+		return e[n] || (e[n] = []), e[n].push(t), e;
+	}, {}), Q = /* @__PURE__ */ x(y, { children: [
+		/* @__PURE__ */ x("div", {
+			className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04",
+			children: [/* @__PURE__ */ x("div", {
+				className: "flex items-center gap-ds-03",
+				children: [!K && /* @__PURE__ */ b("h3", {
+					className: "text-ds-md font-semibold text-surface-fg",
+					children: "Notifications"
+				}), q > 0 && /* @__PURE__ */ b("span", {
+					className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11",
+					children: q
+				})]
+			}), /* @__PURE__ */ x("div", {
+				className: "flex items-center gap-ds-03",
+				children: [q > 0 && N && /* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: N,
+					className: "flex items-center gap-ds-02 text-ds-sm text-surface-fg-subtle transition-colors hover:text-accent-11",
+					children: [/* @__PURE__ */ b(a, {
+						icon: C,
+						size: "sm"
+					}), "Mark all read"]
+				}), L]
+			})]
+		}),
+		/* @__PURE__ */ x("div", {
+			ref: W,
+			onScroll: Z,
+			className: r("overflow-y-auto", K ? "max-h-[60vh]" : "max-h-[420px]"),
+			children: [h.length === 0 ? R || /* @__PURE__ */ x("div", {
+				className: "flex flex-col items-center justify-center px-ds-05 py-ds-09",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised",
+						children: /* @__PURE__ */ b(a, {
+							icon: w,
+							size: "lg",
+							className: "text-surface-fg-subtle"
+						})
+					}),
+					/* @__PURE__ */ b("p", {
+						className: "mt-ds-04 text-ds-md text-surface-fg-subtle",
+						children: "No notifications yet"
+					}),
+					/* @__PURE__ */ b("p", {
+						className: "mt-ds-02 text-ds-sm text-surface-fg-subtle",
+						children: "You're all caught up!"
+					})
+				]
+			}) : [
+				"Today",
+				"Yesterday",
+				"Earlier"
+			].map((t) => {
+				let n = ne[t];
+				return !n || n.length === 0 ? null : /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", {
+					className: "sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b",
+					children: /* @__PURE__ */ b("span", {
+						className: "text-ds-sm font-medium text-surface-fg-subtle",
+						children: t
+					})
+				}), n.map((t, n) => /* @__PURE__ */ b(e.div, {
+					initial: G ? void 0 : { opacity: 0 },
+					animate: { opacity: 1 },
+					transition: G ? { duration: 0 } : { delay: n * .03 },
+					children: /* @__PURE__ */ b(k, {
+						notification: t,
+						onRead: X,
+						onNavigate: Y,
+						getRoute: J,
+						onDismiss: I
+					})
+				}, t.id))] }, t);
+			}), O && /* @__PURE__ */ b("div", {
+				className: "flex items-center justify-center py-ds-05",
+				children: /* @__PURE__ */ b(i, {})
+			})]
+		}),
+		z && /* @__PURE__ */ b("div", {
+			className: "border-t border-surface-border-strong px-ds-05 py-ds-03",
+			children: z
+		})
+	] }), $ = /* @__PURE__ */ x("button", {
+		...H,
+		ref: U,
+		"aria-label": q > 0 ? `Notifications, ${q} unread` : "Notifications",
+		className: r("relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover", V),
+		children: [/* @__PURE__ */ b(a, {
+			icon: S,
+			size: "sm"
+		}), q > 0 && /* @__PURE__ */ b(e.span, {
+			initial: { rotate: 0 },
+			animate: G ? void 0 : { rotate: [
+				0,
+				-3,
+				3,
+				-1,
+				1,
+				0
+			] },
+			transition: G ? { duration: 0 } : {
+				duration: n.slow01,
+				ease: "easeInOut"
+			},
+			className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
+			children: q > 99 ? "99+" : q
+		})]
+	});
+	return K ? /* @__PURE__ */ x(ee, {
+		open: T,
+		onOpenChange: E,
+		children: [/* @__PURE__ */ x(f, { children: [/* @__PURE__ */ b(m, {
+			asChild: !0,
+			children: /* @__PURE__ */ b(te, {
+				asChild: !0,
+				children: $
+			})
+		}), /* @__PURE__ */ b(p, {
+			side: "bottom",
+			align: "center",
+			children: "Notifications"
+		})] }), /* @__PURE__ */ x(u, {
+			side: "bottom",
+			className: r("p-0", B),
+			responsive: !1,
+			children: [/* @__PURE__ */ b(d, {
+				className: "px-ds-05 pt-ds-04 text-ds-md font-semibold text-surface-fg",
+				children: "Notifications"
+			}), Q]
+		})]
+	}) : /* @__PURE__ */ x(l, {
+		open: T,
+		onOpenChange: E,
+		children: [/* @__PURE__ */ x(f, { children: [/* @__PURE__ */ b(m, {
+			asChild: !0,
+			children: /* @__PURE__ */ b(s, {
+				asChild: !0,
+				children: $
+			})
+		}), /* @__PURE__ */ b(p, {
+			side: "bottom",
+			align: "center",
+			children: "Notifications"
+		})] }), /* @__PURE__ */ b(c, {
+			className: r("w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating", B),
+			sideOffset: 8,
+			align: "end",
+			children: Q
+		})]
+	});
+});
+A.displayName = "NotificationCenter";
+//#endregion
+export { A as NotificationCenter };

package/dist/shell/notification-center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center.js","names":[],"sources":["../../src/shell/notification-center.tsx"],"sourcesContent":["'use client'\n\n/**\n * NotificationCenter -- Popover-based notification panel.\n *\n * Props-driven: accepts notifications array and callbacks instead of\n * reading from Zustand stores or using Remix useNavigate.\n */\nimport * as React from 'react'\nimport { useRef, useCallback } from 'react'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport {\n  Sheet,\n  SheetContent,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { IconBell, IconChecks, IconInbox, IconX } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { Spinner } from '../ui/spinner'\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport { durations } from '../ui/lib/motion'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NotificationAction {\n  /** Button label */\n  label: string\n  /** Visual style — 'primary' is filled, 'default' is ghost, 'danger' is red ghost */\n  variant?: 'primary' | 'default' | 'danger'\n  /** Called when the action button is clicked. Receives the notification id. */\n  onClick: (id: string) => void\n}\n\nexport interface Notification {\n  id: string\n  title: string\n  body?: string | null\n  tier: 'INFO' | 'IMPORTANT' | 'CRITICAL'\n  isRead: boolean\n  createdAt: string\n  entityType?: string | null\n  entityId?: string | null\n  projectId?: string | null\n  project?: { title: string } | null\n  /** Inline action buttons (e.g. Approve / Deny). Max 2–3 recommended. */\n  actions?: NotificationAction[]\n}\n\nexport interface NotificationCenterProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** List of notifications to display */\n  notifications?: Notification[]\n  /** Count of unread notifications (derived from notifications if not provided) */\n  unreadCount?: number\n  /** Whether the popover is open (controlled mode) */\n  open?: boolean\n  /** Called when the popover open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Whether more notifications are loading */\n  isLoading?: boolean\n  /** Whether there are more notifications to fetch */\n  hasMore?: boolean\n  /** Called when the user scrolls near the bottom to load more */\n  onFetchMore?: () => void\n  /** Called to mark a single notification as read */\n  onMarkRead?: (id: string) => void\n  /** Called to mark all notifications as read */\n  onMarkAllRead?: () => void\n  /** Called when the user clicks a notification (e.g., navigate to entity) */\n  onNavigate?: (path: string) => void\n  /** Resolve a notification to a navigation path. Return null if no navigation. */\n  getNotificationRoute?: (notification: Notification) => string | null\n  /** Additional actions rendered in the header (e.g., settings button) */\n  headerActions?: React.ReactNode\n  /** Custom empty state to display when there are no notifications */\n  emptyState?: React.ReactNode\n  /** Content rendered below the notification list as a footer */\n  footerSlot?: React.ReactNode\n  /** Called when the user dismisses a notification. Renders an X button per row when provided. */\n  onDismiss?: (id: string) => void\n  /** Additional className for the popover content container */\n  popoverClassName?: string\n  /** Additional className */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\nfunction getDateGroup(dateStr: string): string {\n  const date = new Date(dateStr)\n  const today = new Date()\n  const yesterday = new Date()\n  yesterday.setDate(today.getDate() - 1)\n\n  if (isSameDay(date, today)) return 'Today'\n  if (isSameDay(date, yesterday)) return 'Yesterday'\n  return 'Earlier'\n}\n\nconst TIER_COLORS: Record<string, string> = {\n  INFO: 'bg-info-9',\n  IMPORTANT: 'bg-warning-9',\n  CRITICAL: 'bg-error-9',\n}\n\n// -----------------------------------------------------------------------\n// NotificationItem (internal)\n// -----------------------------------------------------------------------\n\nfunction NotificationItem({\n  notification,\n  onRead,\n  onNavigate,\n  getRoute,\n  onDismiss,\n}: {\n  notification: Notification\n  onRead: (id: string) => void\n  onNavigate: (path: string) => void\n  getRoute: (notification: Notification) => string | null\n  onDismiss?: (id: string) => void\n}) {\n  const route = getRoute(notification)\n\n  const handleClick = () => {\n    if (!notification.isRead) {\n      onRead(notification.id)\n    }\n    if (route) {\n      onNavigate(route)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      handleClick()\n    }\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        'group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard',\n        'hover:bg-surface-raised',\n        !notification.isRead && 'bg-accent-1',\n      )}\n    >\n      {/* Tier dot — doubles as read/unread marker */}\n      <div className=\"mt-ds-02b flex shrink-0\">\n        <span\n          className={cn(\n            'h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard',\n            TIER_COLORS[notification.tier] || TIER_COLORS.INFO,\n            notification.isRead ? 'opacity-20' : 'opacity-100',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className={cn(\n            'truncate text-ds-md text-surface-fg',\n            !notification.isRead && 'font-semibold',\n          )}\n        >\n          {notification.title}\n        </p>\n        {notification.body && (\n          <p className=\"mt-ds-01 line-clamp-2 text-ds-sm text-surface-fg-subtle\">\n            {notification.body}\n          </p>\n        )}\n        <div className=\"mt-ds-02 flex items-center gap-ds-03\">\n          <span className=\"text-ds-sm text-surface-fg-subtle\">\n            {formatRelativeTime(notification.createdAt)}\n          </span>\n          {notification.project && (\n            <>\n              <span className=\"text-surface-fg-subtle\">\n                &middot;\n              </span>\n              <span className=\"truncate text-ds-sm text-surface-fg-subtle\">\n                {notification.project.title}\n              </span>\n            </>\n          )}\n        </div>\n\n        {/* Inline actions */}\n        {notification.actions && notification.actions.length > 0 && (\n          <div className=\"mt-ds-03 flex items-center gap-ds-02\">\n            {notification.actions.map((action) => (\n              <button\n                key={action.label}\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action.onClick(notification.id)\n                }}\n                onKeyDown={(e) => e.stopPropagation()}\n                className={cn(\n                  'rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  action.variant === 'primary'\n                    ? 'bg-accent-9 text-accent-fg hover:bg-accent-10'\n                    : action.variant === 'danger'\n                      ? 'text-error-11 hover:bg-error-3'\n                      : 'text-surface-fg-muted hover:bg-surface-raised-hover',\n                )}\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Dismiss button */}\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label={`Dismiss notification: ${notification.title}`}\n          onClick={(e) => {\n            e.stopPropagation()\n            onDismiss(notification.id)\n          }}\n          onKeyDown={(e) => e.stopPropagation()}\n          className=\"absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex\"\n        >\n          <Icon icon={IconX} size=\"sm\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// NotificationCenter\n// -----------------------------------------------------------------------\n\nconst NotificationCenter = React.forwardRef<HTMLButtonElement, NotificationCenterProps>(\n  (\n    {\n      notifications = [],\n      unreadCount: unreadCountProp,\n      open,\n      onOpenChange,\n      isLoading = false,\n      hasMore = false,\n      onFetchMore,\n      onMarkRead,\n      onMarkAllRead,\n      onNavigate,\n      getNotificationRoute,\n      onDismiss,\n      headerActions,\n      emptyState,\n      footerSlot,\n      popoverClassName,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const scrollRef = useRef<HTMLDivElement>(null)\n    const prefersReducedMotion = useReducedMotion()\n    const isMobile = useIsMobile()\n\n  const unreadCount =\n    unreadCountProp ?? notifications.filter((n) => !n.isRead).length\n\n  const getRoute = getNotificationRoute ?? (() => null)\n\n  const handleNavigate = useCallback(\n    (path: string) => {\n      onOpenChange?.(false)\n      onNavigate?.(path)\n    },\n    [onNavigate, onOpenChange],\n  )\n\n  const handleMarkRead = useCallback(\n    (id: string) => {\n      onMarkRead?.(id)\n    },\n    [onMarkRead],\n  )\n\n  const handleScroll = useCallback(() => {\n    const el = scrollRef.current\n    if (!el || isLoading || !hasMore) return\n    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {\n      onFetchMore?.()\n    }\n  }, [isLoading, hasMore, onFetchMore])\n\n  // Group notifications by date\n  const grouped = notifications.reduce<Record<string, Notification[]>>(\n    (acc, n) => {\n      const group = getDateGroup(n.createdAt)\n      if (!acc[group]) acc[group] = []\n      acc[group].push(n)\n      return acc\n    },\n    {},\n  )\n\n  const groupOrder = ['Today', 'Yesterday', 'Earlier']\n\n  // -- Shared panel content (used in both Popover and Sheet) --\n  const panelContent = (\n    <>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04\">\n        <div className=\"flex items-center gap-ds-03\">\n          {/* On mobile the SheetTitle provides the accessible heading; on desktop use h3 */}\n          {!isMobile && (\n            <h3 className=\"text-ds-md font-semibold text-surface-fg\">\n              Notifications\n            </h3>\n          )}\n          {unreadCount > 0 && (\n            <span className=\"flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11\">\n              {unreadCount}\n            </span>\n          )}\n        </div>\n        <div className=\"flex items-center gap-ds-03\">\n          {unreadCount > 0 && onMarkAllRead && (\n            <button\n              type=\"button\"\n              onClick={onMarkAllRead}\n              className=\"flex items-center gap-ds-02 text-ds-sm text-surface-fg-subtle transition-colors hover:text-accent-11\"\n            >\n              <Icon icon={IconChecks} size=\"sm\" />\n              Mark all read\n            </button>\n          )}\n          {headerActions}\n        </div>\n      </div>\n\n      {/* Notification list */}\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        className={cn('overflow-y-auto', isMobile ? 'max-h-[60vh]' : 'max-h-[420px]')}\n      >\n        {notifications.length === 0 ? (\n          emptyState || (\n            <div className=\"flex flex-col items-center justify-center px-ds-05 py-ds-09\">\n              <div className=\"flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised\">\n                <Icon icon={IconInbox} size=\"lg\" className=\"text-surface-fg-subtle\" />\n              </div>\n              <p className=\"mt-ds-04 text-ds-md text-surface-fg-subtle\">\n                No notifications yet\n              </p>\n              <p className=\"mt-ds-02 text-ds-sm text-surface-fg-subtle\">\n                You&apos;re all caught up!\n              </p>\n            </div>\n          )\n        ) : (\n          groupOrder.map((group) => {\n            const items = grouped[group]\n            if (!items || items.length === 0) return null\n            return (\n              <div key={group}>\n                <div className=\"sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b\">\n                  <span className=\"text-ds-sm font-medium text-surface-fg-subtle\">\n                    {group}\n                  </span>\n                </div>\n                {items.map((notification, index) => (\n                  <motion.div\n                    key={notification.id}\n                    initial={prefersReducedMotion ? undefined : { opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={prefersReducedMotion ? { duration: 0 } : { delay: index * 0.03 }}\n                  >\n                    <NotificationItem\n                      notification={notification}\n                      onRead={handleMarkRead}\n                      onNavigate={handleNavigate}\n                      getRoute={getRoute}\n                      onDismiss={onDismiss}\n                    />\n                  </motion.div>\n                ))}\n              </div>\n            )\n          })\n        )}\n\n        {isLoading && (\n          <div className=\"flex items-center justify-center py-ds-05\">\n            <Spinner />\n          </div>\n        )}\n      </div>\n      {footerSlot && (\n        <div className=\"border-t border-surface-border-strong px-ds-05 py-ds-03\">\n          {footerSlot}\n        </div>\n      )}\n    </>\n  )\n\n  // -- Trigger button (shared between both modes) --\n  const triggerButton = (\n    <button\n      {...props}\n      ref={ref}\n      aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}\n      className={cn(\n        'relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover',\n        className,\n      )}\n    >\n      <Icon icon={IconBell} size=\"sm\" />\n      {unreadCount > 0 && (\n        <motion.span\n          initial={{ rotate: 0 }}\n          animate={prefersReducedMotion ? undefined : { rotate: [0, -3, 3, -1, 1, 0] }}\n          transition={prefersReducedMotion ? { duration: 0 } : { duration: durations.slow01, ease: 'easeInOut' }}\n          className=\"absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg\"\n        >\n          {unreadCount > 99 ? '99+' : unreadCount}\n        </motion.span>\n      )}\n    </button>\n  )\n\n  // -- Mobile: render in a bottom Sheet --\n  if (isMobile) {\n    return (\n      <Sheet open={open} onOpenChange={onOpenChange}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <SheetTrigger asChild>\n              {triggerButton}\n            </SheetTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            Notifications\n          </TooltipContent>\n        </Tooltip>\n\n        <SheetContent side=\"bottom\" className={cn('p-0', popoverClassName)} responsive={false}>\n          <SheetTitle className=\"px-ds-05 pt-ds-04 text-ds-md font-semibold text-surface-fg\">\n            Notifications\n          </SheetTitle>\n          {panelContent}\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  // -- Desktop: render in a Popover --\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            {triggerButton}\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\" align=\"center\">\n          Notifications\n        </TooltipContent>\n      </Tooltip>\n\n      <PopoverContent\n        className={cn(\n          'w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating',\n          popoverClassName,\n        )}\n        sideOffset={8}\n        align=\"end\"\n      >\n        {panelContent}\n      </PopoverContent>\n    </Popover>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nexport { NotificationCenter }\n"],"mappings":"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"}