fix(dashboard): remove country flags from language picker (#29997)

Closes #29750. Reporter flagged that 繁體中文 displayed the TW flag
instead of the PRC flag. Rather than picking a side, drop the
language-flag pairings entirely — languages aren't countries
(English ≠ GB, Portuguese ≠ PT, Mandarin variants ≠ any single
jurisdiction), and endonyms are unambiguous.

- LOCALE_META: strip flagCountryCode field
- LanguageSwitcher: remove LocaleFlagIcon component + both call sites
- main.tsx: drop flag-icons CSS import
- package.json: uninstall flag-icons

web/src/components/LanguageSwitcher.tsx

@@ -9,15 +9,16 @@ import type { Locale } from "@/i18n";
 import { cn } from "@/lib/utils";
 
 /**
- * Language picker — shows the current language's flag + endonym, opens a
- * dropdown of all supported locales when clicked.  Persists choice to
- * localStorage via the I18n context.
+ * Language picker — shows the current language's endonym, opens a dropdown
+ * of all supported locales when clicked.  Persists choice to localStorage via
+ * the I18n context.
  *
  * Replaces the older two-state EN↔ZH toggle now that we ship 16 locales
  * (en, zh, zh-hant, ja, de, es, fr, tr, uk, af, ko, it, ga, pt, ru, hu).
  *
- * Locale markers use lipis/flag-icons (SVG sprites) instead of emoji so flags
- * render consistently across platforms.
+ * No country flags by design — languages aren't countries, and flag pairings
+ * inevitably create political mismappings (e.g. Mandarin variants ≠ any single
+ * jurisdiction, English ≠ GB, Portuguese ≠ PT). Endonyms are unambiguous.
  *
  * When placed at the bottom of the sidebar (next to ThemeSwitcher), pass
  * `dropUp` so the list opens above the trigger and avoids clipping below the
@@ -71,7 +72,6 @@ export function LanguageSwitcher({ dropUp = false }: LanguageSwitcherProps) {
         className="px-2 py-1 normal-case tracking-normal font-normal text-xs text-muted-foreground hover:text-foreground"
       >
         <span className="inline-flex items-center gap-1.5">
-          <LocaleFlagIcon countryCode={current.flagCountryCode} />
           <Typography
             mondwest
             className="hidden sm:inline tracking-wide uppercase text-[0.65rem]"
@@ -146,8 +146,6 @@ function LanguageSwitcherOptions({
             role="option"
             type="button"
           >
-            <LocaleFlagIcon countryCode={meta.flagCountryCode} />
-
             <span className="truncate">{meta.name}</span>
 
             {selected && <span className="ml-auto text-xs">✓</span>}
@@ -158,15 +156,6 @@ function LanguageSwitcherOptions({
   );
 }
 
-function LocaleFlagIcon({ countryCode }: LocaleFlagIconProps) {
-  return (
-    <span
-      aria-hidden
-      className={cn("fi fis shrink-0 text-base leading-none", `fi-${countryCode}`)}
-    />
-  );
-}
-
 interface LanguageSwitcherOptionsProps {
   allLocales: Array<[Locale, (typeof LOCALE_META)[Locale]]>;
   locale: Locale;
@@ -177,7 +166,3 @@ interface LanguageSwitcherOptionsProps {
 interface LanguageSwitcherProps {
   dropUp?: boolean;
 }
-
-interface LocaleFlagIconProps {
-  countryCode: string;
-}

web/src/i18n/context.tsx

@@ -37,27 +37,31 @@ const TRANSLATIONS: Record<Locale, Translations> = {
 };
 
 // Display metadata for the language picker — endonym (native name) so users
-// recognize their language even if they don't speak the current UI language,
-// plus a flag-icons sprite (ISO 3166-1 alpha-2) for visual scanning.
+// recognize their language even if they don't speak the current UI language.
 // Exposed as a constant so the LanguageSwitcher and any future settings page
 // can share the same list.
-export const LOCALE_META: Record<Locale, { name: string; flagCountryCode: string }> = {
-  en: { name: "English", flagCountryCode: "gb" },
-  zh: { name: "简体中文", flagCountryCode: "cn" },
-  "zh-hant": { name: "繁體中文", flagCountryCode: "tw" },
-  ja: { name: "日本語", flagCountryCode: "jp" },
-  de: { name: "Deutsch", flagCountryCode: "de" },
-  es: { name: "Español", flagCountryCode: "es" },
-  fr: { name: "Français", flagCountryCode: "fr" },
-  tr: { name: "Türkçe", flagCountryCode: "tr" },
-  uk: { name: "Українська", flagCountryCode: "ua" },
-  af: { name: "Afrikaans", flagCountryCode: "za" },
-  ko: { name: "한국어", flagCountryCode: "kr" },
-  it: { name: "Italiano", flagCountryCode: "it" },
-  ga: { name: "Gaeilge", flagCountryCode: "ie" },
-  pt: { name: "Português", flagCountryCode: "pt" },
-  ru: { name: "Русский", flagCountryCode: "ru" },
-  hu: { name: "Magyar", flagCountryCode: "hu" },
+//
+// We intentionally do NOT pair locales with country flags. Languages are not
+// countries (English ≠ GB, Portuguese ≠ PT, Spanish ≠ ES, Chinese variants ≠
+// any single jurisdiction). Endonyms are unambiguous and avoid the political
+// mismapping that flag pairings inevitably create.
+export const LOCALE_META: Record<Locale, { name: string }> = {
+  en: { name: "English" },
+  zh: { name: "简体中文" },
+  "zh-hant": { name: "繁體中文" },
+  ja: { name: "日本語" },
+  de: { name: "Deutsch" },
+  es: { name: "Español" },
+  fr: { name: "Français" },
+  tr: { name: "Türkçe" },
+  uk: { name: "Українська" },
+  af: { name: "Afrikaans" },
+  ko: { name: "한국어" },
+  it: { name: "Italiano" },
+  ga: { name: "Gaeilge" },
+  pt: { name: "Português" },
+  ru: { name: "Русский" },
+  hu: { name: "Magyar" },
 };
 
 const SUPPORTED_LOCALES = Object.keys(TRANSLATIONS) as Locale[];

web/src/main.tsx

@@ -1,6 +1,5 @@
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
-import "flag-icons/css/flag-icons.min.css";
 import "./index.css";
 import App from "./App";
 import { SystemActionsProvider } from "./contexts/SystemActions";