Add an inline category pill bar above MarketplacePage results

[greatest0fallt1me]

Description

This is a UI/UX issue. Most users filter by exactly one category, yet they must open the FiltersSidebar to do so. Surface category selection as a horizontally scrollable pill bar above the results grid, mirroring ALL_CATEGORIES from FiltersSidebar.tsx, with an "All" pill on the left.

Requirements and Context

• Reference: src/pages/MarketplacePage.tsx, src/components/FiltersSidebar.tsx
• Pills toggle the same selectedCategories Set as the sidebar
• Active pill uses aria-pressed="true" and a distinct token-backed background
• Pill bar must overflow-scroll with visible scrollbar on hover for desktop
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/category-pill-bar

2. Implement changes
   • src/components/CategoryPills.tsx — accepts categories + selected set + toggle
   • src/pages/MarketplacePage.tsx — render above results
   • src/index.css — .pill-bar, .pill-bar__item--active
3. Test and commit
   • Toggle pills and confirm sidebar checkboxes stay in sync
   • Verify scroll snap on a 360px viewport

Example commit message

feat: inline category pill bar on MarketplacePage

Acceptance Criteria

• Pills mirror sidebar category state both ways
• Active pill uses aria-pressed and tokenized color
• Pill bar scrolls horizontally without page overflow
• "All" pill resets to no categories selected

Guidelines

• Maintain 44x44 minimum target on mobile
• Use design tokens for all colors and radii
• Clear documentation and inline comments
• Timeframe: 96 hours

[ayaoba24]

@ayaoba24 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I can resolve this. Please assign to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ayaoba24 to this issue.

[drips-wave]

Congratulations, @ayaoba24! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @ayaoba24: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