From abbfd0ad9d2611cf047b2331c34f7da2a4cbc437 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 15:20:08 +0200
Subject: [PATCH] Include flags in the language name translations instead of
 hard-coding it in the language switch button component

---
 .../i18n/components/LanguageSwitchButton.vue  | 33 +++++--------------
 src/i18n.js                                   |  2 +-
 src/locales/de.json                           | 12 +++----
 src/locales/en.json                           | 12 +++----
 src/locales/es.json                           | 12 +++----
 src/locales/fr.json                           | 12 +++----
 src/locales/it.json                           | 12 +++----
 src/locales/pt.json                           | 12 +++----
 8 files changed, 46 insertions(+), 61 deletions(-)

diff --git a/src/features/i18n/components/LanguageSwitchButton.vue b/src/features/i18n/components/LanguageSwitchButton.vue
index 7977fbc..7e30294 100644
--- a/src/features/i18n/components/LanguageSwitchButton.vue
+++ b/src/features/i18n/components/LanguageSwitchButton.vue
@@ -15,28 +15,15 @@ limitations under the License.
 -->
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { loadLanguage, LANGUAGES_RTL } from '@/i18n';
+import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
 
 const { t, locale } = useI18n();
 
 const isOpen = ref(false);
 const languageDropdown = ref(null);
 
-const languages = [
-    { code: 'en', flag: '🇬🇧' },
-    { code: 'de', flag: '🇩🇪' },
-    { code: 'fr', flag: '🇫🇷' },
-    { code: 'es', flag: '🇪🇸' },
-    { code: 'it', flag: '🇮🇹' },
-    { code: 'pt', flag: '🇵🇹' },
-];
-
-const currentLanguage = computed(
-    () => languages.find(l => l.code === locale.value) ?? languages[0]
-);
-
 async function selectLanguage(code) {
     await loadLanguage(code);
     localStorage.setItem('locale', code);
@@ -76,22 +63,20 @@ const open = function () {
             :aria-expanded="isOpen"
             aria-haspopup="listbox"
         >
-            <span class="flag">{{ currentLanguage.flag }}</span>
-            <span class="lang-code">{{ currentLanguage.code.toUpperCase() }}</span>
+            <span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
             <span class="chevron" :class="{ open: isOpen }">▾</span>
         </button>
 
         <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
             <li
-                v-for="lang in languages"
-                :key="lang.code"
+                v-for="lang in SUPPORTED_LANGUAGES"
+                :key="lang"
                 role="option"
-                :aria-selected="lang.code === locale"
-                :class="{ active: lang.code === locale }"
-                @click="selectLanguage(lang.code)"
+                :aria-selected="lang === locale"
+                :class="{ active: lang === locale }"
+                @click="selectLanguage(lang)"
             >
-                <span class="flag">{{ lang.flag }}</span>
-                <span class="lang-label">{{ t(`preferences.locale.languages.${lang.code}`) }}</span>
+                <span class="lang-label">{{ t(`preferences.locale.languages.${lang}`) }}</span>
             </li>
         </ul>
     </div>
diff --git a/src/i18n.js b/src/i18n.js
index d9fb1b3..a57766b 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -23,7 +23,7 @@ export const fallbackLocale = 'en';
 export const LANGUAGES_RTL = [
     'ar'
 ];
-const SUPPORTED_LANGUAGES = [
+export const SUPPORTED_LANGUAGES = [
     'en',
     'de',
     'fr',
diff --git a/src/locales/de.json b/src/locales/de.json
index 2474905..954142a 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -27,12 +27,12 @@
         },
         "locale": {
             "languages": {
-                "en": "English",
-                "de": "Deutsch",
-                "fr": "Français",
-                "es": "Español",
-                "it": "Italiano",
-                "pt": "Português"
+                "en": "🇬🇧 English",
+                "de": "🇩🇪 Deutsch",
+                "fr": "🇫🇷 Français",
+                "es": "🇪🇸 Español",
+                "it": "🇮🇹 Italiano",
+                "pt": "🇵🇹 Português"
             }
         }
     },
diff --git a/src/locales/en.json b/src/locales/en.json
index a55a928..0467efd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -27,12 +27,12 @@
         },
         "locale": {
             "languages": {
-                "en": "English",
-                "de": "Deutsch",
-                "fr": "Français",
-                "es": "Español",
-                "it": "Italiano",
-                "pt": "Português"
+                "en": "🇬🇧 English",
+                "de": "🇩🇪 Deutsch",
+                "fr": "🇫🇷 Français",
+                "es": "🇪🇸 Español",
+                "it": "🇮🇹 Italiano",
+                "pt": "🇵🇹 Português"
             }
         }
     },
diff --git a/src/locales/es.json b/src/locales/es.json
index c5775bd..c568614 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -27,12 +27,12 @@
         },
         "locale": {
             "languages": {
-                "en": "English",
-                "de": "Deutsch",
-                "fr": "Français",
-                "es": "Español",
-                "it": "Italiano",
-                "pt": "Português"
+                "en": "🇬🇧 English",
+                "de": "🇩🇪 Deutsch",
+                "fr": "🇫🇷 Français",
+                "es": "🇪🇸 Español",
+                "it": "🇮🇹 Italiano",
+                "pt": "🇵🇹 Português"
             }
         }
     },
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 050eeee..d92e419 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -27,12 +27,12 @@
         },
         "locale": {
             "languages": {
-                "en": "English",
-                "de": "Deutsch",
-                "fr": "Français",
-                "es": "Español",
-                "it": "Italiano",
-                "pt": "Português"
+                "en": "🇬🇧 English",
+                "de": "🇩🇪 Deutsch",
+                "fr": "🇫🇷 Français",
+                "es": "🇪🇸 Español",
+                "it": "🇮🇹 Italiano",
+                "pt": "🇵🇹 Português"
             }
         }
     },
diff --git a/src/locales/it.json b/src/locales/it.json
index 2b6d8c1..6373a98 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -27,12 +27,12 @@
         },
         "locale": {
             "languages": {
-                "en": "English",
-                "de": "Deutsch",
-                "fr": "Français",
-                "es": "Español",
-                "it": "Italiano",
-                "pt": "Português"
+                "en": "🇬🇧 English",
+                "de": "🇩🇪 Deutsch",
+                "fr": "🇫🇷 Français",
+                "es": "🇪🇸 Español",
+                "it": "🇮🇹 Italiano",
+                "pt": "🇵🇹 Português"
             }
         }
     },
diff --git a/src/locales/pt.json b/src/locales/pt.json
index a5a03d4..ddda6dd 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -27,12 +27,12 @@
         },
         "locale": {
             "languages": {
-                "en": "English",
-                "de": "Deutsch",
-                "fr": "Français",
-                "es": "Español",
-                "it": "Italiano",
-                "pt": "Português"
+                "en": "🇬🇧 English",
+                "de": "🇩🇪 Deutsch",
+                "fr": "🇫🇷 Français",
+                "es": "🇪🇸 Español",
+                "it": "🇮🇹 Italiano",
+                "pt": "🇵🇹 Português"
             }
         }
     },