fix empty state

client/src/components/LeaderboardSection/components/EmptyState.jsx

@@ -1,8 +1,63 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
+import { useLeaderboard } from "../../../context/LeaderboardContext";
 
 const EmptyState = ({ title, searchQuery }) => {
+  const { selectedCategories, selectedLanguage, arenaOnly } = useLeaderboard();
+
+  // Construire un message plus explicite
+  const getDetailedMessage = () => {
+    const filters = [];
+
+    // Vérifier si le titre contient déjà le terme de recherche
+    let cleanTitle = title;
+    let searchTermInTitle = false;
+
+    if (title && searchQuery) {
+      // Vérifier si le titre contient déjà "matching"
+      if (
+        title.toLowerCase().includes(`matching "${searchQuery.toLowerCase()}"`)
+      ) {
+        searchTermInTitle = true;
+      }
+    }
+
+    // Ajouter le titre de la section (catégorie)
+    if (title) {
+      // Si le titre contient déjà le terme de recherche, on l'utilise tel quel
+      if (searchTermInTitle) {
+        filters.push(title.toLowerCase());
+        // On ne rajoute pas searchQuery plus tard
+      } else {
+        // Sinon on ajoute le titre sans "matching"
+        filters.push(title.toLowerCase());
+      }
+    }
+
+    // Ajouter les langues sélectionnées
+    if (selectedLanguage && selectedLanguage.size > 0) {
+      const languages = Array.from(selectedLanguage).join(", ");
+      filters.push(`language: ${languages}`);
+    }
+
+    // Ajouter le filtre Arena
+    if (arenaOnly) {
+      filters.push("arena only");
+    }
+
+    // Ajouter le terme de recherche seulement s'il n'est pas déjà dans le titre
+    if (searchQuery && !searchTermInTitle) {
+      filters.push(`matching "${searchQuery}"`);
+    }
+
+    if (filters.length === 0) {
+      return "No results found";
+    }
+
+    return `No ${filters.join(" + ")} leaderboards found`;
+  };
+
   return (
     <Box
       sx={{
@@ -26,24 +81,7 @@ const EmptyState = ({ title, searchQuery }) => {
         }}
       />
       <Typography variant="h5" color="text.secondary" align="center">
-        {searchQuery ? (
-          <>
-            No {title.toLowerCase()} leaderboard matches{" "}
-            <Box
-              component="span"
-              sx={{
-                bgcolor: "primary.main",
-                color: "primary.contrastText",
-                px: 1,
-                borderRadius: 1,
-              }}
-            >
-              {searchQuery}
-            </Box>
-          </>
-        ) : (
-          `No ${title.toLowerCase()} leaderboard matches your criteria`
-        )}
+        {getDetailedMessage()}
       </Typography>
       <Typography variant="body1" color="text.secondary" align="center">
         Try adjusting your search filters

client/src/components/LeaderboardSection/index.jsx

@@ -14,6 +14,7 @@ const LeaderboardSection = ({
   leaderboards,
   filteredLeaderboards,
   id,
+  showEmptyState = false,
 }) => {
   const {
     expandedSections,
@@ -107,7 +108,10 @@ const LeaderboardSection = ({
       )}
 
       {approvedLeaderboards.length === 0 ? (
-        <EmptyState title={title} searchQuery={searchQuery} />
+        // Afficher EmptyState uniquement si showEmptyState est true
+        showEmptyState ? (
+          <EmptyState title={title} searchQuery={searchQuery} />
+        ) : null
       ) : (
         <LeaderboardGrid
           displayedLeaderboards={displayedLeaderboards}

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -122,61 +122,85 @@ const LeaderboardPageContent = () => {
         >
           <LeaderboardFilters allSections={allSections} />
 
-          {/* Message global "No results" seulement si on n'a pas de catégorie sélectionnée */}
-          {!hasLeaderboards && isFiltering && selectedCategories.size === 0 && (
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: 2,
-                mt: 8,
-                py: 7,
-              }}
-            >
-              <SearchOffIcon
+          {/* Message global "No results" seulement si on n'a pas de résultats, pas de section de recherche, et pas de catégories sélectionnées */}
+          {!hasLeaderboards &&
+            isFiltering &&
+            !isOnlyTextSearch &&
+            selectedCategories.size === 0 && (
+              <Box
                 sx={{
-                  fontSize: 64,
-                  color: "text.secondary",
-                  opacity: 0.5,
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 2,
+                  mt: 8,
+                  py: 7,
                 }}
-              />
-              <Typography variant="h5" color="text.secondary" align="center">
-                {searchQuery ? (
-                  <>
-                    Oops! No leaderboard matches{" "}
-                    <Box
-                      component="span"
-                      sx={{
-                        bgcolor: "primary.main",
-                        color: "primary.contrastText",
-                        px: 1,
-                        borderRadius: 1,
-                      }}
-                    >
-                      {searchQuery}
-                    </Box>
-                  </>
-                ) : (
-                  "Oops! No leaderboard matches your criteria"
-                )}
-              </Typography>
-              <Typography variant="body1" color="text.secondary" align="center">
-                Try adjusting your search filters
-              </Typography>
-            </Box>
-          )}
+              >
+                <SearchOffIcon
+                  sx={{
+                    fontSize: 64,
+                    color: "text.secondary",
+                    opacity: 0.5,
+                  }}
+                />
+                <Typography variant="h5" color="text.secondary" align="center">
+                  No results found
+                  {searchQuery ? ` matching "${searchQuery}"` : ""}
+                </Typography>
+                <Typography
+                  variant="body1"
+                  color="text.secondary"
+                  align="center"
+                >
+                  Try adjusting your filters
+                </Typography>
+              </Box>
+            )}
 
           {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>
+            searchResults.length > 0 ? (
+              <Box key="search-results">
+                <LeaderboardSection
+                  id="search-results"
+                  title={`All leaderboards matching "${searchQuery}"`}
+                  leaderboards={allUniqueLeaderboards}
+                  filteredLeaderboards={searchResults}
+                />
+              </Box>
+            ) : (
+              // Message d'erreur pour la recherche textuelle sans résultats
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 2,
+                  mt: 8,
+                  py: 7,
+                }}
+              >
+                <SearchOffIcon
+                  sx={{
+                    fontSize: 64,
+                    color: "text.secondary",
+                    opacity: 0.5,
+                  }}
+                />
+                <Typography variant="h5" color="text.secondary" align="center">
+                  No results found
+                  {searchQuery ? ` matching "${searchQuery}"` : ""}
+                </Typography>
+                <Typography
+                  variant="body1"
+                  color="text.secondary"
+                  align="center"
+                >
+                  Try adjusting your filters
+                </Typography>
+              </Box>
+            )
           ) : selectedCategories.size > 0 ? (
             // Si des catégories sont sélectionnées
             selectedCategories.size === 1 ? (
@@ -185,10 +209,13 @@ const LeaderboardPageContent = () => {
                 .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;
+
+                  // Toujours afficher la section, même si elle est vide
                   return (
                     <Box key={id} id={id}>
                       <LeaderboardSection
@@ -196,6 +223,7 @@ const LeaderboardPageContent = () => {
                         title={sectionTitle}
                         leaderboards={data}
                         filteredLeaderboards={filteredLeaderboards}
+                        showEmptyState={true} // Toujours afficher l'état vide sous le header
                       />
                     </Box>
                   );
@@ -236,6 +264,7 @@ const LeaderboardPageContent = () => {
                       title={finalTitle}
                       leaderboards={uniqueData}
                       filteredLeaderboards={filteredLeaderboards}
+                      showEmptyState={true} // Toujours afficher l'état vide sous le header
                     />
                   </Box>
                 );