update filterTag count on show arena toggle | update iflterTag disable state

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useMemo } from "react";
-import { Box, Stack, Button, useMediaQuery } from "@mui/material";
+import { Box, Stack, useMediaQuery } from "@mui/material";
 import { useLeaderboard } from "../../context/LeaderboardContext";
 import { useDebounce } from "../../hooks/useDebounce";
 import { alpha, lighten, darken } from "@mui/material/styles";
 import SearchBar from "./SearchBar";
+import FilterTag from "../common/FilterTag";
 
 // Constantes pour les tags de catégorisation
 const CATEGORIZATION_TAGS = [
@@ -100,6 +101,18 @@ const LeaderboardFilters = ({ allSections = [] }) => {
   const [totalArenaCount, setTotalArenaCount] = useState(0);
   const debouncedSearch = useDebounce(inputValue, 200);
 
+  // Calculate section counts based on arena filter
+  const sectionCounts = useMemo(() => {
+    const counts = new Map();
+    allSections.forEach(({ id, data = [] }) => {
+      const filteredData = arenaOnly
+        ? data.filter((board) => board.tags?.includes("judge:humans"))
+        : data;
+      counts.set(id, filteredData.length);
+    });
+    return counts;
+  }, [allSections, arenaOnly]);
+
   // Update the search query after debounce
   React.useEffect(() => {
     setSearchQuery(debouncedSearch);
@@ -342,8 +355,8 @@ const LeaderboardFilters = ({ allSections = [] }) => {
           justifyContent="center"
           sx={{ pb: 2 }}
         >
-          {(allSections || []).map(({ id, title, data = [] }, index) => {
-            const count = data.length;
+          {(allSections || []).map(({ id, title }, index) => {
+            const count = sectionCounts.get(id) || 0;
             const currentGroup = getSectionGroup(id);
             const prevGroup =
               index > 0 ? getSectionGroup(allSections[index - 1].id) : null;
@@ -355,93 +368,24 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                 {needsSpacing && index > 0 && (
                   <Box sx={{ width: "0.5rem", display: "inline-block" }} />
                 )}
-                <Button
+                <FilterTag
+                  label={title}
+                  count={count}
+                  isActive={isSelected}
                   onClick={() => {
                     if (isSelected || count > 0) {
                       setSelectedCategories(id);
                     }
                   }}
-                  variant={isSelected ? "contained" : "outlined"}
-                  size="small"
-                  disabled={count === 0 && !isSelected}
-                  sx={{
-                    textTransform: "none",
-                    cursor: count === 0 && !isSelected ? "default" : "pointer",
-                    mb: 1,
-                    backgroundColor: (theme) => {
-                      if (isSelected) {
-                        return groupColors[currentGroup]?.main;
-                      }
-                      return theme.palette.mode === "dark"
-                        ? "background.paper"
-                        : groupColors[currentGroup]?.light;
-                    },
-                    color: (theme) => {
-                      if (isSelected) {
-                        return "white";
-                      }
-                      return groupColors[currentGroup]?.main;
-                    },
-                    borderColor: (theme) => {
-                      return groupColors[currentGroup]?.main;
-                    },
-                    "&:hover": {
-                      backgroundColor: (theme) => {
-                        if (isSelected) {
-                          return groupColors[currentGroup]?.main;
-                        }
-                        return groupColors[currentGroup]?.light;
-                      },
-                    },
-                    "& .MuiTouchRipple-root": {
-                      transition: "none",
-                    },
-                    transition: "none",
-                  }}
-                >
-                  {title}
-                  <Box
-                    component="span"
-                    sx={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: 0.75,
-                      color: (theme) => {
-                        if (isSelected) {
-                          return "white";
-                        }
-                        // Assombrir la couleur principale du groupe
-                        return theme.palette.mode === "dark"
-                          ? lighten(groupColors[currentGroup]?.main, 0.2)
-                          : darken(groupColors[currentGroup]?.main, 0.2);
-                      },
-                      ml: 0.75,
-                    }}
-                  >
-                    <Box
-                      component="span"
-                      sx={(theme) => ({
-                        width: "4px",
-                        height: "4px",
-                        borderRadius: "100%",
-                        backgroundColor: isSelected
-                          ? "rgba(255, 255, 255, 0.5)"
-                          : alpha(
-                              groupColors[currentGroup]?.main,
-                              theme.palette.mode === "dark" ? 0.4 : 0.3
-                            ),
-                      })}
-                    />
-                    {count}
-                  </Box>
-                </Button>
+                  colors={groupColors[currentGroup]}
+                />
               </React.Fragment>
             );
           })}
         </Stack>
       </Box>
 
-      {/* Search bar */}
+      {/* Search Bar */}
       <SearchBar
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}

client/src/components/LeaderboardSection/components/LanguageList.jsx

@@ -2,16 +2,15 @@ import React, { useMemo } from "react";
 import {
   Typography,
   Box,
-  Button,
   Accordion,
   AccordionSummary,
   AccordionDetails,
 } from "@mui/material";
-import { alpha } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { useLeaderboard } from "../../../context/LeaderboardContext";
+import FilterTag from "../../common/FilterTag";
 
-const TAG_COLOR = {
+const LANGUAGE_COLORS = {
   main: "#F44336",
   light: "#FFEBEE",
 };
@@ -24,18 +23,42 @@ const LanguageList = ({
   LANGUAGE_FAMILIES,
   findLanguageFamily,
 }) => {
-  const { isLanguageExpanded, setIsLanguageExpanded } = useLeaderboard();
+  const { isLanguageExpanded, setIsLanguageExpanded, arenaOnly } =
+    useLeaderboard();
 
-  // Store initial language stats in a memo to keep them constant
-  const initialLanguageStats = useMemo(() => new Map(languageStats), []);
+  // Store initial language stats in a memo to keep them constant and filter by arena if needed
+  const filteredLanguageStats = useMemo(() => {
+    if (!arenaOnly) return languageStats;
+
+    // Create a new Map with only arena leaderboards
+    const filteredStats = new Map();
+    languageStats.forEach((count, lang) => {
+      // Si nous avons déjà un nombre, nous le gardons tel quel
+      if (typeof count === "number") {
+        filteredStats.set(lang, count);
+      } else {
+        // Si nous avons un tableau de leaderboards, nous filtrons par arena
+        const arenaCount = count.filter((board) =>
+          board.tags?.includes("judge:humans")
+        ).length;
+        if (arenaCount > 0) {
+          filteredStats.set(lang, arenaCount);
+        }
+      }
+    });
+    return filteredStats;
+  }, [languageStats, arenaOnly]);
 
   // Group languages by family
   const groupedLanguages = languages.reduce((acc, lang) => {
-    const { family } = findLanguageFamily(lang);
-    if (!acc[family]) {
-      acc[family] = [];
+    // Only include languages that have stats after filtering
+    if (filteredLanguageStats.has(lang)) {
+      const { family } = findLanguageFamily(lang);
+      if (!acc[family]) {
+        acc[family] = [];
+      }
+      acc[family].push(lang);
     }
-    acc[family].push(lang);
     return acc;
   }, {});
 
@@ -56,7 +79,6 @@ const LanguageList = ({
           "&:before": {
             display: "none",
           },
-
           bgcolor: "transparent",
         }}
       >
@@ -105,76 +127,17 @@ const LanguageList = ({
                 >
                   {familyLanguages.map((lang) => {
                     const isActive = selectedLanguage === lang;
-                    const count = initialLanguageStats.get(lang) || 0;
+                    const count = filteredLanguageStats.get(lang) || 0;
 
                     return (
-                      <Button
+                      <FilterTag
                         key={lang}
+                        label={capitalize(lang)}
+                        count={count}
+                        isActive={isActive}
                         onClick={() => onLanguageSelect(isActive ? null : lang)}
-                        variant={isActive ? "contained" : "outlined"}
-                        size="small"
-                        sx={{
-                          textTransform: "none",
-                          cursor: "pointer",
-                          mb: 0.75,
-                          backgroundColor: (theme) => {
-                            if (isActive) {
-                              return TAG_COLOR.main;
-                            }
-                            return theme.palette.mode === "dark"
-                              ? "background.paper"
-                              : TAG_COLOR.light;
-                          },
-                          color: (theme) => {
-                            if (isActive) {
-                              return "white";
-                            }
-                            return TAG_COLOR.main;
-                          },
-                          borderColor: TAG_COLOR.main,
-                          "&:hover": {
-                            backgroundColor: (theme) => {
-                              if (isActive) {
-                                return TAG_COLOR.main;
-                              }
-                              return TAG_COLOR.light;
-                            },
-                            opacity: 0.8,
-                          },
-                          "& .MuiTouchRipple-root": {
-                            transition: "none",
-                          },
-                          transition: "none",
-                        }}
-                      >
-                        {capitalize(lang)}
-                        <Box
-                          component="span"
-                          sx={{
-                            display: "inline-flex",
-                            alignItems: "center",
-                            gap: 0.75,
-                            color: isActive ? "white" : "inherit",
-                            ml: 0.75,
-                          }}
-                        >
-                          <Box
-                            component="span"
-                            sx={(theme) => ({
-                              width: "4px",
-                              height: "4px",
-                              borderRadius: "100%",
-                              backgroundColor: isActive
-                                ? "rgba(255, 255, 255, 0.5)"
-                                : alpha(
-                                    TAG_COLOR.main,
-                                    theme.palette.mode === "dark" ? 0.4 : 0.3
-                                  ),
-                            })}
-                          />
-                          {count}
-                        </Box>
-                      </Button>
+                        colors={LANGUAGE_COLORS}
+                      />
                     );
                   })}
                 </Box>

client/src/components/LeaderboardSection/hooks/useLanguageStats.js

@@ -99,7 +99,9 @@ export const useLanguageStats = (leaderboards, filteredLeaderboards) => {
   const statsRef = useRef(null);
   const languagesRef = useRef(null);
 
-  if (statsRef.current === null && leaderboards) {
+  // Reset stats when leaderboards or filteredLeaderboards change
+  if (leaderboards && filteredLeaderboards) {
+    // Calculate unique languages from all leaderboards
     const langMap = new Map();
     const langFamilyMap = new Map();
 
@@ -135,10 +137,10 @@ export const useLanguageStats = (leaderboards, filteredLeaderboards) => {
       })
       .map(([lang]) => lang);
 
-    // Calculer les stats une seule fois
+    // Calculate stats based on filtered leaderboards
     statsRef.current = new Map();
     languagesRef.current.forEach((lang) => {
-      const count = leaderboards.filter((board) =>
+      const count = filteredLeaderboards.filter((board) =>
         board.tags?.some(
           (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
         )

client/src/components/common/FilterTag.jsx

@@ -2,44 +2,53 @@ import React from "react";
 import { Button, Box } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 
-const TAG_COLOR = {
+const DEFAULT_COLORS = {
   main: "#F44336",
   light: "#FFEBEE",
 };
 
-const FilterTag = ({ label, count, isActive, onClick }) => {
+const FilterTag = ({
+  label,
+  count,
+  isActive,
+  onClick,
+  colors = DEFAULT_COLORS,
+}) => {
+  const isDisabled = count === 0;
+
   return (
     <Button
       onClick={onClick}
       variant={isActive ? "contained" : "outlined"}
       size="small"
+      disabled={isDisabled}
       sx={{
         textTransform: "none",
-        cursor: "pointer",
+        cursor: isDisabled ? "default" : "pointer",
         mb: 0.75,
         backgroundColor: (theme) => {
           if (isActive) {
-            return TAG_COLOR.main;
+            return colors.main;
           }
           return theme.palette.mode === "dark"
             ? "background.paper"
-            : TAG_COLOR.light;
+            : colors.light;
         },
         color: (theme) => {
           if (isActive) {
             return "white";
           }
-          return TAG_COLOR.main;
+          return colors.main;
         },
-        borderColor: TAG_COLOR.main,
+        borderColor: colors.main,
         "&:hover": {
           backgroundColor: (theme) => {
             if (isActive) {
-              return TAG_COLOR.main;
+              return colors.main;
             }
-            return TAG_COLOR.light;
+            return colors.light;
           },
-          opacity: 0.8,
+          opacity: isDisabled ? 0.6 : 0.8,
         },
         "& .MuiTouchRipple-root": {
           transition: "none",
@@ -67,10 +76,7 @@ const FilterTag = ({ label, count, isActive, onClick }) => {
               borderRadius: "100%",
               backgroundColor: isActive
                 ? "rgba(255, 255, 255, 0.5)"
-                : alpha(
-                    TAG_COLOR.main,
-                    theme.palette.mode === "dark" ? 0.4 : 0.3
-                  ),
+                : alpha(colors.main, theme.palette.mode === "dark" ? 0.4 : 0.3),
             })}
           />
           {count}