Add profile quick view, best-match CTA/panel and enhanced filters to Find Players

[Studio-18]

Motivation

• Refresh the Find Players UI to match the new design by surfacing the user's profile quick view and a Best Match flow while keeping existing player data and handlers intact.
• Provide improved filtering with Play type and Availability controls so users can refine matches by play style and when they can play.
• Introduce a lightweight best-match experience (CTA → panel → top 3 matches) using dummy match scores/reasons without changing database queries or auth logic.

Description

• Added four standalone components under src/components/players/: MyProfileQuickView.tsx, BestMatchCTA.tsx, BestMatchesPanel.tsx, and BestMatchCard.tsx implementing the new UI shown in the design assets. Each file defaults to a single export and avoids barrel imports to prevent circular dependencies.
• Extended the existing PlayersFilterBar.tsx to accept optional playTypeOptions and availabilityOptions props and render corresponding select dropdowns, with handlers wired in the page.
• Integrated new components into FindPlayersPage.tsx: added useIsMobile helper, preserved all existing data hooks and connect/view handlers, added state for selectedPlayType, selectedAvailability, and showBestMatches, and wired MyProfileQuickView, BestMatchCTA, and BestMatchesPanel into the page flow.
• Implemented generateBestMatches to produce the top-3 best matches (real player records reused, only matchScore and matchReasons are dummy per rules) and mapped a currentUserProfile object for the quick view using existing match profile data when present.
• Followed the code organization safety rules: one component per file, explicit imports, and no modifications to database hooks or player fetching logic.

Testing

• Started the dev server with npm run dev and verified Vite reported the server as ready, which completed successfully.
• Ran an automated Playwright script to load /find-players and capture a desktop screenshot at 1280x1600; the script completed and produced artifacts/find-players-desktop.png, confirming the new components render in the browser.
• No unit or integration test suites were added or run as part of this change (existing data-fetching and connect/view handlers were not modified).

---

Codex Task

[netlify]

✅ Deploy Preview for ttp-player-web-staging ready!

Name	Link
🔨 Latest commit	56fa62e
🔍 Latest deploy log	https://app.netlify.com/projects/ttp-player-web-staging/deploys/6977d9771640bd0007dede67
😎 Deploy Preview	https://deploy-preview-116--ttp-player-web-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Preview Action v1.6.2
🚀 View preview at https://CodeMyMobile.github.io/ttp-player-web/pr-preview/pr-116/
Built to branch gh-pages at 2026-01-26 21:15 UTC. Preview will be ready when the GitHub Pages deployment is complete.