refactor(client): show native language names instead of country flags

Replace the flag + 2-letter code in the language selector with each language's native name (English, Deutsch, 日本語, ...) and drop the unused flag-icons dependency.

client/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "client",
-	"version": "0.0.0",
+	"version": "3.6.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "0.0.0",
+			"version": "3.6.1",
 			"dependencies": {
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
@@ -20,7 +20,6 @@
 				"@types/maplibre-gl": "^1.13.2",
 				"axios": "^1.7.4",
 				"dayjs": "1.11.13",
-				"flag-icons": "7.3.2",
 				"html2canvas": "^1.4.1",
 				"human-interval": "2.0.1",
 				"i18next": "25.4.2",
@@ -3891,10 +3890,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/flag-icons": {
-			"version": "7.3.2",
-			"license": "MIT"
-		},
 		"node_modules/flat-cache": {
 			"version": "3.2.0",
 			"dev": true,

client/package.json

@@ -28,7 +28,6 @@
 		"@types/maplibre-gl": "^1.13.2",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
-		"flag-icons": "7.3.2",
 		"html2canvas": "^1.4.1",
 		"human-interval": "2.0.1",
 		"i18next": "25.4.2",

client/src/Components/inputs/LanguageSelector.tsx

@@ -1,26 +1,33 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
 import MenuItem from "@mui/material/MenuItem";
 import { Select } from "@/Components/inputs";
-import "flag-icons/css/flag-icons.min.css";
 
 import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { setLanguage } from "@/Features/UI/uiSlice";
 import type { RootState } from "@/Types/state";
 
-const langMap: Record<string, string> = {
-	cs: "cz",
-	ja: "jp",
-	uk: "ua",
-	vi: "vn",
+const languageNames: Record<string, string> = {
+	en: "English",
+	de: "Deutsch",
+	es: "Español",
+	fr: "Français",
+	"pt-BR": "Português (BR)",
+	cs: "Čeština",
+	fi: "Suomi",
+	tr: "Türkçe",
+	ru: "Русский",
+	uk: "Українська",
+	ar: "العربية",
+	th: "ไทย",
+	vi: "Tiếng Việt",
+	ja: "日本語",
+	"zh-CN": "简体中文",
+	"zh-TW": "繁體中文",
 };
 
 export const LanguageSelector = () => {
 	const { i18n } = useTranslation();
-	const theme = useTheme();
 	const { language = "en" } = useSelector((state: RootState) => state.ui);
 	const dispatch = useDispatch();
 	const handleChange = (event: any) => {
@@ -35,64 +42,15 @@ export const LanguageSelector = () => {
 			value={language}
 			onChange={handleChange}
 			size="small"
-			// sx={{
-			// 	minWidth: 80,
-			// 	"& .MuiSelect-select": {
-			// 		display: "flex",
-			// 		alignItems: "center",
-			// 		justifyContent: "center",
-			// 	},
-			// 	"& .MuiSelect-icon": {
-			// 		alignSelf: "center",
-			// 	},
-			// }}
 		>
-			{languages.map((lang) => {
-				let parsedLang = lang === "en" ? "gb" : lang;
-
-				if (parsedLang.includes("-")) {
-					parsedLang = parsedLang.split("-")[1].toLowerCase();
-				}
-
-				parsedLang = langMap[parsedLang] || parsedLang;
-
-				const flag = parsedLang ? `fi fi-${parsedLang}` : null;
-
-				return (
-					<MenuItem
-						key={lang}
-						value={lang}
-						sx={{
-							display: "flex",
-							justifyContent: "center",
-							alignItems: "center",
-						}}
-					>
-						<Stack
-							direction="row"
-							spacing={theme.spacing(2)}
-							alignItems="center"
-							justifyContent="center"
-						>
-							<Box
-								component="span"
-								sx={{
-									display: "flex",
-									alignItems: "center",
-								}}
-							>
-								{flag && <span className={flag} />}
-							</Box>
-							<Box
-								component="span"
-								sx={{ textTransform: "uppercase" }}
-							>
-								{lang}
-							</Box>
-						</Stack>
-					</MenuItem>
-				);
-			})}
+			{languages.map((lang) => (
+				<MenuItem
+					key={lang}
+					value={lang}
+				>
+					{languageNames[lang] ?? lang}
+				</MenuItem>
+			))}
 		</Select>
 	);
 };