update

client/src/components/LeaderboardSection.jsx

@@ -34,11 +34,115 @@ const LeaderboardSection = ({
   } = useLeaderboard();
   const isExpanded = expandedSections.has(id);
 
+  // Définition des familles de langues
+  const LANGUAGE_FAMILIES = {
+    "European Languages": {
+      Main: [
+        "English",
+        "French",
+        "Spanish",
+        "German",
+        "Italian",
+        "Portuguese",
+        "Dutch",
+        "Romanian",
+        "Polish",
+        "Greek",
+        "Swedish",
+        "Danish",
+        "Norwegian",
+        "Finnish",
+        "Hungarian",
+        "Czech",
+        "Slovak",
+        "Croatian",
+        "Serbian",
+        "Bulgarian",
+        "Ukrainian",
+        "Russian",
+        "Lithuanian",
+        "Latvian",
+        "Estonian",
+        "Basque",
+        "Catalan",
+        "Albanian",
+        "Slovenian",
+        "Icelandic",
+        "Galician",
+        "Armenian",
+      ],
+    },
+    "Asian Languages": {
+      Main: [
+        "Chinese",
+        "Japanese",
+        "Korean",
+        "Vietnamese",
+        "Thai",
+        "Indonesian",
+        "Malay",
+        "Tagalog",
+        "Mandarin",
+        "Cantonese",
+        "日本語",
+        "Taiwanese",
+        "Filipino",
+        "Singlish",
+      ],
+    },
+    "Indian Languages": {
+      Main: [
+        "Hindi",
+        "Bengali",
+        "Tamil",
+        "Telugu",
+        "Marathi",
+        "Gujarati",
+        "Kannada",
+        "Malayalam",
+        "Nepali",
+        "Urdu",
+        "Indic",
+      ],
+    },
+    "Middle Eastern & African": {
+      Main: [
+        "Arabic",
+        "Hebrew",
+        "Turkish",
+        "Persian",
+        "Darija",
+        "Swahili",
+        "Amharic",
+        "Hausa",
+        "Yoruba",
+      ],
+    },
+    "Other Languages": {
+      Main: [], // Pour les langues non listées
+    },
+  };
+
+  // Helper pour trouver la famille d'une langue
+  const findLanguageFamily = (language) => {
+    for (const [familyName, subFamilies] of Object.entries(LANGUAGE_FAMILIES)) {
+      for (const [subFamilyName, languages] of Object.entries(subFamilies)) {
+        if (languages.includes(language)) {
+          return { family: familyName, subFamily: subFamilyName };
+        }
+      }
+    }
+    // Si la langue n'est pas trouvée, on la met dans Other Languages
+    console.log(`Language not categorized: ${language}`);
+    return { family: "Other Languages", subFamily: "Main" };
+  };
+
   // Extraire la liste des langues si c'est la section Language Specific
-  // Cette liste ne doit JAMAIS changer, peu importe les filtres
   const languages = useMemo(() => {
     if (id !== "language") return null;
     const langSet = new Set();
+
+    // Compter toutes les langues uniques
     leaderboards.forEach((board) => {
       board.tags?.forEach((tag) => {
         if (tag.startsWith("language:")) {
@@ -49,7 +153,31 @@ const LeaderboardSection = ({
         }
       });
     });
-    return Array.from(langSet).sort();
+
+    // Créer un tableau de paires [langue, nombre de leaderboards, famille]
+    const langArray = Array.from(langSet).map((lang) => {
+      const count = leaderboards.filter((board) =>
+        board.tags?.some(
+          (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
+        )
+      ).length;
+      const { family, subFamily } = findLanguageFamily(lang);
+      return [lang, count, family, subFamily];
+    });
+
+    // Trier d'abord par famille, puis par nombre de leaderboards
+    return langArray
+      .sort((a, b) => {
+        // Si les familles sont différentes
+        if (a[2] !== b[2]) {
+          if (a[2] === "Other Languages") return 1; // Other Languages toujours à la fin
+          if (b[2] === "Other Languages") return -1;
+          return a[2].localeCompare(b[2]);
+        }
+        // Si même famille, trier par nombre de leaderboards
+        return b[1] - a[1];
+      })
+      .map(([lang]) => lang);
   }, [id, leaderboards]);
 
   // Calculer le nombre de leaderboards par langue
@@ -186,6 +314,7 @@ const LeaderboardSection = ({
         <Accordion
           defaultExpanded={false}
           elevation={0}
+          disableGutters
           sx={{
             mb: approvedLeaderboards.length > 0 ? 4 : 2,
             "&:before": {
@@ -195,101 +324,138 @@ const LeaderboardSection = ({
           }}
         >
           <AccordionSummary
-            expandIcon={<ExpandMoreIcon sx={{ fontSize: 20 }} />}
+            expandIcon={
+              <ExpandMoreIcon sx={{ fontSize: 20, color: "text.secondary" }} />
+            }
             sx={{
-              padding: 0,
-              "& .MuiAccordionSummary-content": {
-                margin: 0,
+              p: 0,
+              minHeight: 32,
+              height: 32,
+              "&.MuiAccordionSummary-root": {
+                "&.Mui-expanded": {
+                  minHeight: 32,
+                  height: 32,
+                },
               },
-              "& .MuiAccordionSummary-expandIconWrapper": {
-                position: "relative",
-                right: "unset",
-                marginLeft: 1,
-                transform: "none",
+              "& .MuiAccordionSummary-content": {
+                m: 0,
+                "&.Mui-expanded": {
+                  m: 0,
+                },
               },
             }}
           >
-            <Box sx={{ display: "flex", alignItems: "center" }}>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                sx={{ fontWeight: 500 }}
-              >
-                Languages represented in this category
-              </Typography>
-            </Box>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{ fontWeight: 500 }}
+            >
+              Filter by language
+            </Typography>
           </AccordionSummary>
           <AccordionDetails sx={{ padding: 0 }}>
-            <Box
-              sx={{
-                display: "flex",
-                flexWrap: "wrap",
-                gap: 1,
-                mx: -0.5,
-              }}
-            >
-              {languages.map((lang) => {
-                const isActive = selectedLanguage === lang;
-                const count = languageStats?.get(lang) || 0;
+            {/* Grouper les langues par famille */}
+            {Object.entries(LANGUAGE_FAMILIES).map(([family, subFamilies]) => {
+              const familyLanguages = languages.filter((lang) => {
+                const { family: langFamily } = findLanguageFamily(lang);
+                return langFamily === family;
+              });
+
+              // Ne pas retourner si pas de langues, SAUF pour Other Languages qui doit toujours être affiché
+              if (familyLanguages.length === 0 && family !== "Other Languages")
+                return null;
 
-                return (
-                  <Button
-                    key={lang}
-                    onClick={() => setSelectedLanguage(isActive ? null : lang)}
-                    variant={isActive ? "contained" : "outlined"}
-                    size="small"
+              return (
+                <Box key={family} sx={{ mb: 3 }}>
+                  <Typography
+                    variant="subtitle2"
                     sx={{
-                      textTransform: "none",
-                      m: 0.125,
-                      backgroundColor: (theme) =>
-                        isActive
-                          ? undefined
-                          : theme.palette.mode === "dark"
-                          ? "background.paper"
-                          : "white",
-                      "&:hover": {
-                        backgroundColor: (theme) =>
-                          isActive
-                            ? undefined
-                            : theme.palette.mode === "dark"
-                            ? "background.paper"
-                            : "white",
-                      },
-                      "& .MuiTouchRipple-root": {
-                        transition: "none",
-                      },
-                      transition: "none",
+                      color: "text.secondary",
+                      mb: 1,
+                      fontWeight: 500,
+                      opacity: 0.8,
+                    }}
+                  >
+                    {family}{" "}
+                    {familyLanguages.length > 0
+                      ? `(${familyLanguages.length})`
+                      : ""}
+                  </Typography>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: 1,
+                      mx: -0.5,
                     }}
                   >
-                    {lang}
-                    <Box
-                      component="span"
-                      sx={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 0.75,
-                        color: isActive ? "inherit" : "text.secondary",
-                        ml: 0.75,
-                      }}
-                    >
-                      <Box
-                        component="span"
-                        sx={(theme) => ({
-                          width: "4px",
-                          height: "4px",
-                          borderRadius: "100%",
-                          backgroundColor: alpha(
-                            theme.palette.text.primary,
-                            theme.palette.mode === "dark" ? 0.2 : 0.15
-                          ),
-                        })}
-                      />
-                      {count}
-                    </Box>
-                  </Button>
-                );
-              })}
-            </Box>
+                    {familyLanguages.map((lang) => {
+                      const isActive = selectedLanguage === lang;
+                      const count = languageStats?.get(lang) || 0;
+
+                      return (
+                        <Button
+                          key={lang}
+                          onClick={() =>
+                            setSelectedLanguage(isActive ? null : lang)
+                          }
+                          variant={isActive ? "contained" : "outlined"}
+                          size="small"
+                          sx={{
+                            textTransform: "none",
+                            m: 0.125,
+                            backgroundColor: (theme) =>
+                              isActive
+                                ? undefined
+                                : theme.palette.mode === "dark"
+                                ? "background.paper"
+                                : "white",
+                            "&:hover": {
+                              backgroundColor: (theme) =>
+                                isActive
+                                  ? undefined
+                                  : theme.palette.mode === "dark"
+                                  ? "background.paper"
+                                  : "white",
+                            },
+                            "& .MuiTouchRipple-root": {
+                              transition: "none",
+                            },
+                            transition: "none",
+                          }}
+                        >
+                          {lang}
+                          <Box
+                            component="span"
+                            sx={{
+                              display: "inline-flex",
+                              alignItems: "center",
+                              gap: 0.75,
+                              color: isActive ? "inherit" : "text.secondary",
+                              ml: 0.75,
+                            }}
+                          >
+                            <Box
+                              component="span"
+                              sx={(theme) => ({
+                                width: "4px",
+                                height: "4px",
+                                borderRadius: "100%",
+                                backgroundColor: alpha(
+                                  theme.palette.text.primary,
+                                  theme.palette.mode === "dark" ? 0.2 : 0.15
+                                ),
+                              })}
+                            />
+                            {count}
+                          </Box>
+                        </Button>
+                      );
+                    })}
+                  </Box>
+                </Box>
+              );
+            })}
           </AccordionDetails>
         </Accordion>
       )}