the open page lists its bands in the nav

A third level, under the selected page only — every page has bands, and listing
all of them would make the nav longer than the site.

Announced by the builder rather than fetched again: it already reads them to know
what it is looking at in the document, and it mounts exactly when a page is open.
Cleared on unmount, or the nav keeps listing the last page's bands.

Clicking one writes a third URL segment and the preview scrolls to it, keyed on
the render count too so the position survives a save replacing the frame.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-01 09:45:07 +01:00
co-authored by Claude Opus 5
parent 2eb9142484
commit 7c4c3f48a8
4 changed files with 89 additions and 10 deletions
+9 -4
View File
@@ -32,14 +32,16 @@ export const MOUNT = '/fofos-admin';
* redirects, so the address bar ends up saying where you are. `section` is still defaulted, so
* everything that only wants to draw a highlight has one answer rather than a branch.
*/
export const useNav = (): { section: SectionKey; item: string | null; atIndex: boolean } => {
export const useNav = (): { section: SectionKey; item: string | null; part: string | null; atIndex: boolean } => {
const { pathname } = useLocation();
const rest = pathname.startsWith(MOUNT) ? pathname.slice(MOUNT.length) : '';
const [first = '', second = ''] = rest.replace(/^\//, '').split('/');
const [first = '', second = '', third = ''] = rest.replace(/^\//, '').split('/');
return {
// An unknown segment falls back rather than 404s: the URL is a thing people type and edit.
section: isSectionKey(first) ? first : DEFAULT_SECTION,
item: second ? decodeURIComponent(second) : null,
/** Something inside the item — a band of the open page. Nothing else uses a third segment yet. */
part: third ? decodeURIComponent(third) : null,
atIndex: first === '',
};
};
@@ -51,5 +53,8 @@ export const useNav = (): { section: SectionKey; item: string | null; atIndex: b
* you are looking at the Layout preview; carrying it into Galleries would be state from one screen
* deciding something on another. A panel that wants a parameter to survive says so at its own link.
*/
export const href = (section: SectionKey, item?: string | null): string =>
item ? `${MOUNT}/${section}/${encodeURIComponent(item)}` : `${MOUNT}/${section}`;
export const href = (section: SectionKey, item?: string | null, part?: string | null): string => {
if (!item) return `${MOUNT}/${section}`;
const base = `${MOUNT}/${section}/${encodeURIComponent(item)}`;
return part ? `${base}/${encodeURIComponent(part)}` : base;
};