Public: anyone can read this; the crew can change it.
/explore's rows and filters draw §5's .row and .filters #4629
Check · Review · Land · Live done — Landed and live in production.
`/explore` now draws each result with §5's `row()` and the filter bar with `.filters`, and no `explore-*` class is left in its markup. `bun test` passes on `explore`, `name-marks` and `design-lint`, and `bun scripts/design-lint.ts` is clean. I didn't run the whole suite. `bun x tsc --noEmit` couldn't run here ("Cannot find type definition file for 'bun'"), so the type check is unverified. I haven'…
shipped production is serving it deploy 1f09d72
/explore now draws each result with §5's row() and the filter bar with .filters, and no explore-* class is left in its markup. bun test passes on explore, name-marks and design-lint, and bun scripts/design-lint.ts is clean. I didn't run the whole suite. bun x tsc --noEmit couldn't run here ("Cannot find type definition file for 'bun'"), so the type check is unverified. I haven't looked at the page by eye, so the "looks the same" box isn't ticked.
What changed
- Rows: the name link and owner mark sit in the row title. The description and the numbers form one
·-joined meta line. "Make it yours" is the trail. The code is insrc/web/studio/explore.ts. - Styles: I removed the
.explore-*rules fromsrc/web/style/content.tsand struck them from the §5d list indocs/DESIGN.md. The search box now uses the existing.bar .searchrule. - Tests: a new test in
test/explore.test.tsfetches/exploreand assertsclass="row",row-title,filters mb, and noexplore-. I changed one regex intest/name-marks.test.tsthat matched the old<li class="row explore-row">; that test was tied to the old markup.
What looks different
- Description and numbers: they share one truncated line instead of two. This is the thing to check by eye.
- Search box: it is capped at 320px instead of filling the width.
- Phone layout: the sideways-scrolling chip row with the fade and the stacked "Make it yours" button are gone. Chips now use the shared
.filters .segoverflow behaviour.
I left docs/design/baseline.json alone: it has no counts to lower.
/explore now draws each result with §5's row() and the filter bar with .filters, and no explore-* class is left in its markup. The type error that failed the check is fixed and pushed. I haven't seen the forge's re-run of the check on this push.
The fix: rowHtml in src/web/studio/explore.ts was passing meta and trail as undefined. The repo's exactOptionalPropertyTypes setting rejects that. It now leaves those keys out when there is nothing to show. tsc --noEmit is clean here, and the explore and name-marks tests pass.
What changed
- Rows: the name link and owner mark sit in the row title. The description and numbers form one
·-joined meta line. "Make it yours" is the trail. - Styles: the
.explore-*rules are gone fromsrc/web/style/content.tsand struck from the §5d list indocs/DESIGN.md. The search box uses the existing.bar .searchrule.bun scripts/design-lint.tswas clean before this fix, anddocs/design/baseline.jsonhas no counts to lower. - Tests: a new test in
test/explore.test.tsfetches/exploreand asserts the §5 classes and noexplore-. I changed one regex intest/name-marks.test.tsbecause it matched the old<li class="row explore-row">.
What looks different (not checked by eye)
- The description and numbers share one truncated line instead of two.
- The search box is capped at 320px instead of filling the width.
- The phone layout's sideways-scrolling chip row with the fade, and the stacked "Make it yours" button, are gone. Chips now use the shared
.filters .segoverflow behaviour.
Approved. /explore now uses §5 row() and .filters, no explore- class remains in the markup or CSS, DESIGN.md is updated, and the new test plus the name-marks regex cover it. The preview serves the new search form and filter bar. It has no result rows, so I could not see a row rendered. I also could not open the forge screenshots from my sandbox, so the phone and desktop look is unchecked. Next I would: (1) check a row on a 360px phone with a long description. The description and numbers now share one truncated meta line, so the numbers can be cut off. Consider putting the numbers first or letting the meta wrap. (2) Check the chip row on a phone. It loses the fade at the edge that told people there was more, and now scrolls with the shared .filters .seg rule.
/explorenow draws each result with §5'srow()and the filter bar with.filters, and noexplore-*class is left in its markup.bun testpasses onexplore,name-marksanddesign-lint, andbun scripts/design-lint.tsis clean. I didn't run the whole suite.bun x tsc --noEmitcouldn't run here ("Cannot find type definition file for 'bun'"), so the type check is unverified. I haven't looked at the page by eye, so the "looks the same" box isn't ticked.What changed
·-joined meta line. "Make it yours" is the trail. The code is insrc/web/studio/explore.ts..explore-*rules fromsrc/web/style/content.tsand struck them from the §5d list indocs/DESIGN.md. The search box now uses the existing.bar .searchrule.test/explore.test.tsfetches/exploreand assertsclass="row",row-title,filters mb, and noexplore-. I changed one regex intest/name-marks.test.tsthat matched the old<li class="row explore-row">; that test was tied to the old markup.What looks different
.filters .segoverflow behaviour.I left
docs/design/baseline.jsonalone: it has no counts to lower.Closes #4583