Skip to content

Add Matchplay quick view, Best Match CTA/panel, and filter enhancements#115

Open
Studio-18 wants to merge 2 commits into
mainfrom
codex/update-find-players-page-ui-components
Open

Add Matchplay quick view, Best Match CTA/panel, and filter enhancements#115
Studio-18 wants to merge 2 commits into
mainfrom
codex/update-find-players-page-ui-components

Conversation

@Studio-18
Copy link
Copy Markdown
Collaborator

Motivation

  • Add a richer Matchplay experience on the Find Players page (profile quick view, verification prompt, CTA and best-matches panel) while preserving existing player data sources and handlers.
  • Surface new filter controls for play type and availability so users can narrow results by play preferences without changing backend queries or CRUD logic.

Description

  • Added standalone UI components: src/components/players/MyProfileQuickView.tsx, BestMatchCTA.tsx, BestMatchesPanel.tsx, and BestMatchCard.tsx and wired them into src/pages/FindPlayersPage.tsx with direct imports (no barrels) and a useIsMobile hook.
  • Extended PlayersFilterBar (src/components/players/PlayersFilterBar.tsx) with optional playType and availability selects and added corresponding state and handlers in FindPlayersPage.tsx (selectedPlayType, selectedAvailability, handlePlayTypeChange, handleAvailabilityChange).
  • Implemented a small best-match generator generateBestMatches that uses real player records as sources and injects dummy matchScore and matchReasons, then toggled the CTA (BestMatchCTA) and expandable BestMatchesPanel behind hasMatchProfile && showBestMatches.
  • Preserved all existing database hooks, API calls, player queries and connection handlers; the new features use DB-backed players and matchProfile but only add dummy match metadata where required.

Testing

  • Built the production bundle with npm run build which completed successfully (build warning about large chunk sizes only, no errors).
  • Launched the dev server and ran a Playwright smoke script that loaded /find-players, injected a stored match profile, clicked the Find my best match CTA, and produced a screenshot at artifacts/find-players-best-matches.png, confirming the panel renders.

Codex Task

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 25, 2026

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

Name Link
🔨 Latest commit f3dc50c
🔍 Latest deploy log https://app.netlify.com/projects/ttp-player-web-staging/deploys/6976af696f195600082235a6
😎 Deploy Preview https://deploy-preview-115--ttp-player-web-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link
Copy Markdown

github-actions Bot commented Jan 25, 2026

PR Preview Action v1.6.2

🚀 View preview at
https://CodeMyMobile.github.io/ttp-player-web/pr-preview/pr-115/

Built to branch gh-pages at 2026-01-26 00:04 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant