update empty states and header section

.gitignore

@@ -30,6 +30,7 @@ client/*.local
 
 client/.env
 server/.env
+server/data/leaderboards.json
 server/data/leaderboards_discussions.json
 server/data/leaderboards_list.json
 server/data/leaderboards_results.json

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

@@ -1,18 +1,51 @@
 import React from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Chip } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
 import { useLeaderboard } from "../../../context/LeaderboardContext";
 
+// Composant pour les chips (repris de SectionHeader mais sans couleur)
+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: 0.5,
+      "& .MuiChip-label": {
+        px: 1,
+        lineHeight: 1,
+        paddingTop: "1px", // Ajustement pour le centrage vertical
+      },
+      ...sx,
+    }}
+  />
+);
+
 const EmptyState = ({ title, searchQuery }) => {
   const { selectedCategories, selectedLanguage, arenaOnly } = useLeaderboard();
 
-  // Construire un message plus explicite
-  const getDetailedMessage = () => {
-    // Approche simplifiée : construire le message à partir des éléments de base
+  // Vérifier si des filtres sont actifs
+  const hasActiveFilters =
+    searchQuery ||
+    arenaOnly ||
+    selectedCategories.size > 0 ||
+    selectedLanguage.size > 0;
+
+  // Construire les parties du message pour l'affichage formaté
+  const getMessageParts = () => {
     const parts = [];
 
-    // 1. Ajouter le titre de base (catégorie)
-    if (title) {
+    // 1. Ajouter le titre de base (catégorie) s'il existe et n'est pas "All leaderboards"
+    if (title && !title.toLowerCase().includes("all leaderboards")) {
       // Extraire le titre de base sans "matching" ni "language:"
       let baseTitle = title;
 
@@ -21,55 +54,124 @@ const EmptyState = ({ title, searchQuery }) => {
         baseTitle = baseTitle.split("matching")[0].trim();
       }
 
-      // Si le titre contient "Language:" avec des langues spécifiques, le garder tel quel
-      if (baseTitle.toLowerCase().includes("language:")) {
-        parts.push(baseTitle.toLowerCase());
-      }
-      // Si le titre est "Language Specific" et qu'on a des langues sélectionnées, ne pas l'ajouter
-      else if (
-        baseTitle.toLowerCase().includes("language specific") &&
-        selectedLanguage.size > 0
-      ) {
-        // Ne pas ajouter "Language Specific" car on va ajouter les langues spécifiques plus tard
-      }
-      // Sinon, ajouter le titre de base
-      else {
-        parts.push(baseTitle.toLowerCase());
-      }
+      // Traiter les parties du titre séparées par "+"
+      const titleParts = baseTitle.split(" + ");
+      titleParts.forEach((part) => {
+        if (part.trim()) {
+          parts.push(part.trim());
+        }
+      });
     }
 
     // 2. Ajouter les langues sélectionnées si elles ne sont pas déjà dans le titre
     if (selectedLanguage && selectedLanguage.size > 0) {
-      const languages = Array.from(selectedLanguage).join(", ");
+      const languages = Array.from(selectedLanguage)
+        .map((lang) => lang.charAt(0).toUpperCase() + lang.slice(1))
+        .join(", ");
 
-      // Vérifier si les langues sont déjà dans le titre
+      const languageLabel = `Language: ${languages}`;
+
+      // Vérifier si les langues sont déjà dans les parties
       if (
         !parts.some((part) =>
-          part.toLowerCase().includes(`language: ${languages.toLowerCase()}`)
+          part.toLowerCase().includes(languages.toLowerCase())
         )
       ) {
-        parts.push(`language: ${languages}`);
+        parts.push(languageLabel);
       }
     }
 
     // 3. Ajouter le filtre Arena
     if (arenaOnly) {
-      parts.push("arena only");
+      parts.push("Arena only");
     }
 
-    // 4. Ajouter le terme de recherche
-    if (searchQuery) {
-      parts.push(`matching "${searchQuery}"`);
-    }
+    return parts;
+  };
 
-    // Si aucun filtre n'est actif, afficher un message simple
-    if (parts.length === 0) {
-      return "No results found";
-    }
+  // Obtenir les parties du message
+  const messageParts = getMessageParts();
 
-    // Construire le message final
-    return `No ${parts.join(" + ")} leaderboards found`;
-  };
+  // Si on a uniquement un terme de recherche sans autres filtres
+  if (searchQuery && messageParts.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+          py: 7,
+          mt: 0,
+          bgcolor: (theme) =>
+            theme.palette.mode === "dark"
+              ? "background.paper"
+              : "background.default",
+          borderRadius: 2,
+        }}
+      >
+        <SearchOffIcon
+          sx={{
+            fontSize: 64,
+            color: "text.secondary",
+            opacity: 0.5,
+          }}
+        />
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 0.5,
+          }}
+        >
+          <Typography variant="h5" component="span" color="text.secondary">
+            No results matching
+          </Typography>
+          <StyledChip label={`"${searchQuery}"`} />
+        </Box>
+        <Typography variant="body1" color="text.secondary" align="center">
+          Try adjusting your search filters
+        </Typography>
+      </Box>
+    );
+  }
+
+  // Message simple si aucun filtre n'est actif ou si aucune partie n'est générée
+  if (!hasActiveFilters || (messageParts.length === 0 && !searchQuery)) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+          py: 7,
+          mt: hasActiveFilters ? 0 : 8,
+          bgcolor: (theme) =>
+            theme.palette.mode === "dark"
+              ? "background.paper"
+              : "background.default",
+          borderRadius: 2,
+        }}
+      >
+        <SearchOffIcon
+          sx={{
+            fontSize: 64,
+            color: "text.secondary",
+            opacity: 0.5,
+          }}
+        />
+        <Typography variant="h5" color="text.secondary" align="center">
+          No results found
+        </Typography>
+        <Typography variant="body1" color="text.secondary" align="center">
+          Try adjusting your search filters
+        </Typography>
+      </Box>
+    );
+  }
 
   return (
     <Box
@@ -79,6 +181,7 @@ const EmptyState = ({ title, searchQuery }) => {
         alignItems: "center",
         gap: 2,
         py: 7,
+        mt: 0,
         bgcolor: (theme) =>
           theme.palette.mode === "dark"
             ? "background.paper"
@@ -93,9 +196,55 @@ const EmptyState = ({ title, searchQuery }) => {
           opacity: 0.5,
         }}
       />
-      <Typography variant="h5" color="text.secondary" align="center">
-        {getDetailedMessage()}
-      </Typography>
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 1,
+        }}
+      >
+        {/* Phrase en langage naturel avec chips intégrées */}
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 0.5,
+          }}
+        >
+          <Typography variant="h5" component="span" color="text.secondary">
+            No results found for
+          </Typography>
+
+          {messageParts.map((part, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && (
+                <Typography
+                  variant="h5"
+                  component="span"
+                  color="text.secondary"
+                >
+                  {index === messageParts.length - 1 ? " and" : ","}
+                </Typography>
+              )}
+              <StyledChip label={part} />
+            </React.Fragment>
+          ))}
+
+          {searchQuery && (
+            <>
+              <Typography variant="h5" component="span" color="text.secondary">
+                {messageParts.length > 0 ? " matching" : "matching"}
+              </Typography>
+              <StyledChip label={`"${searchQuery}"`} />
+            </>
+          )}
+        </Box>
+      </Box>
+
       <Typography variant="body1" color="text.secondary" align="center">
         Try adjusting your search filters
       </Typography>

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

