Problem
The LeaderboardPage fetches up to 50 entries and displays them in a table, but provides no search box or filter controls. In communities with more than ~20 members, users cannot quickly locate a specific player or filter by role.
Current Behavior
- The leaderboard renders a flat table with no way to search or filter.
- Users must visually scan all 50 rows to find a specific username.
- The "Your rank" pill at the top only appears when the logged-in user is in the top 50 — no way to search for others outside the list.
Why This Improvement Is Needed
- Large communities (50+ members) need search to find specific participants.
- Admins/Moderators often want to filter the leaderboard by role (e.g., "show all Members").
- This is a standard UX feature expected in any ranking system.
- The data is already fetched client-side, so no additional API calls are needed.
Proposed Solution
Add a search box and role filter pills above the leaderboard table:
- A text input that filters entries by username (case-insensitive substring match).
- Role pills (All / Admin / Organisation / Moderator / Event Staff / Member).
- A result count label shown when a filter is active.
- The top-3 podium is hidden when a filter is active (rankings would be misleading).
- An empty state is shown when no players match the current filter.
All filtering is client-side with useMemo — no new API endpoints required.
Expected Outcome
- Users can type a username to instantly locate a player in the leaderboard.
- Admins can click a role pill to view only Members or only Moderators.
- The UX is consistent with the existing Shop page's search + category filter pattern.
Additional Notes
- No backend changes required.
- The podium correctly reappears when filters are cleared.
Problem
The
LeaderboardPagefetches up to 50 entries and displays them in a table, but provides no search box or filter controls. In communities with more than ~20 members, users cannot quickly locate a specific player or filter by role.Current Behavior
Why This Improvement Is Needed
Proposed Solution
Add a search box and role filter pills above the leaderboard table:
All filtering is client-side with
useMemo— no new API endpoints required.Expected Outcome
Additional Notes