// Comms presentational components (design reference, browser/React-DOM).
// Reuses C, FONT (data.jsx), Icon (icons.jsx), Brackets (shell.jsx),
// COMMS_TONE / relTimeC / fullTimeC / parseNotification / groupNotifications (comms-data.jsx).
const { useState: useStateB } = React;
// ---- Top-bar NotificationBell — glyph + unread badge. Hidden count when zero. ----
function NotificationBell({ count = 0, active }) {
return (
{count > 99 ? "99+" : count}
) : null}
);
}
// ---- Two-up segmented control: Notifications | Mail (ports WalletSegments) ----
function CommsSegments({ value, onChange, badges }) {
const segs = [["notifications", "Notifications", "bell"], ["mail", "Mail", "mail"]];
return (
{segs.map(([k, lbl, glyph]) => {
const on = value === k, n = badges ? badges[k] : 0;
return (
onChange && onChange(k)} style={{ flex: 1, position: "relative", display: "flex", alignItems: "center", justifyContent: "center", gap: 7, padding: "8px 0", borderRadius: 3, cursor: "pointer", background: on ? "rgba(0,200,255,0.14)" : "transparent", border: on ? "1px solid rgba(0,200,255,0.45)" : "1px solid transparent", fontFamily: FONT.body, fontSize: 12.5, fontWeight: on ? 600 : 400, color: on ? C.cyan : C.mfg }}>
{n} : null}
);
})}
);
}
// ---- NotificationRow — type icon + tone, title, relative time, unread dot.
// Tap expands the parsed body in place (Skills accordion interaction). ----
function NotificationRow({ n, first, defaultOpen }) {
const [open, setOpen] = useStateB(!!defaultOpen);
const tone = COMMS_TONE(C)[n.tone];
return (
setOpen((o) => !o)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 11, padding: "11px 12px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left" }}>
{!n.read ? {n.title}
{n.subtitle ?
{n.subtitle}
: null}
{relTimeC(n.time, NOW_C)}
{open ? (
{n.body}
{fullTimeC(n.time)}
{n.group}
) : null}
);
}
function NotifList({ items }) {
if (!items.length) return
{groups.map((g) => (
{g.label}
{g.items.map((it, i) =>
))}
onOpen && onOpen(m)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 11, padding: "11px 12px", borderTop: first ? "none" : `1px solid ${C.border}`, background: "transparent", border: "none", cursor: "pointer", textAlign: "left" }}>
{!m.read ? {m.subject}
from {m.sender}
{m.label ? {m.label} : null}
{relTimeC(m.time, NOW_C)}
);
}
function MailList({ items, onOpen }) {
if (!items.length) return
{items.map((m, i) =>
);
}
// ---- MailDetail — subject, from, date, sanitized selectable body. Read-only (no reply). ----
function MailDetail({ mail, onBack }) {
return (
{mail.subject}
{mail.sender}
{fullTimeC(mail.time)}{mail.label ? " · " + mail.label : ""}
{mail.body}
Read-only — Cyno Bridge never sends, replies, or marks mail in-game.
);
}
// ---- Per-segment scope gate (ReloginNotice) — block ONLY this segment, never the app. ----
function ScopeGate({ segment }) {
const label = segment === "mail" ? "Mail" : "Notifications";
const glyph = segment === "mail" ? "mail" : "bell";
return (
{label} needs a re-login
Grant the {label.toLowerCase()} scope to read this here. The rest of Comms keeps working.
Re-login to enable {label}
);
}
// ---- Empty / Skeleton / Copy ----
function CommsEmpty({ kind }) {
const isMail = kind === "mail";
return (
{isMail ? "No mail" : "No notifications"}
{isMail ? "Your EVEMail inbox is empty for this window. Pull to refresh." : "Nothing new from New Eden in the last few weeks. Pull to refresh."}
);
}
function CopyExport() {
return (
);
}
function CommsSkelRow({ first }) {
return (
);
}
function CommsSkeleton() {
return (
);
}
Object.assign(window, {
NotificationBell, CommsSegments, NotificationRow, NotifList,
MailRow, MailList, MailDetail, ScopeGate, CommsEmpty, CopyExport, CommsSkeleton,
});