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

The /search results page speaks the home page's language #9875

Merged opened this

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

Merged

`/search` now reads like the home page: each result section is an `<h2>` over a plain `<ul class="list">`, with no card around it. The five search test files I ran pass (43 tests, including the new one). `tsc --noEmit` and `design-lint` are clean, and `scripts/gate.ts` printed nothing.

shipped production is serving it deploy 4cb4bc0

opened this

/search now reads like the home page: each result section is an <h2> over a plain <ul class="list">, with no card around it. The five search test files I ran pass (43 tests, including the new one). tsc --noEmit and design-lint are clean, and scripts/gate.ts printed nothing.

  • Results: I removed the card() wrapper from rowsUnderHeading in src/web/pages/search.ts. Each section keeps its <h2 class="mt" id="…">, and the markup is no heavier than before. No new class was added.
  • Empty states: An empty query, a query with no results and an empty section each say so in one muted sentence. The "Search everything" and "Explore" buttons became plain links in that sentence. The empty() and card imports are gone from the file.
  • /-/confirm: I did not touch it (that is #9860).
  • Tests: I added test/search-language.test.ts. It renders /search?q=… against a fixture repo and asserts no class="card in the results and one <h2> per section (three). It also checks that an empty query and a no-results query show no card. I did not run it against main, so "fails on main today" is untested.
  • Existing test changed: The "rows under a heading" test in test/studio-search.test.ts asserted .card.bare, so I changed it to assert the plain list and no card. The assertion was out of date, not wrong about the page.
  • Docs: docs/design/areas/search.md now says the new shape in one line.

I did not restyle the section counts or the "More matched than fit here" line.

To try it, open /search?q=<anything> while signed in, then /search?q= and a nonsense query for the empty states.

🤖 Generated with Claude Code

Closes #9862

commented

/search now reads like the home page: each result section is an <h2> over a plain <ul class="list">, with no card around it. The five search test files I ran pass (43 tests, including the new one). tsc --noEmit and design-lint are clean, and scripts/gate.ts printed nothing.

  • Results: I removed the card() wrapper from rowsUnderHeading in src/web/pages/search.ts. Each section keeps its <h2 class="mt" id="…">, and the markup is no heavier than before. No new class was added.
  • Empty states: An empty query, a query with no results and an empty section each say so in one muted sentence. The "Search everything" and "Explore" buttons became plain links in that sentence. The empty() and card imports are gone from the file.
  • /-/confirm: I did not touch it (that is #9860).
  • Tests: I added test/search-language.test.ts. It renders /search?q=… against a fixture repo and asserts no class="card in the results and one <h2> per section (three). It also checks that an empty query and a no-results query show no card. I did not run it against main, so "fails on main today" is untested.
  • Existing test changed: The "rows under a heading" test in test/studio-search.test.ts asserted .card.bare, so I changed it to assert the plain list and no card. The assertion was out of date, not wrong about the page.
  • Docs: docs/design/areas/search.md now says the new shape in one line.

I did not restyle the section counts or the "More matched than fit here" line.

To try it, open /search?q=<anything> while signed in, then /search?q= and a nonsense query for the empty states.

🤖 Generated with Claude Code

commented

The check failed because no commit message had a Try: line. I pushed an empty commit that has one, so no history was rewritten and no code changed.

The line reads: open /search?q=zephyr on the preview, then /search?q= and a nonsense query. bun scripts/gate.ts printed nothing locally after the commit. I did not re-run the tests, since only a commit message changed. The forge's check will run again on this push.

Changes requested — before the latest push

The card is gone and the empty states read well, but box 1 is not met: the served /search?q=zephyr has no <section> element at all (0 on the preview). Each result is a bare h2 followed by a ul. Fix first: wrap each result section (h2, rows, the "More matched" line) in a <section> in section(), and make test/search-language.test.ts assert one <section> per h2 (it only counts h2 today, so it would pass without the wrapper). Also: the issue says the test fails on main today; it was not run against main, so confirm that. The /-/confirm page is untouched. Nothing was found against the other design principles: no new class, no card, the empty states are plain muted sentences with links. The two empty-state links are now plain <a>, which is right for navigation.

commented

Each result kind on /search now sits in its own <section>, and the test asserts one <section> per <h2>. The search tests (61), tsc and design-lint pass. I haven't looked at the preview yet.

  • Wrapper: section() in src/web/pages/search.ts returns <section id="repos|issues|code" aria-labelledby="h-…">. It wraps the h2, the rows or the empty sentence, after, and the "More matched" note. The id moved to the section, so the existing #code links still work. The h2 now has id="h-<kind>", which the section's aria-labelledby points at.
  • Test: test/search-language.test.ts now also requires the <section> count to equal the h2 count (3). Without the wrapper it would fail.
  • Confirmed against main: I ran the new test against the pre-change search.ts (6100c23c^). Both tests fail there, because the old page has class="card markup.
  • Left alone: /-/confirm, as you noted.
commented

The check failed on test/studio-search.test.ts, which still expected the old markup <h2 class="mt" id="repos">. Moving the id to the <section> broke that expectation, so the test was out of date and the code is right.

I changed its assertion to expect <section id="repos" …> followed by <h2 class="mt" id="h-repos">. test/studio-search.test.ts now passes (32 tests) and tsc is clean. I did not rerun the full suite or scripts/gate.ts here. I pushed the fix, so the forge will rerun the check.

The rest of the change is as before. Each /search result kind sits in its own <section id="repos|issues|code"> labelled by its h2. test/search-language.test.ts asserts one <section> per h2.

Approved

Each result kind is now a <section> labelled by its <h2> over a plain .list. The empty states are one muted sentence with plain links, and the old studio-search assertion was updated to match. The semantics are sound, there is no card, no new class, and /-/confirm is untouched. It works with JS off. Next, non-blocking: (1) check the muted empty sentences at 360px for wrapping; (2) the first-visit sentence is long, so trim it to one clause (principle 1).

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs