v5 gallery: fuzzy ranked search + materials/location facets#17
Merged
Conversation
Replace the naive substring search in GalleryShell with match-sorter for typo-tolerant, relevance-ranked results. Key order encodes weight: name > category/sub/tags/materials > location/zone/ppe/training > description. Empty query preserves the catalog's existing order. Add single-select Materials and Location facet filters, derived from the loaded catalog like categories. All facets combine with AND, applied before the fuzzy match. Localize the two new filter labels across all 12 message files under the gallery namespace. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR upgrades the v5 tool catalog gallery browsing experience by adding client-side fuzzy, relevance-ranked search (via match-sorter) and introducing two new single-select facet filters (Materials and Location) derived from the loaded tool catalog.
Changes:
- Replaced the gallery’s substring search with
match-sorter-based fuzzy, ranked search across multiple tool fields. - Added single-select Materials and Location facet chip groups and applied them as AND filters alongside existing Category and Training facets.
- Added new
gallery.materials/gallery.locationi18n strings across all supported locales and introduced thematch-sorterdependency.
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| v5/src/components/GalleryShell.tsx | Adds faceted filtering (materials/location) and ranked fuzzy search using match-sorter. |
| v5/package.json | Adds match-sorter@^8.3.0 dependency for client-side fuzzy search. |
| v5/package-lock.json | Locks match-sorter and its transitive dependencies (@babel/runtime, remove-accents). |
| v5/messages/en.json | Adds gallery.materials and gallery.location labels for the new facet groups. |
| v5/messages/ar.json | Adds Arabic translations for the new facet labels. |
| v5/messages/es.json | Adds Spanish translations for the new facet labels. |
| v5/messages/fr.json | Adds French translations for the new facet labels. |
| v5/messages/he.json | Adds Hebrew translations for the new facet labels. |
| v5/messages/hi.json | Adds Hindi translations for the new facet labels. |
| v5/messages/ja.json | Adds Japanese translations for the new facet labels. |
| v5/messages/ko.json | Adds Korean translations for the new facet labels. |
| v5/messages/pt-BR.json | Adds Brazilian Portuguese translations for the new facet labels. |
| v5/messages/ru.json | Adds Russian translations for the new facet labels. |
| v5/messages/tr.json | Adds Turkish translations for the new facet labels. |
| v5/messages/zh-CN.json | Adds Simplified Chinese translations for the new facet labels. |
Files not reviewed (1)
- v5/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Upgrades the v5 tool catalog browse experience with fuzzy, relevance-ranked search and two new facet filters. All work is client-side over the already-loaded catalog; no data-layer or server changes.
What changed
GalleryShell.tsx: replaced the raw lowercaseincludessubstring match withmatch-sorter. Search is now typo-tolerant and ranked. Facet filters (category, training, materials, location) are applied first as an AND pre-filter; the fuzzy match runs over the faceted subset. Empty query short-circuits to the faceted list in the catalog's original order (preserves prior behavior).categoriesis derived). They live in the samefilter-consoleblock and reuse the existingchip/filter-groupstyles.New dependency
match-sorter@^8.3.0— small (~5KB), well-maintained fuzzy match + ranking lib. Chosen over a hand-rolled scorer for tested typo tolerance and stable multi-key ranking. It is the only new dependency.match-sorter ranking config
Single ordered
keysarray (match-sorter ranks earlier keys above later ones on ties, so order = weight):name>category>categorySub>tags>materials>location>zone>ppe>trainingLevel>description.i18n
Added
gallery.materialsandgallery.locationto all 12 message files (en, ar, es, fr, he, hi, ja, ko, pt-BR, ru, tr, zh-CN). English is authoritative; the other 11 are machine-translated and styled to match the existingcategory/traininglabels (uppercase + colon for Latin scripts, full-width colon for CJK). These new strings want native-speaker QC.Test plan
cd v5 && npm install && npm run typecheck && npm run lint && npm run build— all pass (build prerenders all routes; no Notion fetch error this run).UX tradeoff
Facets are single-select per dimension to match the existing category/training pattern and keep the chip UI consistent; multi-select within a dimension was not added.
🤖 Generated with Claude Code