forked from Goutam/lynkeduppro-crm
maaz519
ab78c739e0
The Offline-notifications popup was covered by Smart Gallery's toolbar. Raising its z-index could not have worked: .dash-topbar is `position: sticky; z-index: 20`, which opens a stacking context, so .tm-menu-pop's z-index: 30 only ranked inside the topbar. Against module content the whole topbar competed at 20 — and the vendored photo-gallery SDK stacks up to 1400 (its own README documents this). Adds AnchoredPopover, which portals to <body> — out of the topbar's stacking context entirely — positions from the trigger's viewport rect, clamps to the window edges, and closes on scroll/resize/Escape/outside-click. Applied to the notification bell AND the user menu, which had the identical trap and would have been reported next. Portalling rather than z-index escalation is the fix that survives a module raising its own z-index later. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
// Topbar bell → offline-notification control. Click opens a small popover to enable/disable Web Push
|
|
// for this browser. The dot is lit when this browser is subscribed. Hidden entirely when push isn't
|
|
// available (demo mode, or a browser without ServiceWorker/PushManager).
|
|
|
|
import { useRef, useState } from "react";
|
|
import { Icon } from "./ui";
|
|
import { AnchoredPopover } from "./anchored-popover";
|
|
import { usePushNotifications } from "@/lib/push-notifications";
|
|
|
|
export function NotificationBell() {
|
|
const push = usePushNotifications();
|
|
const [open, setOpen] = useState(false);
|
|
const btnRef = useRef<HTMLButtonElement>(null);
|
|
|
|
if (!push.supported) return null;
|
|
|
|
const denied = push.permission === "denied";
|
|
|
|
return (
|
|
<div style={{ position: "relative" }}>
|
|
<button
|
|
ref={btnRef}
|
|
className="ic-btn"
|
|
aria-label="Notifications"
|
|
aria-haspopup="menu"
|
|
aria-expanded={open}
|
|
style={{ position: "relative" }}
|
|
onClick={() => setOpen((o) => !o)}
|
|
>
|
|
<Icon name="bell" size={18} />
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
top: 9,
|
|
right: 10,
|
|
width: 7,
|
|
height: 7,
|
|
borderRadius: 99,
|
|
background: push.subscribed ? "var(--orange)" : "var(--border)",
|
|
border: "2px solid var(--panel)",
|
|
}}
|
|
/>
|
|
</button>
|
|
<AnchoredPopover anchorRef={btnRef} open={open} onClose={() => setOpen(false)} width={260}>
|
|
<div style={{ padding: 14 }}>
|
|
<div style={{ fontWeight: 700, fontSize: 13, marginBottom: 4 }}>Offline notifications</div>
|
|
<p style={{ fontSize: 12, color: "var(--muted)", margin: "0 0 12px", lineHeight: 1.4 }}>
|
|
{push.subscribed
|
|
? "You'll get push notifications for new direct messages and mentions, even when this tab is closed."
|
|
: "Get notified about direct messages and mentions when the CRM isn't open."}
|
|
</p>
|
|
|
|
{denied ? (
|
|
<p style={{ fontSize: 12, color: "var(--danger, #c0392b)", margin: 0 }}>
|
|
Notifications are blocked in your browser settings. Allow them for this site, then try again.
|
|
</p>
|
|
) : push.subscribed ? (
|
|
<button className="ds-btn v-ghost full" disabled={push.busy} onClick={() => push.disable()}>
|
|
{push.busy ? "Turning off…" : "Turn off notifications"}
|
|
</button>
|
|
) : (
|
|
<button className="ds-btn v-primary full" disabled={push.busy} onClick={() => push.enable()}>
|
|
{push.busy ? "Enabling…" : "Enable notifications"}
|
|
</button>
|
|
)}
|
|
|
|
{push.error && <p style={{ fontSize: 11.5, color: "var(--danger, #c0392b)", margin: "10px 0 0" }}>{push.error}</p>}
|
|
</div>
|
|
</AnchoredPopover>
|
|
</div>
|
|
);
|
|
}
|