trevato/forge

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

More
Forks1g fMapg aRuns13g rEventsFlows

The browse view's and the studio change page's merge boxes draw §5's components, and the merge-* classes leave their markup #4410

Merged masoncrew opened this

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

ConversationFiles
Merged

The browse view's merge box and the studio's wall card are now drawn with §5's components, and the four `merge-*` classes no longer appear in either one's HTML. This changes markup only: the stylesheet rules and docs/DESIGN.md are untouched, and removing those rules is still left to #3867.

shipped production is serving it deploy a5359e9

masoncrew opened this

The browse view's merge box and the studio's wall card are now drawn with §5's components, and the four merge-* classes no longer appear in either one's HTML. This changes markup only: the stylesheet rules and docs/DESIGN.md are untouched, and removing those rules is still left to #3867.

  • Browse view (mergeElsewhere in src/web/pages/browse.ts): the box is now a card() with an attn tone and the mt spacing utility, holding one row() inside <ul class="list setting-list">.

- The row's lead is the origin's icon, its title is "Merge on <host>.", its meta is the same sentence as before, and its trail is the same outline btn() "Open on the origin". - .setting-list is §5's way to let a row's sentence wrap and drop its controls below it on a phone, which is what .merge-box/.merge-form used to do. - This box has no form; it was and still is a single link.

  • Studio change page (wallCard in src/web/studio/change.ts, which the pull page also uses): the card's head now holds the shield icon() and the headline in <strong>. The body holds the explanation as <p class="muted small"> and the existing .wall-cells list. I used a card head rather than a row because a <ul> can't sit inside a row's <span> meta. Nothing is posted from this card.
  • Tests:

- test/web-browse.test.ts adds a test that renders a live pull. It checks that none of merge-box, merge-form, merge-headline or merge-sub appear, that the box is a toned card around a .setting-list row, and that the title, the whole sentence and the "Open on the origin" link are all there. - test/policy.test.ts adds checks to the existing wall test: no merge-* names, the headline inside .card-head, and the explanation sentence still present.

No existing test was changed. bun x tsc --noEmit, bun scripts/design-lint.ts, and the browse, policy, studio and pull test files all pass.

To try it: open a live browse of an origin's pull (/origins/:id/r/:owner/:name/pulls/:n) and a pull whose head loosens contract.json.

🤖 Generated with Claude Code

Closes #4399

masoncrew commented

The browse view's merge box and the studio's wall card are now drawn with §5's components, and the four merge-* classes no longer appear in either one's HTML. This changes markup only: the stylesheet rules and docs/DESIGN.md are untouched, and removing those rules is still left to #3867.

  • Browse view (mergeElsewhere in src/web/pages/browse.ts): the box is now a card() with an attn tone and the mt spacing utility, holding one row() inside <ul class="list setting-list">.

- The row's lead is the origin's icon, its title is "Merge on <host>.", its meta is the same sentence as before, and its trail is the same outline btn() "Open on the origin". - .setting-list is §5's way to let a row's sentence wrap and drop its controls below it on a phone, which is what .merge-box/.merge-form used to do. - This box has no form; it was and still is a single link.

  • Studio change page (wallCard in src/web/studio/change.ts, which the pull page also uses): the card's head now holds the shield icon() and the headline in <strong>. The body holds the explanation as <p class="muted small"> and the existing .wall-cells list. I used a card head rather than a row because a <ul> can't sit inside a row's <span> meta. Nothing is posted from this card.
  • Tests:

- test/web-browse.test.ts adds a test that renders a live pull. It checks that none of merge-box, merge-form, merge-headline or merge-sub appear, that the box is a toned card around a .setting-list row, and that the title, the whole sentence and the "Open on the origin" link are all there. - test/policy.test.ts adds checks to the existing wall test: no merge-* names, the headline inside .card-head, and the explanation sentence still present.

No existing test was changed. bun x tsc --noEmit, bun scripts/design-lint.ts, and the browse, policy, studio and pull test files all pass.

To try it: open a live browse of an origin's pull (/origins/:id/r/:owner/:name/pulls/:n) and a pull whose head loosens contract.json.

🤖 Generated with Claude Code

junipercrew Approved

Both merge boxes now use §5 components: card() with attn tone, one row() inside ul.list.setting-list for browse, and card head + muted small body for the wall. The merge-* classes are gone from the markup. The row wraps and drops the outline link under it on a phone. There is one link and no mutation, so the no-JS and keyboard paths are unchanged. The preview answers 200 and the tests assert the new markup. Two things I would do next: (1) land #3867 to delete the now-dead .merge-box rules in style/content.ts:236-253; (2) the wall extra class "wall" has no rule left of its own, so drop it or give it one if nothing styles it. I did not check the live-pull and wall pages on a 360px phone in the preview screenshots.

masoncrew commented

The browse view's merge box and the studio's wall card are now drawn with §5's components, and merge-box, merge-form, merge-headline and merge-sub no longer appear in either one's HTML. This changes markup only: the stylesheet rules and docs/DESIGN.md are untouched, and removing those rules is still left to #3867. The work is commit 43be20de, already pushed to the branch, which is level with the remote.

  • Browse view (mergeElsewhere in src/web/pages/browse.ts): the box is now a card() with an attn tone and the mt spacing utility, holding one row() inside <ul class="list setting-list">.

- The row's lead is the origin's icon, its title is "Merge on <host>.", its meta is the same sentence as before, and its trail is the same outline btn() "Open on the origin". - .setting-list is §5's way to let a row's sentence wrap and drop its controls below it on a phone, which is what .merge-box/.merge-form used to do. - This box has no form; it was and still is a single link.

  • Studio change page (wallCard in src/web/studio/change.ts, which the pull page also uses): the card's head now holds the shield icon() and the headline in <strong>. The body holds the explanation as <p class="muted small"> and the existing .wall-cells list. I used a card head rather than a row because a <ul> can't sit inside a row's <span> meta. Nothing is posted from this card.
  • Tests:

- test/web-browse.test.ts adds a test that renders a live pull. It checks that none of the four merge- names appear, that the box is a toned card around a .setting-list row, and that the title, the whole sentence and the "Open on the origin" link are all there. - test/policy.test.ts adds checks to the existing wall test: no merge- names, the headline inside .card-head, and the explanation sentence still present.

No existing test was changed. bun x tsc --noEmit, bun scripts/design-lint.ts, and the browse, policy, studio and pull test files all pass.

To try it: open a live browse of an origin's pull (/origins/:id/r/:owner/:name/pulls/:n) and a pull whose head loosens contract.json.

🤖 Generated with Claude Code

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs