update

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -95,23 +95,212 @@ const LeaderboardFilters = ({ allSections = [] }) => {
     selectedCategories,
     setSelectedCategories,
     searchQuery,
+    selectedLanguage,
   } = useLeaderboard();
 
   const [inputValue, setInputValue] = useState(searchQuery || "");
   const [totalArenaCount, setTotalArenaCount] = useState(0);
   const debouncedSearch = useDebounce(inputValue, 200);
 
-  // Calculate section counts based on arena filter
+  // Calculate section counts based on all active filters
   const sectionCounts = useMemo(() => {
     const counts = new Map();
-    allSections.forEach(({ id, data = [] }) => {
-      const filteredData = arenaOnly
-        ? data.filter((board) => board.tags?.includes("judge:humans"))
-        : data;
-      counts.set(id, filteredData.length);
+
+    // Get all filtered leaderboards first
+    const allLeaderboards = Array.from(
+      new Set(
+        allSections.reduce((acc, section) => {
+          return [...acc, ...(section.data || [])];
+        }, [])
+      )
+    );
+
+    // 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;
+          }
+        });
+
+      // Only count approved leaderboards
+      sectionBoards = sectionBoards.filter(
+        (board) => board.approval_status === "approved"
+      );
+      counts.set(id, sectionBoards.length);
     });
+
     return counts;
-  }, [allSections, arenaOnly]);
+  }, [
+    allSections,
+    arenaOnly,
+    searchQuery,
+    selectedLanguage,
+    selectedCategories,
+  ]);
 
   // Update the search query after debounce
   React.useEffect(() => {

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

@@ -126,7 +126,7 @@ const LanguageList = ({
                   }}
                 >
                   {familyLanguages.map((lang) => {
-                    const isActive = selectedLanguage === lang;
+                    const isActive = selectedLanguage.has(lang);
                     const count = filteredLanguageStats.get(lang) || 0;
 
                     return (
@@ -135,7 +135,7 @@ const LanguageList = ({
                         label={capitalize(lang)}
                         count={count}
                         isActive={isActive}
-                        onClick={() => onLanguageSelect(isActive ? null : lang)}
+                        onClick={() => onLanguageSelect(lang)}
                         colors={LANGUAGE_COLORS}
                       />
                     );

client/src/context/LeaderboardContext.jsx

@@ -63,7 +63,7 @@ export const LeaderboardProvider = ({ children }) => {
     new Set(params.categories || [])
   );
   const [selectedLanguage, setSelectedLanguage] = useState(
-    params.language || null
+    params.language ? new Set(params.language.split(",")) : new Set()
   );
   const [expandedSections, setExpandedSections] = useState(
     new Set(params.categories || [])
@@ -78,7 +78,10 @@ export const LeaderboardProvider = ({ children }) => {
       categories: Array.from(selectedCategories),
       search: searchQuery,
       arena: arenaOnly ? "true" : null,
-      language: selectedLanguage,
+      language:
+        selectedLanguage.size > 0
+          ? Array.from(selectedLanguage).join(",")
+          : null,
       languageExpanded: isLanguageExpanded ? "true" : null,
     });
   }, [
@@ -116,13 +119,21 @@ export const LeaderboardProvider = ({ children }) => {
 
     // On réinitialise la langue sélectionnée seulement si on désélectionne "language"
     if (categoryId === "language") {
-      setSelectedLanguage(null);
+      setSelectedLanguage(new Set());
     }
   }, []);
 
   // Wrapper pour la sélection de langue
   const handleLanguageSelection = useCallback((language) => {
-    setSelectedLanguage((prev) => (prev === language ? null : language));
+    setSelectedLanguage((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(language)) {
+        newSet.delete(language);
+      } else {
+        newSet.add(language);
+      }
+      return newSet;
+    });
   }, []);
 
   // Filter leaderboards based on search query and arena toggle, ignoring category selection
@@ -175,12 +186,13 @@ export const LeaderboardProvider = ({ children }) => {
 
       let filtered = filterLeaderboardsForCount(boards);
 
-      // Filter by selected language if any
-      if (selectedLanguage) {
+      // Filter by selected languages if any
+      if (selectedLanguage.size > 0) {
         filtered = filtered.filter((board) =>
-          board.tags?.some(
-            (tag) =>
-              tag.toLowerCase() === `language:${selectedLanguage.toLowerCase()}`
+          Array.from(selectedLanguage).some((lang) =>
+            board.tags?.some(
+              (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
+            )
           )
         );
       }
@@ -621,7 +633,7 @@ export const LeaderboardProvider = ({ children }) => {
     setSearchQuery("");
     setArenaOnly(false);
     setSelectedCategories(new Set());
-    setSelectedLanguage(null);
+    setSelectedLanguage(new Set());
     setExpandedSections(new Set());
     setIsLanguageExpanded(false);
   }, []);