sections are paths, not a query string

The admin declares its routes in the manifest, so /fofos-admin/layout/header and
/fofos-admin/pages/home are real URLs. One reader takes the two segments after
the mount; links carry no query string at all, so nothing leaks between
sections.

What stays in the query is how you are looking — device, tab, view — rather than
at what.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/routes.ts

@@ -0,0 +1,55 @@
+import { useLocation } from 'react-router';
+import { DEFAULT_SECTION, isSectionKey, type SectionKey } from './sections';
+
+/**
+ * Where this admin is in the URL, read from the PATH.
+ *
+ * ── The path, not the query string ──
+ *
+ * It was `?section=layout&band=header`. Everything about where you were lived in the query, which made
+ * every link a fresh `URLSearchParams` and every navigation a decision about what to carry — see the
+ * note NavPanel used to hold about parameters leaking between sections. A path has no such question:
+ * `/fofos-admin/layout/header` says where you are and nothing else, and what remains in the query is
+ * genuinely about how you are looking rather than at what.
+ *
+ * The routes themselves are declared in the manifest, so the platform knows they exist — which is what
+ * lets a route carry its own arrangement of panels rather than sharing one with the whole screen.
+ *
+ * ── Why the pathname and not `useParams` ──
+ *
+ * Which parameters exist depends on which route matched: `/fofos-admin/layout/header` has a `band` and
+ * `/fofos-admin/galleries` has nothing. A panel would then have to know its own route to read its own
+ * position, and every panel is rendered on all of them.
+ *
+ * Two segments after the mount, always in the same places. One reader, every route.
+ */
+export const MOUNT = '/fofos-admin';
+
+/**
+ * The section and its sub-item, from the two segments after the mount.
+ *
+ * `atIndex` is the bare `/fofos-admin`, which is a real state and not the same as Layout: the panel
+ * 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 } => {
+  const { pathname } = useLocation();
+  const rest = pathname.startsWith(MOUNT) ? pathname.slice(MOUNT.length) : '';
+  const [first = '', second = ''] = 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,
+    atIndex: first === '',
+  };
+};
+
+/**
+ * A link to a section, or to something inside one.
+ *
+ * The query string is dropped, and that is the point rather than an omission. `?device=tablet` is how
+ * 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}`;