[jh-RLI]

Closes #2644 (sub-issue of #2632).

What changes

• Signed in: the navbar's account corner is one menu under "user icon + username" with a chevron: Dashboard, Settings, a divider, then Sign out as a plain item. Behaviour change: clicking your own name opens the menu; it no longer goes to Settings.
• Signed out: "Sign in" is an ordinary nav link and "Sign up" is the bar's one light button (btn-on-strong, from Button roles: four roles, a grey secondary, a blue footer, and the page lint #2641). The cyan btn-info and red btn-danger buttons are gone from the navbar. All labels are in sentence case.
• Sign out posts a form (with a CSRF token) to allauth's logout. The old GET link went through allauth's confirmation page; the form signs out directly.
• On a phone the corner now sits inside .navbar-collapse. When the menu is open, the same items appear as their own section, marked off by a rule and headed by the user's name. The bar keeps one row (71 px signed in and out). Before, the corner wrapped onto a second row under the logo.
• Keyboard: the menu is a Bootstrap dropdown like the other navbar menus. Checked in headless Chrome: Enter opens it, ArrowDown walks Dashboard → Settings → Sign out, and Escape closes it and returns focus to the toggle.

House component user_menu

• base/templates/components/user_menu.html takes user and an optional id for the toggle (the catalogue needs a second one on the same page).
• theming/scss/components/_user_menu.scss holds only the phone section, the Sign out button reset and the Sign up spacing. Everything else reuses the navbar's own dropdown and link styles in base-style.css.
• styleguide/entries/user_menu.html shows both corners, signed in as an example user (pk 0, which no account has).
• _header.html includes the component and loads only instance_theming.

Decisions to look at

1. Button font size → token. .btn and .btn-sm now take --oep-font-size-dense, and .btn-lg takes --bs-body-font-size. This lives in _remap.scss and renders nothing differently at the default values (0.875rem / 1rem, the same as Bootstrap's compiled literals). Buttons were already dense; now the token the spec names for them actually controls them, so an instance that changes --oep-font-size-dense resizes every button. In the navbar, --navbar-rem still wins, so the homepage is unaffected.
2. The page lint now reads the navbar (.index-navbar) as well as #main-content, on every page in RESTYLED_PAGES, signed in or out depending on the page. Everything passes. The _header.html exemption in NoStatusColourAsAnActionTest and the test that kept it alive are deleted.
3. Homepage comparison masks the navbar's user area from now on. compare.mjs shoot writes <shot>.mask.json beside each shot. Its selector covers .user-menu plus the pre-Navbar user menu #2644 corner, so a before shot taken on an older branch masks the same place. diff ignores pixels inside either side's masks, and only those.

Checks

• Homepage comparison (develop before → this branch, then again after taking develop with Steering committee and contact on WF-13's layouts (#2651) #2704):
  • 1440, all four shots (home and menu, signed in and out): identical outside the masked user area.
  • 390, by design not identical:
    • Home shots: the page is 35 px shorter, because the second row under the logo is gone. With that row cut out of the before shot, the navbar and hero match pixel for pixel. What remains are anti-aliasing differences in the workflow icons, which are now drawn 35 px higher (checked by eye). The comparison flags these as different.
    • Burger shots: the user section is taller than the old row, so everything below it moves down.
  • From this PR on, the 390 shots taken here are the baseline, and later slices compare against them with the mask.
• check_catalogue: 20 entries. Literal scan: 0. Theme rebuild: committed bootstrap.min.css / stock_tokens.css equal a rebuild from the merged sources (sass 1.77.0, bootstrap 5.2.0).
• Full suite on the branch before taking develop: 2,223 tests. I fixed the failures it showed; on the merged tree, base + login + dataedit.tests.test_dataset_lifecycle run 1,065 green. The full suite was not rerun on the merged tree. The only remaining red is LightImportTest, the known isolated-settings failure. Fixed:
  • dataedit.tests.test_dataset_lifecycle compares two 404 pages byte for byte. Signed in, every page now carries a per-response masked CSRF token in the navbar, so the test strips that token before comparing.
  • login.tests.test_dashboard_header counted one Settings link in the navbar. There are now two (the menu and the phone section), so it counts the menu's dropdown-item.
  • page_texts/moved_styleguide.txt was recaptured. The only change is the new catalogue entry's text.
• New: base/tests/test_user_menu.py (8 tests, Django test client):
  • the menu's items, their order and the toggle;
  • the Sign out form (POST, action, CSRF), and a POST to it signs the user out;
  • the phone section's items, inside the collapse;
  • no btn in the signed-in navbar;
  • signed out: Sign in is a nav-link and Sign up the only button;
  • no Sign up when registration is closed;
  • the catalogue entry keeps its toggle id apart from the reader's own.
• Docs: instance-theming.md no longer lists the navbar's Sign up/Sign in buttons as not covered (the docs comment on Navbar user menu #2644).

Screenshots

In the vault, Homepage/_wayfinder/assets/2644/: before/after of the open phone menu signed in and out, the open user menu at 1440, the signed-out corner at 1440, the phone bar, and the catalogue entry at 1280 and 390.

Review

/code-review was run on both axes.

• Taken:
  • the toggle id is resolved once;
  • the benchmark-only data-navbar-user attribute is gone (the mask reads .user-menu);
  • the example user's pk is 0;
  • the test page table is plainer;
  • duplicated paths in compare.mjs are gone.
• Kept:
  • The font-size remap rides in this PR, because the ticket asked for that decision.
  • The items appear twice in the include (menu and phone section). The two structures differ, and the spec wants a section rather than a menu inside a menu.
  • The mask still covers the old corner's selector, which is what made this PR's own before/after comparison possible.

Took develop after #2704

The only conflict was the changelog, resolved as the union. bootstrap.min.css was rebuilt and is identical.

Took develop after #2706 and #2705

• Conflicts: two, both of the shared-file kind:
  • the changelog, resolved as the union;
  • bootstrap.min.css, rebuilt from the merged sources (stock_tokens.css unchanged).
• Other files: the rest merged cleanly. The peer review pages (Peer review pages and the Reviews tab on house components (#2658) #2706) and the factsheet edit pages (Factsheet edit and list on house fields and buttons (#2656) #2705) are on RESTYLED_PAGES, so the page lint now also reads their navbar, and they pass.
• Rerun on the merged tree:
  • tests: base, login, modelview and dataedit, 1,554 OK;
  • check_catalogue: 20 entries;
  • literal scan: 0;
  • homepage comparison: identical to this branch's shots before the merge (all 8).

🤖 Generated with Claude Code