From 315dd06f3fb9bf504758e4ed3283740faa2c5790 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Mon, 9 Feb 2026 21:36:01 +0100
Subject: [PATCH] Load flags from SVG files with aliases and fallback; add SVG
 flags for missing languages (globe, ja, ko, id, fa, he, az, hy, am, ms, vi,
 th, tl, sw, uz, ta, te); build verified

---
 src/App.vue                         | 29 +++++++++++++++++++++++++++--
 src/assets/flags/am.svg             |  5 +++++
 src/assets/flags/az.svg             |  5 +++++
 src/assets/flags/fa.svg             |  5 +++++
 src/assets/flags/globe.svg          |  5 +++++
 src/assets/flags/he.svg             |  6 ++++++
 src/assets/flags/hy.svg             |  5 +++++
 src/assets/flags/id.svg             |  4 ++++
 src/assets/flags/ja.svg             |  4 ++++
 src/assets/flags/ko.svg             |  5 +++++
 src/assets/flags/ms.svg             |  4 ++++
 src/assets/flags/sw.svg             |  5 +++++
 src/assets/flags/ta.svg             |  6 ++++++
 src/assets/flags/te.svg             |  6 ++++++
 src/assets/flags/th.svg             |  7 +++++++
 src/assets/flags/tl.svg             |  5 +++++
 src/assets/flags/tl_placeholder.svg |  4 ++++
 src/assets/flags/uz.svg             |  5 +++++
 src/assets/flags/vi.svg             |  4 ++++
 19 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/flags/am.svg
 create mode 100644 src/assets/flags/az.svg
 create mode 100644 src/assets/flags/fa.svg
 create mode 100644 src/assets/flags/globe.svg
 create mode 100644 src/assets/flags/he.svg
 create mode 100644 src/assets/flags/hy.svg
 create mode 100644 src/assets/flags/id.svg
 create mode 100644 src/assets/flags/ja.svg
 create mode 100644 src/assets/flags/ko.svg
 create mode 100644 src/assets/flags/ms.svg
 create mode 100644 src/assets/flags/sw.svg
 create mode 100644 src/assets/flags/ta.svg
 create mode 100644 src/assets/flags/te.svg
 create mode 100644 src/assets/flags/th.svg
 create mode 100644 src/assets/flags/tl.svg
 create mode 100644 src/assets/flags/tl_placeholder.svg
 create mode 100644 src/assets/flags/uz.svg
 create mode 100644 src/assets/flags/vi.svg

diff --git a/src/App.vue b/src/App.vue
index 32d30d9..d63a038 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,25 @@ const isLangOpen = ref(false);
 const langMenuRef = ref(null);
 let displayModeMedia = null;
 let prefersColorSchemeMedia = null;
