leaderboard sort fix on mobile

[simo6529]

Summary by CodeRabbit

• New Features

  • Added responsive sort control that adapts to different screen sizes—displays compact dropdown on mobile and button-based sorting on desktop.

• Tests

  • Expanded test coverage to validate both mobile and desktop sorting behavior across different viewport sizes.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request adds responsive behavior to the WaveleaderboardSort component by introducing viewport detection via breakpoint hooks. On small screens, the component switches from a button-based sort control to a compact dropdown. Corresponding test cases are updated to verify both desktop and mobile rendering paths. Minor import restoration occurs in the header component.

Changes

Cohort / File(s)	Summary
Sort Component Responsiveness components/waves/leaderboard/header/WaveleaderboardSort.tsx	Introduces breakpoint-based responsive UI that switches between desktop button-based sorting and mobile dropdown sorting. Adds memoized sort item list for CommonDropdown and extends prefetch logic for the new dropdown path.
Sort Component Tests __tests__/components/waves/leaderboard/header/WaveleaderboardSort.test.tsx	Implements breakpoint mocking to test both desktop (MD) and mobile (S) rendering paths. Adds CommonDropdown mock and per-test setup for state reset. Renames existing test to emphasize desktop behavior and adds new test case for mobile-specific dropdown interactions.
Header Component components/waves/leaderboard/header/WaveleaderboardHeader.tsx	Restores previously removed React and Tooltip imports, reintroduces LeaderboardViewMode type import, and reorders import statements. No API or behavioral changes.

Sequence Diagram

sequenceDiagram
    participant Client as Browser / Viewport
    participant Hook as Breakpoint Hook
    participant Component as WaveleaderboardSort
    participant UI as UI Element
    participant Callback as onSortChange

    Client->>Hook: Detect viewport size
    Hook->>Component: Return breakpoint (MD/S)
    Component->>Component: Determine isSmallViewport
    
    alt Small Viewport (S)
        Component->>UI: Render CommonDropdown
        UI->>Component: User selects sort option
        Component->>Component: Prepare selection (e.g., CREATED_AT)
        Component->>Callback: Trigger onSortChange with selection
    else Desktop Viewport (MD)
        Component->>UI: Render button-based sort tabs
        UI->>Component: User clicks sort button
        Component->>Callback: Trigger onSortChange with selection
    end
    
    Component->>Component: Execute prefetch cleanup & debounced logic

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• reorder leaderboard sort options #1745: Modifies the same WaveleaderboardSort component and its test file with overlapping changes to sorting UI behavior.
• Trending to leaderboard #1739: Touches the same component files (WaveleaderboardSort.tsx and test) and adjusts desktop vs. dropdown rendering and sort-related prefetch logic.
• Remove extra scroll from wave chat #1787: Modifies the same WaveleaderboardSort.tsx file, indicating direct file-level overlap.

Suggested reviewers

• ragnep
• prxt6529

Poem

🐰 Hops through breakpoints small and tall,
Buttons broad or dropdown small,
Viewport shrinks, our UI flows,
Responsive magic—watch it glow!
Sort with grace on every size, ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'leaderboard sort fix on mobile' directly describes the main change: adding responsive behavior to switch the leaderboard sort control from buttons to a dropdown on small screens (mobile viewports).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch main-stage-leaderboard-fix

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

components/waves/leaderboard/header/WaveleaderboardSort.tsx (1)

48-74: Consider hoisting sortItems to module scope.

Since sortItems has no dependencies (empty [] dep array), it's effectively a static constant. Moving it outside the component avoids the useMemo overhead entirely and makes the intent clearer.

♻️ Proposed refactor

+const SORT_ITEMS: readonly CommonSelectItem<WaveDropsLeaderboardSort>[] = [
+  {
+    key: WaveDropsLeaderboardSort.RANK,
+    label: "Current Vote",
+    value: WaveDropsLeaderboardSort.RANK,
+  },
+  {
+    key: WaveDropsLeaderboardSort.RATING_PREDICTION,
+    label: "Projected Vote",
+    value: WaveDropsLeaderboardSort.RATING_PREDICTION,
+  },
+  {
+    key: WaveDropsLeaderboardSort.TREND,
+    label: "Hot",
+    value: WaveDropsLeaderboardSort.TREND,
+  },
+  {
+    key: WaveDropsLeaderboardSort.CREATED_AT,
+    label: "Newest",
+    value: WaveDropsLeaderboardSort.CREATED_AT,
+  },
+];
+
 export const WaveleaderboardSort: React.FC<WaveleaderboardSortProps> = ({
   ...
 }) => {
-  const sortItems = useMemo<...>(() => [...], []);

Then reference SORT_ITEMS in the JSX instead of sortItems.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud