Add a language-switch system with per-language files
Introduce a hand-rolled i18n layer across all three UIs, each reading its
text from per-language JSON files (English base + Polish + Danish). Nothing
in the converted screens hardcodes English any more.
- Web App (Vue): src/i18n/{en,pl,da}.json + index.js exposing t()/tSplit(),
reactive to the signed-in profile locale. Every view, component, form and
the status labels in lib/format.js go through t().
- API Server panel (Vue): src/i18n/ with its own localStorage-persisted
language (the panel has no user profile) and a header language picker.
Chrome, cards, login and API section titles translated; endpoint reference
descriptions intentionally kept in English. Rebuilt embedded dist.
- Phone App (Flutter): assets/i18n/ + lib/i18n.dart loaded at startup,
driven by AppSettings.locale. Nav, login, lock, dashboard, the full
Settings panel (incl. language picker) and format.dart status labels
translated; remaining detail screens fall back to English.
Language = the language half of the existing BCP-47 locale; the region half
still drives date/number/currency formatting. Missing keys fall back to
English, and plurals use Intl.PluralRules / Intl.plural so Polish gets the
correct one/few/many forms. Settings flags languages without a translation.
Tests updated to assert the localized (Polish) status wording; all pass.
See TRANSLATIONS.md for the format and how to add a language.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
1 parent
ee28b522c7
commit
b6bb6b1df0
54 files changed
+4191
-979
No files matched your search
@@ -4,6 +4,7 @@ import { RouterView, RouterLink, useRouter, useRoute } from "vue-router";
|
||||
import { state, isAuthenticated, isAdmin, logout, refreshProfile } from "./auth";
|
||||
import { prefs, applyProfilePrefs } from "./prefs";
|
||||
import { api } from "./api";
|
||||
import { t } from "./i18n";
|
||||
import Logo from "./components/Logo.vue";
|
||||
|
||||
const router = useRouter();
|
||||
@@ -34,9 +35,9 @@ const userInitial = computed(() =>
|
||||
// Sidebar nav. Admin item is filtered out for non-admins.
|
||||
const nav = computed(() =>
|
||||
[
|
||||
{ to: "/", label: "Garage", icon: "grid", exact: true },
|
||||
{ to: "/settings", label: "Settings", icon: "gear" },
|
||||
isAdmin.value ? { to: "/admin", label: "Users", icon: "users" } : null,
|
||||
{ to: "/", label: t("nav.garage"), icon: "grid", exact: true },
|
||||
{ to: "/settings", label: t("nav.settings"), icon: "gear" },
|
||||
isAdmin.value ? { to: "/admin", label: t("nav.users"), icon: "users" } : null,
|
||||
].filter(Boolean)
|
||||
);
|
||||
|
||||
@@ -99,16 +100,16 @@ onBeforeUnmount(() => themeObserver?.disconnect());
|
||||
>
|
||||
<svg v-if="isDark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0"><circle cx="12" cy="12" r="4"/><path stroke-linecap="round" d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>
|
||||
<span class="hidden md:inline">{{ isDark ? "Light mode" : "Dark mode" }}</span>
|
||||
<span class="hidden md:inline">{{ isDark ? t("nav.lightMode") : t("nav.darkMode") }}</span>
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-3 px-1 md:px-2">
|
||||
<div class="grid h-9 w-9 flex-none place-items-center rounded-full bg-brand-600 font-mono text-sm text-white">{{ userInitial }}</div>
|
||||
<div class="hidden min-w-0 flex-1 md:block">
|
||||
<p class="truncate text-sm text-white">{{ state.user?.name || state.user?.email }}</p>
|
||||
<p class="truncate font-mono text-[11px] text-white/50">Signed in</p>
|
||||
<p class="truncate font-mono text-[11px] text-white/50">{{ t("nav.signedIn") }}</p>
|
||||
</div>
|
||||
<button class="hidden text-white/50 transition-colors hover:text-white md:block" title="Log out" @click="onLogout">
|
||||
<button class="hidden text-white/50 transition-colors hover:text-white md:block" :title="t('nav.logOut')" @click="onLogout">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user