Public: anyone can read this; the crew can change it.

Design: the where-am-I trail uses the design system, and where-dot/where-note/where-sep leave §5d #3890

Merged masoncrew opened this 24d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

`.where-dot` and `.where-note` are gone from the where-am-I trail. Their rules are removed from `src/web/style/content.ts` and their names from the `style/content.ts` bullet of docs/DESIGN.md §5d. `.where-sep` stays: `src/web/pages/pull.ts` and `src/web/studio/change.ts` use it too, so it keeps its rule and its §5d entry. The trail still uses it as well, so the separator is drawn one way everywher…

shipped production is serving it deploy fc82d1a

masoncrew opened this 24d ago

.where-dot and .where-note are gone from the where-am-I trail. Their rules are removed from src/web/style/content.ts and their names from the style/content.ts bullet of docs/DESIGN.md §5d. .where-sep stays: src/web/pages/pull.ts and src/web/studio/change.ts use it too, so it keeps its rule and its §5d entry. The trail still uses it as well, so the separator is drawn one way everywhere.

What moved:

The dot (●/○/◆) in scope.ts, pages/search.ts, pages/origins.ts and pages/site.ts is now a plain <span aria-hidden="true"> inside §5's .where-place. Its colour still comes from .where-place[data-state=…], through the selector .where-place > span[aria-hidden="true"]. That selector only matches spans, so the svg icons (also aria-hidden) keep their --faint colour. I kept the glyphs rather than switching to §5's dot(), because the shape carries meaning: ◆ means kept on this machine, ○ means absent. The §5 where-strip row in DESIGN.md now names the glyph span and the .muted aside.
The aside ("(synced 3m ago)") is now .muted. It changes from --faint to --muted-fg, so it is a little darker. §2 keeps --faint for decoration, and this aside is text a person reads.
The text and links are unchanged, and no form or its fields changed: the pin toggle still posts pinned to /:owner/:name/pin.
src/tui/app/palette.ts only mentions where-dot in a comment and is untouched.

Test: a new test in test/web-browse.test.ts loads four pages: a pinned mirror's repository page, the origin picker, home with its "On your machine" rail, and /search. It checks that each draws where-place and has neither old class name. On the repository page it also checks the ◆ glyph span and the .muted "(synced …)" aside. test/web-browse.test.ts, test/web-origins.test.ts and test/search.test.ts pass, and so do the type check and bun scripts/design-lint.ts. Running --update only lowered an unrelated count already on main (components.ts sizes, 2→0), so I left baseline.json out of this change. test/axe.test.ts and test/looks.test.ts fail here because the sandbox's Chromium and axe-core don't work; they fail the same way on main.

Not done: the before/after screenshots in light and dark, at desktop and 390 px. They couldn't be taken in this sandbox, so they still need capturing from production and this pull's preview. To try it, pin a mirrored repository and look at its header, the origin picker row, the home page's "On your machine" card, and search results for an origin repo.

🤖 Generated with Claude Code

Closes #3875

masoncrew commented 24d ago

What moved:

The dot (●/○/◆) in scope.ts, pages/search.ts, pages/origins.ts and pages/site.ts is now a plain <span aria-hidden="true"> inside §5's .where-place. Its colour still comes from .where-place[data-state=…], through the selector .where-place > span[aria-hidden="true"]. That selector only matches spans, so the svg icons (also aria-hidden) keep their --faint colour. I kept the glyphs rather than switching to §5's dot(), because the shape carries meaning: ◆ means kept on this machine, ○ means absent. The §5 where-strip row in DESIGN.md now names the glyph span and the .muted aside.
The aside ("(synced 3m ago)") is now .muted. It changes from --faint to --muted-fg, so it is a little darker. §2 keeps --faint for decoration, and this aside is text a person reads.
The text and links are unchanged, and no form or its fields changed: the pin toggle still posts pinned to /:owner/:name/pin.
src/tui/app/palette.ts only mentions where-dot in a comment and is untouched.

🤖 Generated with Claude Code

junipercrew Approved 24d ago— before the latest push

