refactor(app): decompose FilterBar into feature folder#8559
Merged
Conversation
- Split the 843-LOC FilterBar.tsx into FilterBar/ with index.tsx (orchestrator: scroll/sticky + chip-menu state), FilterSearch.tsx (search state, fuse.js results, keyboard navigation, expand/collapse), FilterMenu.tsx (category dropdown rendering), FilterChips.tsx (chips with roll animation + chip action menu), and FilterSizeToggle.tsx (ToolbarActions wrapper) - Pure decomposition: every sx block, trackEvent call (search, search_no_results, grid_resize), aria attribute, and keyboard handler copied verbatim; props between parent and children are explicit typed interfaces (DropdownItem and RandomAnimation now named types) - Existing consumers unchanged: index.tsx re-exports FilterBar under the same 'src/sections/plots-gallery/FilterBar' path - Moved FilterBar.test.tsx to FilterBar/index.test.tsx unchanged and added per-component tests (keyboard nav, chip menu, dropdown modes, size toggle passthrough): 552 -> 578 tests Part 8 of the frontend modernization roadmap. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the Plots Gallery FilterBar by decomposing the former monolithic FilterBar.tsx into a dedicated feature folder (src/sections/plots-gallery/FilterBar/) while keeping the public import path (src/sections/plots-gallery/FilterBar) stable and aiming for no behavior changes.
Changes:
- Replaced
app/src/sections/plots-gallery/FilterBar.tsxwith a folder-based module whoseindex.tsxorchestrates sticky/scroll behavior and composes the new subcomponents. - Split responsibilities into
FilterSearch,FilterMenu,FilterChips, andFilterSizeToggle. - Moved/added tests to cover the decomposed components.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| app/src/sections/plots-gallery/FilterBar/index.tsx | New FilterBar orchestrator (sticky + scroll progress + chip-menu state + composition). |
| app/src/sections/plots-gallery/FilterBar/index.test.tsx | Moved/updated FilterBar tests for the folder-based module. |
| app/src/sections/plots-gallery/FilterBar/FilterSearch.tsx | Extracted search input logic (query/category state, keyboard nav, analytics). |
| app/src/sections/plots-gallery/FilterBar/FilterSearch.test.tsx | Added focused tests for search/dropdown keyboard and tracking behavior. |
| app/src/sections/plots-gallery/FilterBar/FilterMenu.tsx | Extracted dropdown rendering (categories, values, exact/fuzzy sections, empty state). |
| app/src/sections/plots-gallery/FilterBar/FilterMenu.test.tsx | Added tests for menu rendering/selection behaviors. |
| app/src/sections/plots-gallery/FilterBar/FilterChips.tsx | Extracted chip rendering + chip action menu (OR add/remove/remove-all). |
| app/src/sections/plots-gallery/FilterBar/FilterChips.test.tsx | Added tests for chip rendering and chip-menu actions. |
| app/src/sections/plots-gallery/FilterBar/FilterSizeToggle.tsx | Wrapper around ToolbarActions for reuse in desktop/mobile placements. |
| app/src/sections/plots-gallery/FilterBar/FilterSizeToggle.test.tsx | Added tests ensuring size changes and analytics wiring. |
| app/src/sections/plots-gallery/FilterBar.tsx | Deleted the previous monolithic implementation. |
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
Part 8 of the frontend modernization roadmap. Pure decomposition of the 881-line
FilterBar.tsxintosections/plots-gallery/FilterBar/— no behavior change, import path stayssrc/sections/plots-gallery/FilterBar.index.tsx(268): orchestrator — scroll/sticky + chip-menu state, composes sub-componentsFilterSearch.tsx(357): search state, InputBase, fuse.js results, keyboard nav, search tracking; renders FilterMenu (they share dropdown state, so FilterMenu is composed here rather than in index)FilterMenu.tsx(252): presentational dropdown (categories, values, exact/fuzzy split, no-results)FilterChips.tsx(190): chips with roll animation + chip action menu (add-OR / remove / remove-all)FilterSizeToggle.tsx(26): ToolbarActions wrapperFilterBar.test.tsxmoved asindex.test.tsxwith assertions untouched; +4 new per-component test filesTests: 552 → 578 (+26). All analytics events, aria attributes, and keyboard interactions preserved verbatim.
Verification
yarn lint✓ ·yarn fm:check✓ ·yarn type-check✓ ·yarn test578/578 ✓ ·yarn build✓🤖 Generated with Claude Code