{toasts.map(t => {
const color = NOTIF_ICON_COLOR[t.event] || "var(--archive)";
const icon = (ICON_BY_EVENT_TOAST[t.event] || HIcon.nNote);
return (
), document.getElementById("modal-root") || document.body);
}
// v07zz16 — Human-friendly label for grouped notification toasts.
function labelForEvent(ev) {
switch (ev) {
case "new_note": return "notes";
case "note_reply": return "replies";
case "note_resolved": return "notes resolved";
case "shot_status_change": return "status updates";
case "phase_started": return "phase changes";
case "new_asset_version": return "new versions";
case "asset_created": return "assets created";
case "new_episode": return "episodes added";
default: return "events";
}
}
const ICON_BY_EVENT_TOAST = {
new_note: HIcon.nNote,
note_reply: HIcon.nNote,
note_resolved: HIcon.nDone,
shot_status_change: HIcon.nLoop,
new_asset_version: HIcon.nPlay,
asset_created: HIcon.nStar,
phase_started: HIcon.nStar,
new_episode: HIcon.nStar,
};
window.NotificationToaster = NotificationToaster;
// v06p — Short relative time formatter for notification rows.
// SQLite timestamps come back as "YYYY-MM-DD HH:MM:SS" UTC, so
// we coerce to ISO before parsing.
function fmtRelativeTime(iso) {
if (!iso) return "";
const isoFixed = String(iso).includes("T") ? iso : iso.replace(" ", "T") + "Z";
const t = new Date(isoFixed).getTime();
if (!Number.isFinite(t)) return "";
const diff = (Date.now() - t) / 1000;
if (diff < 60) return "just now";
if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
return new Date(isoFixed).toLocaleDateString();
}
function useClickOutside(ref, onClose, active) {
React.useEffect(() => {
if (!active) return;
const handler = (e) => {
if (ref.current && !ref.current.contains(e.target)) onClose();
};
const key = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("mousedown", handler);
document.addEventListener("keydown", key);
return () => {
document.removeEventListener("mousedown", handler);
document.removeEventListener("keydown", key);
};
}, [ref, onClose, active]);
}
function getProjects() {
return (window.__projects && window.__projects.projects) || [];
}
// 17 Sep 2026 - project logos, cached for the whole page (Hugo: "its pretty slow and buggy switching
// project"). A switch used to fetch the logo again, show the project's name as TEXT until it came
// back and then swap in the { navigateToast(t); dismissToast(t.id); }}
role="button"
>
{icon}
);
})}
{t.title}
{t.sub && {String(t.sub).slice(0, 110)}
}
{t.author && — {t.author}
}
Project
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onToggle(); } }}
>
{/* keyed by the project only, so the entrance animation runs once per switch; the stand-in
is the same ![]()
, invisible and not animating until the logo is ready */}
{showLogo
? 
:
{/* 17 Sep 2026 - invisible (same height) until this project's episode list is known, so the
line appears once, complete, instead of growing its episode label 16-1100 ms later */}
{active.name}
}
{active.subtitle}
{/* t06c — episode dropdown integrated into the subtitle line.
Compact variant: text + small chevron, no surrounding pill.
v01b — when no episodes have loaded yet, EpisodeSwitcher
renders nothing; hide the leading separator dot too so the
subtitle doesn't end with a dangling "·". */}
{/* The ALBUM pill sits left of the video pill, so the line reads
"Music · Visuals · Trøpé ▾ · Cold Champagne ▾". It reuses
EpisodeSwitcher rather than adding a second component: a group and a
container present identically (a title, an order, a create form), and
one component means one set of classes, one click-outside and one
keyboard behaviour to keep right. */}
{(groups && groups.length > 0) && (
<>
0}
/>
{active.status}
{/* v07zz175 — online pill sits right after the status pill. Fades in on
every page EXCEPT Overview (where the TopBar already shows it), and
slides out avatars on hover like the TopBar one. */}
{/* 17 Sep 2026 — SWITCH TO + one row of fixed-size cards that scrolls sideways, so the
panel is the same height for 2 projects or 50 (header.css .ph-project-strip). */}
SWITCH TO
{listed.map(p => (
))}
{/* 23 Sep 2026 — HIDDEN TOOLS: null while Settings ▸ HIDDEN TOOLS ▸ Import shotlist is off. */}
{onImportShotlist && (
)}
{open && (
setQ(e.target.value)}
onKeyDown={(e) => { if (e.key === "Escape") { setQ(""); onClose(); } }}
/>
)}
{open && ql && (
{shotMatches.length === 0 && seqMatches.length === 0 && assetMatches.length === 0 && crewMatches.length === 0 && (
)}
No matches for “{q}”
)}
{shotMatches.length > 0 && (
<>
SHOTS
{shotMatches.map(s => (
))}
)}
{seqMatches.length > 0 && (
<>
SEQUENCES
{seqMatches.map(s => (
))}
)}
{/* v04l — assets and crew sections. */}
{assetMatches.length > 0 && (
<>
ASSETS
{assetMatches.map((a, i) => (
))}
)}
{crewMatches.length > 0 && (
<>
CREW
{crewMatches.map(c => (
))}
)}
{open && (
)}
);
}
// 17 Sep 2026 — StylePill: switch the project's skin from the header (Hugo: "I need a style
// switcher on the overview page, at the top"; later: "make it visible on all pages"). Same list and the same save as Settings →
// APPEARANCE · SKIN (window.__setThemeForProject, App.jsx), so the choice is saved on the project
// and a skin's own photo comes with it. Only admins and producers may save a project's look (the
// server refuses anyone else), so only they see the button.
function StylePill({ open, onToggle, onClose }) {
const ref = React.useRef(null);
const [, force] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
const fn = () => force();
window.addEventListener("filmtracker:skin-changed", fn);
return () => window.removeEventListener("filmtracker:skin-changed", fn);
}, []);
React.useEffect(() => {
if (!open) return;
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
}, [open, onClose]);
const skins = (window.__themePresetsFor ? window.__themePresetsFor(window.__activeProjectId) : window.THEME_PRESETS) || [];
const current = document.body.getAttribute("data-theme") || "forest";
const pick = (id) => {
if (id !== current && window.__setThemeForProject) window.__setThemeForProject(id);
onClose();
};
return (
APP SCALE
{OPTIONS.map(([id, label]) => {
const active = mode === id;
return (
);
})}
{open && (
)}
);
}
function NotificationsPopover({ open, onToggle, onClose }) {
const ref = React.useRef(null);
useClickOutside(ref, onClose, open);
// v06p — Wired to the real /api/notifications/me endpoint.
// Polls every 30s while the user has the app open so new
// notes / status changes surface in the bell without a manual
// refresh. SSE could replace polling later for instant.
const fetcher = window.authFetch || fetch;
const [items, setItems] = React.useState([]);
const [unreadCount, setUnreadCount] = React.useState(0);
// v07zz14 — Bell flash state. Toggles to true for ~2 s whenever a
// notification id appears in the response that we hadn't seen
// before. Skipped on the very first load (otherwise every page
// refresh would fanfare). Respects the "Notification fanfare"
// preference in Settings (localStorage key
// filmtracker.notif-fanfare, default 1).
const [bellFlash, setBellFlash] = React.useState(false);
const _seenIdsRef = React.useRef(null); // null = first load
// v07zz35 — Hugo: "getting spammed with repetitive action from my
// tester. Looks like bundling of notifications isn't working."
// The toaster already collapses N events from the same author into
// one card within a 60 s window, but the BELL FLASH was firing on
// every fresh-from-others notification id — so a tester rattling
// off 10 status changes produced 10 separate flash animations.
// Debounce: don't re-fire the flash within FLASH_COOLDOWN_MS of the
// last one. New notifications still increment the unread count + the
// dropdown updates instantly; only the visual fanfare is rate-limited.
const _lastFlashAtRef = React.useRef(0);
const FLASH_COOLDOWN_MS = 8000;
const load = React.useCallback(() => {
fetcher("/api/notifications/me?limit=20")
.then(r => r.ok ? r.json() : null)
.then(d => {
if (!d) return;
const list = (d.notifications || []).map(n => {
// Parse the payload for entity_id hints used by the
// click handler.
let payload = {};
try { payload = n.payload ? JSON.parse(n.payload) : {}; } catch (_) {}
return {
id: n.id,
event: n.event_type,
title: _prettyNotifTitle(n.title, payload),
sub: n.body || "",
// v07w — surface the author when the payload carries it.
// Server-side new_note/new_asset_version/etc. send
// `author` in the payload — see emailService.sendNotification
// call sites. Falls back to "" (won't render the chip).
author: (payload && (payload.author || payload.actor_name)) || "",
time: fmtRelativeTime(n.created_at),
unread: !n.read_at,
link: n.link || null,
payload,
};
});
setItems(list);
setUnreadCount(d.unread || 0);
// v07zz14 — Detect brand-new notifications (ids we haven't
// seen in any prior poll) and trigger the bell fanfare
// unless the user opted out in Settings.
try {
const currentIds = new Set(list.map(x => x.id));
if (_seenIdsRef.current === null) {
_seenIdsRef.current = currentIds;
} else {
// v07zz16 — Only flash for notifications authored by
// SOMEONE ELSE. Self-authored events shouldn't fanfare.
const me = (window.__currentUser && (window.__currentUser.name || window.__currentUser.email)) || "";
const meId = (window.__currentUser && window.__currentUser.id) || null;
const hasNewFromOthers = list.some(x => {
if (_seenIdsRef.current.has(x.id) || !x.unread) return false;
const p = x.payload || {};
const author = p.author || p.actor_name || "";
const authorId = p.actor_id || p.author_id || null;
if (me && author && String(author).toLowerCase() === String(me).toLowerCase()) return false;
if (meId && authorId && String(authorId) === String(meId)) return false;
return true;
});
if (hasNewFromOthers) {
const enabled = (function () { try { return localStorage.getItem("filmtracker.notif-fanfare") !== "0"; } catch (_) { return true; } })();
// v07zz35 — Rate-limit the flash to once per
// FLASH_COOLDOWN_MS so a burst of activity from the same
// author doesn't strobe the bell.
const sinceLast = Date.now() - _lastFlashAtRef.current;
if (enabled && sinceLast >= FLASH_COOLDOWN_MS) {
_lastFlashAtRef.current = Date.now();
setBellFlash(false);
requestAnimationFrame(() => {
setBellFlash(true);
setTimeout(() => setBellFlash(false), 900);
});
}
}
_seenIdsRef.current = currentIds;
}
} catch (_) { /* non-fatal */ }
})
.catch(() => {});
}, [fetcher]);
React.useEffect(() => {
load();
const id = setInterval(load, 30000);
return () => clearInterval(id);
}, [load]);
// Also refresh on open so the user always sees the latest list.
React.useEffect(() => { if (open) load(); }, [open, load]);
// Listen to SSE for instant updates.
React.useEffect(() => {
const fn = (e) => {
try {
const msg = (e && e.detail) || JSON.parse(e.data || "{}");
if (msg && (msg.type === "new_note" || msg.type === "note_added" || msg.type === "shot_status_change" || msg.type === "new_asset_version")) {
load();
}
} catch (_) {}
};
window.addEventListener("paradise-sse", fn);
return () => window.removeEventListener("paradise-sse", fn);
}, [load]);
const markAllRead = () => {
setItems(prev => prev.map(it => ({ ...it, unread: false })));
setUnreadCount(0);
fetcher("/api/notifications/read-all", { method: "POST" }).catch(() => {});
};
const markOneRead = (id) => {
fetcher(`/api/notifications/${id}/read`, { method: "PATCH" }).catch(() => {});
setItems(prev => prev.map(it => it.id === id ? { ...it, unread: false } : it));
setUnreadCount(c => Math.max(0, c - 1));
};
const openLinkedShot = (shotId) => {
onClose && onClose();
if (shotId && window.__nav && window.__nav.openShot) {
window.__nav.openShot(shotId);
}
};
// v06p — Resolve a notification's destination: explicit `link`
// wins; falls back to shot id parsed from the payload; review
// events route to the Review page.
const openNotification = (n) => {
if (n.unread) markOneRead(n.id);
onClose && onClose();
const nav = window.__nav || {};
const p = n.payload || {};
// v722 — same as navigateToast: land on the version the note was written on. This
// handler is a near-duplicate of that one (bell list vs slide-in card) — if you touch
// the routing in one, touch both.
const _tgt = (window.__noteVersionTarget && window.__noteVersionTarget(p.version_label)) || null;
const _openShotAtVersion = (id) => nav.openShot(id, _tgt && _tgt.version, _tgt && _tgt.family);
// Explicit link wins. /review/N → open the review page.
if (n.link && typeof nav.setView === "function") {
if (n.link.startsWith("/review")) {
const m = n.link.match(/\/review\/(\d+)/);
if (m) window.__pendingReviewId = parseInt(m[1], 10);
nav.setView("review");
return;
}
// v07u — `/shots/SHxxxx` is a shot deep-link.
const sm = n.link.match(/\/shots\/(\S+)/);
if (sm && typeof nav.openShot === "function") {
_openShotAtVersion(sm[1]);
return;
}
// v07zz279 — `/notes/STYLE
{skins.map((t) => {
const active = current === t.id;
return (
);
})}
{open && (
)}
);
}
// v01a — modal shell. Reuses the existing .modal-backdrop + .modal-card
// classes from styles/modal.css so we don't add new CSS for the chrome.
// Closes on backdrop click + Esc key.
function AuthModalShell({ children, onClose, width = 460 }) {
React.useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [onClose]);
const stop = (e) => e.stopPropagation();
// v07zz136 — Only dismiss when the press AND the release both land on
// the backdrop itself. Previously a bare onClick={onClose} meant that
// selecting text inside a field and releasing the mouse outside the
// card fired the backdrop click and kicked the user out mid-edit.
const downOnBackdrop = React.useRef(false);
const onBackdropMouseDown = (e) => { downOnBackdrop.current = (e.target === e.currentTarget); };
const onBackdropClick = (e) => {
if (downOnBackdrop.current && e.target === e.currentTarget) onClose();
downOnBackdrop.current = false;
};
return (
NOTIFICATIONS{unread > 0 ? ` · ${unread} UNREAD` : ""}
{items.length === 0 && (
You're all caught up — no notifications yet.
)}
{items.map((n) => {
const meta = ICON_BY_EVENT[n.event] || { icon: HIcon.nNote, color: "var(--archive)" };
return (
);
})}
{children}
PROFILE
Account
Profile photo
{!imageSrc && (
)}
{imageSrc && imageDims && cropRect && (
{!square && initialsFrom((user && user.name) || "U")}
JPG / PNG · you'll be able to crop it.
Drag the box to reframe · use the slider to zoom.
)}
onPickFile(e.target.files && e.target.files[0])}/>
{photoErr && {photoErr}
}
{photoOk && Photo updated.
}
Profile details