add multi selection and update language specific list

client/src/App.jsx

@@ -1,11 +1,5 @@
-import React, { useEffect } from "react";
-import {
-  HashRouter as Router,
-  Routes,
-  Route,
-  useSearchParams,
-  useLocation,
-} from "react-router-dom";
+import React from "react";
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import { Box, CssBaseline } from "@mui/material";
 import Navigation from "./components/Navigation/Navigation";
@@ -15,38 +9,6 @@ import Footer from "./components/Footer/Footer";
 import getTheme from "./config/theme";
 import { useThemeMode } from "./hooks/useThemeMode";
 
-function UrlHandler() {
-  const location = useLocation();
-  const [searchParams] = useSearchParams();
-
-  useEffect(() => {
-    const isHFSpace = window.location !== window.parent.location;
-    if (!isHFSpace) return;
-
-    const queryString = window.location.search;
-    const hash = window.location.hash;
-
-    window.parent.postMessage(
-      {
-        queryString,
-        hash,
-      },
-      "https://huggingface.co"
-    );
-  }, [location, searchParams]);
-
-  useEffect(() => {
-    const handleHashChange = (event) => {
-      console.log("hash change event", event);
-    };
-
-    window.addEventListener("hashchange", handleHashChange);
-    return () => window.removeEventListener("hashchange", handleHashChange);
-  }, []);
-
-  return null;
-}
-
 function App() {
   const { mode, toggleTheme } = useThemeMode();
   const theme = getTheme(mode);
@@ -64,7 +26,6 @@ function App() {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <Router>
-          <UrlHandler />
           <Box
             sx={{
               minHeight: "100vh",

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -5,6 +5,32 @@ import { useDebounce } from "../../hooks/useDebounce";
 import { alpha, lighten, darken } from "@mui/material/styles";
 import SearchBar from "./SearchBar";
 
+// Constantes pour les tags de catégorisation
+const CATEGORIZATION_TAGS = [
+  "modality:agent",
+  "modality:artefacts",
+  "modality:text",
+  "eval:code",
+  "eval:math",
+  "eval:reasoning",
+  "eval:hallucination",
+  "modality:video",
+  "modality:image",
+  "modality:3d",
+  "modality:audio",
+  "domain:financial",
+  "domain:medical",
+  "domain:legal",
+  "domain:biology",
+  "domain:translation",
+  "domain:chemistry",
+  "domain:physics",
+  "domain:commercial",
+  "eval:safety",
+  "eval:performance",
+  "eval:rag",
+];
+
 // Helper function to get the category group of a section
 const getSectionGroup = (id) => {
   const groups = {
@@ -65,8 +91,8 @@ const LeaderboardFilters = ({ allSections = [] }) => {
     arenaOnly,
     setArenaOnly,
     filterLeaderboards,
-    selectedCategory,
-    setSelectedCategory,
+    selectedCategories,
+    setSelectedCategories,
     searchQuery,
   } = useLeaderboard();
 
@@ -86,70 +112,208 @@ const LeaderboardFilters = ({ allSections = [] }) => {
 
   // Update total arena count
   React.useEffect(() => {
-    const boardsToCount = selectedCategory
-      ? allSections.find((section) => section.id === selectedCategory)?.data ||
-        []
-      : allSections.reduce(
-          (acc, section) => [...acc, ...(section.data || [])],
-          []
-        );
+    const allLeaderboards = Array.from(
+      new Set(
+        allSections.reduce((acc, section) => {
+          return [...acc, ...(section.data || [])];
+        }, [])
+      )
+    );
 
+    // Filtrer d'abord par catégories si nécessaire
+    let boardsToCount = allLeaderboards;
+    if (selectedCategories.size > 0) {
+      boardsToCount = boardsToCount.filter((board) => {
+        if (board.approval_status !== "approved") return false;
+        const tags = board.tags || [];
+        return Array.from(selectedCategories).every((category) => {
+          switch (category) {
+            case "agentic":
+              return tags.includes("modality:agent");
+            case "text":
+              return tags.includes("modality:text");
+            case "image":
+              return tags.includes("modality:image");
+            case "video":
+              return tags.includes("modality:video");
+            case "code":
+              return tags.includes("eval:code");
+            case "math":
+              return tags.includes("eval:math");
+            case "reasoning":
+              return tags.includes("eval:reasoning");
+            case "hallucination":
+              return tags.includes("eval:hallucination");
+            case "rag":
+              return tags.includes("eval:rag");
+            case "language":
+              return tags.some((tag) => tag.startsWith("language:"));
+            case "vision":
+              return tags.some(
+                (tag) => tag === "modality:video" || tag === "modality:image"
+              );
+            case "threeD":
+              return tags.includes("modality:3d");
+            case "audio":
+              return tags.includes("modality:audio");
+            case "financial":
+              return tags.includes("domain:financial");
+            case "medical":
+              return tags.includes("domain:medical");
+            case "legal":
+              return tags.includes("domain:legal");
+            case "biology":
+              return tags.includes("domain:biology");
+            case "commercial":
+              return tags.includes("domain:commercial");
+            case "translation":
+              return tags.includes("domain:translation");
+            case "chemistry":
+              return tags.includes("domain:chemistry");
+            case "safety":
+              return tags.includes("eval:safety");
+            case "performance":
+              return tags.includes("eval:performance");
+            case "uncategorized":
+              return !tags.some(
+                (tag) =>
+                  CATEGORIZATION_TAGS.includes(tag) ||
+                  tag.startsWith("language:")
+              );
+            default:
+              return false;
+          }
+        });
+      });
+    }
+
+    // Ensuite compter les leaderboards arena
     const arenaCount = boardsToCount.filter((board) =>
       board.tags?.includes("judge:humans")
     ).length;
     setTotalArenaCount(arenaCount);
-  }, [selectedCategory, allSections]);
+  }, [selectedCategories, allSections]);
 
-  // Calculer le nombre total en fonction de la catégorie sélectionnée
+  // Calculer le nombre total en fonction des catégories sélectionnées
   const totalCount = useMemo(() => {
     if (!allSections) return 0;
 
-    if (selectedCategory) {
-      const categorySection = allSections.find(
-        (section) => section.id === selectedCategory
-      );
-      return categorySection?.data?.length || 0;
+    if (arenaOnly && selectedCategories.size === 0) {
+      return totalArenaCount;
     }
 
-    const uniqueIds = new Set();
-    allSections.forEach((section) => {
-      (section.data || []).forEach((board) => {
-        if (board.approval_status === "approved") {
-          uniqueIds.add(board.id);
-        }
+    // Récupérer tous les leaderboards uniques de toutes les sections
+    const allLeaderboards = Array.from(
+      new Set(
+        allSections.reduce((acc, section) => {
+          return [...acc, ...(section.data || [])];
+        }, [])
+      )
+    );
+
+    // Si des catégories sont sélectionnées, filtrer les leaderboards qui correspondent à TOUTES les catégories
+    let filteredBoards = allLeaderboards;
+    if (selectedCategories.size > 0) {
+      filteredBoards = filteredBoards.filter((board) => {
+        if (board.approval_status !== "approved") return false;
+        const tags = board.tags || [];
+        return Array.from(selectedCategories).every((category) => {
+          switch (category) {
+            case "agentic":
+              return tags.includes("modality:agent");
+            case "text":
+              return tags.includes("modality:text");
+            case "image":
+              return tags.includes("modality:image");
+            case "video":
+              return tags.includes("modality:video");
+            case "code":
+              return tags.includes("eval:code");
+            case "math":
+              return tags.includes("eval:math");
+            case "reasoning":
+              return tags.includes("eval:reasoning");
+            case "hallucination":
+              return tags.includes("eval:hallucination");
+            case "rag":
+              return tags.includes("eval:rag");
+            case "language":
+              return tags.some((tag) => tag.startsWith("language:"));
+            case "vision":
+              return tags.some(
+                (tag) => tag === "modality:video" || tag === "modality:image"
+              );
+            case "threeD":
+              return tags.includes("modality:3d");
+            case "audio":
+              return tags.includes("modality:audio");
+            case "financial":
+              return tags.includes("domain:financial");
+            case "medical":
+              return tags.includes("domain:medical");
+            case "legal":
+              return tags.includes("domain:legal");
+            case "biology":
+              return tags.includes("domain:biology");
+            case "commercial":
+              return tags.includes("domain:commercial");
+            case "translation":
+              return tags.includes("domain:translation");
+            case "chemistry":
+              return tags.includes("domain:chemistry");
+            case "safety":
+              return tags.includes("eval:safety");
+            case "performance":
+              return tags.includes("eval:performance");
+            case "uncategorized":
+              return !tags.some(
+                (tag) =>
+                  CATEGORIZATION_TAGS.includes(tag) ||
+                  tag.startsWith("language:")
+              );
+            default:
+              return false;
+          }
+        });
       });
-    });
-    return uniqueIds.size;
-  }, [selectedCategory, allSections]);
+    }
+
+    // Appliquer le filtre Arena Only si nécessaire
+    if (arenaOnly) {
+      filteredBoards = filteredBoards.filter((board) =>
+        board.tags?.includes("judge:humans")
+      );
+    }
+
+    return filteredBoards.filter(
+      (board) => board.approval_status === "approved"
+    ).length;
+  }, [selectedCategories, allSections, arenaOnly, totalArenaCount]);
 
   // Calculer le nombre filtré en prenant en compte tous les filtres
   const currentFilteredCount = useMemo(() => {
     if (!allSections) return 0;
 
-    if (arenaOnly && !searchQuery && !selectedCategory) {
+    if (arenaOnly && !searchQuery && selectedCategories.size === 0) {
       return totalArenaCount;
     }
 
-    if (selectedCategory) {
-      const categorySection = allSections.find(
-        (section) => section.id === selectedCategory
-      );
-      if (!categorySection?.data) return 0;
-      return filterLeaderboards(categorySection.data).length;
-    }
+    // Récupérer tous les leaderboards uniques de toutes les sections
+    const allLeaderboards = Array.from(
+      new Set(
+        allSections.reduce((acc, section) => {
+          return [...acc, ...(section.data || [])];
+        }, [])
+      )
+    );
 
-    const uniqueFilteredIds = new Set();
-    allSections.forEach((section) => {
-      const filteredBoards = filterLeaderboards(section.data || []);
-      filteredBoards.forEach((board) => {
-        if (board.approval_status === "approved") {
-          uniqueFilteredIds.add(board.id);
-        }
-      });
-    });
-    return uniqueFilteredIds.size;
+    // Appliquer les filtres sur l'ensemble des leaderboards
+    const filteredBoards = filterLeaderboards(allLeaderboards);
+    return filteredBoards.filter(
+      (board) => board.approval_status === "approved"
+    ).length;
   }, [
-    selectedCategory,
+    selectedCategories,
     allSections,
     filterLeaderboards,
     arenaOnly,
@@ -184,6 +348,7 @@ const LeaderboardFilters = ({ allSections = [] }) => {
             const prevGroup =
               index > 0 ? getSectionGroup(allSections[index - 1].id) : null;
             const needsSpacing = currentGroup !== prevGroup;
+            const isSelected = selectedCategories.has(id);
 
             return (
               <React.Fragment key={id}>
@@ -192,22 +357,19 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                 )}
                 <Button
                   onClick={() => {
-                    if (selectedCategory === id || count > 0) {
-                      setSelectedCategory(selectedCategory === id ? null : id);
+                    if (isSelected || count > 0) {
+                      setSelectedCategories(id);
                     }
                   }}
-                  variant={selectedCategory === id ? "contained" : "outlined"}
+                  variant={isSelected ? "contained" : "outlined"}
                   size="small"
-                  disabled={count === 0 && selectedCategory !== id}
+                  disabled={count === 0 && !isSelected}
                   sx={{
                     textTransform: "none",
-                    cursor:
-                      count === 0 && selectedCategory !== id
-                        ? "default"
-                        : "pointer",
+                    cursor: count === 0 && !isSelected ? "default" : "pointer",
                     mb: 1,
                     backgroundColor: (theme) => {
-                      if (selectedCategory === id) {
+                      if (isSelected) {
                         return groupColors[currentGroup]?.main;
                       }
                       return theme.palette.mode === "dark"
@@ -215,7 +377,7 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                         : groupColors[currentGroup]?.light;
                     },
                     color: (theme) => {
-                      if (selectedCategory === id) {
+                      if (isSelected) {
                         return "white";
                       }
                       return groupColors[currentGroup]?.main;
@@ -225,7 +387,7 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                     },
                     "&:hover": {
                       backgroundColor: (theme) => {
-                        if (selectedCategory === id) {
+                        if (isSelected) {
                           return groupColors[currentGroup]?.main;
                         }
                         return groupColors[currentGroup]?.light;
@@ -245,7 +407,7 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                       alignItems: "center",
                       gap: 0.75,
                       color: (theme) => {
-                        if (selectedCategory === id) {
+                        if (isSelected) {
                           return "white";
                         }
                         // Assombrir la couleur principale du groupe
@@ -262,13 +424,12 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                         width: "4px",
                         height: "4px",
                         borderRadius: "100%",
-                        backgroundColor:
-                          selectedCategory === id
-                            ? "rgba(255, 255, 255, 0.5)"
-                            : alpha(
-                                groupColors[currentGroup]?.main,
-                                theme.palette.mode === "dark" ? 0.4 : 0.3
-                              ),
+                        backgroundColor: isSelected
+                          ? "rgba(255, 255, 255, 0.5)"
+                          : alpha(
+                              groupColors[currentGroup]?.main,
+                              theme.palette.mode === "dark" ? 0.4 : 0.3
+                            ),
                       })}
                     />
                     {count}

client/src/components/LeaderboardSection/components/LanguageAccordion.jsx

@@ -1,16 +1,13 @@
 import React from "react";
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Typography,
-  Box,
-  Button,
-} from "@mui/material";
+import { Typography, Box, Button } from "@mui/material";
 import { alpha } from "@mui/material/styles";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-const LanguageAccordion = ({
+const TAG_COLOR = {
+  main: "#F44336",
+  light: "#FFEBEE",
+};
+
+const LanguageList = ({
   languages,
   languageStats,
   selectedLanguage,
@@ -18,150 +15,124 @@ const LanguageAccordion = ({
   LANGUAGE_FAMILIES,
   findLanguageFamily,
 }) => {
+  // Group languages by family
+  const groupedLanguages = languages.reduce((acc, lang) => {
+    const { family } = findLanguageFamily(lang);
+    if (!acc[family]) {
+      acc[family] = [];
+    }
+    acc[family].push(lang);
+    return acc;
+  }, {});
+
+  const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
   return (
-    <Accordion
-      defaultExpanded={false}
-      elevation={0}
-      disableGutters
-      sx={{
-        mb: 4,
-        "&:before": {
-          display: "none",
-        },
-        backgroundColor: "transparent",
-      }}
-    >
-      <AccordionSummary
-        expandIcon={
-          <ExpandMoreIcon sx={{ fontSize: 20, color: "text.secondary" }} />
-        }
+    <Box sx={{ mb: 4 }}>
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        sx={{ fontWeight: 500, mb: 2 }}
+      >
+        Filter by language
+      </Typography>
+      <Box
         sx={{
-          p: 0,
-          minHeight: 32,
-          height: 32,
-          "&.MuiAccordionSummary-root": {
-            "&.Mui-expanded": {
-              minHeight: 32,
-              height: 32,
-            },
-          },
-          "& .MuiAccordionSummary-content": {
-            m: 0,
-            "&.Mui-expanded": {
-              m: 0,
-            },
-          },
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 3,
         }}
       >
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{ fontWeight: 500 }}
-        >
-          Filter by language
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails sx={{ padding: 0 }}>
-        {Object.entries(LANGUAGE_FAMILIES).map(([family, subFamilies]) => {
-          const familyLanguages = languages.filter((lang) => {
-            const { family: langFamily } = findLanguageFamily(lang);
-            return langFamily === family;
-          });
-
-          if (familyLanguages.length === 0 && family !== "Other Languages")
-            return null;
-
-          const familyTotal = familyLanguages.reduce(
-            (sum, lang) => sum + (languageStats?.get(lang) || 0),
-            0
-          );
+        {Object.entries(groupedLanguages).map(
+          ([family, familyLanguages], familyIndex) => (
+            <Box
+              key={family}
+              sx={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 1,
+              }}
+            >
+              {familyLanguages.map((lang) => {
+                const isActive = selectedLanguage === lang;
+                const count = languageStats?.get(lang) || 0;
 
-          if (familyTotal === 0) return null;
-
-          return (
-            <Box key={family} sx={{ mb: 3 }}>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                sx={{ mb: 1, opacity: 0.7 }}
-              >
-                {family}
-              </Typography>
-              <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
-                {familyLanguages.map((lang) => {
-                  const count = languageStats?.get(lang) || 0;
-                  if (count === 0) return null;
-
-                  const isActive = selectedLanguage === lang;
-                  const isDisabled = count === 0;
-
-                  return (
-                    <Button
-                      key={lang}
-                      onClick={() => onLanguageSelect(isActive ? null : lang)}
-                      variant={isActive ? "contained" : "outlined"}
-                      size="small"
-                      disabled={isDisabled}
-                      sx={{
-                        textTransform: "none",
-                        m: 0.125,
-                        opacity: isDisabled ? 0.5 : 1,
-                        backgroundColor: (theme) =>
-                          isActive
-                            ? undefined
-                            : theme.palette.mode === "dark"
-                            ? "background.paper"
-                            : "white",
-                        "&:hover": {
-                          backgroundColor: (theme) =>
-                            isActive
-                              ? undefined
-                              : theme.palette.mode === "dark"
-                              ? "background.paper"
-                              : "white",
-                          opacity: isDisabled ? 0.5 : 0.8,
-                        },
-                        "& .MuiTouchRipple-root": {
-                          transition: "none",
+                return (
+                  <Button
+                    key={lang}
+                    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,
                       }}
                     >
-                      {lang}
                       <Box
                         component="span"
-                        sx={{
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: 0.75,
-                          color: isActive ? "inherit" : "text.secondary",
-                          ml: 0.75,
-                        }}
-                      >
-                        <Box
-                          component="span"
-                          sx={(theme) => ({
-                            width: "4px",
-                            height: "4px",
-                            borderRadius: "100%",
-                            backgroundColor: alpha(
-                              theme.palette.text.primary,
-                              theme.palette.mode === "dark" ? 0.2 : 0.15
-                            ),
-                          })}
-                        />
-                        {count}
-                      </Box>
-                    </Button>
-                  );
-                })}
-              </Box>
+                        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>
+                );
+              })}
             </Box>
-          );
-        })}
-      </AccordionDetails>
-    </Accordion>
+          )
+        )}
+      </Box>
+    </Box>
   );
 };
 
-export default LanguageAccordion;
+export default LanguageList;

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

@@ -0,0 +1,188 @@
+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";
+
+const TAG_COLOR = {
+  main: "#F44336",
+  light: "#FFEBEE",
+};
+
+const LanguageList = ({
+  languages,
+  languageStats,
+  selectedLanguage,
+  onLanguageSelect,
+  LANGUAGE_FAMILIES,
+  findLanguageFamily,
+}) => {
+  const { isLanguageExpanded, setIsLanguageExpanded } = useLeaderboard();
+
+  // Store initial language stats in a memo to keep them constant
+  const initialLanguageStats = useMemo(() => new Map(languageStats), []);
+
+  // Group languages by family
+  const groupedLanguages = languages.reduce((acc, lang) => {
+    const { family } = findLanguageFamily(lang);
+    if (!acc[family]) {
+      acc[family] = [];
+    }
+    acc[family].push(lang);
+    return acc;
+  }, {});
+
+  const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+  const handleAccordionChange = (event, expanded) => {
+    setIsLanguageExpanded(expanded);
+  };
+
+  return (
+    <Box sx={{ mb: 4 }}>
+      <Accordion
+        expanded={isLanguageExpanded}
+        onChange={handleAccordionChange}
+        disableGutters
+        elevation={0}
+        sx={{
+          "&:before": {
+            display: "none",
+          },
+          bgcolor: "transparent",
+        }}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="language-filter-content"
+          id="language-filter-header"
+          sx={{
+            p: 0,
+            minHeight: "unset",
+            "& .MuiAccordionSummary-content": {
+              m: 0,
+              alignItems: "center",
+            },
+            "& .MuiAccordionSummary-expandIconWrapper": {
+              ml: 1,
+            },
+          }}
+        >
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ fontWeight: 500 }}
+          >
+            Filter by language
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails sx={{ p: 0, pt: 2 }}>
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 3,
+            }}
+          >
+            {Object.entries(groupedLanguages).map(
+              ([family, familyLanguages], familyIndex) => (
+                <Box
+                  key={family}
+                  sx={{
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 1,
+                  }}
+                >
+                  {familyLanguages.map((lang) => {
+                    const isActive = selectedLanguage === lang;
+                    const count = initialLanguageStats.get(lang) || 0;
+
+                    return (
+                      <Button
+                        key={lang}
+                        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>
+                    );
+                  })}
+                </Box>
+              )
+            )}
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  );
+};
+
+export default LanguageList;

client/src/components/LeaderboardSection/components/LeaderboardGrid.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Box, Collapse } from "@mui/material";
+import { Grid, Box } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import LeaderboardCard from "./LeaderboardCard";
 
@@ -25,31 +25,25 @@ const LeaderboardGrid = ({
   remainingLeaderboards,
   isExpanded,
   skeletonsNeeded,
+  id,
 }) => {
+  // On n'affiche que les leaderboards qui doivent être affichés selon l'état d'expansion
+  const leaderboardsToShow = displayedLeaderboards;
+
   return (
-    <>
-      <Grid container spacing={3}>
-        {displayedLeaderboards.map((leaderboard, index) => (
-          <Grid item xs={12} sm={6} md={3} key={index}>
-            <LeaderboardCard leaderboard={leaderboard} />
-          </Grid>
-        ))}
-        {Array.from({ length: skeletonsNeeded }).map((_, index) => (
+    <Grid container spacing={3}>
+      {leaderboardsToShow.map((leaderboard, index) => (
+        <Grid item xs={12} sm={6} md={3} key={index}>
+          <LeaderboardCard leaderboard={leaderboard} />
+        </Grid>
+      ))}
+      {skeletonsNeeded > 0 &&
+        Array.from({ length: skeletonsNeeded }).map((_, index) => (
           <Grid item xs={12} sm={6} md={3} key={`skeleton-${index}`}>
             <LeaderboardSkeleton />
           </Grid>
         ))}
-      </Grid>
-      <Collapse in={isExpanded} timeout={300} unmountOnExit>
-        <Grid container spacing={3} sx={{ mt: 0 }}>
-          {remainingLeaderboards.map((leaderboard, index) => (
-            <Grid item xs={12} sm={6} md={3} key={index + ITEMS_PER_PAGE}>
-              <LeaderboardCard leaderboard={leaderboard} />
-            </Grid>
-          ))}
-        </Grid>
-      </Collapse>
-    </>
+    </Grid>
   );
 };
 

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

@@ -1,28 +1,94 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 
 const LANGUAGE_FAMILIES = {
-  "Romance Languages": [
-    "french",
-    "spanish",
-    "italian",
-    "portuguese",
-    "romanian",
+  "Indo-European": {
+    Germanic: ["english", "german", "dutch", "danish", "swedish", "icelandic"],
+    Romance: [
+      "french",
+      "spanish",
+      "italian",
+      "portuguese",
+      "romanian",
+      "catalan",
+      "galician",
+    ],
+    Slavic: [
+      "russian",
+      "polish",
+      "czech",
+      "slovak",
+      "ukrainian",
+      "bulgarian",
+      "slovenian",
+      "serbian",
+      "croatian",
+    ],
+    Baltic: ["lithuanian", "latvian"],
+    "Indo-Iranian": [
+      "persian",
+      "hindi",
+      "bengali",
+      "gujarati",
+      "nepali",
+      "marathi",
+    ],
+    Greek: ["greek"],
+    Armenian: ["armenian"],
+  },
+  "Sino-Tibetan": ["chinese", "mandarin", "taiwanese"],
+  Afroasiatic: [
+    "arabic",
+    "hebrew",
+    "darija", // Variante de l'arabe
   ],
-  "Germanic Languages": [
-    "english",
-    "german",
-    "dutch",
-    "swedish",
-    "danish",
-    "norwegian",
+  Austronesian: [
+    "indonesian",
+    "malay",
+    "filipino",
+    "singlish", // Créole basé sur l'anglais mais avec influence malaise
+  ],
+  "Niger-Congo": ["swahili", "yoruba"],
+  Dravidian: ["tamil", "telugu", "kannada", "malayalam"],
+  Austroasiatic: ["vietnamese"],
+  "Kra-Dai": ["thai"],
+  Japonic: [
+    "japanese",
+    "日本語", // Japonais en caractères japonais
+  ],
+  Koreanic: ["korean"],
+  Uralic: ["hungarian", "finnish", "estonian"],
+  "Language Isolate": [
+    "basque", // Langue isolée, pas de famille connue
   ],
-  "Asian Languages": ["chinese", "japanese", "korean", "vietnamese", "thai"],
   "Other Languages": [], // Will catch any language not in other families
 };
 
+const FAMILY_ORDER = [
+  "Indo-European", // Plus grande famille en Europe et Asie du Sud
+  "Sino-Tibetan", // Deuxième plus grande famille en Asie
+  "Afroasiatic", // Principale famille en Afrique du Nord et Moyen-Orient
+  "Austronesian", // Principale famille en Asie du Sud-Est insulaire
+  "Niger-Congo", // Plus grande famille en Afrique subsaharienne
+  "Dravidian", // Principale famille en Inde du Sud
+  "Austroasiatic", // Importante en Asie du Sud-Est continentale
+  "Kra-Dai", // Famille du thaï
+  "Japonic", // Japonais
+  "Koreanic", // Coréen
+  "Uralic", // Famille finno-ougrienne
+  "Language Isolate", // Langues isolées
+  "Other Languages", // Autres langues non classifiées
+];
+
 const findLanguageFamily = (language) => {
-  for (const [family, languages] of Object.entries(LANGUAGE_FAMILIES)) {
-    if (languages.includes(language.toLowerCase())) {
+  for (const [family, content] of Object.entries(LANGUAGE_FAMILIES)) {
+    if (family === "Indo-European") {
+      // Cas spécial pour l'Indo-Européen qui a des sous-familles
+      for (const [subFamily, languages] of Object.entries(content)) {
+        if (languages.includes(language.toLowerCase())) {
+          return { family, subFamily };
+        }
+      }
+    } else if (content.includes(language.toLowerCase())) {
       return { family, subFamily: language };
     }
   }
@@ -30,9 +96,10 @@ const findLanguageFamily = (language) => {
 };
 
 export const useLanguageStats = (leaderboards, filteredLeaderboards) => {
-  const languages = useMemo(() => {
-    if (!leaderboards) return null;
+  const statsRef = useRef(null);
+  const languagesRef = useRef(null);
 
+  if (statsRef.current === null && leaderboards) {
     const langMap = new Map();
     const langFamilyMap = new Map();
 
@@ -52,33 +119,38 @@ export const useLanguageStats = (leaderboards, filteredLeaderboards) => {
       return [lang, count, family];
     });
 
-    return langArray
+    languagesRef.current = langArray
       .sort((a, b) => {
-        if (a[2] !== b[2]) {
-          if (a[2] === "Other Languages") return 1;
-          if (b[2] === "Other Languages") return -1;
-          return a[2].localeCompare(b[2]);
+        const familyA = a[2];
+        const familyB = b[2];
+
+        const orderA = FAMILY_ORDER.indexOf(familyA);
+        const orderB = FAMILY_ORDER.indexOf(familyB);
+
+        if (orderA !== orderB) {
+          return orderA - orderB;
         }
+
         return b[1] - a[1];
       })
       .map(([lang]) => lang);
-  }, [leaderboards]);
-
-  const languageStats = useMemo(() => {
-    if (!languages) return null;
-    const stats = new Map();
 
-    languages.forEach((lang) => {
-      const count = filteredLeaderboards.filter((board) =>
+    // Calculer les stats une seule fois
+    statsRef.current = new Map();
+    languagesRef.current.forEach((lang) => {
+      const count = leaderboards.filter((board) =>
         board.tags?.some(
           (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
         )
       ).length;
-      stats.set(lang, count);
+      statsRef.current.set(lang, count);
     });
+  }
 
-    return stats;
-  }, [languages, filteredLeaderboards]);
-
-  return { languages, languageStats, LANGUAGE_FAMILIES, findLanguageFamily };
+  return {
+    languages: languagesRef.current,
+    languageStats: statsRef.current,
+    LANGUAGE_FAMILIES,
+    findLanguageFamily,
+  };
 };

client/src/components/LeaderboardSection/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Box } from "@mui/material";
 import { useLeaderboard } from "../../context/LeaderboardContext";
 import SectionHeader from "./components/SectionHeader";
-import LanguageAccordion from "./components/LanguageAccordion";
+import LanguageList from "./components/LanguageList";
 import LeaderboardGrid from "./components/LeaderboardGrid";
 import EmptyState from "./components/EmptyState";
 import { useLanguageStats } from "./hooks/useLanguageStats";
@@ -21,7 +21,7 @@ const LeaderboardSection = ({
     selectedLanguage,
     setSelectedLanguage,
     searchQuery,
-    selectedCategory,
+    selectedCategories,
   } = useLeaderboard();
 
   const isExpanded = expandedSections.has(id);
@@ -37,16 +37,28 @@ const LeaderboardSection = ({
   // On ne retourne null que si on n'a pas de leaderboards bruts
   if (!leaderboards) return null;
 
-  // On affiche toujours les 3 premiers
-  const displayedLeaderboards = approvedLeaderboards.slice(0, ITEMS_PER_PAGE);
-  // Le reste sera dans le Collapse
-  const remainingLeaderboards = approvedLeaderboards.slice(ITEMS_PER_PAGE);
+  // Déterminer si on doit paginer ou montrer tous les leaderboards
+  const shouldShowAll =
+    (selectedCategories.size === 1 && selectedCategories.has(id)) || // Une seule catégorie sélectionnée ET c'est celle-ci
+    (selectedCategories.size > 1 && id === "combined") || // Plusieurs catégories ET c'est la section combinée
+    isExpanded; // Section dépliée (quelle que soit la sélection)
 
-  // Calculate how many skeletons we need
-  const skeletonsNeeded = Math.max(0, 4 - approvedLeaderboards.length);
+  // Si on doit tout montrer, on ne divise pas la liste
+  const displayedLeaderboards = shouldShowAll
+    ? approvedLeaderboards
+    : approvedLeaderboards.slice(0, ITEMS_PER_PAGE);
 
-  // On affiche le bouton seulement si aucune catégorie n'est sélectionnée
-  const showExpandButton = !selectedCategory;
+  const remainingLeaderboards = shouldShowAll
+    ? []
+    : approvedLeaderboards.slice(ITEMS_PER_PAGE);
+
+  // Calculate how many skeletons we need (seulement si on ne montre pas tout)
+  const skeletonsNeeded = shouldShowAll
+    ? 0
+    : Math.max(0, 4 - approvedLeaderboards.length);
+
+  // On affiche le bouton expand seulement quand on n'a pas de sélection
+  const showExpandButton = selectedCategories.size === 0;
 
   // Le bouton est actif seulement s'il y a plus de 4 leaderboards
   const isExpandButtonEnabled = approvedLeaderboards.length > ITEMS_PER_PAGE;
@@ -63,6 +75,13 @@ const LeaderboardSection = ({
     });
   };
 
+  // Déterminer si on doit afficher la liste des langues
+  const showLanguageList =
+    languages &&
+    selectedCategories.size > 0 &&
+    (id === "language" ||
+      (selectedCategories.size > 1 && selectedCategories.has("language")));
+
   return (
     <Box sx={{ mb: 6 }}>
       <SectionHeader
@@ -74,8 +93,8 @@ const LeaderboardSection = ({
         isExpandButtonEnabled={isExpandButtonEnabled}
       />
 
-      {languages && selectedCategory === "language" && (
-        <LanguageAccordion
+      {showLanguageList && (
+        <LanguageList
           languages={languages}
           languageStats={languageStats}
           selectedLanguage={selectedLanguage}
@@ -93,6 +112,7 @@ const LeaderboardSection = ({
           remainingLeaderboards={remainingLeaderboards}
           isExpanded={isExpanded}
           skeletonsNeeded={skeletonsNeeded}
+          id={id}
         />
       )}
     </Box>

client/src/components/Logo/Logo.jsx

@@ -1,34 +1,32 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
 import logoText from "../../assets/logo-text.svg";
 import gradient from "../../assets/gradient.svg";
+import { useUrlState } from "../../hooks/useUrlState";
 import { useLeaderboard } from "../../context/LeaderboardContext";
 
 const Logo = () => {
-  const {
-    setSearchQuery,
-    setArenaOnly,
-    setSelectedCategory,
-    setSelectedLanguage,
-    setExpandedSections,
-  } = useLeaderboard();
+  const { resetParams } = useUrlState();
+  const { resetState } = useLeaderboard();
+  const navigate = useNavigate();
 
-  const handleReset = (e) => {
+  const handleClick = (e) => {
     e.preventDefault();
-    setSearchQuery("");
-    setArenaOnly(false);
-    setSelectedCategory(null);
-    setSelectedLanguage(null);
-    setExpandedSections(new Set());
-    window.history.pushState({}, "", window.location.pathname);
+    resetState();
+    resetParams();
+    navigate("/");
   };
 
   return (
-    <Link
-      to="/"
-      onClick={handleReset}
-      style={{ textDecoration: "none", position: "relative" }}
+    <Box
+      component="a"
+      onClick={handleClick}
+      sx={{
+        textDecoration: "none",
+        position: "relative",
+        cursor: "pointer",
+      }}
     >
       <Box
         component="img"
@@ -59,7 +57,7 @@ const Logo = () => {
           opacity: (theme) => (theme.palette.mode === "dark" ? 0.8 : 1),
         }}
       />
-    </Link>
+    </Box>
   );
 };
 

client/src/components/common/FilterTag.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Button, Box } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+
+const TAG_COLOR = {
+  main: "#F44336",
+  light: "#FFEBEE",
+};
+
+const FilterTag = ({ label, count, isActive, onClick }) => {
+  return (
+    <Button
+      onClick={onClick}
+      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",
+      }}
+    >
+      {label}
+      {count !== undefined && (
+        <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>
+  );
+};
+
+export default FilterTag;

client/src/context/LeaderboardContext.jsx

@@ -6,33 +6,11 @@ import React, {
   useMemo,
   useEffect,
 } from "react";
+import { normalizeTags } from "../utils/tagFilters";
+import { useUrlState } from "../hooks/useUrlState";
 
 const LeaderboardContext = createContext();
 
-// Helper pour mettre à jour l'URL
-const updateURL = (params) => {
-  const url = new URL(window.location);
-  Object.entries(params).forEach(([key, value]) => {
-    if (value) {
-      url.searchParams.set(key, value);
-    } else {
-      url.searchParams.delete(key);
-    }
-  });
-  window.history.pushState({}, "", url);
-};
-
-// Helper pour lire les paramètres de l'URL
-const getURLParams = () => {
-  const params = new URLSearchParams(window.location.search);
-  return {
-    category: params.get("category"),
-    search: params.get("search"),
-    arena: params.get("arena") === "true",
-    language: params.get("language"),
-  };
-};
-
 // Constantes pour les tags de catégorisation
 const CATEGORIZATION_TAGS = [
   "modality:agent",
@@ -76,62 +54,70 @@ const isUncategorized = (board) => {
 };
 
 export const LeaderboardProvider = ({ children }) => {
-  // Lire les paramètres initiaux depuis l'URL
-  const initialParams = getURLParams();
+  const { params, updateParams } = useUrlState();
 
   const [leaderboards, setLeaderboards] = useState([]);
-  const [searchQuery, setSearchQuery] = useState(initialParams.search || "");
-  const [arenaOnly, setArenaOnly] = useState(initialParams.arena);
-  const [selectedCategory, setSelectedCategory] = useState(
-    initialParams.category
+  const [searchQuery, setSearchQuery] = useState(params.search || "");
+  const [arenaOnly, setArenaOnly] = useState(params.arena === "true");
+  const [selectedCategories, setSelectedCategories] = useState(
+    new Set(params.categories || [])
   );
   const [selectedLanguage, setSelectedLanguage] = useState(
-    initialParams.language
+    params.language || null
   );
   const [expandedSections, setExpandedSections] = useState(
-    new Set(initialParams.category ? [initialParams.category] : [])
+    new Set(params.categories || [])
+  );
+  const [isLanguageExpanded, setIsLanguageExpanded] = useState(
+    params.languageExpanded === "true"
   );
 
   // Mettre à jour l'URL quand les filtres changent
   useEffect(() => {
-    updateURL({
-      category: selectedCategory,
+    updateParams({
+      categories: Array.from(selectedCategories),
       search: searchQuery,
       arena: arenaOnly ? "true" : null,
       language: selectedLanguage,
+      languageExpanded: isLanguageExpanded ? "true" : null,
     });
-  }, [selectedCategory, searchQuery, arenaOnly, selectedLanguage]);
-
-  // Écouter les changements d'URL (navigation back/forward)
-  useEffect(() => {
-    const handleURLChange = () => {
-      const params = getURLParams();
-      setSearchQuery(params.search || "");
-      setArenaOnly(params.arena);
-      setSelectedCategory(params.category);
-      setSelectedLanguage(params.language);
-      setExpandedSections(new Set(params.category ? [params.category] : []));
-    };
-
-    window.addEventListener("popstate", handleURLChange);
-    return () => window.removeEventListener("popstate", handleURLChange);
-  }, []);
+  }, [
+    selectedCategories,
+    searchQuery,
+    arenaOnly,
+    selectedLanguage,
+    isLanguageExpanded,
+    updateParams,
+  ]);
 
-  // Wrapper pour setSelectedCategory qui gère aussi l'expansion des sections
+  // Wrapper pour setSelectedCategories qui gère aussi l'expansion des sections
   const handleCategorySelection = useCallback((categoryId) => {
-    // On réinitialise toujours la langue sélectionnée
-    setSelectedLanguage(null);
-
-    setSelectedCategory((prev) => {
-      if (prev === categoryId) {
-        // Si on désélectionne, on replie toutes les sections
-        setExpandedSections(new Set());
-        return null;
+    setSelectedCategories((prev) => {
+      const newCategories = new Set(prev);
+      if (newCategories.has(categoryId)) {
+        newCategories.delete(categoryId);
+        // Si on désélectionne, on replie la section
+        setExpandedSections((prev) => {
+          const newExpanded = new Set(prev);
+          newExpanded.delete(categoryId);
+          return newExpanded;
+        });
+      } else {
+        newCategories.add(categoryId);
+        // Si on sélectionne, on déploie la section
+        setExpandedSections((prev) => {
+          const newExpanded = new Set(prev);
+          newExpanded.add(categoryId);
+          return newExpanded;
+        });
       }
-      // Si on sélectionne une nouvelle catégorie, on la déploie
-      setExpandedSections(new Set([categoryId]));
-      return categoryId;
+      return newCategories;
     });
+
+    // On réinitialise la langue sélectionnée seulement si on désélectionne "language"
+    if (categoryId === "language") {
+      setSelectedLanguage(null);
+    }
   }, []);
 
   // Wrapper pour la sélection de langue
@@ -182,7 +168,7 @@ export const LeaderboardProvider = ({ children }) => {
     [searchQuery, arenaOnly]
   );
 
-  // Filter leaderboards based on all criteria including category and language selection
+  // Filter leaderboards based on all criteria including categories and language selection
   const filterLeaderboards = useCallback(
     (boards) => {
       if (!boards) return [];
@@ -199,68 +185,71 @@ export const LeaderboardProvider = ({ children }) => {
         );
       }
 
-      // Filter by selected category if any
-      if (selectedCategory) {
+      // Filter by selected categories if any
+      if (selectedCategories.size > 0) {
         filtered = filtered.filter((board) => {
           const { tags = [] } = board;
-          switch (selectedCategory) {
-            case "agentic":
-              return tags.includes("modality:agent");
-            case "text":
-              return tags.includes("modality:text");
-            case "image":
-              return tags.includes("modality:image");
-            case "video":
-              return tags.includes("modality:video");
-            case "code":
-              return tags.includes("eval:code");
-            case "math":
-              return tags.includes("eval:math");
-            case "reasoning":
-              return tags.includes("eval:reasoning");
-            case "hallucination":
-              return tags.includes("eval:hallucination");
-            case "rag":
-              return tags.includes("eval:rag");
-            case "language":
-              return tags.some((tag) => tag.startsWith("language:"));
-            case "vision":
-              return tags.some(
-                (tag) => tag === "modality:video" || tag === "modality:image"
-              );
-            case "threeD":
-              return tags.includes("modality:3d");
-            case "audio":
-              return tags.includes("modality:audio");
-            case "financial":
-              return tags.includes("domain:financial");
-            case "medical":
-              return tags.includes("domain:medical");
-            case "legal":
-              return tags.includes("domain:legal");
-            case "biology":
-              return tags.includes("domain:biology");
-            case "commercial":
-              return tags.includes("domain:commercial");
-            case "translation":
-              return tags.includes("domain:translation");
-            case "chemistry":
-              return tags.includes("domain:chemistry");
-            case "safety":
-              return tags.includes("eval:safety");
-            case "performance":
-              return tags.includes("eval:performance");
-            case "uncategorized":
-              return isUncategorized(board);
-            default:
-              return true;
-          }
+          // Un leaderboard est inclus s'il correspond à TOUTES les catégories sélectionnées
+          return Array.from(selectedCategories).every((category) => {
+            switch (category) {
+              case "agentic":
+                return tags.includes("modality:agent");
+              case "text":
+                return tags.includes("modality:text");
+              case "image":
+                return tags.includes("modality:image");
+              case "video":
+                return tags.includes("modality:video");
+              case "code":
+                return tags.includes("eval:code");
+              case "math":
+                return tags.includes("eval:math");
+              case "reasoning":
+                return tags.includes("eval:reasoning");
+              case "hallucination":
+                return tags.includes("eval:hallucination");
+              case "rag":
+                return tags.includes("eval:rag");
+              case "language":
+                return tags.some((tag) => tag.startsWith("language:"));
+              case "vision":
+                return tags.some(
+                  (tag) => tag === "modality:video" || tag === "modality:image"
+                );
+              case "threeD":
+                return tags.includes("modality:3d");
+              case "audio":
+                return tags.includes("modality:audio");
+              case "financial":
+                return tags.includes("domain:financial");
+              case "medical":
+                return tags.includes("domain:medical");
+              case "legal":
+                return tags.includes("domain:legal");
+              case "biology":
+                return tags.includes("domain:biology");
+              case "commercial":
+                return tags.includes("domain:commercial");
+              case "translation":
+                return tags.includes("domain:translation");
+              case "chemistry":
+                return tags.includes("domain:chemistry");
+              case "safety":
+                return tags.includes("eval:safety");
+              case "performance":
+                return tags.includes("eval:performance");
+              case "uncategorized":
+                return isUncategorized(board);
+              default:
+                return false;
+            }
+          });
         });
       }
 
       return filtered;
     },
-    [filterLeaderboardsForCount, selectedCategory, selectedLanguage]
+    [searchQuery, arenaOnly, selectedCategories, selectedLanguage]
   );
 
   // Fonction pour obtenir les leaderboards bruts d'une section
@@ -584,8 +573,8 @@ export const LeaderboardProvider = ({ children }) => {
 
   // Get filtered count
   const filteredCount = useMemo(() => {
-    return filterLeaderboardsForCount(leaderboards).length;
-  }, [filterLeaderboardsForCount, leaderboards]);
+    return filterLeaderboards(leaderboards).length;
+  }, [filterLeaderboards, leaderboards]);
 
   // Function to get highlighted parts of text
   const getHighlightedText = useCallback((text, searchTerm) => {
@@ -619,9 +608,27 @@ export const LeaderboardProvider = ({ children }) => {
     };
   }, []);
 
+  // Wrapper pour setLeaderboards qui normalise les tags
+  const setNormalizedLeaderboards = useCallback((boards) => {
+    const normalizedBoards = boards.map((board) => ({
+      ...board,
+      tags: normalizeTags(board.tags),
+    }));
+    setLeaderboards(normalizedBoards);
+  }, []);
+
+  const resetState = useCallback(() => {
+    setSearchQuery("");
+    setArenaOnly(false);
+    setSelectedCategories(new Set());
+    setSelectedLanguage(null);
+    setExpandedSections(new Set());
+    setIsLanguageExpanded(false);
+  }, []);
+
   const value = {
     leaderboards,
-    setLeaderboards,
+    setLeaderboards: setNormalizedLeaderboards,
     searchQuery,
     setSearchQuery,
     arenaOnly,
@@ -633,14 +640,17 @@ export const LeaderboardProvider = ({ children }) => {
     sections,
     allSections,
     getHighlightedText,
-    selectedCategory,
-    setSelectedCategory: handleCategorySelection,
+    selectedCategories,
+    setSelectedCategories: handleCategorySelection,
     selectedLanguage,
     setSelectedLanguage: handleLanguageSelection,
     expandedSections,
     setExpandedSections,
     getLanguageStats,
     getSectionLeaderboards,
+    resetState,
+    isLanguageExpanded,
+    setIsLanguageExpanded,
   };
 
   return (

client/src/hooks/useUrlState.js

@@ -0,0 +1,75 @@
+import { useSearchParams, useLocation } from "react-router-dom";
+import { useCallback, useEffect } from "react";
+
+/**
+ * Hook personnalisé pour gérer l'état de l'URL
+ * @returns {Object} Méthodes et données pour gérer l'état de l'URL
+ */
+export const useUrlState = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+
+  // Convertit les searchParams en objet
+  const getParams = useCallback(() => {
+    const params = {};
+    for (const [key, value] of searchParams.entries()) {
+      if (key === "categories") {
+        params[key] = value.split(",").filter(Boolean);
+      } else if (key === "arena") {
+        params[key] = value === "true";
+      } else {
+        params[key] = value;
+      }
+    }
+    return params;
+  }, [searchParams]);
+
+  // Met à jour les paramètres d'URL
+  const updateParams = useCallback(
+    (newParams) => {
+      const updatedParams = new URLSearchParams(searchParams);
+
+      Object.entries(newParams).forEach(([key, value]) => {
+        if (value && (Array.isArray(value) ? value.length > 0 : true)) {
+          if (Array.isArray(value)) {
+            updatedParams.set(key, value.join(","));
+          } else {
+            updatedParams.set(key, value.toString());
+          }
+        } else {
+          updatedParams.delete(key);
+        }
+      });
+
+      setSearchParams(updatedParams);
+    },
+    [searchParams, setSearchParams]
+  );
+
+  // Réinitialise tous les paramètres d'URL
+  const resetParams = useCallback(() => {
+    setSearchParams(new URLSearchParams());
+  }, [setSearchParams]);
+
+  // Gestion de l'intégration avec Hugging Face
+  useEffect(() => {
+    const isHFSpace = window.location !== window.parent.location;
+    if (!isHFSpace) return;
+
+    window.parent.postMessage(
+      {
+        queryString: location.search,
+        hash: location.hash,
+      },
+      "https://huggingface.co"
+    );
+  }, [location]);
+
+  return {
+    params: getParams(),
+    updateParams,
+    resetParams,
+    searchParams,
+    location,
+  };
+};

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -20,7 +20,7 @@ const LeaderboardPageContent = () => {
     allSections,
     searchQuery,
     arenaOnly,
-    selectedCategory,
+    selectedCategories,
   } = useLeaderboard();
 
   useEffect(() => {
@@ -101,7 +101,7 @@ const LeaderboardPageContent = () => {
           <LeaderboardFilters allSections={allSections} />
 
           {/* Message global "No results" seulement si on n'a pas de catégorie sélectionnée */}
-          {!hasLeaderboards && isFiltering && !selectedCategory && (
+          {!hasLeaderboards && isFiltering && selectedCategories.size === 0 && (
             <Box
               sx={{
                 display: "flex",
@@ -146,23 +146,65 @@ const LeaderboardPageContent = () => {
           )}
 
           {/* On affiche toujours la section sélectionnée, sinon on affiche les sections avec des résultats */}
-          {selectedCategory
-            ? sections
-                .filter(({ id }) => id === selectedCategory)
-                .map(({ id, title, data }) => {
-                  const filteredLeaderboards = filterLeaderboards(data);
+          {selectedCategories.size > 0
+            ? // Si des catégories sont sélectionnées
+              selectedCategories.size === 1
+              ? // Si une seule catégorie est sélectionnée, on affiche sa section
+                sections
+                  .filter(({ id }) => selectedCategories.has(id))
+                  .map(({ id, title, data }) => {
+                    const filteredLeaderboards = filterLeaderboards(data);
+                    return (
+                      <Box key={id} id={id}>
+                        <LeaderboardSection
+                          id={id}
+                          title={title}
+                          leaderboards={data}
+                          filteredLeaderboards={filteredLeaderboards}
+                        />
+                      </Box>
+                    );
+                  })
+              : // Si plusieurs catégories sont sélectionnées, on les agrège
+                (() => {
+                  // Agréger les données de toutes les sections sélectionnées
+                  const selectedSections = sections.filter(({ id }) =>
+                    selectedCategories.has(id)
+                  );
+
+                  // Créer un titre combiné
+                  const combinedTitle = selectedSections
+                    .map(({ title }) => title)
+                    .join(" + ");
+
+                  // Agréger les leaderboards
+                  const combinedData = selectedSections.reduce(
+                    (acc, { data }) => [...acc, ...data],
+                    []
+                  );
+
+                  // Filtrer les doublons par ID
+                  const uniqueData = Array.from(
+                    new Map(
+                      combinedData.map((item) => [item.id, item])
+                    ).values()
+                  );
+
+                  const filteredLeaderboards = filterLeaderboards(uniqueData);
+
                   return (
-                    <Box key={id} id={id}>
+                    <Box key="combined">
                       <LeaderboardSection
-                        id={id}
-                        title={title}
-                        leaderboards={data}
+                        id="combined"
+                        title={combinedTitle}
+                        leaderboards={uniqueData}
                         filteredLeaderboards={filteredLeaderboards}
                       />
                     </Box>
                   );
-                })
-            : (hasLeaderboards || !isFiltering) &&
+                })()
+            : // Si aucune catégorie n'est sélectionnée, on affiche toutes les sections avec des résultats
+              (hasLeaderboards || !isFiltering) &&
               sections.map(({ id, title, data }) => {
                 const filteredLeaderboards = filterLeaderboards(data);
                 if (filteredLeaderboards.length === 0) return null;

client/src/utils/tagFilters.js

@@ -0,0 +1,23 @@
+/**
+ * Map of tags that should be normalized
+ * Key: original tag
+ * Value: normalized tag
+ */
+const TAG_NORMALIZATIONS = {
+  "language:日本語": "language:japanese",
+};
+
+/**
+ * Normalize tags according to predefined rules
+ * @param {string[]} tags - Array of tags to normalize
+ * @returns {string[]} - Array of normalized tags without duplicates
+ */
+export const normalizeTags = (tags) => {
+  if (!tags || !Array.isArray(tags)) return [];
+
+  // First, normalize all tags
+  const normalizedTags = tags.map((tag) => TAG_NORMALIZATIONS[tag] || tag);
+
+  // Then remove duplicates using Set
+  return [...new Set(normalizedTags)];
+};