feat(theming): dropdown sections and added links in the public header
Phase 10 of docs/website/THEMING_AND_NAV.md, asked for before the edge -> main
cutover. An admin can now create dropdown sections in the public header, organise
the coded entries into them, and add links of their own.
This deliberately amends §7, which said the override layer "cannot introduce a
`to` that is not already in the hardcoded NAV array". That stays true of every
CODED entry; an admin may now also add a link, restricted to a same-origin path —
no scheme, no protocol-relative //host. A link carries no gate of its own and
needs none: the page behind it enforces its own access, so an added link
advertises a route and never grants one.
The invariant is kept structurally rather than by vigilance. Coded entries live
in an `items` map whose keys must be routes the base array declares, so that map
cannot invent a route; everything that CAN name an arbitrary path lives in
`links`, which is the one place the path rule is applied — on both the write and
the read path.
nav_public therefore grew a { items, sections, links } wrapper. A bare map still
reads as the items map, and a nav with no sections still stores one, so this
changed nothing for a nav that does not use it. Free to do now because nothing
has shipped; after the cutover it would have needed a migration.
The Public tab gets its own editor. A public section is an entry in the
top-level order that the admin created and can drag among the pills, unlike the
admin sidebar's four coded sections, where only membership moves — that is a tree
rather than a list of groups. Deleting a section returns its entries to the top
level rather than removing them, which is the one destructive act this screen
could otherwise commit.
The dropdown opens on click and never on hover, and its trigger is not a link: a
hover menu is unusable on touch, and a trigger that navigates means tapping to
open takes you somewhere instead. Escape closes and returns focus, an outside
press closes, navigating closes, and Arrow Up/Down walk the items.
pruneNav applies the shard-feature gate inside a section and drops one it leaves
empty, so a dropdown never opens onto nothing.
Also fixes a bug this surfaced in the phase 6-8 code: the save path judged "does
this route still exist?" against the palette — the base array already filtered to
what the editing admin can see — so on the public header a feature-gated row's
override could never be carried through and would have been silently reset.
Membership is now judged against the full coded nav while the rows still come
from the palette.
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -169,3 +169,121 @@ test('a non-object resolves to {} rather than throwing', () => {
|
||||
test('NAV_KEYS names the three rows the controller validates', () => {
|
||||
assert.deepEqual(NAV_KEYS, ['nav_public', 'nav_admin', 'nav_player'])
|
||||
})
|
||||
|
||||
// ── Sections and added links (phase 10) ───────────────────────────────────
|
||||
//
|
||||
// The public header may carry admin-created dropdown sections and links the
|
||||
// admin authored. The invariant that has to survive is structural: `items` may
|
||||
// only key routes the code declares, so it can never introduce one, while
|
||||
// `links` is the one place an arbitrary path may be named — and is therefore
|
||||
// the one place the path rule is applied.
|
||||
|
||||
const WRAPPED = {
|
||||
items: { '/site/champs': { section: 'sec_abcd', order: 0 } },
|
||||
sections: [{ id: 'sec_abcd', label: 'The World', order: 3 }],
|
||||
links: [{ id: 'lnk_wxyz', label: 'Guide', to: '/wiki/new-player-guide', section: 'sec_abcd', order: 1 }],
|
||||
}
|
||||
|
||||
test('a bare items map is still valid and still stored as-is', () => {
|
||||
// Phases 6-8 wrote this shape, and a nav that does not use sections keeps it.
|
||||
assert.equal(validateNavOverrides({ '/site/news': { label: 'N' } }, 'nav_public').ok, true)
|
||||
assert.deepEqual(resolveNavOverrides({ '/site/news': { label: 'N' } }, 'nav_public'), {
|
||||
'/site/news': { label: 'N' },
|
||||
})
|
||||
})
|
||||
|
||||
test('a wrapped value round-trips with its sections and links', () => {
|
||||
assert.equal(validateNavOverrides(WRAPPED, 'nav_public').ok, true)
|
||||
assert.deepEqual(resolveNavOverrides(WRAPPED, 'nav_public'), WRAPPED)
|
||||
})
|
||||
|
||||
test('an added link must point at this site', () => {
|
||||
for (const to of ['https://evil.example', '//evil.example/x', 'javascript:alert(1)', 'wiki/guide', '/a b', '/a"b']) {
|
||||
const check = validateNavOverrides(
|
||||
{ items: {}, links: [{ id: 'lnk_wxyz', label: 'Bad', to }] },
|
||||
'nav_public',
|
||||
)
|
||||
assert.equal(check.ok, false, `${to} should be refused`)
|
||||
assert.match(check.message, /must be a path on this site/)
|
||||
}
|
||||
})
|
||||
|
||||
test('a link to a path that happens to be gated is allowed — the page is the gate', () => {
|
||||
// An added link carries no roles/feature of its own and does not need one: the
|
||||
// route behind it enforces its own access, exactly as typing the URL would.
|
||||
const check = validateNavOverrides(
|
||||
{ items: {}, links: [{ id: 'lnk_wxyz', label: 'Admin', to: '/admin/users' }] },
|
||||
'nav_public',
|
||||
)
|
||||
assert.equal(check.ok, true)
|
||||
})
|
||||
|
||||
test('section and link ids are constrained, and duplicates refused', () => {
|
||||
const bad = [
|
||||
[{ sections: [{ id: 'nope', label: 'X' }] }, /invalid id/],
|
||||
[{ sections: [{ id: 'sec_AB', label: 'X' }] }, /invalid id/],
|
||||
[{ sections: [{ id: 'sec_abcd', label: '' }] }, /label must be text/],
|
||||
[{ sections: [{ id: 'sec_abcd', label: 'A' }, { id: 'sec_abcd', label: 'B' }] }, /duplicate id/],
|
||||
[{ links: [{ id: 'sec_abcd', label: 'X', to: '/x' }] }, /invalid id/],
|
||||
[{ links: [{ id: 'lnk_abcd', label: 'A', to: '/a' }, { id: 'lnk_abcd', label: 'B', to: '/b' }] }, /duplicate id/],
|
||||
]
|
||||
for (const [extra, pattern] of bad) {
|
||||
const check = validateNavOverrides({ items: {}, ...extra }, 'nav_public')
|
||||
assert.equal(check.ok, false, JSON.stringify(extra))
|
||||
assert.match(check.message, pattern)
|
||||
}
|
||||
})
|
||||
|
||||
test('sections and links are bounded', () => {
|
||||
const sections = Array.from({ length: 13 }, (_, i) => ({ id: `sec_a${String(i).padStart(3, '0')}`, label: 'S' }))
|
||||
assert.match(validateNavOverrides({ items: {}, sections }, 'nav_public').message, /at most 12 sections/)
|
||||
const links = Array.from({ length: 41 }, (_, i) => ({ id: `lnk_a${String(i).padStart(3, '0')}`, label: 'L', to: '/x' }))
|
||||
assert.match(validateNavOverrides({ items: {}, links }, 'nav_public').message, /at most 40 added links/)
|
||||
})
|
||||
|
||||
test('sections and links are dropped for the navs that cannot render them', () => {
|
||||
// The admin sidebar has its own coded sections and the player portal is three
|
||||
// flat rows; only the public header supports this.
|
||||
for (const key of ['nav_admin', 'nav_player']) {
|
||||
const out = resolveNavOverrides(WRAPPED, key)
|
||||
assert.equal(out.sections, undefined, key)
|
||||
assert.equal(out.links, undefined, key)
|
||||
// The item survives, minus the section it can no longer belong to.
|
||||
assert.deepEqual(out, { '/site/champs': { order: 0 } })
|
||||
}
|
||||
})
|
||||
|
||||
test('an item or link naming a section that does not exist falls to the top level', () => {
|
||||
const out = resolveNavOverrides(
|
||||
{
|
||||
items: { '/site/champs': { section: 'sec_gone', order: 2 } },
|
||||
sections: [{ id: 'sec_abcd', label: 'Real' }],
|
||||
links: [{ id: 'lnk_wxyz', label: 'L', to: '/x', section: 'sec_gone' }],
|
||||
},
|
||||
'nav_public',
|
||||
)
|
||||
assert.equal(out.items['/site/champs'].section, undefined)
|
||||
assert.equal(out.links[0].section, undefined)
|
||||
})
|
||||
|
||||
test('an unusable section or link is dropped, its neighbours kept', () => {
|
||||
const out = resolveNavOverrides(
|
||||
{
|
||||
items: {},
|
||||
sections: [{ id: 'sec_abcd', label: 'Keep' }, { id: 'bad', label: 'Drop' }],
|
||||
links: [
|
||||
{ id: 'lnk_aaaa', label: 'Keep', to: '/keep' },
|
||||
{ id: 'lnk_bbbb', label: 'Drop', to: 'https://evil.example' },
|
||||
],
|
||||
},
|
||||
'nav_public',
|
||||
)
|
||||
assert.deepEqual(out.sections.map((s) => s.label), ['Keep'])
|
||||
assert.deepEqual(out.links.map((l) => l.label), ['Keep'])
|
||||
})
|
||||
|
||||
test('a wrapper that resolves to nothing usable comes back empty', () => {
|
||||
// The caller deletes the row rather than storing a wrapper that says nothing.
|
||||
assert.deepEqual(resolveNavOverrides({ items: {}, sections: [], links: [] }, 'nav_public'), {})
|
||||
assert.deepEqual(resolveNavOverrides({ items: 'nope' }, 'nav_public'), {})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user