Remove country code flags in language selector

client/package-lock.json

@@ -23,7 +23,6 @@
         "@yudiel/react-qr-scanner": "^1.2.10",
         "antd": "^5.24.3",
         "axios": "^1.8.3",
-        "flag-icons": "^7.3.2",
         "html-to-image": "^1.11.13",
         "i18next": "^24.2.3",
         "i18next-browser-languagedetector": "^8.0.4",
@@ -5330,11 +5329,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/flag-icons": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.3.2.tgz",
-      "integrity": "sha512-QkaZ6Zvai8LIjx+UNAHUJ5Dhz9OLZpBDwCRWxF6YErxIcR16jTkIFm3bFu54EkvKQy4+wicW+Gm7/0631wVQyQ=="
-    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",

client/package.json

@@ -22,7 +22,6 @@
     "@yudiel/react-qr-scanner": "^1.2.10",
     "antd": "^5.24.3",
     "axios": "^1.8.3",
-    "flag-icons": "^7.3.2",
     "html-to-image": "^1.11.13",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.0.4",

client/src/components/header/index.tsx

@@ -7,7 +7,6 @@ import { ColorModeContext } from "../../contexts/color-mode";
 
 import { languages } from "../../i18n";
 import QRCodeScannerModal from "../qrCodeScanner";
-import "/node_modules/flag-icons/css/flag-icons.min.css";
 
 const { useToken } = theme;
 
@@ -22,7 +21,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) =>
   const menuItems: MenuProps["items"] = [...(Object.keys(languages) || [])].sort().map((lang: string) => ({
     key: lang,
     onClick: () => changeLanguage(lang),
-    icon: <span className={"fi fi-" + languages[lang].countryCode} style={{ marginRight: 8 }} />,
     label: languages[lang].name,
   }));
 
@@ -52,7 +50,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) =>
         >
           <Button type="text">
             <Space>
-              <span className={"fi fi-" + languages[currentLocale ?? "en"].countryCode} />
               {languages[currentLocale ?? "en"].name}
               <DownOutlined />
             </Space>

client/src/i18n.ts

@@ -7,7 +7,6 @@ import { getBasePath } from "./utils/url";
 
 interface Language {
   name: string;
-  countryCode: string;
   fullCode: string;
   djs: () => Promise<ILocale>;
 }
@@ -16,128 +15,107 @@ interface Language {
  * List of languages to load
  * The key of each object is the folder name in the locales dir.
  * name: Name of the language in the list
- * countryCode: Country code of the country's flag to display for this language
  * fullCode: Full language code, used for Ant Design's locale
  * djs: Function to load the dayjs locale, see https://github.com/iamkun/dayjs/tree/dev/src/locale for list of locales
  */
 export const languages: { [key: string]: Language } = {
   ["en"]: {
     name: "English",
-    countryCode: "gb",
     fullCode: "en-GB",
     djs: () => import("dayjs/locale/en"),
   },
   ["sv"]: {
     name: "Svenska",
-    countryCode: "se",
     fullCode: "sv-SE",
     djs: () => import("dayjs/locale/sv"),
   },
   ["de"]: {
     name: "Deutsch",
-    countryCode: "de",
     fullCode: "de-DE",
     djs: () => import("dayjs/locale/de"),
   },
   ["es"]: {
     name: "Español",
-    countryCode: "es",
     fullCode: "es-ES",
     djs: () => import("dayjs/locale/es"),
   },
   ["zh"]: {
     name: "简体中文",
-    countryCode: "cn",
     fullCode: "zh-CN",
     djs: () => import("dayjs/locale/zh-cn"),
   },
   ["zh-Hant"]: {
     name: "繁體中文",
-    countryCode: "cn",
     fullCode: "zh-TW",
     djs: () => import("dayjs/locale/zh-hk"),
   },
   ["pl"]: {
     name: "Polski",
-    countryCode: "pl",
     fullCode: "pl-PL",
     djs: () => import("dayjs/locale/pl"),
   },
   ["ru"]: {
     name: "Русский",
-    countryCode: "ru",
     fullCode: "ru-RU",
     djs: () => import("dayjs/locale/ru"),
   },
   ["cs"]: {
     name: "Česky",
-    countryCode: "cz",
     fullCode: "cs-CZ",
     djs: () => import("dayjs/locale/cs"),
   },
   ["nb-NO"]: {
     name: "Norsk bokmål",
-    countryCode: "no",
     fullCode: "nb-NO",
     djs: () => import("dayjs/locale/nb"),
   },
   ["nl"]: {
     name: "Nederlands",
-    countryCode: "nl",
     fullCode: "nl-NL",
     djs: () => import("dayjs/locale/nl"),
   },
   ["fr"]: {
     name: "Français",
-    countryCode: "fr",
     fullCode: "fr-FR",
     djs: () => import("dayjs/locale/fr"),
   },
   ["hu"]: {
     name: "Magyar",
-    countryCode: "hu",
     fullCode: "hu-HU",
     djs: () => import("dayjs/locale/hu"),
   },
   ["it"]: {
     name: "Italiano",
-    countryCode: "it",
     fullCode: "it-IT",
     djs: () => import("dayjs/locale/it"),
   },
   ["uk"]: {
     name: "Українська",
-    countryCode: "ua",
     fullCode: "uk-UA",
     djs: () => import("dayjs/locale/uk"),
   },
   ["el"]: {
     name: "Ελληνικά",
-    countryCode: "gr",
     fullCode: "el-GR",
     djs: () => import("dayjs/locale/el"),
   },
   ["da"]: {
     name: "Dansk",
-    countryCode: "dk",
     fullCode: "da-DK",
     djs: () => import("dayjs/locale/da"),
   },
   ["pt"]: {
     name: "Português",
-    countryCode: "pt",
     fullCode: "pt-PT",
     djs: () => import("dayjs/locale/pt"),
   },
   ["fa"]: {
     name: "فارسی",
-    countryCode: "ir",
     fullCode: "fa-IR",
     djs: () => import("dayjs/locale/fa"),
   },
   ["ro"]: {
     name: "Român",
-    countryCode: "ro",
     fullCode: "ro-RO",
     djs: () => import("dayjs/locale/ro"),
   },