// announcement.jsx — server-driven workspace announcements.
//
// Two surfaces:
//
// 1. AnnouncementHost — auto-mounted near the bottom of . On
// app load (and on focus + every 60s) it asks the server for
// GET /api/announcements/active, which returns every pending
// announcement for this user. The host renders a FULL-SCREEN,
// non-dismissible overlay for the first one; tapping "Got it"
// POSTs an ack, then the next pending announcement immediately
// takes the screen. Per-user ack lives in the DB, so the same
// user on a different device also sees each announcement once
// and only once.
//
// 2. AnnouncementsAdminView — owner / workspace-admin only page.
// Lists every announcement past + present, with read receipts
// (X of Y). Lets the owner publish a new one (multiple can be
// active at the same time — users work through them in order)
// and pick the audience: "All users" or "Specific users"
// (multi-select picker).
//
// The host file is loaded once globally; the admin view is exposed
// via window.AnnouncementsAdminView and routed by app.jsx into the
// shell sidebar (Announcements).
(function () {
const R = window.React;
// ── Full-screen blocking host ───────────────────────────────
// Seconds the user must wait before "Noted" becomes clickable. The
// intent is to make sure the message is at least visible long enough
// to be read — not just tab-tab-enter dismissed.
const NOTED_COUNTDOWN_SECS = 10;
function AnnouncementHost() {
// Queue of pending announcements (oldest first) and current index.
// Multiple announcements can be active at once; the user works
// through them one at a time. When the user acks the current one
// we advance `idx`; when idx passes the end of the queue we clear
// it and the overlay disappears until reload() finds more.
const [queue, setQueue] = R.useState([]);
const [idx, setIdx] = R.useState(0);
const [acking, setAcking] = R.useState(false);
const [secs, setSecs] = R.useState(NOTED_COUNTDOWN_SECS);
const reload = R.useCallback(async () => {
try {
const u = window.api && window.api.getUser && window.api.getUser();
if (!u || !u.id) return;
// External collaborators (ws_role = 'guest') are not the
// intended audience for internal HR / company announcements,
// so we suppress the modal client-side. Backend still scopes
// queries by workspace but this avoids targeted-message
// accidents leaking to outsiders.
if (u.wsRole === "guest") return;
const r = await window.api.announcements.active();
// Prefer the new array shape; fall back to the single-row
// shape from older server builds so a stale backend doesn't
// break the host.
const list = Array.isArray(r && r.announcements)
? r.announcements
: (r && r.announcement ? [r.announcement] : []);
setQueue(list);
setIdx(0);
} catch {}
}, []);
// Initial load.
R.useEffect(() => { reload(); }, [reload]);
// Re-check on login, on tab refocus, and every 60s in case the owner
// publishes a new one mid-session.
R.useEffect(() => {
function onAuth() { reload(); }
function onFocus() { if (document.visibilityState === "visible") reload(); }
window.addEventListener("flowboard:authed", onAuth);
document.addEventListener("visibilitychange", onFocus);
const id = setInterval(() => { if (document.visibilityState === "visible") reload(); }, 60_000);
return () => {
window.removeEventListener("flowboard:authed", onAuth);
document.removeEventListener("visibilitychange", onFocus);
clearInterval(id);
};
}, [reload]);
const pending = (idx >= 0 && idx < queue.length) ? queue[idx] : null;
// Reset + tick the countdown whenever the visible announcement
// changes (initial appear OR advance to next in queue).
R.useEffect(() => {
if (!pending) return;
setSecs(NOTED_COUNTDOWN_SECS);
const id = setInterval(() => {
setSecs(s => (s > 0 ? s - 1 : 0));
}, 1000);
return () => clearInterval(id);
}, [pending && pending.id]);
if (!pending) return null;
async function ack() {
if (acking || secs > 0) return;
setAcking(true);
try {
await window.api.announcements.ack(pending.id);
// Advance to the next announcement (if any). When we run off
// the end of the queue, clearing it makes the overlay vanish.
if (idx + 1 < queue.length) {
setIdx(idx + 1);
} else {
setQueue([]); setIdx(0);
}
setAcking(false);
}
catch (e) { setAcking(false); }
}
const ready = secs <= 0;
const total = queue.length;
const position = idx + 1;
const remaining = total - idx; // including the current one
// Full-screen overlay. No "X" close, no escape-to-close. The user
// MUST click "Got it" to dismiss — that's the whole point.
return window.ReactDOM.createPortal(
{ready
? (remaining > 1
? `${remaining - 1} more announcement${remaining - 1 === 1 ? "" : "s"} after this.`
: "This must be acknowledged to continue.")
: "Please take a moment to read this before continuing."}
This is queued alongside any other active announcements. Every user in the audience sees a full-screen modal on their next load and works through the queue one by one, tapping Got it on each.