Land the accepted navigation model: one app bar for every page - #507
Merged
Conversation
Every page now wears the same bar - brand, path, tools - replacing the editor's .topbar, the pages' .page-shell .topbar with its .back-link, the print page's one-off bar, and .review-guest-bar. Three shells share it: author, guest, reader. The two contested decisions, as ratified. A place in the path is a menu: clicking the universe or story name opens everything that belongs to it, starting with "Go to the universe" / "Go to the story", settings included as a word rather than a glyph. There is no gear anywhere in the chrome. And the help modal is gone: the ? tool navigates to the help pages, lights up via aria-current while you are there, and returns to where you were when pressed again, so help is openable in another tab and never covers your work. Paths are built in $lib/chrome.ts so every screen spells the same destinations the same way. The theme tool cycles dark -> light -> warm through the existing theme.ts, persisting to the account when signed in and to localStorage for guests and readers; the avatar menu's theme item now walks the same cycle instead of a parallel light/dark flip. The mode strip is always four modes: at universe scope Write and Review open the universe's story list, and for a guest three are switched off in place, each case with one rendered line under the strip saying why. Deleted: HelpModal, TopBar, PageTopBar, PaletteButton, and the .topbar, .crumbs, .back-link, .breadcrumb, .save-status, .review-guest-bar and .universe-edit CSS. /docs is public now, because the guest and reader shells keep the help tool and neither has an account. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The old bars carried .brand; the app bar's is .appbar-brand. This click sits past the export step, which the local suite cannot reach without MinIO, so only CI caught it. Selects by accessible name instead of by class. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
mtaanquist
marked this pull request as ready for review
July 30, 2026 03:23
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ports the accepted navigation model from design-pass session 2. Every page now
wears one bar; the three bars it replaces are gone. Behaviour is unchanged
except where the model changes it.
What migrated, per screen
.appbarwith the full path; the story name is a menu, "Go to the story" first. Save pill stays in the tools cluster.appbar; the universe crumb has one destination, its Plan. Four modes with the mode-note line.appbarwithLibraryas current text; each universe row carries "Insights" and "Settings" text buttons in place of the gear.appbarwith the full path; sidebar swapped to.side-nav; the back link is gone.appbarwith the full path;.side-navplus a "Back to the universe" group (Plan, Insights).appbarwithLibrary / Universe / Insights;.side-navover its existing in-page anchors.appbarwithLibrary / AccountandLibrary / Site admin. Their icon-led.admin-navsidebars stay as they are: not a straight class swap.appbarwith the full path; Print and Page setup are page-header actions; the one-off print bar is deleted; the paper wearsdata-theme="light"so its white and its ink are tokens.appbar.guestwith the "Review only" pill, theme and help tools, and "Reviewing as ...".appbarplus the article list in the left slot and a "Back to your work" group. The bare pages and the modal are both gone/@handle, story reader).appbar.readerwith theme support. Prose presentation untouched; full reader retheming is session 3Deleted
Components:
HelpModal.svelte,TopBar.svelte,PageTopBar.svelte,PaletteButton.svelte(folded into the bar's.tool-search).CSS, each grepped for references first:
.topbarand.page-shell .topbar,.crumbs/.crumbs .sep,.topbar-right,.brand-mark,.back-link, the.breadcrumbfamily,.divider,.save-status, the.review-guest-barfamily,
.universe-edit..app.focus-mode .topbarbecame.app.focus-mode .appbar.Ratified decisions
menu; "Go to the universe" / "Go to the story" is the first item, ticked
when you are already there. No split-click, no gear anywhere in the chrome.
Menus are real popovers composing
.popover/.menu-item, with the repo'sdismissaction,aria-haspopup/aria-expanded, arrow keys and Escape.?navigates to the help pages, lightsup via
aria-currentwhile there, and returns to the previous locationwhen pressed again.
Visible differences to expect, all intentional
names every destination, settings included.
Chrome layer
chrome.csslanded assrc/lib/styles/chrome.css, imported last in+layout.svelteafterprimitives.css. Two fixes while landing it, asbriefed: the header comment described an abandoned iteration ("settings is
never a crumb, it is the gear at the end of the path") and now describes the
final model;
.tool-search .kbdtargeted a class the primitivesconsolidation deleted and now targets the
kbdelement.Theme tool
Reconciled with the existing
theme.tsrather than added beside it.flipTheme(light/dark, resolving through the saved system mappings) isreplaced by
cycleTheme, which walks the three concrete palettesdark -> light -> warm.
ThemeToggle.sveltebecame the bar's theme tool, andUserMenu's theme item now calls the samecycleThemeso there is onecycle in the product, not two. Signed-in viewers persist through the existing
appearance API; guests and readers keep it in localStorage.
Scope fences honoured
Reference/History/Session/Assistant. The nav-write mock's "Notes 2" tab was
ignored as filler.
existing
PlanSidebarentity list. Only the app bar, the four-mode stripwith its note, and a small "Across the universe / Insights" group at the
foot of the sidebar landed. The mock's side-nav of
Overview/Characters/Places/... and its new centre sections are not built.
one; the schema has no such column), no section renames, no new sections.
Only chrome, paths, and the sidebar skin changed.
Two things worth a decision
non-removed edition, so the menu never offers a link that 404s. That needed
a
readingPageRefhelper inserver/publish.tsand areadingfield onthe six story-scoped page loads. When there is no edition the item is
omitted entirely.
/docsis public now (PUBLIC_PATHSplus a/docs/prefix). The guestand reader shells keep the help tool per the shells table, and neither has
an account, so help had to stop redirecting to
/login.need a story open. Both take you to the story list below." In our layout the
story board is the centre column, to the right of the strip, not below it.
Kept as briefed, flagged here: say the word and it becomes "Both take you to
this universe's story list".
Docs and kit
design-system.md: new Chrome section (app bar and the three shells, pathand crumb-menu rules, side-nav, tool-search, mode-strip constants, and the
rule that anything reachable only from the palette is a bug), shells table
updated, and the stale
TopBar/PageTopBar/HelpModalreferences clearedfrom the modal section, the new-page checklist and the component index.
design.md: the navigation paragraph, the universe four-mode behaviour, andthe focus-mode sentence now match what ships.
editor.md(the gear/breadcrumb sentence is now the storymenu),
getting-started.md(the?is a page you can go back from),account.md.scratch/design-kit/appbar.htmlwith the three shells stackedand the crumb menu open, added to the README card list.
Verified locally
npm run lintclean,npm run checkclean (0 errors, 0 warnings).npm run test:unit: 1077 passed, 1 skipped, 132 files.export step (
core-flow,import-story,universe-settings): thischeckout has no
.envand so noASSET_S3_BUCKET, which is the documentedlocal baseline. Every chrome assertion passes, including the rewritten ones.
and preferring role and label selectors:
core-flow(crumb menu contentsand its ticked current item,
.appbarin focus mode, settings reachedthrough the story menu, the help tool as a place),
docs(path, tickedarticle, plus a new test that the
?navigates and returns),review(guest shell tools, the four-mode strip with three
aria-disabledand thenote),
account(the three-palette cycle;Themedisambiguated from thebar's theme tool).
screenshots, plus the library, docs article, print preview, story settings,
universe Plan and the open story crumb menu in the running app.
Not verified locally
The export-dependent paths (they need MinIO), and everything in
core-flowafter its export step, which the local suite cannot reach for the same reason.
CI is the backstop and earned it: it caught one stale selector in that
unreachable stretch,
page.locator('.brand'), left over from the deletedbars. Fixed in the second commit to select the brand by its accessible name.
All three CI checks pass now: Lint/check/unit/build, End-to-end, Docker stack
boots.