fix: fixes default fallback not working. fixes #3154 (#3156)

Author: amir20

assets/main.ts

@@ -3,8 +3,8 @@ import { createApp, App as VueApp } from "vue";
 import App from "./App.vue";
 
 const app = createApp(App);
-Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach(
-  (i) => i.install?.(app),
+Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach((i) =>
+  i.install?.(app),
 );
 
 app.mount("#app");

assets/modules/i18n.ts

@@ -17,30 +17,40 @@ function setI18nLanguage(lang: Locale) {
   return lang;
 }
 
+const i18n = createI18n({
+  legacy: false,
+  locale: "",
+  fallbackLocale: "en",
+  messages: {},
+});
+
 const loadedLanguages: string[] = [];
-async function loadLanguage(lang: string): Promise<Locale> {
-  if (i18n.global.locale.value === lang) return setI18nLanguage(lang);
-  if (loadedLanguages.includes(lang)) return setI18nLanguage(lang);
+async function loadLanguage(lang: string, setLang = true): Promise<Locale> {
+  if (setLang) {
+    if (i18n.global.locale.value === lang) return setI18nLanguage(lang);
+    if (loadedLanguages.includes(lang)) return setI18nLanguage(lang);
+  }
 
   const messages = await localesMap[lang]();
   i18n.global.setLocaleMessage(lang, messages.default);
   loadedLanguages.push(lang);
   return setI18nLanguage(lang);
 }
 
-const i18n = createI18n({
-  legacy: false,
-  locale: "",
-  messages: {},
-});
+await loadLanguage("en", false); // load default language
 
-watchEffect(() => {
-  loadLanguage(
+const userLocale = computed(
+  () =>
     locale.value ||
-      [navigator.language, navigator.language.slice(0, 2)].find((l) => availableLocales.includes(l)) ||
-      "en",
-  );
-});
+    [navigator.language, navigator.language.slice(0, 2)].find((l) => availableLocales.includes(l)) ||
+    "en",
+);
+
+if (userLocale.value !== "en") {
+  await loadLanguage(userLocale.value);
+}
+
+watchEffect(() => loadLanguage(userLocale.value));
 
 export const install = (app: App) => app.use(i18n);
 export default i18n;

locales/da.yml

@@ -13,6 +13,7 @@ label:
   running-containers: Kørende Containere
   all-containers: Alle Containere
   host: Vært
+  hosts: Værter
   password: Kodeord
   username: Brugernavn
   container-name: Container Navn

locales/de.yml

@@ -6,6 +6,7 @@ toolbar:
   show-all: Zeige alle Streams
 label:
   containers: Container
+  container: Keine Container | 1 Container | {count} Container
   running-containers: Laufende Container
   all-containers: Alle Container
   total-containers: Gesamte Container
@@ -15,6 +16,7 @@ label:
   dozzle-version: Dozzle Version
   all: Alle
   host: Host
+  hosts: Hosts
   password: Passwort
   username: Benutzername
   container-name: Container Name
@@ -26,6 +28,8 @@ label:
 tooltip:
   search: Suche Container (⌘ + k, ⌃k)
   pin-column: Als Spalte anheften
+  merge-services: Services zusammenführen
+  merge-containers: Container zusammenführen
 error:
   page-not-found: Diese Seite existiert nicht.
   invalid-auth: Benutzername und Passwort sind ungültig.
@@ -69,6 +73,7 @@ settings:
   small-scrollbars: Verwende kleinere Scrollbars
   show-timesamps: Zeige Zeitstempel
   soft-wrap: Zeilenumbruch
+  datetime-format: Datums- und Zeitformat
   12-24-format: >-
     Standardmäßig verwendet Dozzle die Spracheinstellungen des Browsers, um die
     Zeit anzuzeigen. Du kannst die Zeit auf 12 oder 24 Stunden umstellen.

locales/es.yml

@@ -9,6 +9,7 @@ toolbar:
   restart: Reiniciar
 label:
   containers: Contenedores
+  container: No contenedores | 1 contenedor | {count} contenedores
   running-containers: Contenedores en ejecución
   all-containers: Todos los contenedores
   total-containers: Contenedores Totales
@@ -18,6 +19,7 @@ label:
   dozzle-version: Versión de Dozzle
   all: Todo
   host: Host
+  hosts: Hosts
   password: Contraseña
   username: Nombre de usuario
   container-name: Nombre del contenedor

locales/fr.yml

@@ -13,6 +13,7 @@ label:
   running-containers: Conteneurs en execution
   all-containers: Tous les conteneurs
   host: Hôte
+  hosts: Hôtes
   password: Mot de passe
   username: Nom d'utilisateur
   container-name: Nom du conteneur

locales/it.yml

@@ -18,6 +18,7 @@ label:
   dozzle-version: Versione Dozzle
   all: Tutto
   host: Host
+  hosts: Hosts
   password: Password
   username: Username
   container-name: Nome Container

locales/pl.yml

@@ -13,6 +13,7 @@ label:
   running-containers: Działające kontenery
   all-containers: Wszystkie kontenery
   host: Host
+  hosts: Hosty
   password: Hasło
   username: Nazwa użytkownika
   container-name: Nazwa kontenera
@@ -29,33 +30,33 @@ tooltip:
 error:
   page-not-found: Ta strona nie istnieje
   invalid-auth: Nazwa użytkownika lub hasło są niepoprawne
-  logs-skipped: Pominiętych wpisów {total} 
+  logs-skipped: Pominiętych wpisów {total}
   container-not-found: Kontener nie został znaleziony
   events-stream:
     title: Niespodziewany błąd
     message: >-
       Dozzle nie był wstanie połączyć się z API. Sprawdź ustawienia sieciowe.
-      Jeżeli korzysasz z reverse proxy, upewnij się że jest poprawnie skonfigurowane. 
+      Jeżeli korzysasz z reverse proxy, upewnij się że jest poprawnie skonfigurowane.
   events-timeout:
     title: Coś jest nie tak
     message: >-
-      Przekroczono limit czasu w trakcie połączenia do API. Sprawdź ustawienia sieciowe.  
+      Przekroczono limit czasu w trakcie połączenia do API. Sprawdź ustawienia sieciowe.
 alert:
   redirected:
     title: Przekierowywanie do nowego kontenera
     message: Dozzle automatycznie przekierował do nowego kontenera {containerId}.
   similar-container-found:
     title: Podobny kontener został znaleziony
     message: >-
-      Dozzle znalazł podobny kontener {containerId} który działa na tym samym 
+      Dozzle znalazł podobny kontener {containerId} który działa na tym samym
       hoście i przekieruje Cię na niego automatycznie jeżeli nie klikniesz 'Anuluj'
 title:
   page-not-found: Strona nie została znaleziona
   login: Wymagane uwierzytelnienie
   dashboard: 1 kontener | {count} kontenerów
   settings: Ustawienia
 button:
-  logout: Wyloguj się 
+  logout: Wyloguj się
   login: Zaloguj się
   settings: Ustawienia
 placeholder:

locales/pr.yml

@@ -15,6 +15,7 @@ label:
   dozzle-version: Versão Dozzle
   all: Tudo
   host: Anfitrião
+  hosts: Anfitriões
   password: Senha
   username: Nome de usuário
   container-name: Nome do contentor
@@ -71,6 +72,7 @@ settings:
   font-size: Tamanho de letra a utilizar para os registos
   color-scheme: Esquema de cores
   options: Opções
+  datetime-format: Formato de data e hora
   show-stopped-containers: Mostrar contentores parados
   about: Acerca de
   search: Habilitar a pesquisa com Dozzle usando

locales/ru.yml

@@ -15,6 +15,7 @@ label:
   dozzle-version: Версия Dozzle
   all: Все
   host: Хост
+  hosts: Хосты
   password: Пароль
   username: Имя пользователя
   container-name: Имя контейнера
@@ -71,6 +72,7 @@ settings:
   color-scheme: Цветовая схема
   options: Опции
   show-stopped-containers: Показывать остановленные контейнеры
+  datetime-format: Формат даты и времени
   about: Информация
   search: Включить поиск с помощью Dozzle, используя
   using-version: Вы используете версию Dozzle {version}.