@the-portland-company/shell 0.39.1 → 0.40.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 0.40.0 — 2026-08-03
+
+### Fixed — the DevNotes badge was a second badge definition
+
+Reference/UI-Platform "Badge Counters" allows exactly ONE badge definition, and
+`.topbar-widget-slot` in `chrome.css` is supposed to restate it for a launcher
+that brings its own badge markup. It did not: the only rule was
+`.topbar-widget-slot button > span.relative { position: static }`, and DevNotes
+0.6.x writes that wrapper with an INLINE `position: relative` and **no class**,
+so the selector matched nothing. The badge kept anchoring to the glyph instead
+of the 32px trigger, and its own inline styles (`top:-4 right:-8`, `#dc2626`,
+`font-weight:700`, no `height`) rendered a visibly different bubble — measured
+different on app.politogyvrm.com vs contacts.politogyvrm.com.
+
+The slot CSS now (a) matches every direct span child of the launcher, not a
+class, and (b) restates the whole badge definition — 16px circle, `#E63946`
+via `--color-race-red`, 10px / weight 400 / line-height 1, `top:-4px`
+`right:-4px` — with `!important` so inline styles cannot win. `TopBarCountBadge`
+pins `font-weight: 400` and `line-height: 1` explicitly rather than inheriting.
+
+### Fixed — the new-reply toast rendered on top of the notifications panel
+
+Both the toast and the panel anchor to the bell trigger, and nothing suppressed
+one while the other was up, so opening Notifications put a message preview over
+the panel's "NOTIFICATIONS" header and first row. `TopBarPopover` gained
+`onOpenChange`; `NotificationsAction` clears the toast when the panel opens,
+refuses to raise a new one while it is open, and does not render it when open.
+One surface per trigger, per Reference/UI-Platform. No z-index was changed.
+
 ## 0.37.1 — 2026-07-27
 
 ### Fixed — cross-app navigation kept the user's active organization

package/dist/app-chrome.cjs

@@ -171,7 +171,7 @@ function topBarIconButtonClass(tone = "default") {
 }
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white", children: count > 99 ? "99+" : count });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
 }
 function TopBarTooltip({
   title,
@@ -343,10 +343,16 @@ function TopBarPopover({
   tone,
   onOpen,
   openToken,
+  onOpenChange,
   children,
   panelClassName
 }) {
   const [open, setOpen] = react.useState(false);
+  const onOpenChangeRef = react.useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  react.useEffect(() => {
+    onOpenChangeRef.current?.(open);
+  }, [open]);
   const rootRef = react.useRef(null);
   const lastOpenTokenRef = react.useRef(openToken);
   react.useEffect(() => {
@@ -757,6 +763,7 @@ function NotificationsAction({ orgId }) {
   const [notif, setNotif] = react.useState(() => readNotifState(orgId));
   const [toastReply, setToastReply] = react.useState(null);
   const [openToken, setOpenToken] = react.useState(0);
+  const [panelOpen, setPanelOpen] = react.useState(false);
   react.useEffect(() => {
     setNotif(readNotifState(orgId));
     setToastReply(null);
@@ -824,6 +831,7 @@ function NotificationsAction({ orgId }) {
     [orgId]
   );
   const onOpen = react.useCallback(() => {
+    setToastReply(null);
     setNotif((prev) => {
       const next = { ...prev, lastSeenAt: (/* @__PURE__ */ new Date()).toISOString() };
       writeNotifState(orgId, next);
@@ -835,7 +843,7 @@ function NotificationsAction({ orgId }) {
   const imports = payload?.imports ?? [];
   const quarantined = payload?.quarantined ?? [];
   react.useEffect(() => {
-    if (!payload || toastReply) return;
+    if (!payload || toastReply || panelOpen) return;
     const candidate = replies.filter((r) => {
       if (!r.createdAt) return false;
       if (notif.lastSeenAt && r.createdAt <= notif.lastSeenAt) return false;
@@ -851,7 +859,7 @@ function NotificationsAction({ orgId }) {
       writeNotifState(orgId, next);
       return next;
     });
-  }, [payload, replies, toastReply, notif.lastSeenAt, notif.toastedReplyIds, orgId]);
+  }, [payload, replies, toastReply, panelOpen, notif.lastSeenAt, notif.toastedReplyIds, orgId]);
   const onToastActivate = react.useCallback(() => {
     const href = toastReply?.href;
     setToastReply(null);
@@ -883,6 +891,7 @@ function NotificationsAction({ orgId }) {
           badge: loading ? 0 : badgeCount,
           onOpen,
           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" }),
             loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
@@ -950,7 +959,7 @@ function NotificationsAction({ orgId }) {
           ] })
         }
       ),
-      toastReply ? /* @__PURE__ */ jsxRuntime.jsx(
+      toastReply && !panelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
         NewReplyToast,
         {
           reply: toastReply,