simplify filters

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -2,35 +2,13 @@ import React, { useState, useMemo } from "react";
 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 = [
-  "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",
-];
+import {
+  CATEGORIZATION_TAGS,
+  filterLeaderboards as filterLeaderboardsUtil,
+  applyCategoryFilters,
+} from "../../utils/filterUtils";
 
 // Helper function to get the category group of a section
 const getSectionGroup = (id) => {
@@ -116,175 +94,20 @@ const LeaderboardFilters = ({ allSections = [] }) => {
     );
 
     // Apply current filters except the category being counted
-    let baseFiltered = allLeaderboards;
-
-    // Apply arena filter if active
-    if (arenaOnly) {
-      baseFiltered = baseFiltered.filter((board) =>
-        board.tags?.includes("judge:humans")
-      );
-    }
-
-    // Apply search filter if active
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      const tagMatch = query.match(/^(\w+):(\w+)$/);
-
-      if (tagMatch) {
-        const [_, category, value] = tagMatch;
-        const searchTag = `${category}:${value}`.toLowerCase();
-        baseFiltered = baseFiltered.filter((board) => {
-          const allTags = [...(board.tags || []), ...(board.editor_tags || [])];
-          return allTags.some((tag) => tag.toLowerCase() === searchTag);
-        });
-      } else {
-        baseFiltered = baseFiltered.filter((board) =>
-          board.card_data?.title?.toLowerCase().includes(query)
-        );
-      }
-    }
-
-    // Apply language filters if active
-    if (selectedLanguage.size > 0) {
-      baseFiltered = baseFiltered.filter((board) =>
-        Array.from(selectedLanguage).some((lang) =>
-          board.tags?.some(
-            (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
-          )
-        )
-      );
-    }
-
-    // Apply category filters if active, but exclude the category being counted
-    const applyCategoryFilters = (board, excludedCategory) => {
-      if (selectedCategories.size === 0) return true;
-
-      const tags = board.tags || [];
-      return Array.from(selectedCategories)
-        .filter((category) => category !== excludedCategory)
-        .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;
-          }
-        });
-    };
-
-    // Now calculate counts for each section based on the filtered boards
     allSections.forEach(({ id, title }) => {
-      let sectionBoards = baseFiltered
-        .filter((board) => applyCategoryFilters(board, id))
-        .filter((board) => {
-          const tags = board.tags || [];
-          switch (id) {
-            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;
-          }
-        });
+      const baseFiltered = filterLeaderboardsUtil({
+        boards: allLeaderboards,
+        searchQuery,
+        arenaOnly,
+        selectedLanguage,
+        selectedCategories,
+        excludedCategory: id,
+      });
+
+      let sectionBoards = baseFiltered.filter((board) => {
+        const tags = board.tags || [];
+        return applyCategoryFilters(board, new Set([id]));
+      });
 
       // Only count approved leaderboards
       sectionBoards = sectionBoards.filter(
@@ -327,65 +150,7 @@ const LeaderboardFilters = ({ allSections = [] }) => {
     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;
-          }
-        });
+        return applyCategoryFilters(board, selectedCategories);
       });
     }
 
@@ -396,15 +161,11 @@ const LeaderboardFilters = ({ allSections = [] }) => {
     setTotalArenaCount(arenaCount);
   }, [selectedCategories, allSections]);
 
-  // Calculer le nombre total en fonction des catégories sélectionnées
+  // Calculer le nombre total de leaderboards approuvés (sans aucun filtre)
   const totalCount = useMemo(() => {
     if (!allSections) return 0;
 
-    if (arenaOnly && selectedCategories.size === 0) {
-      return totalArenaCount;
-    }
-
-    // Récupérer tous les leaderboards uniques de toutes les sections
+    // Récupérer tous les leaderboards uniques
     const allLeaderboards = Array.from(
       new Set(
         allSections.reduce((acc, section) => {
@@ -413,94 +174,17 @@ const LeaderboardFilters = ({ allSections = [] }) => {
       )
     );
 
-    // 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;
-          }
-        });
-      });
-    }
-
-    // Appliquer le filtre Arena Only si nécessaire
-    if (arenaOnly) {
-      filteredBoards = filteredBoards.filter((board) =>
-        board.tags?.includes("judge:humans")
-      );
-    }
-
-    return filteredBoards.filter(
+    // Ne compter que les leaderboards approuvés
+    return allLeaderboards.filter(
       (board) => board.approval_status === "approved"
     ).length;
-  }, [selectedCategories, allSections, arenaOnly, totalArenaCount]);
+  }, [allSections]);
 
