@the-portland-company/shell 0.45.0 → 0.46.0

package/dist/app-chrome.cjs

@@ -454,6 +454,15 @@ function BellGlyph({ size = 20, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
   ] });
 }
+function BellOffGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.63 13A17.9 17.9 0 0 1 18 8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8a6 6 0 0 0-9.33-5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] });
+}
 function LifeBuoyGlyph({ size = 20, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -699,6 +708,23 @@ function writeNotifState(orgId, state) {
   }
 }
 var TEN_DLC_REDIRECTED_KEY = "politogy_10dlc_redirected";
+var TOASTS_MUTED_KEY = "politogy_chrome_toasts_muted";
+function readToastsMuted() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.sessionStorage.getItem(TOASTS_MUTED_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeToastsMuted(muted) {
+  if (typeof window === "undefined") return;
+  try {
+    if (muted) window.sessionStorage.setItem(TOASTS_MUTED_KEY, "1");
+    else window.sessionStorage.removeItem(TOASTS_MUTED_KEY);
+  } catch {
+  }
+}
 function formatPhone(raw) {
   const digits = raw.replace(/\D/g, "");
   const ten = digits.length === 11 && digits.startsWith("1") ? digits.slice(1) : digits;
@@ -728,6 +754,7 @@ function NewReplyToast({
   reply,
   onActivate,
   onClose,
+  onSilence,
   ttlMs = 12e3
 }) {
   const [visible, setVisible] = react.useState(false);
@@ -774,8 +801,38 @@ function NewReplyToast({
             className: "absolute right-[18px] top-[-7px] h-0 w-0 border-x-[8px] border-x-transparent border-b-[8px] border-b-[#161616]"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold", children: reply.name }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 truncate text-xs opacity-85", children: reply.preview })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss notification",
+            onClick: (e) => {
+              e.stopPropagation();
+              setVisible(false);
+              onClose();
+            },
+            className: "absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full text-white opacity-60 transition hover:bg-white/10 hover:opacity-100",
+            children: /* @__PURE__ */ jsxRuntime.jsx(XGlyph, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate pr-6 text-sm font-semibold", children: reply.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 truncate text-xs opacity-85", children: reply.preview }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setVisible(false);
+              onSilence();
+            },
+            className: "mt-2 inline-flex items-center gap-1 text-[11px] font-semibold text-white opacity-60 transition hover:opacity-100",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(BellOffGlyph, { size: 12 }),
+              "Silence notifications"
+            ]
+          }
+        )
       ]
     }
   );
@@ -787,6 +844,7 @@ function NotificationsAction({ orgId }) {
   const [error, setError] = react.useState(false);
   const [notif, setNotif] = react.useState(() => readNotifState(orgId));
   const [toastReply, setToastReply] = react.useState(null);
+  const [toastsMuted, setToastsMuted] = react.useState(() => readToastsMuted());
   const [openToken, setOpenToken] = react.useState(0);
   const [panelOpen, setPanelOpen] = react.useState(false);
   const anyPanelOpen = useAnyTopBarPanelOpen();
@@ -869,6 +927,7 @@ function NotificationsAction({ orgId }) {
   const imports = payload?.imports ?? [];
   const quarantined = payload?.quarantined ?? [];
   react.useEffect(() => {
+    if (toastsMuted) return;
     if (!payload || toastReply || panelOpen) return;
     const candidate = replies.filter((r) => {
       if (!r.createdAt) return false;
@@ -885,7 +944,24 @@ function NotificationsAction({ orgId }) {
       writeNotifState(orgId, next);
       return next;
     });
-  }, [payload, replies, toastReply, panelOpen, notif.lastSeenAt, notif.toastedReplyIds, orgId]);
+  }, [
+    payload,
+    replies,
+    toastReply,
+    panelOpen,
+    toastsMuted,
+    notif.lastSeenAt,
+    notif.toastedReplyIds,
+    orgId
+  ]);
+  const setMuted = react.useCallback((muted) => {
+    writeToastsMuted(muted);
+    setToastsMuted(muted);
+  }, []);
+  const onToastSilence = react.useCallback(() => {
+    setMuted(true);
+    setToastReply(null);
+  }, [setMuted]);
   const onToastActivate = react.useCallback(() => {
     const href = toastReply?.href;
     setToastReply(null);
@@ -919,7 +995,18 @@ function NotificationsAction({ orgId }) {
           openToken,
           onOpenChange: setPanelOpen,
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+              toastsMuted ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMuted(false),
+                  className: "text-[11px] font-semibold text-[color:var(--color-race-red)] hover:underline",
+                  children: "Unsilence"
+                }
+              ) : null
+            ] }),
             loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }),
               /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-3/4" })
@@ -952,10 +1039,21 @@ function NotificationsAction({ orgId }) {
                     )
                   ] }) }, a.id);
                 }),
-                replies.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
-                ] }, r.id))
+                replies.map((r) => {
+                  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
+                  ] });
+                  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: r.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: r.href,
+                      "aria-label": `Open the conversation with ${r.name}`,
+                      className: "block rounded-lg px-2 py-2 transition hover:bg-[color:var(--panel)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-race-red)]",
+                      children: body
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg px-2 py-2", children: body }) }, r.id);
+                })
               ] }) : null,
               imports.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Imports" }),
@@ -998,7 +1096,8 @@ function NotificationsAction({ orgId }) {
         {
           reply: toastReply,
           onActivate: onToastActivate,
-          onClose: () => setToastReply(null)
+          onClose: () => setToastReply(null),
+          onSilence: onToastSilence
         }
       ) : null
     ] })