update

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -239,9 +239,7 @@ const LeaderboardFilters = ({ allSections = [] }) => {
                   count={count}
                   isActive={isSelected}
                   onClick={() => {
-                    if (isSelected || count > 0) {
-                      setSelectedCategories(id);
-                    }
+                    setSelectedCategories(id);
                   }}
                   colors={groupColors[currentGroup]}
                 />

client/src/components/LeaderboardSection/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Box } from "@mui/material";
 import { useLeaderboard } from "../../context/LeaderboardContext";
 import SectionHeader from "./components/SectionHeader";
@@ -30,6 +30,43 @@ const LeaderboardSection = ({
   const { languages, languageStats, LANGUAGE_FAMILIES, findLanguageFamily } =
     useLanguageStats(leaderboards, filteredLeaderboards);
 
+  // Créer un titre enrichi qui inclut les filtres de langue
+  const enrichedTitle = useMemo(() => {
+    let newTitle = title;
+
+    // Ajouter les langues sélectionnées au titre si elles ne sont pas déjà incluses
+    if (selectedLanguage && selectedLanguage.size > 0) {
+      const languageNames = Array.from(selectedLanguage)
+        .map((lang) => lang.charAt(0).toUpperCase() + lang.slice(1))
+        .join(", ");
+
+      // Vérifier si le titre contient déjà "language"
+      if (!newTitle.toLowerCase().includes("language")) {
+        newTitle = `${newTitle} + Language: ${languageNames}`;
+      } else if (
+        !newTitle.toLowerCase().includes(languageNames.toLowerCase())
+      ) {
+        // Si le titre contient "language" mais pas les noms spécifiques
+        newTitle = newTitle.replace(
+          /language(\s+specific)?/i,
+          `Language: ${languageNames}`
+        );
+      }
+    }
+
+    // Ajouter le terme de recherche s'il existe
+    if (
+      searchQuery &&
+      !newTitle
+        .toLowerCase()
+        .includes(`matching "${searchQuery.toLowerCase()}"`)
+    ) {
+      newTitle = `${newTitle} matching "${searchQuery}"`;
+    }
+
+    return newTitle;
+  }, [title, selectedLanguage, searchQuery]);
+
   // Filtrer pour n'avoir que les leaderboards approuvés
   const approvedLeaderboards = filteredLeaderboards.filter(
     (leaderboard) => leaderboard.approval_status === "approved"
@@ -88,7 +125,7 @@ const LeaderboardSection = ({
   return (
     <Box sx={{ mb: 6 }}>
       <SectionHeader
-        title={title}
+        title={enrichedTitle}
         count={approvedLeaderboards.length}
         isExpanded={isExpanded}
         onToggleExpand={toggleExpanded}
@@ -110,7 +147,7 @@ const LeaderboardSection = ({
       {approvedLeaderboards.length === 0 ? (
         // Afficher EmptyState uniquement si showEmptyState est true
         showEmptyState ? (
-          <EmptyState title={title} searchQuery={searchQuery} />
+          <EmptyState title={enrichedTitle} searchQuery={searchQuery} />
         ) : null
       ) : (
         <LeaderboardGrid

client/src/components/common/FilterTag.jsx

@@ -13,18 +13,17 @@ const FilterTag = ({
   isActive,
   onClick,
   colors = DEFAULT_COLORS,
+  isDisabled = count === 0,
 }) => {
-  const isDisabled = count === 0;
-
   return (
     <Button
       onClick={onClick}
       variant={isActive ? "contained" : "outlined"}
       size="small"
-      disabled={isDisabled}
+      disabled={false}
       sx={{
         textTransform: "none",
-        cursor: isDisabled ? "default" : "pointer",
+        cursor: "pointer",
         mb: 0.75,
         backgroundColor: (theme) => {
           if (isActive) {
@@ -38,9 +37,10 @@ const FilterTag = ({
           if (isActive) {
             return "white";
           }
-          return colors.main;
+          return isDisabled ? alpha(colors.main, 0.7) : colors.main;
         },
-        borderColor: colors.main,
+        borderColor: isDisabled ? alpha(colors.main, 0.6) : colors.main,
+        opacity: isDisabled ? 0.7 : 1,
         "&:hover": {
           backgroundColor: (theme) => {
             if (isActive) {
@@ -48,7 +48,8 @@ const FilterTag = ({
             }
             return colors.light;
           },
-          opacity: isDisabled ? 0.6 : 0.8,
+          opacity: isDisabled ? 0.8 : 0.9,
+          borderColor: isDisabled ? alpha(colors.main, 0.7) : colors.main,
         },
         "& .MuiTouchRipple-root": {
           transition: "none",
@@ -66,6 +67,7 @@ const FilterTag = ({
             gap: 0.75,
             color: isActive ? "white" : "inherit",
             ml: 0.75,
+            opacity: isDisabled ? 0.7 : 1,
           }}
         >
           <Box