One top bar, one button system, and the review fixes - #146
Merged
Merged
Conversation
The style guide gained the shared product bar after this app's house-style adoption landed, so it had none of it and still carried the links the bar is meant to replace. A .dmc-bar band between the tricolour stripe and the app navbar: DMC brand, app switcher, language picker, theme picker. The theme picker moves out of the navbar into it, and the "Dutch MeshCore" dropdown leaves entirely — every link in it is in the switcher, which is now the one place cross-subdomain links appear. Vendored from style-guide.html, with this app's canonical token names, until the shared file has somewhere to be served from. Two decisions, both recorded in #142: the language picker ships even though the app is English-only, because the band is meant to be the same control set everywhere rather than one app being a control short; and Mesh-Hunter and MC-Radar stay in the navbar, since they are not DMC subdomains and MC-Radar is this app's data source. Two things fell out of making the navbar sticky beneath the band: - The tricolour stripe has been 4px of nothing since #141. Its --stripe-h definition never made it into that commit: the script that added it hit a failed assertion further down and never wrote the file, and the retry only added the rule. Restored, and visible for the first time. - The map is sticky inside a column that `align-items: start` kept short, so it slid under the newly sticky navbar. The column stretches now, which is what gives the map room to stay put, and its offset comes from a measured --nav-h because the navbar wraps to more rows at narrow widths. Verified at 1280x820 and 375x812 in both themes: stacking (stripe 0-4, band 4-38, navbar sticks at 34, map clears it at 95), the switcher marking Triangulator as current, dropdowns closing each other and on outside click, and the mobile rules hiding the wordmark and chip labels while the sheet goes full-width in two columns. Closes #142 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The guide's product bar is a band above the app navbar, which on this page stacks two chromes over a map that is the whole point of it. The band's four things — DMC brand, app switcher, language, theme — merge into the app's own bar instead. That left the bar running three control shapes at once: 28px icon buttons for ? and the bell, mono chips with a caret for Apps and the language, and an OS emoji at a third size for the theme. Different heights, radii and backgrounds — the junk-drawer problem the map strip had, moved into the chrome. Every control is one shape now: 28px, one radius, one border, one chip background. The bell, the sun/moon and the question mark become inline SVG in currentColor, so they follow the theme and the hover state. A 1px rule separates the family's controls from the app's own, instead of them being differently shaped. GitHub leaves the bar, since the switcher's footer already carries it. At 375px the name drops to "Triangulator" and the carets go — a caret beside an icon-only chip says nothing the chip does not. A deliberate divergence from STYLE-GUIDE §9. Worth saying plainly: no other DMC app has implemented the band yet, so this is its first real fitting. Closes #143 Refs #142 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The bar was painted with --surface-2, which is rgba(8,10,13,.80) — fine for a panel that sits in the flow, wrong for a sticky bar that content scrolls under. Buttons and text showed straight through it. It takes --navbar-bg with a 16px backdrop blur and the navbar shadow, which is what STYLE-GUIDE §9 specifies for exactly this and what I should have used when the bar became sticky. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Measured on one screen with a cluster locked and an estimate present: 28 visible buttons drawn in 14 looks at 9 heights, 37 bordered elements in 8 border styles, 4 filled accent buttons at once. Almost no two buttons on the page were the same object, so nothing receded and the screen read as a pile. Three roles now, and nothing else: primary (filled accent, one per panel, the action that completes the step), secondary (outline, no fill), quiet (soft fill, no border — map controls, chips, the bar's icons). The rule doing most of the work is that a border is for a container, not for a control; quiet controls take a fill and get their border back on hover and focus. Observer rows lose theirs too, since fourteen rows each drawing an edge was most of why that panel looked like a pile. Flat instead of glass. The guide's signature — a sheen gradient on every panel over a red/blue-lit ground, a 42px grid and scanlines over that, and a hard 0 3px 0 #000 on headings — is four decorative layers behind the thing you came to read, and the heading shadow reads as a game title. Surfaces go flat, the overlays to zero, and the display face is reserved for the brand: panel titles become sentence-case body type. The brand stays in the colours, the tricolour band and the type. buttons 28 -> 19 distinct looks 14 -> 7 heights 9 -> 2 (38px, 28px) bordered elements 37 -> 23 filled accent 4 -> 3 (one per panel, as intended) A deliberate divergence from STYLE-GUIDE §3 and §6, in the same spirit as #143. Closes #144 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Two of the entries added on this branch ran 194 and 155 characters, over the ~120-character cap AGENTS.md sets for the What's new panel. Both trimmed to one line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
A static review of this branch confirmed 19 defects (each checked by three independent skeptics against the code); all are fixed here and re-measured in the running page. - The phone's What's new sheet was an empty 26px strip. backdrop-filter on .topbar made the bar the containing block for its position:fixed descendants, and the narrow sheet rule (0,1,0) lost top/left/right to the desktop .topbar-meta rule (0,2,0). The blur moves to .topbar::before, the sheet rule gains the ancestor, and the apps menu becomes a bottom sheet. 375px: 26px -> 487px tall; apps sheet 325px -> 359px wide. - .controls-card button (0,1,1) and its [aria-pressed] variant (0,2,1) outranked the quiet role, so the map strip kept the old bordered look. - Bar dropdowns: the trigger's stopPropagation kept What's new and the relief popover open; the English option had no handler; closing dropped keyboard focus to <body>; the app switcher claimed role="menu" with plain links. - Contrast: white on the brand blue was 4.38:1 (dark primary), light hover brightened to 4.09:1, and --accent-light text on tints was 2.48-3.08:1 in light mode. New per-theme --accent-fill and --accent-ink tokens; hover darkens. All measured >= 4.5:1 in both themes. - Smaller: scroll-margin-top under the sticky bar, #117 touch targets retargeted to where the icons moved, two dead <=768px gap overrides, the intro's unstyled Got it button, and the manual-banner pill buttons. Closes #145 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Sep 30, 2026
khagele
added a commit
that referenced
this pull request
Sep 30, 2026
fix(web-standalone): product-bar follow-up from the #146 review
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
1 participant
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.
Four pieces of work on the chrome, then a review pass over all of it. Closes #142, closes #143, closes #144, closes #145.
1 · Product bar, as one bar (#142, #143)
The style guide's product bar — DMC brand, app switcher, language, theme — was adopted, then merged into the app's own top bar instead of stacked above it. Two bars over a page that is mostly one big map was one too many, and no other DMC app has implemented the band yet, so this is its first real fitting.
currentColorinstead of OS emoji.2 · Button system and flat surfaces (#144)
Measured before: 28 buttons in 14 looks at 9 heights, 37 bordered elements, 4 filled accent buttons at once.
Three roles now — primary (filled, one per panel), secondary (outline), quiet (soft fill, no border). A border is for a container, not a control. Heights 38px and 28px.
Surfaces go flat: no sheen gradient, glow, grid or scanlines, and no hard heading shadow. Panel titles are sentence-case body type; the display face is kept for the brand.
This deliberately diverges from
STYLE-GUIDE.md§3, §6 and §9, which prescribe glass-over-glow, uppercase display headings and a separate band. If this direction holds, the guide needs updating rather than the app drifting further from it.3 · Review (#145)
A static review of the branch — six finders on the failure modes that slipped through earlier in this work (undefined and circular tokens, specificity traps, JS pointing at removed DOM, theme gaps), each finding checked by three independent skeptics against the actual code: 28 raw, 23 merged, 19 confirmed, 4 refuted. All 19 are fixed in the last commit.
The two worth knowing about:
backdrop-filteron the bar made it the containing block for itsposition: fixedchildren. The blur moved to.topbar::before. (Onmainthe same sheet already rendered off-screen from a specificity bug; this fixes both.)--accent-filland--accent-inktokens; hover darkens instead of brightening.Verified
Every fix re-measured in the running page, not reasoned about:
<body>Desktop 1280×900 and phone 375×812, both themes, no console errors. Coarse-pointer behaviour was checked under device emulation, not on a physical phone.
🤖 Generated with Claude Code