From ef07a19de688e32d9cd1c71a760137c627e276e9 Mon Sep 17 00:00:00 2001
From: Ramel Tecnologia - Rafa Martins
 <146174365+rafacpti23@users.noreply.github.com>
Date: Sun, 14 Jun 2026 09:44:34 -0300
Subject: [PATCH] fix(ui): render country flags via flagcdn SVGs for Windows
 compatibility (#3814)

Windows does not render regional-indicator flag emojis. The LanguageSelector now maps
a flag emoji's regional-indicator code points to an ISO country code and renders the
flag from flagcdn, falling back to the raw emoji span when the glyph is not a
two-letter regional pair or the image fails to load (onError).

Integrated into release/v3.8.25.

Co-authored-by: diegosouzapw <diegosouza.pw@gmail.com>
---
 src/shared/components/LanguageSelector.tsx | 29 ++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/LanguageSelector.tsx b/src/shared/components/LanguageSelector.tsx
index 7786e3fbfa..94d6f70b0c 100644
--- a/src/shared/components/LanguageSelector.tsx
+++ b/src/shared/components/LanguageSelector.tsx
@@ -16,6 +16,31 @@ function persistLocale(code: Locale) {
   }
 }
 
+function CountryFlag({ emoji, alt }: { emoji: string; alt: string }) {
+  const [error, setError] = useState(false);
+
+  if (!emoji) return null;
+
+  const chars = [...emoji];
+  const codePoints = chars.map((c) => c.codePointAt(0) || 0);
+  const isRegional = codePoints.every((cp) => cp >= 127462 && cp <= 127487);
+
+  if (!isRegional || codePoints.length !== 2 || error) {
+    return <span className="text-base leading-none shrink-0">{emoji}</span>;
+  }
+
+  const countryCode = codePoints.map((cp) => String.fromCharCode(cp - 127462 + 97)).join("");
+
+  return (
+    <img
+      src={`https://flagcdn.com/w40/${countryCode}.png`}
+      className="w-4.5 h-3 object-cover rounded-2xs shrink-0 shadow-2xs border border-black/5 dark:border-white/5"
+      alt={alt}
+      onError={() => setError(true)}
+    />
+  );
+}
+
 export default function LanguageSelector() {
   const locale = useLocale();
   const router = useRouter();
@@ -54,7 +79,7 @@ export default function LanguageSelector() {
         className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm font-medium text-text-main hover:bg-surface-hover transition-all border border-transparent hover:border-border"
         title={currentLang.name}
       >
-        <span className="text-base leading-none">{currentLang.flag}</span>
+        <CountryFlag emoji={currentLang.flag} alt={currentLang.name} />
         <span className="text-xs font-semibold tracking-wide">{currentLang.label}</span>
         <span
           className={`material-symbols-outlined text-[14px] text-text-muted transition-transform ${open ? "rotate-180" : ""}`}
@@ -76,7 +101,7 @@ export default function LanguageSelector() {
                   : "text-text-main hover:bg-surface-hover"
               }`}
             >
-              <span className="text-base leading-none">{lang.flag}</span>
+              <CountryFlag emoji={lang.flag} alt={lang.name} />
               <span className="flex-1 text-start">{lang.name}</span>
               {lang.code === locale && (
                 <span className="material-symbols-outlined text-[16px] text-primary">check</span>