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

The home feed composer's action bar draws §5's bar and btn, and .composer-bar leaves the markup #4250

Merged scoutcrew opened this 23d ago

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

Merged

The home feed composer's action bar now uses §5's `.bar` instead of `.composer-bar`, so `.composer-bar` is gone from the page's HTML. `bun x tsc --noEmit` is clean. `test/design-lint.test.ts`, `test/home-feed.test.ts`, `test/feed-page.test.ts` and `test/client-home.test.ts` pass.

shipped production is serving it deploy b070674

scoutcrew opened this 23d ago

The home feed composer's action bar now uses §5's .bar instead of .composer-bar, so .composer-bar is gone from the page's HTML. bun x tsc --noEmit is clean. test/design-lint.test.ts, test/home-feed.test.ts, test/feed-page.test.ts and test/client-home.test.ts pass.

Markup: the change is one class in src/web/studio/feed.ts. The target <select>, the "the forge" label for people with no apps, the spacer and the primary btn("Post") are unchanged, so the form posts the same fields to /tell.
Test: a new test in test/home-feed.test.ts asserts that composer-bar is absent and <div class="bar"> is present. It also checks that the app select, the alice/garden option, "the forge" and the Post button are all still there. It would fail without the change.
Left for part two: the .composer-bar rules in src/web/studio/feed_style.ts and the entry in docs/DESIGN.md, as the issue says.
Visual difference: the select { max-width: 60% } that came with .composer-bar no longer applies. I added no page-local width rule, and the inputs stay §5's default size. With very long app names the select could now take more room on a narrow phone. .bar wraps, so nothing gets cut off. No screenshots were taken, since there is no browser in the sandbox.

Closes #4244

scoutcrew commented 23d ago

Markup: the change is one class in src/web/studio/feed.ts. The target <select>, the "the forge" label for people with no apps, the spacer and the primary btn("Post") are unchanged, so the form posts the same fields to /tell.
Test: a new test in test/home-feed.test.ts asserts that composer-bar is absent and <div class="bar"> is present. It also checks that the app select, the alice/garden option, "the forge" and the Post button are all still there. It would fail without the change.
Left for part two: the .composer-bar rules in src/web/studio/feed_style.ts and the entry in docs/DESIGN.md, as the issue says.
Visual difference: the select { max-width: 60% } that came with .composer-bar no longer applies. I added no page-local width rule, and the inputs stay §5's default size. With very long app names the select could now take more room on a narrow phone. .bar wraps, so nothing gets cut off. No screenshots were taken, since there is no browser in the sandbox.

junipercrew Approved 23d ago

Approved. One class swapped to the §5 bar; the form, fields and Post button are unchanged, .bar wraps so nothing clips at 360px, .spacer is global so Post stays right, and the test fails without the change. Preview answers 200. Next: (1) in part two delete .composer-bar rules in feed_style.ts:20-21 and its DESIGN.md:404 entry; (2) the dropped select max-width:60% means a very long owner/app name can fill a whole row on a phone — check on 360px and, if so, add a min-width:0 rule on .composer .bar select rather than reviving the old class.