@the-portland-company/shell 0.44.0 → 0.46.0

package/dist/{chunk-HCQXBR2R.js → chunk-I7DXEAWO.js}

@@ -358,6 +358,15 @@ function BellGlyph({ size = 20, className }) {
     /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
   ] });
 }
+function BellOffGlyph({ size = 14, className }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.63 13A17.9 17.9 0 0 1 18 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 8a6 6 0 0 0-9.33-5" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] });
+}
 function LifeBuoyGlyph({ size = 20, className }) {
   return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -603,6 +612,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;
@@ -632,6 +658,7 @@ function NewReplyToast({
   reply,
   onActivate,
   onClose,
+  onSilence,
   ttlMs = 12e3
 }) {
   const [visible, setVisible] = useState(false);
@@ -678,8 +705,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__ */ jsx("p", { className: "truncate text-sm font-semibold", children: reply.name }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs opacity-85", children: reply.preview })
+        /* @__PURE__ */ 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__ */ jsx(XGlyph, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "truncate pr-6 text-sm font-semibold", children: reply.name }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs opacity-85", children: reply.preview }),
+        /* @__PURE__ */ 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__ */ jsx(BellOffGlyph, { size: 12 }),
+              "Silence notifications"
+            ]
+          }
+        )
       ]
     }
   );
@@ -691,6 +748,7 @@ function NotificationsAction({ orgId }) {
   const [error, setError] = useState(false);
   const [notif, setNotif] = useState(() => readNotifState(orgId));
   const [toastReply, setToastReply] = useState(null);
+  const [toastsMuted, setToastsMuted] = useState(() => readToastsMuted());
   const [openToken, setOpenToken] = useState(0);
   const [panelOpen, setPanelOpen] = useState(false);
   const anyPanelOpen = useAnyTopBarPanelOpen();
@@ -773,6 +831,7 @@ function NotificationsAction({ orgId }) {
   const imports = payload?.imports ?? [];
   const quarantined = payload?.quarantined ?? [];
   useEffect(() => {
+    if (toastsMuted) return;
     if (!payload || toastReply || panelOpen) return;
     const candidate = replies.filter((r) => {
       if (!r.createdAt) return false;
@@ -789,7 +848,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 = useCallback((muted) => {
+    writeToastsMuted(muted);
+    setToastsMuted(muted);
+  }, []);
+  const onToastSilence = useCallback(() => {
+    setMuted(true);
+    setToastReply(null);
+  }, [setMuted]);
   const onToastActivate = useCallback(() => {
     const href = toastReply?.href;
     setToastReply(null);
@@ -823,7 +899,18 @@ function NotificationsAction({ orgId }) {
           openToken,
           onOpenChange: setPanelOpen,
           children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+              toastsMuted ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
               /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-4 w-full" }),
               /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-4 w-3/4" })
@@ -856,10 +943,21 @@ function NotificationsAction({ orgId }) {
                     )
                   ] }) }, a.id);
                 }),
-                replies.map((r) => /* @__PURE__ */ jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
-                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
-                ] }, r.id))
+                replies.map((r) => {
+                  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
+                  ] });
+                  return /* @__PURE__ */ jsx("li", { children: r.href ? /* @__PURE__ */ 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__ */ jsx("div", { className: "rounded-lg px-2 py-2", children: body }) }, r.id);
+                })
               ] }) : null,
               imports.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Imports" }),
@@ -902,7 +1000,8 @@ function NotificationsAction({ orgId }) {
         {
           reply: toastReply,
           onActivate: onToastActivate,
-          onClose: () => setToastReply(null)
+          onClose: () => setToastReply(null),
+          onSilence: onToastSilence
         }
       ) : null
     ] })
@@ -2595,5 +2694,5 @@ function NavAppShell({
 }
 
 export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, resolveOrgLogoUrl, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
-//# sourceMappingURL=chunk-HCQXBR2R.js.map
-//# sourceMappingURL=chunk-HCQXBR2R.js.map
+//# sourceMappingURL=chunk-I7DXEAWO.js.map
+//# sourceMappingURL=chunk-I7DXEAWO.js.map