Repository navigation
docs(catalog): a search box over the cards; it fills the ?q= filter the gallery already reads - #7147
Conversation
…ad of a live player
…he gallery already reads
There was a problem hiding this comment.
🟢 Approval recommended
The catalog search change has no active review issues.
No open issues 🎉
What changed in this PR
Adds catalog-specific search to the existing gallery, letting visitors filter cards as they type and share searches through the existing ?q= URL handling.
Changes:
- Adds an accessible search input bound to the gallery’s existing filter.
- Styles the input and keyboard-focus outline using inherited page colors for light and dark themes.
| File | Description |
|---|---|
docs/snippets/catalog-gallery.jsx |
Adds the search input and connects it to the existing query filter. |
docs/catalog-gallery.css |
Adds responsive search-field styling and a visible focus outline. |
Review effort: Balanced
jrusso1020
left a comment
jrusso1020
left a comment
There was a problem hiding this comment.
Reviewed at 814db34f284a109c1a4fdeb7f6cb209725936524. COMMENT review; the search increment reads clean.
The native labelled search input reuses the existing filter, URL update and reset paths (docs/snippets/catalog-gallery.jsx:236–239); no second search state or service is introduced. I read the complete gallery and CSS, including the existing popstate path.
Browser evidence: an exact-source React fixture using this head's catalog data and CSS, at 390 px in light/dark palettes. Keyboard typing chart produced 10 cards and ?q=chart; reloading retained both. A nonmatching query showed the empty state; Explore all items cleared the input/URL and returned the 36-card overview. Focus outline was visible with no horizontal overflow. This was a local component fixture, not a deployed Mintlify search-page walk; browser back/forward synchronization was source-reviewed, not exercised. env -u SLACK_BOT_TOKEN bun test scripts/generate-catalog-pages.test.ts: 33 pass, 0 fail on this tree.
Stack state: git merge-base --is-ancestor fb94ab73 814db34f exits 1. This branch has the parent's gallery code but predates its latest ffprobe -- fix: scripts/generate-catalog-previews.ts:586 on this tree omits the separator. Rebase onto the reviewed #7146 head and retain that fix before merging into main. The inherited autoplay findings are covered in #7146; this verdict covers the search increment.
Need: yes · Size: ok · Reuse: existing q/filter/URL paths · Simpler: already minimal · Structure: fine
Risk: low — one native input and focused CSS over an existing filter.
Verdict: COMMENT — clean search increment; restack before landing.
Reasoning: Filtering, keyboard input, reload, empty state and reset behave as described. The current child does not include the parent's latest generator fix.
— hf-review
…en tab or under 25% visible
# Conflicts: # docs/catalog-gallery.css # docs/snippets/catalog-gallery.jsx
jrusso1020
left a comment
jrusso1020
left a comment
There was a problem hiding this comment.
Reviewed at b6e10d732f52301fac6a6e8f4d1095c26bdcc69b. COMMENT re-review; no approval stamp.
The restack concern is fixed: git merge-base --is-ancestor 96dc5634 b6e10d73 succeeds. Against that parent, only the search input and its CSS remain (2 files, 21 insertions). The parent's ffprobe -- separator and pause/visibility fixes are retained. I compared current child to current parent for scope, and current child to the previously reviewed 814db34f child for the re-review delta and read the resulting gallery/CSS.
env -u SLACK_BOT_TOKEN bun test scripts/generate-catalog-pages.test.ts: 33 pass, 0 fail on this exact child tree. The exact-source browser fixture checks search and pause together, including chart → 10 cards / ?q=chart with 0 videos while paused, persistence after reload, and Play restoring videos; this is component verification, not a live Mintlify deployment or physical-phone walk.
Need: yes · Size: ok · Reuse: existing q/filter/URL and parent's pause paths · Simpler: already minimal · Structure: fine
Risk: low — a small search increment on the now-integrated parent.
Verdict: COMMENT — clean; previous stack concern resolved.
Reasoning: The child preserves the reviewed parent fixes and adds no second filtering state or playback lifecycle.
— hf-review
![heygengenesis[bot]](https://avatars.githubusercontent.com/in/2913576?s=60&v=4){kind=small}
There was a problem hiding this comment.
Verdict: APPROVE · 0 blocker · 0 important · 0 nits · head b6e10d73
Against #7146's head 96dc5634 the diff is only the labelled type="search" input bound to filters.q through the existing update() (URL + reset paths) and its CSS. Merge after #7146. The per-keystroke video rebuild noted on #7146 applies here too; not blocking.
The base branch was changed.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
# Conflicts: # docs/catalog-gallery.css # docs/snippets/catalog-gallery.jsx
There was a problem hiding this comment.
Verdict: APPROVE · 0 blocker · 0 important · 0 nits · head b525c744
Re-stamp after #7146 merged and the base moved to main. Against main the diff is the same 21 lines approved at b6e10d73 (search input + .hfc-search CSS). The pause button is kept beside the input after the conflict resolution. CI green at this head.
What
A search box at the top of the catalog. Typing filters the cards as you type, and the address keeps the words (
/catalog?q=chart), so a search can be shared.Why
The catalog has 447 items, and the only search today is the site-wide one, which mixes catalog items with every docs page. The gallery already filters by a
?q=address; nothing on the page let people type one.Related work
Stacked on #7146 (catalog video grid); merge that first.
How
docs/snippets/catalog-gallery.jsx: one<input type="search">bound to the existingqfilter (update({ q })). The filter and URL handling were already there.docs/catalog-gallery.css: the box's style, using the page's own colours so it works in light and dark.Test plan