add DIVA to seed scaffold, allow toggle for showing PB only on chart pages

1 files changed, 17 insertions, 2 deletions

diff --git a/frontend/src/pages/Chart.tsx b/frontend/src/pages/Chart.tsx
index 757cbbb..5e81044 100644
--- a/frontend/src/pages/Chart.tsx
+++ b/frontend/src/pages/Chart.tsx
@@ -15,6 +15,7 @@ import DancearoundScoreDisplay from "../components/displays/DancearoundScoreDisp
 const Chart = () => {
   const { user, isLoading, logout } = useAuth();
   const navigate = useNavigate();
+  const [pbOnly, setPbOnly] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [scores, setScores] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -82,7 +83,7 @@ const Chart = () => {
         url.searchParams.append("pageNum", pageNum.toString());
         url.searchParams.append("sortKey", requestOrder);
         url.searchParams.append("direction", "asc");
-        url.searchParams.append("pbOnly", "true");
+        url.searchParams.append("pbOnly", pbOnly.toString());
         url.searchParams.append("game", gameName);
 
         const response = await fetch(url.toString(), {credentials: 'include'});
@@ -99,7 +100,7 @@ const Chart = () => {
         setLoading(false);
       }
     },
-    [user, requestOrder, chartIdHash, gameName],
+    [user, requestOrder, chartIdHash, gameName, pbOnly],
   );
 
   useEffect(() => {
@@ -115,6 +116,10 @@ const Chart = () => {
     }
   };
 
+  const handleTogglePB = () => {
+    setPbOnly(!pbOnly);
+  };
+
   if (!user) {
     return <SessionExpiredPopup />;
   }
@@ -161,6 +166,16 @@ const Chart = () => {
               >
                 Table
               </button>
+              <button
+                onClick={() => handleTogglePB()}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  pbOnly
+                    ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+                    : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+                }`}
+              >
+                {pbOnly ? "Showing only PBs" : "Showing all scores"}
+              </button>
             </div>
           </div>