remove old component and update chevron position

client/src/components/LeaderboardSection/components/LanguageAccordion.jsx

@@ -1,138 +0,0 @@
-import React from "react";
-import { Typography, Box, Button } from "@mui/material";
-import { alpha } from "@mui/material/styles";
-
-const TAG_COLOR = {
-  main: "#F44336",
-  light: "#FFEBEE",
-};
-
-const LanguageList = ({
-  languages,
-  languageStats,
-  selectedLanguage,
-  onLanguageSelect,
-  LANGUAGE_FAMILIES,
-  findLanguageFamily,
-}) => {
-  // Group languages by family
-  const groupedLanguages = languages.reduce((acc, lang) => {
-    const { family } = findLanguageFamily(lang);
-    if (!acc[family]) {
-      acc[family] = [];
-    }
-    acc[family].push(lang);
-    return acc;
-  }, {});
-
-  const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-
-  return (
-    <Box sx={{ mb: 4 }}>
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        sx={{ fontWeight: 500, mb: 2 }}
-      >
-        Filter by language
-      </Typography>
-      <Box
-        sx={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: 3,
-        }}
-      >
-        {Object.entries(groupedLanguages).map(
-          ([family, familyLanguages], familyIndex) => (
-            <Box
-              key={family}
-              sx={{
-                display: "flex",
-                flexWrap: "wrap",
-                gap: 1,
-              }}
-            >
-              {familyLanguages.map((lang) => {
-                const isActive = selectedLanguage === lang;
-                const count = languageStats?.get(lang) || 0;
-
-                return (
-                  <Button
-                    key={lang}
-                    onClick={() => onLanguageSelect(isActive ? null : lang)}
-                    variant={isActive ? "contained" : "outlined"}
-                    size="small"
-                    sx={{
-                      textTransform: "none",
-                      cursor: "pointer",
-                      mb: 0.75,
-                      backgroundColor: (theme) => {
-                        if (isActive) {
-                          return TAG_COLOR.main;
-                        }
-                        return theme.palette.mode === "dark"
-                          ? "background.paper"
-                          : TAG_COLOR.light;
-                      },
-                      color: (theme) => {
-                        if (isActive) {
-                          return "white";
-                        }
-                        return TAG_COLOR.main;
-                      },
-                      borderColor: TAG_COLOR.main,
-                      "&:hover": {
-                        backgroundColor: (theme) => {
-                          if (isActive) {
-                            return TAG_COLOR.main;
-                          }
-                          return TAG_COLOR.light;
-                        },
-                        opacity: 0.8,
-                      },
-                      "& .MuiTouchRipple-root": {
-                        transition: "none",
-                      },
-                      transition: "none",
-                    }}
-                  >
-                    {capitalize(lang)}
-                    <Box
-                      component="span"
-                      sx={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 0.75,
-                        color: isActive ? "white" : "inherit",
-                        ml: 0.75,
-                      }}
-                    >
-                      <Box
-                        component="span"
-                        sx={(theme) => ({
-                          width: "4px",
-                          height: "4px",
-                          borderRadius: "100%",
-                          backgroundColor: isActive
-                            ? "rgba(255, 255, 255, 0.5)"
-                            : alpha(
-                                TAG_COLOR.main,
-                                theme.palette.mode === "dark" ? 0.4 : 0.3
-                              ),
-                        })}
-                      />
-                      {count}
-                    </Box>
-                  </Button>
-                );
-              })}
-            </Box>
-          )
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-export default LanguageList;

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

@@ -56,6 +56,7 @@ const LanguageList = ({
           "&:before": {
             display: "none",
           },
+
           bgcolor: "transparent",
         }}
       >
@@ -65,6 +66,7 @@ const LanguageList = ({
           id="language-filter-header"
           sx={{
             p: 0,
+            width: "auto",
             minHeight: "unset",
             "& .MuiAccordionSummary-content": {
               m: 0,