sow-nodebb-theme/docs/superpowers/plans/2026-06-26-global-topbar-refinements.md

Global Topbar Refinements Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Apply the post-review global topbar refinements from docs/superpowers/specs/2026-06-26-global-topbar-design.md.

Architecture: Keep the implementation inside the existing NodeBB child theme topbar partial, topbar SCSS partial, and theme client bundle. Extend the existing static topbar contract test so the refinements are pinned without adding a new test harness.

Tech Stack: Node.js built-in test runner, NodeBB templates, SCSS.

Global Constraints

• Keep this as a child theme over nodebb-theme-harmony.
• Keep theme.scss imports-only.
• Put substantive Westgate-specific topbar CSS under scss/westgate/.
• Preserve real NodeBB/Harmony live partials and component hooks for search, notifications, chat, drafts, user menu, and ACP navigation.
• Do not commit secrets or token material.

---

Task 1: Topbar Contract Refinements

Files:

• Modify: tests/global-topbar-contract.test.js
• Modify: templates/partials/header/topbar.tpl
• Modify: scss/westgate/_topbar.scss
• Modify: public/client.js

Interfaces:

• Consumes: Existing topbar.tpl markup, _topbar.scss selectors, and initWestgateTopbar.

• Produces: A single desktop navigation model, a one-line brand lockup, and opaque topbar menu surfaces.

• Step 1: Write the failing test

Add static contract assertions to tests/global-topbar-contract.test.js:

assertIncludes(topbar, 'SHADOWS OVER WESTGATE', 'Topbar brand should use the single required identity line');
assertExcludes(topbar, 'wg-topbar__brand-subtitle', 'Topbar should not repeat the site name as a subtitle');
assertExcludes(topbar, 'wg-topbar__forums', 'Topbar should not ship a separate desktop Forums dropdown');
assertExcludes(topbar, 'data-wg-menu="forums"', 'Forums should not use a custom topbar menu trigger');
assertIncludes(stylesheet, '$wg-topbar-panel-bg', 'Topbar menu surfaces should use an opaque local panel base');
assertExcludes(stylesheet, 'var(--wg-velvet-panel) !important;', 'Topbar menu surfaces should not inherit the translucent velvet panel token');
assertExcludes(stylesheet, 'text-overflow: ellipsis;', 'Topbar brand should not truncate in normal desktop layouts');

• Step 2: Run test to verify it fails

Run: node --test tests/global-topbar-contract.test.js

Expected: FAIL because the current topbar still has the brand subtitle, custom Forums dropdown, translucent panel token, and brand truncation.

• Step 3: Write minimal implementation

Change the template so the brand is only the mark plus SHADOWS OVER WESTGATE, remove the custom desktop Forums dropdown block, and keep mobile drawer forum entry links. Change _topbar.scss so dropdown/drawer surfaces use an opaque local panel gradient, remove custom Forums panel rules, and remove desktop brand ellipsis. Remove now-unused custom topbar panel toggle handling from public/client.js.

• Step 4: Run test to verify it passes

Run: node --test tests/global-topbar-contract.test.js

Expected: PASS.

• Step 5: Run the full available test set

Run: node --test tests/*.test.js

Expected: PASS.

• Step 6: Commit

git add docs/superpowers/plans/2026-06-26-global-topbar-refinements.md tests/global-topbar-contract.test.js templates/partials/header/topbar.tpl scss/westgate/_topbar.scss public/client.js
git commit -m "fix: refine global topbar integration"