Skip to content

Find Players: distance, last-active, NTRP range, sort, and verified UI enhancements#125

Open
Studio-18 wants to merge 1 commit into
mainfrom
codex/improve-find-players-page-ui
Open

Find Players: distance, last-active, NTRP range, sort, and verified UI enhancements#125
Studio-18 wants to merge 1 commit into
mainfrom
codex/improve-find-players-page-ui

Conversation

@Studio-18
Copy link
Copy Markdown
Collaborator

Motivation

  • Improve the Find Players results UX by surfacing distance, recent activity, simplified venue labels, richer client-side sorting, and an NTRP range control while keeping backend/API unchanged.
  • All enhancements must be computed and applied on the frontend using data already present in the API responses.

Description

  • Compute and display distance and last-active metadata client-side by adding helpers (calculateDistanceMiles, getCoordinatesFromRecord, getLastActiveAt, formatLastActiveLabel) and passing user position into mapSuggestedPlayer in src/pages/FindPlayersPage.tsx.
  • Trim court/address labels to venue or first street segment via trimCourtLabel and show only venue/street on cards; keep full addresses on profile pages unchanged.
  • Replace single-level dropdown with a dual-handle NTRP range UI in PlayersFilterBar and expose minLevel/maxLevel + onNtrpRangeChange props; the slider is visualized with two overlapping <input type="range"> controls and value labels in src/components/players/PlayersFilterBar.tsx and styled in src/components/players/players.css.
  • Add a client-side Sort dropdown with options Nearest first, Highest rated, Lowest rated, Recently active, and Best match and implement the sorting pipeline in FindPlayersPage (best-match is a weighted score of distance, NTRP proximity, and recent activity).
  • Update PlayerCard (src/components/players/PlayerCard.tsx) to display the calculated distance ({X.X} mi) and a color-coded last-active indicator (green/yellow/gray dots plus labels), and strengthen verified visuals with a green-tinted border/shadow and a prominent badge style; preserve the existing Connect and View profile buttons and core layout.
  • Add small UI/UX polish: verified legend near results count and CSS additions for slider, activity dots, verified card (src/components/players/players.css).
  • All filtering and sorting operate client-side on already-fetched player arrays; no API routes, server, or DB/schema changes were made.

Testing

  • Ran npm run lint and fixed no new lint errors; one unrelated existing warning remains in src/pages/DashboardPage.jsx and did not block the changes.
  • Built the app with npm run build successfully (production build completed).
  • Launched dev server (npm run dev) and verified the UI visually and via an automated Playwright capture of /#/find-players which produced a screenshot for review.
  • All automated checks used (lint, build) completed successfully.

Codex Task

@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 15, 2026

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

Name Link
🔨 Latest commit 59b6b05
🔍 Latest deploy log https://app.netlify.com/projects/ttp-player-web-staging/deploys/6991fdc4db85fa000812f35f
😎 Deploy Preview https://deploy-preview-125--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

PR Preview Action v1.6.2

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

Built to branch gh-pages at 2026-02-15 17:09 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