feat(dashboard): offline web push — service worker, subscribe flow, deep-link

Notifications phase 2: a /push-sw.js service worker shows a system notification
on push and, on click, focuses an open CRM tab (or opens one) and deep-links to
the thread. usePushNotifications registers the SW, requests permission, subscribes
with IIOS's VAPID key, and stores the subscription via the be-crm door. The topbar
bell becomes a real enable/disable control (hidden when push is unsupported/demo).
Dashboard listens for the SW's notif-click message + a ?thread= deep link.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-23 15:38:14 +05:30
parent be50d53c50
commit 041ad0e44a
5 changed files with 283 additions and 5 deletions
+2 -5
View File
@@ -4,8 +4,8 @@ import { useState } from "react";
import { useRouter } from "next/navigation";
import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
import { useAuth } from "@abe-kap/appshell-sdk/react";
import { Icon } from "./ui";
import { GlobalSearch } from "./global-search";
import { NotificationBell } from "./notification-bell";
import { user } from "./account-data";
function initialsOf(name: string): string {
@@ -40,10 +40,7 @@ export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
{theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
</button>
<button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
<Icon name="bell" size={18} />
<span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
</button>
<NotificationBell />
<div className="top-user-wrap" style={{ position: "relative" }}>
<button className="top-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
<span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>