@nivaro/react 0.3.41 → 0.3.43

package/dist/shared/components/notifications/NotificationDetailBits.js

@@ -1,93 +1,240 @@
-import { jsxs as t, jsx as s, Fragment as g } from "react/jsx-runtime";
-import { ChevronDown as b, HelpCircle as f } from "lucide-react";
-import { useState as k } from "react";
-import { cn as p } from "../../lib/utils.js";
-import { describeDelivery as N } from "./DeliveryChips.js";
-function A({
-  detail: r,
-  why: a,
-  delivery: m,
-  subscriptionsPath: o,
-  onNavigate: d,
-  className: x
+import { jsxs as r, jsx as a, Fragment as k } from "react/jsx-runtime";
+import { useQuery as y } from "@tanstack/react-query";
+import { ChevronDown as v, HelpCircle as L } from "lucide-react";
+import { useState as C } from "react";
+import { useNivaroClient as N } from "../../context.js";
+import { get as w } from "../../lib/commands.js";
+import { cn as f } from "../../lib/utils.js";
+import { changeLines as $ } from "./changes-lines.js";
+import { describeDelivery as q } from "./DeliveryChips.js";
+import { WHY_KIND_LABELS as _, whyLines as S, whyChangeLinks as W, WHY_LAYER_LABELS as D } from "./why-lines.js";
+function E({ layer: t, role: i }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      "data-why-layer": t,
+      className: f(
+        "ml-1 rounded px-1 text-[9.5px] font-medium",
+        t === "person" && "bg-sky-50 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300",
+        t === "role" && "bg-violet-50 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300",
+        t === "system" && "bg-slate-100 text-slate-500 dark:bg-muted dark:text-slate-400"
+      ),
+      children: [
+        D[t],
+        t === "role" && i ? ` · ${i}` : ""
+      ]
+    }
+  );
+}
+function P({ c: t }) {
+  return /* @__PURE__ */ r(
+    "li",
+    {
+      className: "flex flex-wrap items-baseline gap-x-1.5 text-[11px] leading-snug",
+      "data-change-field": t.field,
+      children: [
+        /* @__PURE__ */ a("span", { className: "font-medium text-slate-700 dark:text-slate-200", children: t.label }),
+        t.diff ? /* @__PURE__ */ r("span", { className: "min-w-0 whitespace-pre-wrap break-words text-slate-600 dark:text-slate-300", children: [
+          t.diff.lead,
+          t.diff.removed && /* @__PURE__ */ a("span", { className: "rounded-sm bg-red-50 text-red-700 line-through decoration-red-300 dark:bg-red-500/15 dark:text-red-300", children: t.diff.removed }),
+          t.diff.added && /* @__PURE__ */ a("span", { className: "rounded-sm bg-emerald-50 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300", children: t.diff.added }),
+          t.diff.trail
+        ] }) : /* @__PURE__ */ r(k, { children: [
+          t.old !== "" && /* @__PURE__ */ r(k, { children: [
+            /* @__PURE__ */ a("span", { className: "text-slate-400 line-through decoration-slate-300", children: t.old }),
+            /* @__PURE__ */ a("span", { className: "text-slate-300", children: "→" })
+          ] }),
+          /* @__PURE__ */ a("span", { className: "text-slate-800 dark:text-slate-100", children: t.new || "—" })
+        ] })
+      ]
+    }
+  );
+}
+function T({
+  notificationId: t,
+  className: i
+}) {
+  const h = N(), { data: d, isLoading: x, isError: c } = y({
+    queryKey: ["notification-changes", t],
+    staleTime: 6e4,
+    retry: !1,
+    queryFn: () => h.request(
+      w(`/notifications/${t}/changes`)
+    ).then((s) => s.data)
+  }), m = $(d);
+  return /* @__PURE__ */ r(
+    "ul",
+    {
+      className: f(
+        "mt-1 space-y-0.5 rounded-md border border-slate-100 bg-slate-50/70 px-2 py-1.5 dark:border-border/60 dark:bg-muted/40",
+        i
+      ),
+      "data-notification-changes-list": !0,
+      "data-changes-source": "reader",
+      children: [
+        x && /* @__PURE__ */ a("li", { className: "text-[10.5px] text-slate-400", children: "Loading what changed…" }),
+        c && /* @__PURE__ */ a("li", { className: "text-[10.5px] text-slate-500 dark:text-slate-400", children: "You can't open this record now, so its changes are not shown." }),
+        d && m.length === 0 && /* @__PURE__ */ a("li", { className: "text-[10.5px] text-slate-500 dark:text-slate-400", children: d.note ?? (d.first_revision ? "The record was created — there is no earlier version to compare." : "No changes to fields you can see.") }),
+        m.map((s) => /* @__PURE__ */ a(P, { c: s }, s.field))
+      ]
+    }
+  );
+}
+function Y({
+  notificationId: t,
+  why: i,
+  delivery: h,
+  subscriptionsPath: d,
+  rulesPath: x,
+  onNavigate: c
+}) {
+  var u;
+  const m = N(), { data: s, isLoading: b } = y({
+    queryKey: ["notification-why", t],
+    enabled: t != null,
+    staleTime: 6e4,
+    queryFn: () => m.request(w(`/notifications/${t}/why`)).then((e) => e.data)
+  }), l = (s == null ? void 0 : s.reason) ?? null, o = (l == null ? void 0 : l.path) ?? (s == null ? void 0 : s.why) ?? i ?? null, n = (o == null ? void 0 : o.kind) ?? "rules", p = ((u = l == null ? void 0 : l.role) == null ? void 0 : u.name) ?? null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "mt-1 rounded-md border border-slate-100 bg-slate-50/70 px-2 py-1.5 text-[11px] leading-snug dark:border-border/60 dark:bg-muted/40",
+      "data-notification-why-panel": !0,
+      "data-why-recorded": s ? String(s.recorded) : void 0,
+      children: [
+        o && /* @__PURE__ */ r("p", { className: "text-slate-700 dark:text-slate-200", children: [
+          /* @__PURE__ */ a("span", { className: "mr-1 rounded bg-slate-200/70 px-1 text-[9.5px] font-semibold uppercase tracking-wide text-slate-600 dark:bg-slate-700 dark:text-slate-300", children: _[n] ?? n }),
+          o.text,
+          o.label && n !== "watch" && n !== "role_default" && /* @__PURE__ */ r("span", { className: "text-slate-500 dark:text-slate-400", children: [
+            " · ",
+            o.label
+          ] })
+        ] }),
+        b && t != null && /* @__PURE__ */ a("p", { className: "mt-1 text-[10.5px] text-slate-400", children: "Looking up why…" }),
+        s && !s.recorded && /* @__PURE__ */ a("p", { className: "mt-1 text-[10.5px] italic text-slate-500 dark:text-slate-400", "data-why-legacy": !0, children: "Sent before reasons were recorded." }),
+        l ? /* @__PURE__ */ r(
+          "ul",
+          {
+            className: "mt-1 space-y-px text-[10.5px] text-slate-500 dark:text-slate-400",
+            "data-why-rules": !0,
+            children: [
+              l.critical && /* @__PURE__ */ r("li", { children: [
+                /* @__PURE__ */ a("span", { className: "font-medium text-slate-600 dark:text-slate-300", children: "Critical:" }),
+                " ",
+                "mutes, quiet hours and your rules are bypassed."
+              ] }),
+              S(l).map((e) => /* @__PURE__ */ r("li", { "data-why-channel": e.key, children: [
+                /* @__PURE__ */ r("span", { className: "font-medium text-slate-600 dark:text-slate-300", children: [
+                  e.label,
+                  ":"
+                ] }),
+                " ",
+                e.outcome,
+                e.rule ? ` — ${e.rule}` : "",
+                e.layer && /* @__PURE__ */ a(E, { layer: e.layer, role: p })
+              ] }, e.key))
+            ]
+          }
+        ) : /* @__PURE__ */ a("ul", { className: "mt-1 space-y-px text-[10.5px] text-slate-500 dark:text-slate-400", children: q((s == null ? void 0 : s.delivery) ?? h).map((e) => /* @__PURE__ */ r("li", { children: [
+          /* @__PURE__ */ r("span", { className: "font-medium text-slate-600 dark:text-slate-300", children: [
+            e.label,
+            ":"
+          ] }),
+          " ",
+          e.tip
+        ] }, e.key)) }),
+        /* @__PURE__ */ a("div", { className: "mt-1 flex flex-wrap gap-x-3", children: c && W(n, { subscriptionsPath: d, rulesPath: x }).map((e) => /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            "data-why-change": e.to,
+            onClick: (g) => {
+              g.stopPropagation(), c(e.to);
+            },
+            className: "text-[10.5px] font-medium text-nvr-navy underline decoration-dotted underline-offset-2 dark:text-nvr-cyan",
+            children: e.label
+          },
+          e.to
+        )) })
+      ]
+    }
+  );
+}
+function G({
+  detail: t,
+  why: i,
+  delivery: h,
+  notificationId: d,
+  recordChanges: x,
+  subscriptionsPath: c,
+  rulesPath: m,
+  onNavigate: s,
+  className: b
 }) {
-  const [l, h] = k(null), n = (r == null ? void 0 : r.changes) ?? [], c = (e) => h((i) => i === e ? null : e), u = {
-    watch: "Record watch",
-    subscription: "Subscription",
-    rules: "Notification rules",
-    message: "Direct message",
-    mention: "Mention",
-    task: "Task",
-    approval: "Approval",
-    sla: "SLA",
-    flow: "Flow",
-    broadcast: "Broadcast",
-    alert: "Alert"
-  };
-  return /* @__PURE__ */ t("div", { className: p("text-[10.5px]", x), "data-notification-bits": !0, children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: [
-      n.length > 0 && /* @__PURE__ */ t(
+  const [l, o] = C(null), n = (t == null ? void 0 : t.changes) ?? [], p = !!x && d != null, u = (e) => o((g) => g === e ? null : e);
+  return /* @__PURE__ */ r("div", { className: f("text-[10.5px]", b), "data-notification-bits": !0, children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
+      (n.length > 0 || p) && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           onClick: (e) => {
-            e.stopPropagation(), c("changes");
+            e.stopPropagation(), u("changes");
           },
           "aria-expanded": l === "changes",
           "data-notification-changes": !0,
           className: "inline-flex items-center gap-0.5 rounded px-1 py-px font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-muted dark:hover:text-slate-100",
           children: [
-            n.length,
-            " change",
-            n.length === 1 ? "" : "s",
-            /* @__PURE__ */ s(
-              b,
+            n.length > 0 ? `${n.length} change${n.length === 1 ? "" : "s"}` : "What changed",
+            /* @__PURE__ */ a(
+              v,
               {
-                className: p("h-3 w-3 transition-transform", l === "changes" && "rotate-180")
+                className: f("h-3 w-3 transition-transform", l === "changes" && "rotate-180")
               }
             )
           ]
         }
       ),
-      a && /* @__PURE__ */ t(
+      (i || d != null) && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           onClick: (e) => {
-            e.stopPropagation(), c("why");
+            e.stopPropagation(), u("why");
           },
           "aria-expanded": l === "why",
           "data-notification-why": !0,
           className: "inline-flex items-center gap-0.5 rounded px-1 py-px font-medium text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-muted dark:hover:text-slate-200",
           children: [
-            /* @__PURE__ */ s(f, { className: "h-3 w-3" }),
-            "Why me?"
+            /* @__PURE__ */ a(L, { className: "h-3 w-3" }),
+            "Why?"
           ]
         }
       )
     ] }),
-    l === "changes" && /* @__PURE__ */ t(
+    l === "changes" && p && d != null && /* @__PURE__ */ a(T, { notificationId: d }),
+    l === "changes" && !p && /* @__PURE__ */ r(
       "ul",
       {
         className: "mt-1 space-y-0.5 rounded-md border border-slate-100 bg-slate-50/70 px-2 py-1.5 dark:border-border/60 dark:bg-muted/40",
         "data-notification-changes-list": !0,
         children: [
-          n.slice(0, 20).map((e, i) => /* @__PURE__ */ t(
+          n.slice(0, 20).map((e, g) => /* @__PURE__ */ r(
             "li",
             {
               className: "flex flex-wrap items-baseline gap-x-1.5 text-[11px] leading-snug",
               children: [
-                /* @__PURE__ */ s("span", { className: "font-medium text-slate-700 dark:text-slate-200", children: e.label }),
-                e.old !== "" && /* @__PURE__ */ t(g, { children: [
-                  /* @__PURE__ */ s("span", { className: "text-slate-400 line-through decoration-slate-300", children: e.old }),
-                  /* @__PURE__ */ s("span", { className: "text-slate-300", children: "→" })
+                /* @__PURE__ */ a("span", { className: "font-medium text-slate-700 dark:text-slate-200", children: e.label }),
+                e.old !== "" && /* @__PURE__ */ r(k, { children: [
+                  /* @__PURE__ */ a("span", { className: "text-slate-400 line-through decoration-slate-300", children: e.old }),
+                  /* @__PURE__ */ a("span", { className: "text-slate-300", children: "→" })
                 ] }),
-                /* @__PURE__ */ s("span", { className: "text-slate-800 dark:text-slate-100", children: e.new || "—" })
+                /* @__PURE__ */ a("span", { className: "text-slate-800 dark:text-slate-100", children: e.new || "—" })
               ]
             },
-            `${e.field}-${i}`
+            `${e.field}-${g}`
           )),
-          n.length > 20 && /* @__PURE__ */ t("li", { className: "text-[10.5px] text-slate-400", children: [
+          n.length > 20 && /* @__PURE__ */ r("li", { className: "text-[10.5px] text-slate-400", children: [
             "+",
             n.length - 20,
             " more"
@@ -95,44 +242,20 @@ function A({
         ]
       }
     ),
-    l === "why" && a && /* @__PURE__ */ t(
-      "div",
+    l === "why" && /* @__PURE__ */ a(
+      Y,
       {
-        className: "mt-1 rounded-md border border-slate-100 bg-slate-50/70 px-2 py-1.5 text-[11px] leading-snug dark:border-border/60 dark:bg-muted/40",
-        "data-notification-why-panel": !0,
-        children: [
-          /* @__PURE__ */ t("p", { className: "text-slate-700 dark:text-slate-200", children: [
-            /* @__PURE__ */ s("span", { className: "mr-1 rounded bg-slate-200/70 px-1 text-[9.5px] font-semibold uppercase tracking-wide text-slate-600 dark:bg-slate-700 dark:text-slate-300", children: u[a.kind] ?? a.kind }),
-            a.text,
-            a.label && a.kind !== "watch" && /* @__PURE__ */ t("span", { className: "text-slate-500 dark:text-slate-400", children: [
-              " · ",
-              a.label
-            ] })
-          ] }),
-          (a.kind === "watch" || a.kind === "subscription") && o && d && /* @__PURE__ */ s(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation(), d(o);
-              },
-              className: "mt-0.5 text-[10.5px] font-medium text-nvr-navy underline decoration-dotted underline-offset-2 dark:text-nvr-cyan",
-              children: "Manage your subscriptions"
-            }
-          ),
-          /* @__PURE__ */ s("ul", { className: "mt-1 space-y-px text-[10.5px] text-slate-500 dark:text-slate-400", children: N(m).map((e) => /* @__PURE__ */ t("li", { children: [
-            /* @__PURE__ */ t("span", { className: "font-medium text-slate-600 dark:text-slate-300", children: [
-              e.label,
-              ":"
-            ] }),
-            " ",
-            e.tip
-          ] }, e.key)) })
-        ]
+        notificationId: d,
+        why: i,
+        delivery: h,
+        subscriptionsPath: c,
+        rulesPath: m,
+        onNavigate: s
       }
     )
   ] });
 }
 export {
-  A as NotificationDetailBits
+  T as NotificationChangesList,
+  G as NotificationDetailBits
 };