From fa334bb7396e30402003b26b076325a8c42fdc29 Mon Sep 17 00:00:00 2001
From: Kevin Riehl <kevinriehl@gmail.com>
Date: Sat, 14 Mar 2026 19:56:42 -0700
Subject: [PATCH] Add difficulty filter buttons to leaderboard

---
 src/pages/Leaderboard.tsx | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/pages/Leaderboard.tsx b/src/pages/Leaderboard.tsx
index 096f77c..a30eca9 100644
--- a/src/pages/Leaderboard.tsx
+++ b/src/pages/Leaderboard.tsx
@@ -8,6 +8,7 @@ import { Trophy, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 type Period = 'daily' | 'weekly' | 'all-time';
+type DifficultyFilter = 'all' | 'easy' | 'medium' | 'hard';
 
 const PERIODS: { value: Period; label: string }[] = [
   { value: 'daily', label: 'Today' },
@@ -15,6 +16,13 @@ const PERIODS: { value: Period; label: string }[] = [
   { value: 'all-time', label: 'All Time' },
 ];
 
+const DIFFICULTIES: { value: DifficultyFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'easy', label: 'Easy' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'hard', label: 'Hard' },
+];
+
 function formatTime(seconds: number) {
   const m = Math.floor(seconds / 60);
   const s = seconds % 60;
@@ -34,6 +42,7 @@ function GameModeBadge({ mode }: { mode: string }) {
 
 export default function Leaderboard() {
   const [period, setPeriod] = useState<Period>('daily');
+  const [difficulty, setDifficulty] = useState<DifficultyFilter>('all');
   const [data, setData] = useState<LeaderboardResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
@@ -41,14 +50,15 @@ export default function Leaderboard() {
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
-      const result = await getLeaderboard(period, page);
+      const diffParam = difficulty === 'all' ? undefined : difficulty;
+      const result = await getLeaderboard(period, page, 20, diffParam);
       setData(result);
     } catch {
       setData(null);
     } finally {
       setLoading(false);
     }
-  }, [period, page]);
+  }, [period, page, difficulty]);
 
   useEffect(() => {
     fetchData();
@@ -59,6 +69,11 @@ export default function Leaderboard() {
     setPage(1);
   };
 
+  const handleDifficultyChange = (d: DifficultyFilter) => {
+    setDifficulty(d);
+    setPage(1);
+  };
+
   return (
     <PageLayout>
       <div className="space-y-6 py-6">
@@ -82,6 +97,19 @@ export default function Leaderboard() {
           ))}
         </div>
 
+        <div className="flex gap-2">
+          {DIFFICULTIES.map((d) => (
+            <Button
+              key={d.value}
+              variant={difficulty === d.value ? 'secondary' : 'ghost'}
+              size="sm"
+              onClick={() => handleDifficultyChange(d.value)}
+            >
+              {d.label}
+            </Button>
+          ))}
+        </div>
+
         {loading && (
           <div className="space-y-2">
             {Array.from({ length: 10 }).map((_, i) => (