+const flagModules = import.meta.glob('./assets/flags/*.svg', { eager: true, as: 'url' });
+const flagMap = Object.fromEntries(
+  Object.entries(flagModules).map(([path, url]) => [path.split('/').pop().replace('.svg', ''), url])
+);
+const flagAliases = {
+  'pt-br': 'pt',
+  'pt-pt': 'pt',
+  'fr-ca': 'fr',
+  'nl-be': 'nl',
+  'es-es': 'es',
+  'es-419': 'es',
+  'zh-hans': 'zh',
+  'zh-hant': 'zh'
+};
+const getFlagUrl = (code) => {
+  const base = flagAliases[code] || code;
+  return flagMap[base] || flagMap['globe'] || null;
+};
+
 const languageFlags = {
   en: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#b22234"/><rect y="2" width="24" height="2" fill="#fff"/><rect y="6" width="24" height="2" fill="#fff"/><rect y="10" width="24" height="2" fill="#fff"/><rect y="14" width="24" height="2" fill="#fff"/><rect width="10" height="8" fill="#3c3b6e"/></svg>',
   zh: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#de2910"/><circle cx="6" cy="5" r="2" fill="#ffde00"/></svg>',
@@ -229,7 +248,10 @@ onUnmounted(() => {
             :aria-expanded="isLangOpen"
             @click="isLangOpen = !isLangOpen"
           >
-            <span class="lang-flag" v-html="languageFlags[locale]"></span>
+            <span class="lang-flag">
+              <img v-if="getFlagUrl(locale)" :src="getFlagUrl(locale)" alt="" />
+              <span v-else v-html="languageFlags[locale]"></span>
+            </span>
           </button>
           <div v-if="isLangOpen" class="lang-menu">
             <div class="lang-search">
@@ -249,7 +271,10 @@ onUnmounted(() => {
               type="button"
               @click="selectLanguage(lang.code)"
             >
-              <span class="lang-flag" v-html="languageFlags[lang.code]"></span>
+              <span class="lang-flag">
+                <img v-if="getFlagUrl(lang.code)" :src="getFlagUrl(lang.code)" alt="" />
+                <span v-else v-html="languageFlags[lang.code]"></span>
+              </span>
               <span class="lang-name">{{ lang.label }}</span>
             </button>
           </div>
diff --git a/src/assets/flags/am.svg b/src/assets/flags/am.svg
new file mode 100644
index 0000000..91517e1
--- /dev/null
+++ b/src/assets/flags/am.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#ed1c24"/>
+  <rect y="5.33" width="24" height="5.33" fill="#fecd00"/>
+  <rect y="10.67" width="24" height="5.33" fill="#008000"/>
+</svg>
diff --git a/src/assets/flags/az.svg b/src/assets/flags/az.svg
new file mode 100644
index 0000000..572cba3
--- /dev/null
+++ b/src/assets/flags/az.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#00b5e2"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ef3340"/>
+  <rect y="10.67" width="24" height="5.33" fill="#509e2f"/>
+</svg>
diff --git a/src/assets/flags/fa.svg b/src/assets/flags/fa.svg
new file mode 100644
index 0000000..c5468b1
--- /dev/null
+++ b/src/assets/flags/fa.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#239f40"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#da0000"/>
+</svg>
diff --git a/src/assets/flags/globe.svg b/src/assets/flags/globe.svg
new file mode 100644
index 0000000..0f0e1cd
--- /dev/null
+++ b/src/assets/flags/globe.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#1e90ff"/>
+  <circle cx="12" cy="8" r="5" fill="#ffffff"/>
+  <path d="M12 3 v10 M7 8 h10" stroke="#1e90ff" stroke-width="1"/>
+</svg>
diff --git a/src/assets/flags/he.svg b/src/assets/flags/he.svg
new file mode 100644
index 0000000..2aa36e1
--- /dev/null
+++ b/src/assets/flags/he.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#ffffff"/>
+  <rect y="2" width="24" height="2" fill="#0038b8"/>
+  <rect y="12" width="24" height="2" fill="#0038b8"/>
+  <polygon points="12,5 10,9 14,9" fill="#0038b8"/>
+</svg>
diff --git a/src/assets/flags/hy.svg b/src/assets/flags/hy.svg
new file mode 100644
index 0000000..b940a59
--- /dev/null
+++ b/src/assets/flags/hy.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#d90012"/>
+  <rect y="5.33" width="24" height="5.33" fill="#0033a0"/>
+  <rect y="10.67" width="24" height="5.33" fill="#f2a800"/>
+</svg>
diff --git a/src/assets/flags/id.svg b/src/assets/flags/id.svg
new file mode 100644
index 0000000..35fba1c
--- /dev/null
+++ b/src/assets/flags/id.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="8" fill="#ff0000"/>
+  <rect y="8" width="24" height="8" fill="#ffffff"/>
+</svg>
diff --git a/src/assets/flags/ja.svg b/src/assets/flags/ja.svg
new file mode 100644
index 0000000..efbbe56
--- /dev/null
+++ b/src/assets/flags/ja.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#ffffff"/>
+  <circle cx="12" cy="8" r="4" fill="#bc002d"/>
+</svg>
diff --git a/src/assets/flags/ko.svg b/src/assets/flags/ko.svg
new file mode 100644
index 0000000..e30eb59
--- /dev/null
+++ b/src/assets/flags/ko.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#ffffff"/>
+  <circle cx="12" cy="8" r="3.5" fill="#003478"/>
+  <circle cx="12" cy="8" r="2.2" fill="#c60c30"/>
+</svg>
diff --git a/src/assets/flags/ms.svg b/src/assets/flags/ms.svg
new file mode 100644
index 0000000..35fba1c
--- /dev/null
+++ b/src/assets/flags/ms.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="8" fill="#ff0000"/>
+  <rect y="8" width="24" height="8" fill="#ffffff"/>
+</svg>
diff --git a/src/assets/flags/sw.svg b/src/assets/flags/sw.svg
new file mode 100644
index 0000000..6ee1a64
--- /dev/null
+++ b/src/assets/flags/sw.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#3a75c4"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffde00"/>
+  <rect y="10.67" width="24" height="5.33" fill="#3a75c4"/>
+</svg>
diff --git a/src/assets/flags/ta.svg b/src/assets/flags/ta.svg
new file mode 100644
index 0000000..710cec1
--- /dev/null
+++ b/src/assets/flags/ta.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#ff9933"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#128807"/>
+  <circle cx="12" cy="8" r="2" fill="#000080"/>
+</svg>
diff --git a/src/assets/flags/te.svg b/src/assets/flags/te.svg
new file mode 100644
index 0000000..710cec1
--- /dev/null
+++ b/src/assets/flags/te.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#ff9933"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#128807"/>
+  <circle cx="12" cy="8" r="2" fill="#000080"/>
+</svg>
diff --git a/src/assets/flags/th.svg b/src/assets/flags/th.svg
new file mode 100644
index 0000000..00a4dec
--- /dev/null
+++ b/src/assets/flags/th.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="3" fill="#ff0000"/>
+  <rect y="3" width="24" height="2" fill="#ffffff"/>
+  <rect y="5" width="24" height="6" fill="#2e2a8c"/>
+  <rect y="11" width="24" height="2" fill="#ffffff"/>
+  <rect y="13" width="24" height="3" fill="#ff0000"/>
+</svg>
diff --git a/src/assets/flags/tl.svg b/src/assets/flags/tl.svg
new file mode 100644
index 0000000..31125a1
--- /dev/null
+++ b/src/assets/flags/tl.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="8" fill="#0038a8"/>
+  <rect y="8" width="24" height="8" fill="#ce1126"/>
+  <polygon points="0,8 8,0 8,16" fill="#fcd116"/>
+</svg>
diff --git a/src/assets/flags/tl_placeholder.svg b/src/assets/flags/tl_placeholder.svg
new file mode 100644
index 0000000..7c360aa
--- /dev/null
+++ b/src/assets/flags/tl_placeholder.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#cccccc"/>
+  <text x="12" y="10" font-size="6" text-anchor="middle" fill="#666">TL</text>
+</svg>
diff --git a/src/assets/flags/uz.svg b/src/assets/flags/uz.svg
new file mode 100644
index 0000000..2e15f20
--- /dev/null
+++ b/src/assets/flags/uz.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#1eb53a"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#0099b5"/>
+</svg>
diff --git a/src/assets/flags/vi.svg b/src/assets/flags/vi.svg
new file mode 100644
index 0000000..c7252f4
--- /dev/null
+++ b/src/assets/flags/vi.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#da251d"/>
+  <polygon points="12,4.5 13.2,8 16.9,8 13.9,10 15.1,13.5 12,11.5 8.9,13.5 10.1,10 7.1,8 10.8,8" fill="#ffdd00"/>
+</svg>