-  // Calculer le nombre filtré en prenant en compte tous les filtres
+  // Calculer le nombre de leaderboards après application de tous les filtres
   const currentFilteredCount = useMemo(() => {
     if (!allSections) return 0;
 
-    if (arenaOnly && !searchQuery && selectedCategories.size === 0) {
-      return totalArenaCount;
-    }
-
-    // Récupérer tous les leaderboards uniques de toutes les sections
+    // Récupérer tous les leaderboards uniques
     const allLeaderboards = Array.from(
       new Set(
         allSections.reduce((acc, section) => {
@@ -509,19 +193,12 @@ const LeaderboardFilters = ({ allSections = [] }) => {
       )
     );
 
-    // Appliquer les filtres sur l'ensemble des leaderboards
+    // Appliquer tous les filtres
     const filteredBoards = filterLeaderboards(allLeaderboards);
     return filteredBoards.filter(
       (board) => board.approval_status === "approved"
     ).length;
-  }, [
-    selectedCategories,
-    allSections,
-    filterLeaderboards,
-    arenaOnly,
-    searchQuery,
-    totalArenaCount,
-  ]);
+  }, [allSections, filterLeaderboards]);
 
   const isMobile = useMediaQuery((theme) => theme.breakpoints.down("md"));
 
@@ -584,6 +261,8 @@ const LeaderboardFilters = ({ allSections = [] }) => {
         totalCount={totalCount}
         totalArenaCount={totalArenaCount}
         isMobile={isMobile}
+        selectedCategories={selectedCategories}
+        selectedLanguage={selectedLanguage}
       />
     </Stack>
   );

client/src/components/LeaderboardFilters/SearchBar.jsx

@@ -22,14 +22,29 @@ const SearchBar = ({
   totalCount,
   totalArenaCount,
   isMobile,
+  selectedCategories,
+  selectedLanguage,
 }) => {
   const [inputValue, setInputValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(inputValue, 200);
 
+  // Détecter si des filtres sont actifs
+  const hasActiveFilters =
+    debouncedSearch ||
+    arenaOnly ||
+    selectedCategories?.size > 0 ||
+    selectedLanguage?.size > 0;
+
   // Update the search query after debounce
   React.useEffect(() => {
+    // Si l'input est vide, on met à jour immédiatement
+    if (!inputValue.trim()) {
+      setSearchQuery("");
+      return;
+    }
+    // Sinon on attend le debounce
     setSearchQuery(debouncedSearch);
-  }, [debouncedSearch, setSearchQuery]);
+  }, [debouncedSearch, setSearchQuery, inputValue]);
 
   // Update input value when searchQuery changes externally
   React.useEffect(() => {
@@ -73,39 +88,42 @@ const SearchBar = ({
                   <Typography
                     variant="body2"
                     sx={{
-                      color: debouncedSearch
+                      color: hasActiveFilters
                         ? "primary.main"
                         : "text.secondary",
                       fontWeight: 500,
                     }}
                   >
-                    {currentFilteredCount}
+                    {hasActiveFilters ? currentFilteredCount : totalCount}
                   </Typography>
-                  <Box
-                    sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      color: arenaOnly ? "secondary.main" : "text.secondary",
-                    }}
-                  >
-                    <Typography
-                      variant="body2"
-                      sx={{
-                        fontWeight: 500,
-                        mx: 0.5,
-                      }}
-                    >
-                      /
-                    </Typography>
-                    <Typography
-                      variant="body2"
+                  {hasActiveFilters && (
+                    <Box
+                      component="span"
                       sx={{
-                        fontWeight: 500,
+                        display: "flex",
+                        alignItems: "center",
+                        color: "text.secondary",
                       }}
                     >
-                      {arenaOnly ? totalArenaCount : totalCount}
-                    </Typography>
-                  </Box>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          fontWeight: 500,
+                          mx: 0.5,
+                        }}
+                      >
+                        /
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          fontWeight: 500,
+                        }}
+                      >
+                        {totalCount}
+                      </Typography>
+                    </Box>
+                  )}
                   <Typography
                     variant="body2"
                     sx={{
@@ -164,6 +182,8 @@ SearchBar.propTypes = {
   totalCount: PropTypes.number.isRequired,
   totalArenaCount: PropTypes.number.isRequired,
   isMobile: PropTypes.bool.isRequired,
+  selectedCategories: PropTypes.instanceOf(Set),
+  selectedLanguage: PropTypes.instanceOf(Set),
 };
 
 export default SearchBar;

client/src/components/LeaderboardSection/components/SectionHeader.jsx

@@ -1,8 +1,40 @@
 import React from "react";
-import { Typography, Box, Button } from "@mui/material";
+import { Typography, Box, Button, Chip } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
+// Composant pour les chips
+const StyledChip = ({ label, sx = {} }) => (
+  <Chip
+    label={label}
+    size="small"
+    sx={{
+      height: "24px",
+      backgroundColor: (theme) =>
+        alpha(
+          theme.palette.text.primary,
+          theme.palette.mode === "dark" ? 0.1 : 0.05
+        ),
+      color: "text.secondary",
+      fontSize: "0.75rem",
+      fontWeight: 500,
+      mx: 1,
+      "& .MuiChip-label": {
+        px: 1,
+        lineHeight: 1,
+        paddingTop: "1px", // Ajustement pour le centrage vertical
+      },
+      ...sx,
+    }}
+  />
+);
+
+// Composant pour le chip AND
+const AndChip = () => <StyledChip label="AND" />;
+
+// Composant pour le chip matching
+const MatchingChip = () => <StyledChip label="MATCHING" />;
+
 const SectionHeader = ({
   title,
   count,
@@ -11,26 +43,70 @@ const SectionHeader = ({
   showExpandButton,
   isExpandButtonEnabled,
 }) => {
+  // Séparer le titre en parties si c'est un titre combiné
+  const titleParts = title.split(" matching ");
+  const categories = titleParts[0].split(" + ");
+  const hasSearchQuery = titleParts.length > 1;
+  const searchQuery = hasSearchQuery
+    ? titleParts[1].replace(/['"]/g, "")
+    : null;
+
   return (
     <Box
       sx={{
         display: "flex",
-        alignItems: "center",
+        alignItems: "flex-start",
         justifyContent: "space-between",
         mb: 4,
+        minHeight: { xs: "2.5rem", md: "3rem" },
       }}
     >
       <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-        <Typography
-          variant="h4"
+        <Box
           sx={{
-            color: "text.primary",
-            fontWeight: 600,
-            fontSize: { xs: "1.5rem", md: "2rem" },
+            display: "flex",
+            alignItems: "center",
+            flexWrap: "wrap",
           }}
         >
-          {title}
-        </Typography>
+          <Typography
+            variant="h4"
+            component="div"
+            sx={{
+              color: "text.primary",
+              fontWeight: 600,
+              fontSize: { xs: "1.5rem", md: "2rem" },
+              display: "flex",
+              alignItems: "center",
+              flexWrap: "wrap",
+              lineHeight: 1.2,
+              minHeight: { xs: "2rem", md: "2.5rem" },
+            }}
+          >
+            {categories.map((category, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && <AndChip />}
+                {category}
+              </React.Fragment>
+            ))}
+            {hasSearchQuery && (
+              <>
+                <MatchingChip />
+                <Typography
+                  component="span"
+                  sx={{
+                    color: "text.primary",
+                    fontWeight: 600,
+                    fontSize: "inherit",
+                    lineHeight: "inherit",
+                  }}
+                >
+                  "{searchQuery}"
+                </Typography>
+              </>
+            )}
+          </Typography>
+        </Box>
         <Box
           sx={(theme) => ({
             width: "4px",
@@ -40,6 +116,7 @@ const SectionHeader = ({
               theme.palette.text.primary,
               theme.palette.mode === "dark" ? 0.2 : 0.15
             ),
+            mx: 1,
           })}
         />
         <Typography
@@ -49,6 +126,7 @@ const SectionHeader = ({
             fontWeight: 400,
             fontSize: { xs: "1.25rem", md: "1.5rem" },
             opacity: 0.6,
+            lineHeight: 1.2,
           }}
         >
           {count}
@@ -64,6 +142,7 @@ const SectionHeader = ({
             fontSize: "0.875rem",
             textTransform: "none",
             opacity: isExpandButtonEnabled ? 1 : 0.5,
+            mt: { xs: "0.5rem", md: "0.75rem" },
             "&:hover": {
               backgroundColor: (theme) =>
                 isExpandButtonEnabled

client/src/components/LeaderboardSection/index.jsx

@@ -41,7 +41,8 @@ const LeaderboardSection = ({
   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)
+    isExpanded || // Section dépliée (quelle que soit la sélection)
+    id === "search-results"; // Toujours afficher tous les résultats pour la recherche textuelle
 
   // Si on doit tout montrer, on ne divise pas la liste
   const displayedLeaderboards = shouldShowAll
@@ -57,8 +58,9 @@ const LeaderboardSection = ({
     ? 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;
+  // On affiche le bouton expand seulement quand on n'a pas de sélection et que ce n'est pas une recherche textuelle
+  const showExpandButton =
+    selectedCategories.size === 0 && id !== "search-results";
 
   // Le bouton est actif seulement s'il y a plus de 4 leaderboards
   const isExpandButtonEnabled = approvedLeaderboards.length > ITEMS_PER_PAGE;

client/src/context/LeaderboardContext.jsx

@@ -8,50 +8,17 @@ import React, {
 } from "react";
 import { normalizeTags } from "../utils/tagFilters";
 import { useUrlState } from "../hooks/useUrlState";
+import {
+  CATEGORIZATION_TAGS,
+  isUncategorized,
+  filterLeaderboards as filterLeaderboardsUtil,
+  generateSections,
+} from "../utils/filterUtils";
 
 const LeaderboardContext = createContext();
 
-// 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 pour déterminer si un leaderboard est non catégorisé
-const isUncategorized = (board) => {
-  const tags = board.tags || [];
-  console.log("Checking uncategorized for board:", {
-    id: board.id,
-    tags,
-    approval_status: board.approval_status,
-    isUncategorized: !tags.some(
-      (tag) => CATEGORIZATION_TAGS.includes(tag) || tag.startsWith("language:")
-    ),
-  });
-  return !tags.some(
-    (tag) => CATEGORIZATION_TAGS.includes(tag) || tag.startsWith("language:")
-  );
-};
+const isUncategorizedBoard = isUncategorized;
 
 export const LeaderboardProvider = ({ children }) => {
   const { params, updateParams } = useUrlState();
@@ -139,42 +106,11 @@ export const LeaderboardProvider = ({ children }) => {
   // Filter leaderboards based on search query and arena toggle, ignoring category selection
   const filterLeaderboardsForCount = useCallback(
     (boards) => {
-      if (!boards) return [];
-
-      let filtered = [...boards];
-
-      // Filter by search query
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        const tagMatch = query.match(/^(\w+):(\w+)$/);
-
-        if (tagMatch) {
-          // Search by tag (ex: language:french)
-          const [_, category, value] = tagMatch;
-          const searchTag = `${category}:${value}`.toLowerCase();
-          filtered = filtered.filter((board) => {
-            const allTags = [
-              ...(board.tags || []),
-              ...(board.editor_tags || []),
-            ];
-            return allTags.some((tag) => tag.toLowerCase() === searchTag);
-          });
-        } else {
-          // Regular search in title
-          filtered = filtered.filter((board) =>
-            board.card_data?.title?.toLowerCase().includes(query)
-          );
-        }
-      }
-
-      // Filter arena only
-      if (arenaOnly) {
-        filtered = filtered.filter((board) =>
-          board.tags?.includes("judge:humans")
-        );
-      }
-
-      return filtered;
+      return filterLeaderboardsUtil({
+        boards,
+        searchQuery,
+        arenaOnly,
+      });
     },
     [searchQuery, arenaOnly]
   );
@@ -182,84 +118,13 @@ export const LeaderboardProvider = ({ children }) => {
   // Filter leaderboards based on all criteria including categories and language selection
   const filterLeaderboards = useCallback(
     (boards) => {
-      if (!boards) return [];
-
-      let filtered = filterLeaderboardsForCount(boards);
-
-      // Filter by selected languages if any
-      if (selectedLanguage.size > 0) {
-        filtered = filtered.filter((board) =>
-          Array.from(selectedLanguage).some((lang) =>
-            board.tags?.some(
-              (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
-            )
-          )
-        );
-      }
-
-      // Filter by selected categories if any
-      if (selectedCategories.size > 0) {
-        filtered = filtered.filter((board) => {
-          const { tags = [] } = board;
-          // 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;
+      return filterLeaderboardsUtil({
+        boards,
+        searchQuery,
+        arenaOnly,
+        selectedCategories,
+        selectedLanguage,
+      });
     },
     [searchQuery, arenaOnly, selectedCategories, selectedLanguage]
   );
@@ -270,49 +135,9 @@ export const LeaderboardProvider = ({ children }) => {
     return [...boards];
   }, []);
 
-  // Fonction pour compter les leaderboards par langue
-  const getLanguageStats = useCallback((boards) => {
-    const stats = new Map();
-
-    boards.forEach((board) => {
-      board.tags?.forEach((tag) => {
-        if (tag.startsWith("language:")) {
-          const language = tag.split(":")[1];
-          const capitalizedLang =
-            language.charAt(0).toUpperCase() + language.slice(1);
-          const count = stats.get(capitalizedLang) || 0;
-          stats.set(capitalizedLang, count + 1);
-        }
-      });
-    });
-
-    return stats;
-  }, []);
-
-  // Calculate total number of unique leaderboards (excluding duplicates)
-  const totalLeaderboards = useMemo(() => {
-    // On ne compte que les leaderboards approuvés
-    const uniqueIds = new Set(
-      leaderboards
-        .filter((board) => board.approval_status === "approved")
-        .map((board) => board.id)
-    );
-    return uniqueIds.size;
-  }, [leaderboards]);
-
   // Filter functions for categories
   const filterByTag = useCallback((tag, boards) => {
     const searchTag = tag.toLowerCase();
-    console.log("Filtering by tag:", {
-      searchTag,
-      boards: boards?.map((board) => ({
-        id: board.id,
-        tags: board.tags,
-        matches: {
-          tags: board.tags?.some((t) => t.toLowerCase() === searchTag),
-        },
-      })),
-    });
     return (
       boards?.filter((board) =>
         board.tags?.some((t) => t.toLowerCase() === searchTag)
@@ -331,257 +156,23 @@ export const LeaderboardProvider = ({ children }) => {
   // Define sections with raw data
   const allSections = useMemo(() => {
     if (!leaderboards) return [];
-
-    // Garder une trace des leaderboards déjà catégorisés
-    const categorizedIds = new Set();
-
-    const sections = [
-      // Science
-      {
-        id: "code",
-        title: "Code",
-        data: filterByTag("eval:code", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "math",
-        title: "Math",
-        data: filterByTag("eval:math", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "biology",
-        title: "Biology",
-        data: filterByTag("domain:biology", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "chemistry",
-        title: "Chemistry",
-        data: filterByTag("domain:chemistry", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "physics",
-        title: "Physics",
-        data: filterByTag("domain:physics", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      // Modalities
-      {
-        id: "image",
-        title: "Image",
-        data: filterByTag("modality:image", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "video",
-        title: "Video",
-        data: filterByTag("modality:video", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "audio",
-        title: "Audio",
-        data: filterByTag("modality:audio", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "text",
-        title: "Text",
-        data: filterByTag("modality:text", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "threeD",
-        title: "3D",
-        data: filterByTag("modality:3d", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "embeddings",
-        title: "Embeddings",
-        data: filterByTag("modality:artefacts", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      // LLM Capabilities
-      {
-        id: "rag",
-        title: "RAG",
-        data: filterByTag("eval:rag", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "reasoning",
-        title: "Reasoning",
-        data: filterByTag("eval:reasoning", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "agentic",
-        title: "Agentic",
-        data: filterByTag("modality:agent", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "safety",
-        title: "Safety",
-        data: filterByTag("eval:safety", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "performance",
-        title: "Performance",
-        data: filterByTag("eval:performance", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "hallucination",
-        title: "Hallucination",
-        data: filterByTag("eval:hallucination", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      // Domain Specific
-      {
-        id: "medical",
-        title: "Medical",
-        data: filterByTag("domain:medical", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "financial",
-        title: "Financial",
-        data: filterByTag("domain:financial", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "legal",
-        title: "Legal",
-        data: filterByTag("domain:legal", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "commercial",
-        title: "Commercial",
-        data: filterByTag("domain:commercial", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      // Language Related
-      {
-        id: "language",
-        title: "Language Specific",
-        data: filterByLanguage(leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      {
-        id: "translation",
-        title: "Translation",
-        data: filterByTag("domain:translation", leaderboards).map((board) => {
-          categorizedIds.add(board.id);
-          return board;
-        }),
-      },
-      // Misc
-      {
-        id: "uncategorized",
-        title: "Uncategorized",
-        data: leaderboards
-          .filter(isUncategorized)
-          .filter((board) => board.approval_status === "approved"),
-      },
-    ];
-
-    return sections;
+    return generateSections(leaderboards, filterByTag, filterByLanguage);
   }, [leaderboards, filterByTag, filterByLanguage]);
 
   // Get sections with data
   const sections = useMemo(() => {
-    console.log("Starting sections filtering...");
-    console.log(
-      "All sections before filtering:",
-      allSections.map((s) => ({
-        title: s.title,
-        count: s.data.length,
-        ids: s.data.map((b) => b.id),
-      }))
-    );
-
-    // On garde une trace des titres déjà vus
-    const seenTitles = new Set();
-    const filteredSections = allSections.filter((section) => {
-      console.log(`\nAnalyzing section ${section.title}:`, {
-        data: section.data,
-        count: section.data.length,
-        uniqueIds: new Set(section.data.map((b) => b.id)).size,
-        boards: section.data.map((board) => ({
-          id: board.id,
-          tags: board.tags,
-        })),
-      });
-
-      // On garde la section si elle a des données et qu'on ne l'a pas déjà vue
-      if (section.data.length > 0 && !seenTitles.has(section.title)) {
-        seenTitles.add(section.title);
-        return true;
-      }
-      return false;
-    });
+    return allSections.filter((section) => section.data.length > 0);
+  }, [allSections]);
 
-    console.log(
-      "\nFinal sections after filtering:",
-      filteredSections.map((s) => ({
-        title: s.title,
-        count: s.data.length,
-        uniqueIds: new Set(s.data.map((b) => b.id)).size,
-      }))
+  // Calculate total number of unique leaderboards (excluding duplicates)
+  const totalLeaderboards = useMemo(() => {
+    const uniqueIds = new Set(
+      leaderboards
+        .filter((board) => board.approval_status === "approved")
+        .map((board) => board.id)
     );
-
-    return filteredSections;
-  }, [allSections]);
+    return uniqueIds.size;
+  }, [leaderboards]);
 
   // Get filtered count
   const filteredCount = useMemo(() => {
@@ -658,8 +249,6 @@ export const LeaderboardProvider = ({ children }) => {
     setSelectedLanguage: handleLanguageSelection,
     expandedSections,
     setExpandedSections,
-    getLanguageStats,
-    getSectionLeaderboards,
     resetState,
     isLanguageExpanded,
     setIsLanguageExpanded,

client/src/hooks/useDebounce.js

@@ -4,6 +4,13 @@ export const useDebounce = (value, delay = 200) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(() => {
+    // Si la valeur est vide, on met à jour immédiatement
+    if (!value || !value.trim()) {
+      setDebouncedValue("");
+      return;
+    }
+
+    // Sinon on attend le délai
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Box, CircularProgress, Typography } from "@mui/material";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
 import Logo from "../../components/Logo/Logo";
@@ -23,6 +23,28 @@ const LeaderboardPageContent = () => {
     selectedCategories,
   } = useLeaderboard();
 
+  // Vérifier si on a uniquement une recherche textuelle active
+  const isOnlyTextSearch =
+    searchQuery && !arenaOnly && selectedCategories.size === 0;
+
+  // Obtenir tous les leaderboards uniques de toutes les sections
+  const allUniqueLeaderboards = useMemo(() => {
+    if (!allSections) return [];
+    return Array.from(
+      new Set(
+        allSections.reduce((acc, section) => {
+          return [...acc, ...(section.data || [])];
+        }, [])
+      )
+    );
+  }, [allSections]);
+
+  // Filtrer tous les leaderboards pour la recherche textuelle
+  const searchResults = useMemo(() => {
+    if (!isOnlyTextSearch) return [];
+    return filterLeaderboards(allUniqueLeaderboards);
+  }, [isOnlyTextSearch, filterLeaderboards, allUniqueLeaderboards]);
+
   useEffect(() => {
     fetch(API_URLS.leaderboards)
       .then((res) => {
@@ -145,80 +167,98 @@ const LeaderboardPageContent = () => {
             </Box>
           )}
 
-          {/* On affiche toujours la section sélectionnée, sinon on affiche les sections avec des résultats */}
-          {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);
-
+          {isOnlyTextSearch ? (
+            // Vue spéciale pour la recherche textuelle
+            <Box key="search-results">
+              <LeaderboardSection
+                id="search-results"
+                title={`All leaderboards matching "${searchQuery}"`}
+                leaderboards={allUniqueLeaderboards}
+                filteredLeaderboards={searchResults}
+              />
+            </Box>
+          ) : 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);
+                  // Ajouter le terme de recherche au titre si présent
+                  const sectionTitle = searchQuery
+                    ? `${title} matching "${searchQuery}"`
+                    : title;
                   return (
-                    <Box key="combined">
+                    <Box key={id} id={id}>
                       <LeaderboardSection
-                        id="combined"
-                        title={combinedTitle}
-                        leaderboards={uniqueData}
+                        id={id}
+                        title={sectionTitle}
+                        leaderboards={data}
                         filteredLeaderboards={filteredLeaderboards}
                       />
                     </Box>
                   );
-                })()
-            : // 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;
+                })
+            ) : (
+              // 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é avec le terme de recherche si présent
+                const combinedTitle = selectedSections
+                  .map(({ title }) => title)
+                  .join(" + ");
+                const finalTitle = searchQuery
+                  ? `${combinedTitle} matching "${searchQuery}"`
+                  : combinedTitle;
+
+                // 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={finalTitle}
+                      leaderboards={uniqueData}
                       filteredLeaderboards={filteredLeaderboards}
                     />
                   </Box>
                 );
-              })}
+              })()
+            )
+          ) : (
+            // 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;
+              return (
+                <Box key={id} id={id}>
+                  <LeaderboardSection
+                    id={id}
+                    title={title}
+                    leaderboards={data}
+                    filteredLeaderboards={filteredLeaderboards}
+                  />
+                </Box>
+              );
+            })
+          )}
         </Box>
       )}
     </Box>

client/src/utils/filterUtils.js

@@ -0,0 +1,219 @@
+// Map of category IDs to their corresponding tag checks
+export const CATEGORY_TAG_MAPPING = {
+  agentic: (tags) => tags.includes("modality:agent"),
+  text: (tags) => tags.includes("modality:text"),
+  image: (tags) => tags.includes("modality:image"),
+  video: (tags) => tags.includes("modality:video"),
+  code: (tags) => tags.includes("eval:code"),
+  math: (tags) => tags.includes("eval:math"),
+  reasoning: (tags) => tags.includes("eval:reasoning"),
+  hallucination: (tags) => tags.includes("eval:hallucination"),
+  rag: (tags) => tags.includes("eval:rag"),
+  embeddings: (tags) => tags.includes("modality:artefacts"),
+  language: (tags) => tags.some((tag) => tag.startsWith("language:")),
+  vision: (tags) =>
+    tags.some((tag) => tag === "modality:video" || tag === "modality:image"),
+  threeD: (tags) => tags.includes("modality:3d"),
+  audio: (tags) => tags.includes("modality:audio"),
+  financial: (tags) => tags.includes("domain:financial"),
+  medical: (tags) => tags.includes("domain:medical"),
+  legal: (tags) => tags.includes("domain:legal"),
+  biology: (tags) => tags.includes("domain:biology"),
+  commercial: (tags) => tags.includes("domain:commercial"),
+  translation: (tags) => tags.includes("domain:translation"),
+  chemistry: (tags) => tags.includes("domain:chemistry"),
+  physics: (tags) => tags.includes("domain:physics"),
+  safety: (tags) => tags.includes("eval:safety"),
+  performance: (tags) => tags.includes("eval:performance"),
+};
+
+// Constantes pour les tags de catégorisation
+export 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",
+];
+
+/**
+ * Vérifie si un leaderboard est non catégorisé
+ */
+export const isUncategorized = (board) => {
+  const tags = board.tags || [];
+  return !tags.some(
+    (tag) => CATEGORIZATION_TAGS.includes(tag) || tag.startsWith("language:")
+  );
+};
+
+/**
+ * Applique les filtres de catégorie à un leaderboard
+ */
+export const applyCategoryFilters = (
+  board,
+  selectedCategories,
+  excludedCategory = null
+) => {
+  if (selectedCategories.size === 0) return true;
+
+  const tags = board.tags || [];
+  return Array.from(selectedCategories)
+    .filter((category) => category !== excludedCategory)
+    .every((category) => {
+      if (category === "uncategorized") {
+        return isUncategorized(board);
+      }
+      const tagCheck = CATEGORY_TAG_MAPPING[category];
+      return tagCheck ? tagCheck(tags) : false;
+    });
+};
+
+/**
+ * Filtre une liste de leaderboards selon les critères donnés
+ */
+export const filterLeaderboards = ({
+  boards,
+  searchQuery = "",
+  arenaOnly = false,
+  selectedCategories = new Set(),
+  selectedLanguage = new Set(),
+  excludedCategory = null,
+}) => {
+  if (!boards) return [];
+
+  let filtered = [...boards];
+
+  // Filter by search query
+  if (searchQuery) {
+    const query = searchQuery.toLowerCase();
+    const tagMatch = query.match(/^(\w+):(\w+)$/);
+
+    if (tagMatch) {
+      const [_, category, value] = tagMatch;
+      const searchTag = `${category}:${value}`.toLowerCase();
+      filtered = filtered.filter((board) => {
+        const allTags = [...(board.tags || []), ...(board.editor_tags || [])];
+        return allTags.some((tag) => tag.toLowerCase() === searchTag);
+      });
+    } else {
+      filtered = filtered.filter((board) =>
+        board.card_data?.title?.toLowerCase().includes(query)
+      );
+    }
+  }
+
+  // Filter arena only
+  if (arenaOnly) {
+    filtered = filtered.filter((board) => board.tags?.includes("judge:humans"));
+  }
+
+  // Filter by selected languages
+  if (selectedLanguage.size > 0) {
+    filtered = filtered.filter((board) =>
+      Array.from(selectedLanguage).every((lang) =>
+        board.tags?.some(
+          (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
+        )
+      )
+    );
+  }
+
+  // Filter by categories
+  if (selectedCategories.size > 0) {
+    filtered = filtered.filter((board) =>
+      applyCategoryFilters(board, selectedCategories, excludedCategory)
+    );
+  }
+
+  return filtered;
+};
+
+// Structure des sections avec leurs groupes
+export const SECTIONS_STRUCTURE = {
+  science: [
+    { id: "code", title: "Code", tag: "eval:code" },
+    { id: "math", title: "Math", tag: "eval:math" },
+    { id: "biology", title: "Biology", tag: "domain:biology" },
+    { id: "chemistry", title: "Chemistry", tag: "domain:chemistry" },
+    { id: "physics", title: "Physics", tag: "domain:physics" },
+  ],
+  modalities: [
+    { id: "image", title: "Image", tag: "modality:image" },
+    { id: "video", title: "Video", tag: "modality:video" },
+    { id: "audio", title: "Audio", tag: "modality:audio" },
+    { id: "text", title: "Text", tag: "modality:text" },
+    { id: "threeD", title: "3D", tag: "modality:3d" },
+    { id: "embeddings", title: "Embeddings", tag: "modality:artefacts" },
+  ],
+  llm_capabilities: [
+    { id: "rag", title: "RAG", tag: "eval:rag" },
+    { id: "reasoning", title: "Reasoning", tag: "eval:reasoning" },
+    { id: "agentic", title: "Agentic", tag: "modality:agent" },
+    { id: "safety", title: "Safety", tag: "eval:safety" },
+    { id: "performance", title: "Performance", tag: "eval:performance" },
+    { id: "hallucination", title: "Hallucination", tag: "eval:hallucination" },
+  ],
+  domain_specific: [
+    { id: "medical", title: "Medical", tag: "domain:medical" },
+    { id: "financial", title: "Financial", tag: "domain:financial" },
+    { id: "legal", title: "Legal", tag: "domain:legal" },
+    { id: "commercial", title: "Commercial", tag: "domain:commercial" },
+  ],
+  language_related: [
+    { id: "language", title: "Language Specific", isLanguageFilter: true },
+    { id: "translation", title: "Translation", tag: "domain:translation" },
+  ],
+};
+
+/**
+ * Génère les sections avec leurs données
+ */
+export const generateSections = (
+  leaderboards,
+  filterByTag,
+  filterByLanguage
+) => {
+  if (!leaderboards) return [];
+
+  const sections = [];
+
+  // Parcourir la structure des sections
+  Object.entries(SECTIONS_STRUCTURE).forEach(([group, groupSections]) => {
+    groupSections.forEach(({ id, title, tag, isLanguageFilter }) => {
+      let sectionData;
+      if (isLanguageFilter) {
+        sectionData = filterByLanguage(leaderboards);
+      } else {
+        sectionData = filterByTag(tag, leaderboards);
+      }
+
+      if (sectionData.length > 0) {
+        sections.push({
+          id,
+          title,
+          data: sectionData,
+          group,
+        });
+      }
+    });
+  });
+
+  return sections;
+};