Add a "Compare APIs" tray that lets users pin up to 3 APIs from MarketplacePage

[greatest0fallt1me]

Description

This is a UI/UX issue. Choosing between APIs requires side-by-side comparison. Add a "Compare" affordance to each ApiCard that adds the API to a bottom-anchored tray (max 3); tapping "Compare" in the tray opens a comparison drawer showing price, latency, uptime, categories, and rating side-by-side.

Requirements and Context

• Reference: src/components/ApiCard.tsx, src/pages/MarketplacePage.tsx
• Tray persists across navigation within the session
• Drawer is keyboard navigable and supports ESC close
• Empty tray hides itself
• 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/compare-apis

2. Implement changes
   • src/components/CompareTray.tsx and src/components/CompareDrawer.tsx
   • src/components/ApiCard.tsx — pin button
3. Test and commit
   • Pin 3 APIs, open drawer, verify columns
   • Tab through drawer; ESC closes

Example commit message

feat: compare APIs tray and drawer

Acceptance Criteria

• Pin button shows pinned state with aria-pressed
• Tray hidden when no pins; visible when ≥1
• Drawer renders consistent rows across all pinned APIs
• ESC closes drawer and returns focus to trigger

Guidelines

• Tray must not obscure the last row of cards on mobile (offset bottom padding)
• Tokens only
• Clear documentation and inline comments
• Timeframe: 96 hours

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[Immaculate0606]

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

Please kindly assign to me. I’d love to work on this

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

[drips-wave]

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

🧑‍💻 @Immaculate0606: 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 🌊

[drips-wave]

This issue has been completed by @Immaculate0606 as part of the Stellar Wave Program's 6th Wave 🥳

😎 @Immaculate0606: You earned 100 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.