Search leaderboard and scroll to your position

[SheepTester]

Info

Closes #62. (If there is no issue for this pull request yet, please create one or
delete this line if the pull request is for a very minor tweak).

This should not conflict with #68 (they unambiguously change different parts of the file).

Description

What changes did you make? List all distinct problems that this PR addresses. Explain any relevant
motivation or context.

I added a search bar to filter the leaderboard rows by a query and a button that scrolls to your row in the leaderboard (if it exists and isn't in the top three)

Changes

• Added a "Search Users" bar. If non-empty, it hides the leaderboard rows whose names don't include the search query. This is case-insensitive but not accent-insensitive, so if someone is named François, you won't find them by searching "francois"
  • It highlights the matched text in the leaderboard row.
• Added a "My Position" button. Clicking on it will scroll to your leaderboard row. If you aren't on the leaderboard, or the current search query has your row hidden, it does nothing.
  • It flashes your row a few times to catch your eyes' attention.
• On mobile, the header switches to a CSS grid that shoes the buttons across two rows.

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• locally on mobile - use https://ngrok.io to get a copy on a mobile device
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have run and passed all new and existing Cypress tests. Add screenshots below.

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented my code's src/lib functions and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

Please include a screenshot of your Cypress testing suite passing successfully.

If you made any visual changes to the website, please include relevant screenshots below.

Here's a video showing searching and scrolling to your position. Note that I added the second Ryan Truong manually because the test account isn't on the leaderboard.

2023-08-22.17-00-32.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2023 2:14am

[farisashai]

Might want design feedback on this implementation but I think keeping the top 3 cards is a little funky while the search query is filtering the items. I'd prefer rendering the top 3 as standard list items when the search is non-empty.

[SheepTester]

That's a pretty good idea, I think it looks better that way

2023-08-22.19-19-17.mp4

[farisashai]

Two things to fix

1. Fix the border color on dark mode
   

2. Link leaderboard cards and rows to each user profile using their handle localhost:3000/u/[user.handle]