Add repository language color indicators

Author: Pragzh

src/pages/Tracker/Tracker.tsx

@@ -28,6 +28,7 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
+  Tooltip,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
@@ -46,6 +47,36 @@ interface GitHubItem {
   html_url: string;
 }
 
+const LANGUAGE_COLORS: Record<string, string> = {
+  JavaScript: "#f1e05a",
+  TypeScript: "#3178c6",
+  Python: "#3572A5",
+  Java: "#b07219",
+  HTML: "#e34c26",
+  CSS: "#563d7c",
+  C: "#555555",
+  "C++": "#f34b7d",
+  "C#": "#178600",
+  PHP: "#4F5D95",
+  Ruby: "#701516",
+  Go: "#00ADD8",
+  Rust: "#dea584",
+  Kotlin: "#A97BFF",
+  Swift: "#F05138",
+};
+
+const getLanguageFromRepo = (repoName: string): string => {
+  const lowerRepo = repoName.toLowerCase();
+
+  if (lowerRepo.includes("react") || lowerRepo.includes("js")) return "JavaScript";
+  if (lowerRepo.includes("ts") || lowerRepo.includes("typescript")) return "TypeScript";
+  if (lowerRepo.includes("python") || lowerRepo.includes("py")) return "Python";
+  if (lowerRepo.includes("java")) return "Java";
+  if (lowerRepo.includes("html")) return "HTML";
+  if (lowerRepo.includes("css")) return "CSS";
+
+  return "Unknown";
+};
 const Home: React.FC = () => {
 
   const theme = useTheme();
@@ -369,8 +400,38 @@ const Home: React.FC = () => {
 
 
                     <TableCell align="center">
-                      {item.repository_url.split("/").slice(-1)[0]}
-                    </TableCell>
+  {(() => {
+    const repoName = item.repository_url.split("/").slice(-1)[0];
+    const language = getLanguageFromRepo(repoName);
+    const color = LANGUAGE_COLORS[language] || "#9ca3af";
+
+    return (
+      <Tooltip title={`Language: ${language}`} arrow>
+        <Box
+          component="span"
+          sx={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 1,
+          }}
+        >
+          <Box
+            component="span"
+            sx={{
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              backgroundColor: color,
+              display: "inline-block",
+            }}
+          />
+          {repoName}
+        </Box>
+      </Tooltip>
+    );
+  })()}
+</TableCell>
 
                     <TableCell align="center">
                       {item.pull_request?.merged_at ? "merged" : item.state}