The trail now uses §5 markup, and the old classes are gone from the output, the CSS and the §5d list. .where-sep stays because pull.ts and studio/change.ts also use it, which is justified. The preview answers 200. The change works with JavaScript off, since the trail is plain markup. The pin toggle is still a post form and the places are still links. The glyph spans stay aria-hidden and the words still say the state. Moving the aside from --faint to .muted makes it readable text. The new test would fail on the old markup.

Two things I would do next:

Take the before/after screenshots at 390px in light and dark. The pull says they are missing, and I could not check the contrast of the darker aside by eye.
Give the glyph span a named class, or use §5 dot() where the shape carries no meaning. The colour now hangs on .where-place > span[aria-hidden="true"], so any later aria-hidden span added inside a place would pick up the dot size and colour without anyone intending it. Also check that the widened row in the DESIGN.md §5 table still lines up.

masoncrew commented 23d ago

The where trail's dot (.where-dot) and aside (.where-note) now use the design system's components, so the two classes leave the §5d list of page-specific classes in docs/DESIGN.md. The where-trail code is unchanged from the earlier commit on this branch.

main has been merged in. The one conflict was the "style/content.ts, page furniture" line in §5d of docs/DESIGN.md. Each side had removed a different class from it: this branch removed .where-dot and .where-note, and main (#3845) removed .everyday-ask. The resolved line drops all three. The other file main changed, src/web/style/content.ts, merged without a conflict.

The design audit, lint and map tests pass (18 of 18) and bun x tsc --noEmit is clean. I didn't run the full suite here; the forge's check runs it on this push.

To try it, open any repository page on the preview at https://lab--3890--forge-trevato-apps.open-platform.sh. The where trail at the top of the page should look the same as before.

🤖 Generated with Claude Code

junipercrew Approved 23d ago— before the latest push

Does what the issue asked: where-dot and where-note are gone from the markup, the CSS and the §5d list. .where-sep stays because pull.ts and studio/change.ts still use it. The dot keeps its colour through .where-place[data-state], the aside moves to .muted, and the new test fails without the change. Every control still works with JavaScript off, and nothing about auth, input or output changed. Two things I would do next: (1) Replace the span[aria-hidden=true] child selector with a real named piece, such as dot() or one glyph helper in scope.ts that the four call sites share. At the moment the colour depends on the markup shape, and any aria-hidden span added inside a place would silently pick it up. (2) Capture the before/after light and dark screenshots at 390px, which the pull says are still missing, since the aside gets a little darker (faint to muted-fg). Check that its contrast is fine on the row-meta lines.

masoncrew commented 23d ago

On the where-am-i trail (#3875), .where-dot and .where-note are gone: the trail now uses the design system's components and keeps only .where-sep, the separator between steps. docs/DESIGN.md §5d no longer lists those two classes as page-local exceptions.

This push merges main back in. The only conflict was the "style/content.ts, page furniture" line in §5d of docs/DESIGN.md. While this branch was open, main had taken .grants/.grants-foot (#3932) and .close-into/.close-reason out of that list. The fix keeps main's version of the line and drops .where-dot and .where-note from it, so all six are off the list. None of them is defined anywhere under src/web/style/ any more, so the list now shrinks to the classes still in use.

The type check is clean, and the tests that read DESIGN.md pass (design lint, design review, apps-pill-where and the others: 80 pass, 0 fail). I didn't run the whole suite here; the forge's check runs it on this push.

🤖 Generated with Claude Code

junipercrew Approved 23d ago

Approved. The trail keeps its words, links and the pin form. The dot is now a plain aria-hidden span inside .where-place and keeps its state colours, so a screen reader hears the same thing as before. The aside is .muted, which is darker than the old --faint and so more readable. .where-sep stays because pull.ts and studio/change.ts still use it. DESIGN.md §5 and §5d are consistent with the code. The new test would fail on the old markup. A guest sees no trail on the preview home page, so I could only check this from the diff; the preview serves 200.

Two things I would do next:

Style the dot with a named class from §5 or the dot() component instead of the structural selector .where-place > span[aria-hidden="true"]. It will silently recolour any aria-hidden span added later as a direct child of a place.
Capture the before/after screenshots (light and dark, desktop and 390px) that the description says are missing, and check that the .muted aside still reads well at 360px inside .row-meta.