feat: add refresh button to leaderboard + cache-bust API calls

app/components/Leaderboard.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 const MEDALS = ['🥇', '🥈', '🥉'];
 
@@ -8,15 +8,20 @@ export default function Leaderboard({ isOpen, onClose }) {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(false);
 
+    const fetchLeaderboard = useCallback(() => {
+        setLoading(true);
+        fetch(`/api/leaderboard?t=${Date.now()}`) // cache-bust
+            .then(res => res.json())
+            .then(d => { setData(d); setLoading(false); })
+            .catch(() => setLoading(false));
+    }, []);
+
+    // Fetch on first open
     useEffect(() => {
         if (isOpen && !data) {
-            setLoading(true);
-            fetch('/api/leaderboard')
-                .then(res => res.json())
-                .then(d => { setData(d); setLoading(false); })
-                .catch(() => setLoading(false));
+            fetchLeaderboard();
         }
-    }, [isOpen, data]);
+    }, [isOpen, data, fetchLeaderboard]);
 
     if (!isOpen) return null;
 
@@ -26,11 +31,21 @@ export default function Leaderboard({ isOpen, onClose }) {
             <div className="leaderboard-modal">
                 <div className="leaderboard-header">
                     <h3>🏆 Annotation Leaderboard</h3>
-                    <button className="panel-close" onClick={onClose}>&times;</button>
+                    <div className="leaderboard-header-actions">
+                        <button
+                            className="btn-refresh"
+                            onClick={fetchLeaderboard}
+                            disabled={loading}
+                            title="Refresh"
+                        >
+                            {loading ? '⏳' : '🔄'}
+                        </button>
+                        <button className="panel-close" onClick={onClose}>&times;</button>
+                    </div>
                 </div>
 
                 <div className="leaderboard-body">
-                    {loading ? (
+                    {loading && !data ? (
                         <div className="leaderboard-loading">
                             <div className="spinner" />
                             <p>Tallying scores...</p>
@@ -75,7 +90,7 @@ export default function Leaderboard({ isOpen, onClose }) {
                 </div>
 
                 <div className="leaderboard-footer">
-                    <p>Score = Verified + Added • Updates every 2 min</p>
+                    <p>Score = Verified + Added</p>
                 </div>
             </div>
         </>

app/globals.css

@@ -265,6 +265,37 @@ h4 {
   font-size: 1rem;
 }
 
+.leaderboard-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-refresh {
+  background: none;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.btn-refresh:hover:not(:disabled) {
+  background: var(--surface);
+  border-color: var(--accent);
+}
+
+.btn-refresh:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
 .leaderboard-body {
   padding: 12px 20px;
   overflow-y: auto;