feat(v3): add search box to the Plugins pedalboard page#873
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe v3 Plugins page adds live pedal search by name, id, and description. Matching pedals are compactly reflowed, empty boards are hidden, and clearing the query restores all pedals and saved drag positions. Tests cover matching edge cases. ChangesPlugins pedalboard search
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant SearchInput
participant PluginsPage
participant applyFilter
participant pluginMatches
participant relayoutAll
SearchInput->>PluginsPage: update searchQuery
PluginsPage->>applyFilter: applyFilter(root)
applyFilter->>pluginMatches: check pedal metadata
pluginMatches-->>applyFilter: return match result
applyFilter->>relayoutAll: compact visible pedals
relayoutAll-->>PluginsPage: update board layout
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
tests/js/plugins_page.test.js (1)
155-163: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd coverage for the page-level filtering contract.
These tests validate
pluginMatches, but notapplyFilterorlayoutBoard: board hiding, compact reflow, clearing/restoring positions, and resize behavior remain untested in the changed surface. Verify that existing integration tests cover those flows, or add one focused page-level test. This follows the PR objective’s filtering and layout guarantees.Also applies to: 165-171, 173-177
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/js/plugins_page.test.js` around lines 155 - 163, Extend the page-level filtering tests around pluginMatches to cover applyFilter and layoutBoard: verify filtered boards are hidden, visible boards compactly reflow, clearing the filter restores positions, and resize behavior remains correct. First reuse existing integration coverage if it already validates these guarantees; otherwise add one focused test using the page’s established test helpers and symbols.static/tailwind.min.css (1)
2-2: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExclude the generated Tailwind artifact from source-style linting.
Stylelint reports multiple errors on this regenerated bundle, including font-family quoting, deprecated
clip, vendor-prefixed selectors, and keyword casing. Since these are standard generated Tailwind rules, configure Stylelint to ignorestatic/tailwind.min.cssor apply a generated-artifact override instead of hand-editing the minified output. This is based on the reported static-analysis results.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@static/tailwind.min.css` at line 2, Exclude the generated Tailwind artifact from Stylelint source-style checks by updating the project’s Stylelint configuration or generated-artifact override to ignore static/tailwind.min.css. Do not hand-edit the minified bundle; preserve linting for authored stylesheets.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@static/v3/plugins-page.js`:
- Around line 364-378: Update the expansion handler around layoutBoard so it
passes null when searchQuery.trim() is non-empty and loadLayout() otherwise,
matching the selection already used in applyFilter. Preserve the existing board
and category arguments while ensuring expanded boards remain compact during
active searches.
---
Nitpick comments:
In `@static/tailwind.min.css`:
- Line 2: Exclude the generated Tailwind artifact from Stylelint source-style
checks by updating the project’s Stylelint configuration or generated-artifact
override to ignore static/tailwind.min.css. Do not hand-edit the minified
bundle; preserve linting for authored stylesheets.
In `@tests/js/plugins_page.test.js`:
- Around line 155-163: Extend the page-level filtering tests around
pluginMatches to cover applyFilter and layoutBoard: verify filtered boards are
hidden, visible boards compactly reflow, clearing the filter restores positions,
and resize behavior remains correct. First reuse existing integration coverage
if it already validates these guarantees; otherwise add one focused test using
the page’s established test helpers and symbols.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: abc43063-d6ba-4767-975e-2bca94745658
📒 Files selected for processing (4)
CHANGELOG.mdstatic/tailwind.min.cssstatic/v3/plugins-page.jstests/js/plugins_page.test.js
Plugins are hard to find by eye in the pedalboard layout once a few boards fill up. Add a live, as-you-type search box to the toolbar that filters pedals by name/id/description (case-insensitive substring): non-matching pedals hide, matches compact/re-flow via layoutBoard, and boards with zero matches hide entirely. Clearing the query restores everything, including saved drag positions. Signed-off-by: gionnibgud <gionnibgud@gmail.com>
efbb46e to
f228d30
Compare
1 participant
What
Adds a live search box to the v3 Plugins (Pedalboard) page toolbar. The skeuomorphic pedalboard looks great, but once a few boards fill up, plugins are hard to find by eye. The search box filters pedals as you type.
Behaviour
render()).relayoutAllguarded).Implementation notes
static/v3/plugins-page.js— matches the file's existing ES5 style (var/function, string-concat HTML,esc()for interpolation).pluginMatches(p, q)is a pure helper, exposed on_testand unit-tested.layoutBoard()skips.hiddenpedals via a visible-only index so matches don't leave gaps.songs.js.type="search"gives the native clear affordance.songs.jsplaylist-search precedent).Out of scope
Fuzzy matching / match highlighting / auto-expanding collapsed boards — substring is enough for the current plugin count.
Testing
npm run test:js— newpluginMatchestests + full suite green (1031 pass, 0 fail).npm run lint— clean.static/tailwind.min.cssrebuilt viascripts/build-tailwind.sh(newmin-w-[200px]/placeholder:text-fb-textDimutilities).Summary by CodeRabbit