// Comms screen + phone wrappers (design reference).
// CommsScreen is a PUSHED stack screen at (app)/comms, reached from the top-bar bell.
// It is NOT a new tab — the five status tabs stay full.
const { useState: useStateS } = React;
// Stack-style header (back chevron + title + online pill).
function CommsStackHeader({ title = "Comms", onBack }) {
return (
);
}
// The Comms screen body. `state`: 'loaded' | 'skeleton' | 'empty'. Defaults to the segment
// with unread (else Notifications). Each segment is scope-gated independently.
function CommsScreen({ segment, state = "loaded", notifMissing = false, mailMissing = false, onOpenMail, defaultOpenFirst }) {
const data = buildComms({ notifMissing, mailMissing });
const initial = segment || (data.unread.notifications >= data.unread.mail ? "notifications" : "mail");
const [seg, setSeg] = useStateS(initial);
const badges = { notifications: data.unread.notifications, mail: data.unread.mail };
let body;
if (seg === "notifications") {
body = notifMissing ?
: state === "skeleton" ?
: state === "empty" ?
: ;
} else {
body = mailMissing ?
: state === "skeleton" ?
: state === "empty" ?
: ;
}
return (
{body}
);
}
// ---- Phone wrappers ----
function commsFrame(children) {
return (
);
}
// Pushed-screen phone: StatusBar + CommsStackHeader + scroll + TabBar (Capsuleer stays active).
function CommsPhone({ title = "Comms", children }) {
return commsFrame(
{children}
);
}
// Tab-style top nav WITH the bell (shows where the bell + badge live on the dashboard).
function CommsTopNav({ unread }) {
return (
);
}
// Dashboard phone that surfaces the bell in the top bar (entry point context).
function CommsBellContext({ children }) {
const data = buildComms({});
return commsFrame(
{children}
);
}
// Mail detail pushed phone.
function MailDetailPhone({ mailId }) {
const mail = mailBodyView(mailId);
return commsFrame(
);
}
Object.assign(window, { CommsStackHeader, CommsScreen, CommsPhone, CommsTopNav, CommsBellContext, MailDetailPhone, commsFrame });