forked from Goutam/lynkeduppro-crm
maaz519
041ad0e44a
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>
66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
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 { GlobalSearch } from "./global-search";
|
|
import { NotificationBell } from "./notification-bell";
|
|
import { user } from "./account-data";
|
|
|
|
function initialsOf(name: string): string {
|
|
return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
|
|
}
|
|
|
|
export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
|
|
// When signed in through the Shell, show the real identity from the App Context
|
|
// Envelope; otherwise fall back to the static demo user.
|
|
const router = useRouter();
|
|
const { user: me, logout, context } = useAuth();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const roleLabel = context?.scope?.role ? context.scope.role.charAt(0).toUpperCase() + context.scope.role.slice(1) : "";
|
|
const name = me?.displayName || user.name;
|
|
const initials = me ? initialsOf(me.displayName) : user.initials;
|
|
const secondary = me?.email || roleLabel || user.role;
|
|
|
|
async function signOut() {
|
|
setMenuOpen(false);
|
|
try { await logout(); } catch { /* ignore */ }
|
|
router.replace("/portal/login");
|
|
}
|
|
|
|
return (
|
|
<header className="dash-topbar">
|
|
<div className="dash-title">
|
|
<h1>{title}</h1>
|
|
<p>{subtitle}</p>
|
|
</div>
|
|
<div className="top-actions">
|
|
<GlobalSearch onNavigate={onNavigate} />
|
|
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
|
|
{theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
|
|
</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>
|
|
<div style={{ textAlign: "left", minWidth: 0 }}>
|
|
<div className="nm">{name}</div>
|
|
<div className="rl" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 150 }}>{secondary}</div>
|
|
</div>
|
|
<ChevronDown size={16} />
|
|
</button>
|
|
{menuOpen && (
|
|
<>
|
|
<div className="tm-menu-scrim" onClick={() => setMenuOpen(false)} />
|
|
<div className="tm-menu-pop" role="menu">
|
|
<button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|