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
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/4081-design-search-results-draw-5-s-row-and-e → main 2 commits fork
4 files
changed +11
−10
docs/DESIGN.md +1 −1
| @@ -398,7 +398,7 @@ gone, so this list only shrinks. | ||
| 398 | 398 | - **`style/content.ts`, prose (markdown)** — table cell alignment, built by `markdown.ts` as `ta-${align}`: `.ta-c` `.ta-r` |
| 399 | 399 | - **`style/content.ts`, diff viewer** — the diff table: its gutters, line kinds, file head and inline review comments: `.add` `.del` `.dh` `.diff` `.diff-body` `.diff-head` `.diff-note` `.diff-path` `.diff-stat` `.diff-stub` `.diff-summary` `.diff-table` `.dl` `.dl-review` `.dn` `.dn-comment` `.nonl` `.rc-hidden` `.rc-resolve` `.rc-resolved` `.wd` |
| 400 | 400 | - **`style/content.ts`, apps, runs, and the crew** — run pages, their logs and checks (a pull's look is §5's **look**): `.ln-forge` `.ln-pulse` `.ln-say` `.ln-tool` `.ln-you` `.log-tail-row` `.pinned-failures` `.pinned-slot` `.run-jump` `.run-live` `.run-steer` `.tests-bar` `.tests-words` `.txt` `.who` |
| 401 | - **`style/content.ts`, search results** — search results, the inbox's ask cards: `.ask-acts` `.ask-card` `.ask-group` `.ask-kind` `.ask-meta` `.ask-more-acts` `.ask-pick` `.ask-pick-hit` `.ask-short` `.ask-waiting` `.live-toggle` `.needs-you` `.no-hits` | |
| 401 | - **`style/content.ts`, search results** — search results, the inbox's ask cards: `.ask-acts` `.ask-card` `.ask-group` `.ask-kind` `.ask-meta` `.ask-more-acts` `.ask-pick` `.ask-pick-hit` `.ask-short` `.ask-waiting` `.live-toggle` `.needs-you` | |
| 402 | 402 | - **`pages/board.ts`** — the board itself is §5's **board**; the spend tables `spend.ts` draws wear §5's `.table` and `.stack`, no class of their own |
| 403 | 403 | - **`pages/map.ts`** — the map of what waits for what: `.map-ask` `.map-breath` `.map-canvas` `.map-card` `.map-counts` `.map-dot` `.map-edge` `.map-edge-crit` `.map-edge-done` `.map-empty` `.map-list` `.map-main` `.map-meta` `.map-node` `.map-pillars` `.map-rule` `.map-svg` `.map-title` `.map-tool` `.map-tools` `.map-who` `.map-who-i` `.map-who-n` `.map-word` `.map-wrap` |
| 404 | 404 | - **`studio/feed_style.ts`** — the home feed's cards, its composer and the apps rail: `.composer` `.composer-bar` `.fcard-form` `.fcard-reason` `.fcard-reply` `.fcard-text` `.fcard-unblock` `.fcard-who` `.fcard-why` `.feed` `.feed-head` `.kpi-spark` `.home-app` `.home-apps` `.home-apps-verbs` `.home-pick` `.home-rail` `.home-tabs` |
src/web/pages/search.ts +1 −3
| @@ -288,9 +288,7 @@ function section( | ||
| 288 | 288 | >`} |
| 289 | 289 | </h2> |
| 290 | 290 | ${rows.length === 0 |
| 291 | ? html`<p class="no-hits muted small"> | |
| 292 | ${icon(emptyIcon)}<span>${emptyText}</span> | |
| 293 | </p>` | |
| 291 | ? empty({ icon: emptyIcon, title: emptyText }) | |
| 294 | 292 | : listCard(rows)} |
| 295 | 293 | ${after} |
| 296 | 294 | ${when( |
src/web/style/content.ts −6
| @@ -1096,12 +1096,6 @@ textarea.editor:focus-visible { outline: none; } | ||
| 1096 | 1096 | } |
| 1097 | 1097 | .live-toggle .ico { color: var(--faint); flex: none; } |
| 1098 | 1098 | .live-toggle a { color: var(--accent); } |
| 1099 | .no-hits { | |
| 1100 | display: flex; align-items: center; gap: 8px; | |
| 1101 | padding: 10px 12px; margin: 0; | |
| 1102 | border: 1px dashed var(--border); border-radius: var(--radius); | |
| 1103 | } | |
| 1104 | .no-hits .ico { color: var(--faint); flex: none; } | |
| 1105 | 1099 | |
| 1106 | 1100 | } |
| 1107 | 1101 | /* What needs you, pinned on the home: the bulk step's select as wide as |
test/search-more-code.test.ts +9
| @@ -84,3 +84,12 @@ test("a roomy budget shows every row and offers nothing more", async () => { | ||
| 84 | 84 | expect(rowsOf(html)).toBe(6); |
| 85 | 85 | expect(html).not.toContain("data-more-code"); |
| 86 | 86 | }); |
| 87 | ||
| 88 | test("a search with no hits draws the empty state, not .no-hits", async () => { | |
| 89 | const html = await page(roomy, "q=qqqxnothingmatchesqqq"); | |
| 90 | expect(html).not.toContain("no-hits"); | |
| 91 | expect(html).toContain("No app or repository matches"); | |
| 92 | expect(html).toContain("No issue or pull request matches"); | |
| 93 | expect(html).toContain("No line of code matches"); | |
| 94 | expect(html).toContain("empty-title"); | |
| 95 | }); |
new above
offline