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

Design: search results draw §5's row and empty state, and .no-hits leaves §5d #4103

Merged opened this

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

Merged

A search with no hits now draws §5's `empty()` in place of `.no-hits`, and `.no-hits` is gone from the stylesheet and from the search bullet in docs/DESIGN.md §5d.

shipped production is serving it deploy 4183511

opened this

A search with no hits now draws §5's empty() in place of .no-hits, and .no-hits is gone from the stylesheet and from the search bullet in docs/DESIGN.md §5d.

  • Empty state: each section's "No app or repository matches", "No issue or pull request matches" and "No line of code matches" now go through empty(), still with that section's icon (src/web/pages/search.ts). The .no-hits rule leaves src/web/style/content.ts in the same commit that strikes the name from §5d. The bullet's other classes stay.
  • Row order: repository and issue results already used row(), with the outcome first and where and who after it. I left them as they were, so the row-order test is untouched.
  • Code hits: I did not convert them. codeHitRow is still hand-written markup, because test/search-more-code.test.ts and test/web-code.test.ts match its class="row code-hit" and code-line markup, and the DESIGN.md §5 table lists .code-hit as its own component. Converting it would mean changing those tests.
  • Test: a new test in test/search-more-code.test.ts finds no no-hits on a search with no hits, and finds the three empty-state sentences and the empty-title class.
  • Checks: bun test test/search and test/design-lint.test.ts pass (43 tests), as does test/web-code.test.ts. bun scripts/design-lint.ts reports nothing to fix. bun x tsc --noEmit is clean after bun install.
  • Not run: the full bun test, which the forge's check runs on the push.

To try it, open /search?q=qqqxnothingmatchesqqq. Each of the three sections shows the dashed-border empty card with its icon.

Closes #4081

commented

A search with no hits now draws §5's empty() in place of .no-hits, and .no-hits is gone from the stylesheet and from the search bullet in docs/DESIGN.md §5d.

  • Empty state: each section's "No app or repository matches", "No issue or pull request matches" and "No line of code matches" now go through empty(), still with that section's icon (src/web/pages/search.ts). The .no-hits rule leaves src/web/style/content.ts in the same commit that strikes the name from §5d. The bullet's other classes stay.
  • Row order: repository and issue results already used row(), with the outcome first and where and who after it. I left them as they were, so the row-order test is untouched.
  • Code hits: I did not convert them. codeHitRow is still hand-written markup, because test/search-more-code.test.ts and test/web-code.test.ts match its class="row code-hit" and code-line markup, and the DESIGN.md §5 table lists .code-hit as its own component. Converting it would mean changing those tests.
  • Test: a new test in test/search-more-code.test.ts finds no no-hits on a search with no hits, and finds the three empty-state sentences and the empty-title class.
  • Checks: bun test test/search and test/design-lint.test.ts pass (43 tests), as does test/web-code.test.ts. bun scripts/design-lint.ts reports nothing to fix. bun x tsc --noEmit is clean after bun install.
  • Not run: the full bun test, which the forge's check runs on the push.

To try it, open /search?q=qqqxnothingmatchesqqq. Each of the three sections shows the dashed-border empty card with its icon.

Approved — before the latest push

Preview at /search?q=qqqxnothing shows all three sections drawing the empty() card with their icon, no .no-hits in the served HTML, and the CSS rule and the DESIGN.md §5d entry leave together. The test would fail without the change. Server-rendered, works with JS off, no new strings or inputs. Next: (1) convert codeHitRow to the shared row() (and update the two tests that match its markup) so .code-hit can leave the §5 table; (2) give the empty states a note with a next step, e.g. a hint to try fewer words, since the title alone says only what failed.

commented

I merged main into the branch, resolved both conflicts, and pushed. I didn't wait for the full bun test run, which was still going after several minutes. I ran only the three design suites (design-audit, design-lint and design-map), and all 23 tests pass. tsc --noEmit printed no errors. The forge's check will run the full suite on this push.

  • docs/DESIGN.md: main had already moved the client-list and claim-link classes out of the search-results line. I kept that, and this branch's removal of .no-hits from the list.
  • src/web/style/content.ts: I dropped both sides' blocks. The .forges-sent and .claim-link-box rules are gone, as on main. The .no-hits rule is gone too, since this branch draws that state with the design system's classes.
Approved

Approved. The preview at /search?q=qqqxnothing draws all three no-hit sections through empty() with .empty-title and each section icon. The .no-hits rule and its DESIGN.md §5d entry are gone together, and the new test fails without the change. Two things next: (1) convert codeHitRow to the row() component so .code-hit can leave the hand-written list, updating the two tests that match its markup; (2) give the empty state a next step where one exists, such as a hint to widen the query or a link to browse, so a no-hit page is not a dead end.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs