Add MiniCardChooser component (CS-11672) by FadhlanR · Pull Request #5288 · cardstack/boxel

FadhlanR · 2026-06-19T03:05:17Z

Summary

Adds a standalone, inline card picker — <MiniCardChooser> — sized for side-by-side editor layouts. First primitive in the Markdown Editing UI ticket sequence (composed into the combined chooser modal in a later ticket).

Lives at packages/host/app/components/card-chooser/mini/, co-located with the existing card-chooser/modal.gts.
Wraps the existing <SearchPanel> so the in-flight v2 <SearchResults> migration applies automatically when that PR lands.
Reuses RecentCardsService + the recents section already inside SearchContent (no per-workspace scoping in this ticket — that wording in the issue is misleading).
API: @onSelect(url) (required), @selected (URL of pinned selection — gets teal fill + checkmark), @initialSearchKey, @baseFilter. The parent container owns mounting and dismissal — no onCancel callback.
width: 100%; height: 100% of the parent — sizing is set by the host container, not baked in.

What's behind `@variant='mini'`

The chooser opts into a new variant: 'default' | 'mini' flag threaded through the legacy card-search tree (SearchContent → SearchResultSection → SearchResultHeader → ItemButton → SearchBar). Under mini:

Single-line rows, vertically stacked (overrides compact-view's horizontal strip).
Selection treatment is a teal fill + right-aligned <CheckMark> icon — replaces the legacy border-color shift.
Realm/type filter chips suppressed via <SearchBar @hidePickers={{true}}>.
View-mode picker (grid/strip) suppressed via <SearchResultHeader @hideViewSelector={{true}}>.
Per-section "show only" toggle gated off; recents count surfaced (it's hidden in the default sheet).
Show-more button is pill-shaped; section headers tightened; row "in {realm}" caption and Spec spec-tag-pill hidden.

Reviewers: the bulk of the diff is in card-search/. The mini variant rides on the deprecated card-search tree on purpose — that's where the chooser's existing consumers already are. Migrating to v2 <SearchResults> is tracked separately.

Linear: https://linear.app/cardstack/issue/CS-11672/mini-card-chooser

Screenshot

Screen.Recording.2026-06-19.at.20.10.13.mov

Test plan

CI: host integration tests pass (mini-card-chooser-test)
Visual: open host freestyle catalog → MiniCardChooser → exercise example; confirm pill search bar, single-line rows, teal selection treatment
Sanity: existing full-screen chooseCard flow (default variant) still works unchanged

github-actions · 2026-06-19T03:10:22Z

Preview deployments

Host staging preview

Host production preview

Host Test Results

1 files ± 0 1 suites ±0 3m 34s ⏱️ - 1h 52m 21s
177 tests - 2 940 175 ✅ - 2 927 2 💤 - 13 0 ❌ ±0
177 runs - 2 959 175 ✅ - 2 946 2 💤 - 13 0 ❌ ±0

Results for commit aac20c3. ± Comparison against earlier commit b97233d.

Realm Server Test Results

1 files ±0 1 suites ±0 12m 26s ⏱️ +31s
1 740 tests +5 1 740 ✅ +5 0 💤 ±0 0 ❌ ±0
1 833 runs +5 1 833 ✅ +5 0 💤 ±0 0 ❌ ±0

Results for commit aac20c3. ± Comparison against earlier commit b97233d.

FadhlanR · 2026-06-19T09:46:33Z

[Claude Code 🤖] Please hold off on reviewing this PR until #5279 (Migrate the search sheet / card chooser to the v2 <SearchResults> surface) merges. This PR intentionally builds on the existing SearchPanel so it inherits the v2 render swap automatically once that lands; reviewing before then would be reviewing against a moving target.

@onselect

Standalone, inline card picker for side-by-side layouts. Wraps the existing SearchPanel so the in-flight v2 <SearchResults> migration applies automatically when that PR lands; reuses RecentCardsService and the recents section already inside SearchContent. - @onselect(url) / @oncancel callbacks; no global singleton. - 100% width/height of parent; layout owned by the host container. - Realm/type filter chips suppressed via scoped CSS in the mini variant. - Freestyle usage entry + integration tests that mount in isolation via a context-providing test driver. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…ty-state tests CI surfaced two issues in the first push: 1. The scoped-CSS `display: none` rule for the realm/type pickers kept the DOM, so the chip-absence assertion failed. Replace with a `@hidePickers` arg on SearchBar that conditionally renders the pickers and separator; MiniCardChooser passes it through. Ticket 5 can opt in too. 2. Three tests assumed item buttons appear on an empty search key, but SearchContent's sheet-mode `shouldSkipQuery` skips the query when empty — by design (empty state shows Recents only). Reshape the tests around the actual behavior: one mounts and asserts chip absence, one pre-populates Recents and clicks through, one types a search term to drive the realm query. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Plan doc is a scratch artifact for the planning phase; the merged branch keeps only code. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Move mini-card-chooser/ under card-chooser/mini/ so the picker primitives group with the existing chooser modal. Wire a `variant='mini'` knob through SearchContent / SearchResultSection / SearchResultHeader / ItemButton / SearchBar so the chooser renders as single-line rows with teal selection fill + checkmark, hides the view picker and per-section show-only toggle, and keeps the recents count visible. Trim the chooser API to the props the mini surface can actually honor (the realm/type pickers are suppressed), and drop the matching tests. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Adds a new inline MiniCardChooser component for side-by-side layouts, implemented by reusing the existing (legacy) card-search component tree and threading a new variant='mini' option through it.

Changes:

Introduces MiniCardChooser (+ Freestyle usage) that wraps SearchPanel and normalizes selected URLs.
Threads a mini visual variant through SearchContent/SearchResultSection/ItemButton/SearchBar/SearchResultHeader to suppress pickers/toggles and adjust selection visuals (teal fill + checkmark).
Adds an integration test covering isolation mounting, selection behavior, recents empty-state behavior, search filtering, and baseFilter scoping.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/host/app/components/card-chooser/mini/index.gts	New MiniCardChooser component wrapping SearchPanel/SearchContent with `variant='mini'`.
packages/host/app/components/card-chooser/mini/usage.gts	Freestyle catalog usage + API docs for MiniCardChooser.
packages/host/app/templates/host-freestyle.gts	Registers MiniCardChooser usage in the host freestyle catalog.
packages/host/app/components/card-search/constants.ts	Adds internal-only `SectionViewOption` type including `'mini'`.
packages/host/app/components/card-search/search-content.gts	Supports `variant='mini'` (layout tightening, summary text change, hides view selector, forces internal view id).
packages/host/app/components/card-search/search-result-header.gts	Adds `@hideViewSelector` to suppress grid/strip toggle under mini variant.
packages/host/app/components/card-search/search-result-section.gts	Adds `variant` handling, mini CSS modifier, full-width recents rows, and selected checkmark plumbing.
packages/host/app/components/card-search/item-button.gts	Adds optional right-aligned `CheckMark` rendering for selected single-select rows.
packages/host/app/components/card-search/search-bar.gts	Adds `@hidePickers` to hide realm/type pickers (and separator) for mini chooser.
packages/host/app/components/card-search/section-header.gts	Adjusts count alignment when “show only” toggle is absent.
packages/host/tests/integration/components/mini-card-chooser-test.gts	New integration test coverage for MiniCardChooser behavior + mini variant rendering.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  hooks.beforeEach(async function (this: RenderingTestContext) {
+    class Book extends CardDef {


+      /* Mini variant — tighten the layout so the chooser fits into a
+         narrow side-by-side envelope and matches the design references
+         (`.context/attachments/MXpUf9/...` and `.../BMmJkV/...`). */
+      .search-sheet-content.mini {


+        <Args.String
+          @name='initialSearchKey'
+          @description='Optional initial search term. Read once at mount; subsequent parent updates are ignored.'
+        />
+        <Args.String
+          @name='selected'
+          @description='URL of the currently selected card. The matching row gets the teal selection fill + checkmark.'
+        />
+      </:api>


FadhlanR marked this pull request as ready for review June 19, 2026 07:11

FadhlanR and others added 4 commits June 19, 2026 19:51

Remove mini-card-chooser plan doc

b9e89fe

Plan doc is a scratch artifact for the planning phase; the merged branch keeps only code. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

FadhlanR force-pushed the cs-11672-mini-card-chooser branch from b97233d to aac20c3 Compare June 19, 2026 12:54

FadhlanR requested a review from a team June 19, 2026 13:42

habdelra requested a review from Copilot June 19, 2026 13:58

Copilot started reviewing on behalf of habdelra June 19, 2026 13:59 View session

Copilot AI reviewed Jun 19, 2026

View reviewed changes

habdelra approved these changes Jun 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add MiniCardChooser component (CS-11672)#5288

Add MiniCardChooser component (CS-11672)#5288
FadhlanR wants to merge 4 commits into
mainfrom
cs-11672-mini-card-chooser

FadhlanR commented Jun 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 19, 2026 •

edited

Loading

Uh oh!

FadhlanR commented Jun 19, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		hooks.beforeEach(async function (this: RenderingTestContext) {
		class Book extends CardDef {

Conversation

FadhlanR commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's behind @variant='mini'

Screenshot

Test plan

Uh oh!

github-actions Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview deployments

Host Test Results

Realm Server Test Results

Uh oh!

FadhlanR commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

FadhlanR commented Jun 19, 2026 •

edited

Loading

What's behind `@variant='mini'`

github-actions Bot commented Jun 19, 2026 •

edited

Loading

FadhlanR commented Jun 19, 2026 •

edited

Loading