// App chrome: TopHeader, LeftRail, StatusBar.
const NAV_ITEMS = [
{ id: 'sources', label: 'Sources', icon: 'Upload', badge: null },
{ id: 'draft', label: 'Course architecture', icon: 'Layers', badge: null },
{ id: 'library', label: 'Layout library', icon: 'Grid', badge: null },
{ id: 'roles', label: 'Organisations & roles', icon: 'Users', badge: null },
{ id: 'content-mapping', label: 'Content mapping', icon: 'Table', badge: null },
// No badge: `{ dot: 'warning', count: 2 }` was a literal that pinned a
// permanent amber "2" on Localisation for every course — including a
// single-language one with nothing to translate (removed 2026-07-28, same
// reason as Assessments below). The real per-language status lives in the
// Languages rail, counted from the course's own content.
{ id: 'localisation', label: 'Localisation', icon: 'Globe', badge: null },
// No badge: the old `{ dot: 'error', count: 1 }` was a literal that pinned a
// permanent red dot on Assessments for every course, including empty ones.
{ id: 'assessments',label: 'Assessments',icon: 'ClipboardCheck', badge: null },
{ id: 'brand', label: 'Course settings', icon: 'Palette', badge: null },
{ id: 'export', label: 'Export', icon: 'Package', badge: null },
// Workspace-level, not course-level, and shown only to somebody who can act on
// it. `requires` is read by NAV_ITEMS' consumer below; an entry with no
// `requires` is visible to everyone, exactly as all nine above always were.
//
// Hidden rather than greyed, deliberately: a Reviewer cannot invite anybody,
// and a menu item that answers 403 is a false affordance
// (`feedback_no_false_affordance_toggles`). The route enforces the same rule —
// this only stops the door being drawn.
{ id: 'members', label: 'Members', icon: 'Users', badge: null,
requires: 'member:manage' },
];
/**
* The rail entries this caller may actually use.
*
* ⚠️ `window.dynamoCan` is published by app.jsx from the capability set
* `GET /v1/me` returns — the SERVER's answer, not a role name matched here. A
* second role list in this file is exactly the drift that put a hardcoded
* `role === 'reviewer'` in app.jsx and would have given a Language Reviewer a
* fully editable UI (`feedback_one_rule_one_place`).
*
* Before /v1/me answers, `dynamoCan` returns false, so a gated entry appears a
* moment late rather than flashing and disappearing.
*/
function visibleNavItems() {
const can = typeof window.dynamoCan === 'function' ? window.dynamoCan : () => false;
return NAV_ITEMS.filter((item) => !item.requires || can(item.requires));
}
// ── TopHeader ───────────────────────────────────────────────────────────────
function TopHeader({ course, currentSurface, currentOrg, serverSync, onPreview, onLogoClick, onSwitchOrg }) {
// ── The course title is READ-ONLY here (2026-08-14) ───────────────────────
//
// Omar: *"Do not allow the editing of the course title using the edit icon at
// the top of the page… Since the Course Title is defined in the Course
// Settings, the only place where to edit it should be only in the Course
// Settings."* One place per rule (`feedback_one_rule_one_place`).
//
// ★ It was never an editor. The pencil opened an input bound to a local
// `useState` with no `onSave`, no PATCH and no callback prop of any kind: the
// author could rename the course, watch the header change, and lose it on the
// next refresh — while the ZIP, the manifest and the courses list kept the old
// name. So this removes a control that had FOUR layers of convincing UI over
// nothing at all, which is the shape
// `feedback_verify_the_control_not_just_the_pipeline` is about. Removing it is
// strictly a repair, not only a scope decision.
//
// Kept: the title itself, as text. It is the breadcrumb — the answer to "which
// course am I in" — and that job never needed the pencil.
const [orgMenuOpen, setOrgMenuOpen] = React.useState(false);
const isHome = currentSurface === 'home';
const isDynamoHome = currentSurface === 'dynamo-home';
const isNewCourse = currentSurface === 'new-course' || currentSurface === 'generating';
const isLanding = isHome || isDynamoHome || isNewCourse;
return (
{/* Left: logo + course title */}
{/* Org + Course breadcrumb */}
{/* Org switcher — hidden on Dynamo home (no org chosen yet) */}
{!isDynamoHome && (
)}
{!isLanding && (
<>
{/* Read straight off the prop — no local mirror. The mirror this
replaced had to be re-synced by an effect on every course switch
(`feedback_a_local_mirror_of_props_goes_stale`); with the editor
gone there is nothing for it to hold. */}
{course.title}
)}
{/* Right-side header actions */}
{!isLanding && (
<>
{/* NEVER hardcode this again. It read `state="saved"` from the day it
was written until 2026-08-11, so the header promised the server had
the author's work whatever the truth was — and on the two roles
screens the truth was that nothing had ever been sent. The default
when the prop is absent is the HONEST one, not the reassuring one.
It renders NOTHING at rest since 2026-08-12 (Omar: "Remove also
'Saved on this device'"), and it brings its own trailing divider so
the separator disappears with it. */}
)}
{/* The divider below separates the STATUS cluster (save state, AI spend) from the
ACTIONS cluster. It is NOT the magnifier's, and it stays.
★ I removed it along with the magnifier and `fe-save-doors.test.ts` caught it
immediately: that test keeps this exact divider as its proof that its own
narrower assertion is not merely satisfied, and says so in its comment. I had
read it as "the separator before the Search button". It separates two GROUPS,
and with Preview now first in the actions cluster it still has a job.
This note sits ABOVE `` rather than between it and the
divider, because the same test asserts they are adjacent with only whitespace
in between — a comment in that gap fails it. Worth knowing before "tidying". */}
{/* ── The magnifier button that used to sit here is GONE ────────────────
Removed 2026-08-13 on Omar's instruction: "Let's remove from the top
the 'Search'". It read as a search field and was not one — it opened
the ⌘K command palette, which is a different promise than the icon
makes (`feedback_no_false_affordance_toggles`).
★ The palette itself is NOT removed and is still reachable: the
keydown handler at `app.jsx:421` owns ⌘K independently of this button,
verified before deleting it. Removing a control whose only other door
does not exist would have quietly deleted the feature
(`feedback_a_new_gate_needs_its_remedy_to_exist`).
The now-unused `onCmdK` prop was dropped from this component's
signature and from its call site too, rather than left dangling to read
as still-wired. The divider above is NOT part of this removal — see the
note on it. */}
{/* ── Course preview ────────────────────────────────────────────────────
Renamed from "Preview" and filled with the brand red on 2026-08-13, when
a SECOND preview arrived: "Module preview", in the module card over in
Course architecture.
★ WHY THIS ONE STAYS UP HERE, and why that is the whole disambiguation.
A control's scope is read from WHERE IT LIVES far more reliably than from
its label. This band is the app's course-wide chrome — it already carries
the organisation, the course title and the course's AI spend — so a button
here is understood to act on the course. The module-scoped one lives INSIDE
the module's own card, next to that module's other action. Same reasoning as
keeping the language picker out of the preview window: the control belongs
to whatever owns the thing it acts on (`feedback_one_rule_one_place`).
Three further separations, so they cannot read as the same button twice:
· WEIGHT — this is the only filled one. Module preview is a quiet ghost,
peer to "+ Add layout" beside it, because that is its actual peer.
· HUE — both use `#A53E53`, but only this one uses it as a FILL; the other
wears it as text. Same family, obviously different rank.
· LABEL — each names its own scope, so neither is just "Preview".
The colour is a literal rather than a token because it is the one Omar
specified; there is no brand-red token in this stylesheet to point at yet. */}
{!isLanding && (
)}