Description
This is a UI/UX issue. Once filters are applied in FiltersSidebar.tsx, users on MarketplacePage.tsx have no visible summary of what's filtering the results. Render active filters as removable chips (category names, price range, popularity) above the grid with an × per chip and a "Clear all" link.
Requirements and Context
- Reference:
src/components/FiltersSidebar.tsx, src/pages/MarketplacePage.tsx
- Each chip exposes
aria-label="Remove filter <name>"
- "Clear all" appears only when ≥2 chips present
- Chip row collapses when no filters active
- Must be secure, tested, and documented
- Should be efficient and easy to review
Suggested Execution
- Fork the repo and create a branch
git checkout -b feature/active-filter-chips
- Implement changes
src/components/ActiveFilterChips.tsx
src/pages/MarketplacePage.tsx — derive chip list from state
- Test and commit
- Add filters, remove one chip, confirm result updates
- Confirm screen-reader announces chip removal
Example commit message
feat: active filter chips above MarketplacePage results
Acceptance Criteria
Guidelines
- Keep chips height-aligned with the search bar above them
- Use design tokens; no inline hex
- Clear documentation and inline comments
- Timeframe: 96 hours
Description
This is a UI/UX issue. Once filters are applied in
FiltersSidebar.tsx, users onMarketplacePage.tsxhave no visible summary of what's filtering the results. Render active filters as removable chips (category names, price range, popularity) above the grid with an×per chip and a "Clear all" link.Requirements and Context
src/components/FiltersSidebar.tsx,src/pages/MarketplacePage.tsxaria-label="Remove filter <name>"Suggested Execution
src/components/ActiveFilterChips.tsxsrc/pages/MarketplacePage.tsx— derive chip list from stateExample commit message
Acceptance Criteria
Guidelines