Use translations in the translation files instead of hard-coded strings for the language names

src/features/i18n/components/LanguageSwitchButton.vue

@@ -19,17 +19,17 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { loadLanguage, LANGUAGES_RTL } from '@/i18n';
 
-const { locale } = useI18n();
+const { t, locale } = useI18n();
 
 const isOpen = ref(false);
 
 const languages = [
-    { code: 'en', label: 'English',    flag: '🇬🇧' },
-    { code: 'de', label: 'Deutsch',    flag: '🇩🇪' },
-    { code: 'fr', label: 'Français',   flag: '🇫🇷' },
-    { code: 'es', label: 'Español',    flag: '🇪🇸' },
-    { code: 'it', label: 'Italiano',   flag: '🇮🇹' },
-    { code: 'pt', label: 'Português',  flag: '🇵🇹' },
+    { code: 'en', flag: '🇬🇧' },
+    { code: 'de', flag: '🇩🇪' },
+    { code: 'fr', flag: '🇫🇷' },
+    { code: 'es', flag: '🇪🇸' },
+    { code: 'it', flag: '🇮🇹' },
+    { code: 'pt', flag: '🇵🇹' },
 ];
 
 const currentLanguage = computed(
@@ -77,7 +77,7 @@ function closeOnBlur() {
                 @click="selectLanguage(lang.code)"
             >
                 <span class="flag">{{ lang.flag }}</span>
-                <span class="lang-label">{{ lang.label }}</span>
+                <span class="lang-label">{{ t(`preferences.locale.languages.${lang.code}`) }}</span>
             </li>
         </ul>
     </div>

src/locales/de.json

@@ -24,6 +24,16 @@
                 "dark": "Zum dunklen Modus wechseln",
                 "auto": "Zum System-Farbschema wechseln"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
     "slogan": "Gebaut zum Suchen."

src/locales/en.json

@@ -24,6 +24,16 @@
                 "dark": "Switch to dark mode",
                 "auto": "Switch to the system color scheme"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
     "slogan": "Built to search."

src/locales/es.json

@@ -24,6 +24,16 @@
                 "dark": "Cambiar al modo oscuro",
                 "auto": "Usar el esquema de color del sistema"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
     "slogan": "Hecho para buscar."

src/locales/fr.json

@@ -24,6 +24,16 @@
                 "dark": "Passer en mode sombre",
                 "auto": "Utiliser le thème système"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
     "slogan": "Conçu pour chercher."

src/locales/it.json

@@ -24,6 +24,16 @@
                 "dark": "Passa alla modalità scura",
                 "auto": "Usa la combinazione colori di sistema"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
     "slogan": "Costruito per cercare."

src/locales/pt.json

@@ -24,6 +24,16 @@
                 "dark": "Mudar para modo escuro",
                 "auto": "Usar esquema de cores do sistema"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
     "slogan": "Feito para pesquisar."