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:
tajniak81
2026-07-17 20:07:48 +02:00
co-authored by Claude Opus 4.8
parent ee28b522c7
commit b6bb6b1df0
54 changed files with 4191 additions and 979 deletions
+13 -12
View File
@@ -3,6 +3,7 @@ import { ref } from "vue";
import { api } from "../api";
import { formatKm } from "../lib/format.js";
import { applyAttachment } from "../lib/attachment.js";
import { t } from "../i18n";
import AttachmentField from "./AttachmentField.vue";
import Modal from "./Modal.vue";
@@ -62,42 +63,42 @@ async function submit() {
</script>
<template>
<Modal :title="isEdit ? 'Edit service record' : 'Add service record'" @close="emit('close')">
<Modal :title="isEdit ? t('forms.service.editTitle') : t('forms.service.addTitle')" @close="emit('close')">
<p v-if="error" class="mb-3 rounded-control bg-danger-soft px-3 py-2 text-sm font-medium text-danger">{{ error }}</p>
<form class="space-y-3" @submit.prevent="submit">
<div class="grid grid-cols-2 gap-2">
<div>
<label class="dh-label">Date *</label>
<label class="dh-label">{{ t("forms.service.date") }}</label>
<input v-model="form.date" type="date" required class="dh-input data" />
</div>
<div>
<label class="dh-label">Odometer (km)</label>
<label class="dh-label">{{ t("forms.service.odometer") }}</label>
<input v-model="form.km" type="number" placeholder="16138" class="dh-input data" />
</div>
</div>
<fieldset class="rounded-control border border-subtle p-3">
<legend class="eyebrow px-1">Changed parts</legend>
<label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedOil" class="accent-[var(--accent)]" /> Oil &amp; Oil filter</label>
<label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedEngineAirFilter" class="accent-[var(--accent)]" /> Engine air filter</label>
<label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedCabinAirFilter" class="accent-[var(--accent)]" /> Cabin air filter</label>
<legend class="eyebrow px-1">{{ t("forms.service.changedParts") }}</legend>
<label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedOil" class="accent-[var(--accent)]" /> {{ t("forms.service.oil") }}</label>
<label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedEngineAirFilter" class="accent-[var(--accent)]" /> {{ t("forms.service.engineFilter") }}</label>
<label class="flex items-center gap-2 py-1 text-sm text-body"><input type="checkbox" v-model="form.changedCabinAirFilter" class="accent-[var(--accent)]" /> {{ t("forms.service.cabinFilter") }}</label>
</fieldset>
<AttachmentField
v-model:file="file"
v-model:remove="removeFile"
:record="service"
legend="Receipt or service-book page"
:legend="t('forms.service.attachmentLegend')"
/>
<div>
<label class="dh-label">Notes</label>
<label class="dh-label">{{ t("forms.service.notes") }}</label>
<input v-model="form.notes" class="dh-input" />
</div>
<p v-if="car" class="text-xs text-muted">
Next service date (+{{ car.serviceIntervalDays }}d) and km (+{{ formatKm(car.serviceIntervalKm) }}) are computed automatically.
{{ t("forms.service.autoHint", { days: car.serviceIntervalDays, km: formatKm(car.serviceIntervalKm) }) }}
</p>
<div class="mt-4 flex justify-end gap-2">
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">Cancel</button>
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
<button type="submit" :disabled="saving" class="dh-btn dh-btn-primary">
{{ saving ? "Saving" : isEdit ? "Save changes" : "Add service" }}
{{ saving ? t("common.saving") : isEdit ? t("common.saveChanges") : t("forms.service.submit") }}
</button>
</div>
</form>