@@ -18,7 +18,7 @@ const StyledChip = ({ label, sx = {} }) => (
       color: "text.secondary",
       fontSize: "0.75rem",
       fontWeight: 500,
-      mx: 1,
+      mx: 0.5,
       "& .MuiChip-label": {
         px: 1,
         lineHeight: 1,
@@ -29,12 +29,6 @@ const StyledChip = ({ label, 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,
@@ -46,10 +40,9 @@ const SectionHeader = ({
   // Séparer le titre en parties si c'est un titre combiné
   const titleParts = title.split(" matching ");
   const categories = titleParts[0].split(" + ");
+
+  // On garde la référence au terme de recherche mais on ne l'affiche pas dans le header
   const hasSearchQuery = titleParts.length > 1;
-  const searchQuery = hasSearchQuery
-    ? titleParts[1].replace(/['"]/g, "")
-    : null;
 
   return (
     <Box
@@ -85,26 +78,20 @@ const SectionHeader = ({
           >
             {categories.map((category, index) => (
               <React.Fragment key={index}>
-                {index > 0 && <AndChip />}
+                {index > 0 && (
+                  <span
+                    style={{
+                      opacity: 0.4,
+                      marginLeft: "0.5rem",
+                      marginRight: "0.5rem",
+                    }}
+                  >
+                    {index === categories.length - 1 ? " and " : ", "}
+                  </span>
+                )}
                 {category}
               </React.Fragment>
             ))}
-            {hasSearchQuery && (
-              <>
-                <MatchingChip />
-                <Typography
-                  component="span"
-                  sx={{
-                    color: "text.primary",
-                    fontWeight: 600,
-                    fontSize: "inherit",
-                    lineHeight: "inherit",
-                  }}
-                >
-                  "{searchQuery}"
-                </Typography>
-              </>
-            )}
           </Typography>
         </Box>
         <Box
@@ -116,7 +103,7 @@ const SectionHeader = ({
               theme.palette.text.primary,
               theme.palette.mode === "dark" ? 0.2 : 0.15
             ),
-            mx: 1,
+            mx: 0.25,
           })}
         />
         <Typography

client/src/components/LeaderboardSection/index.jsx

@@ -155,10 +155,8 @@ const LeaderboardSection = ({
       )}
 
       {approvedLeaderboards.length === 0 ? (
-        // Afficher EmptyState uniquement si showEmptyState est true
-        showEmptyState ? (
-          <EmptyState title={enrichedTitle} searchQuery={searchQuery} />
-        ) : null
+        // Toujours afficher EmptyState, que showEmptyState soit true ou non
+        <EmptyState title={enrichedTitle} searchQuery={searchQuery} />
       ) : (
         <LeaderboardGrid
           displayedLeaderboards={displayedLeaderboards}

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -17,6 +17,7 @@ import {
   LeaderboardProvider,
   useLeaderboard,
 } from "../../context/LeaderboardContext";
+import EmptyState from "../../components/LeaderboardSection/components/EmptyState";
 
 const LeaderboardPageContent = () => {
   const [loading, setLoading] = useState(true);
@@ -197,42 +198,6 @@ const LeaderboardPageContent = () => {
             </Box>
           )}
 
-          {/* 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={{
-                  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>
-            )}
-
           {isOnlyTextSearch ? (
             // Vue spéciale pour la recherche textuelle
             searchResults.length > 0 ? (
@@ -246,34 +211,14 @@ const LeaderboardPageContent = () => {
               </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,
-                  }}
+              <Box key="search-results">
+                <LeaderboardSection
+                  id="search-results"
+                  title={`All leaderboards matching "${searchQuery}"`}
+                  leaderboards={allUniqueLeaderboards}
+                  filteredLeaderboards={[]}
+                  showEmptyState={true}
                 />
-                <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 ? (