feat: implement i18n — extract all UI strings, add EN + ES-MX translations, add language selector
Extract all hardcoded German strings from every .svelte file and component into Paraglide message keys. Add complete translations for all keys in messages/en.json (English) and messages/es.json (Spanish/Mexico). Changes: - messages/de.json: 100+ keys covering navigation, buttons, form labels, placeholders, section headings, empty states, and error messages - messages/en.json, messages/es.json: complete translations for all keys - project.inlang/settings.json: change baseLocale from "en" to "de" - +layout.svelte: add DE/EN/ES language selector in header using setLocale(); active language is bold, choice persists via Paraglide cookie strategy - All 10 route pages + 3 shared components: replace hardcoded German with m.key() - e2e/lang.spec.ts: E2E tests for language selector visibility, switching, persistence across navigation, and active state highlighting Closes #2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #9.
This commit is contained in:
Marcel
@@ -3,6 +3,7 @@ import { enhance } from '$app/forms';
|
||||
import TagInput from '$lib/components/TagInput.svelte';
|
||||
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||
import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { form } = $props();
|
||||
|
||||
@@ -61,9 +62,9 @@ function handleDateInput(e: Event) {
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
Zurück zur Übersicht
|
||||
{m.btn_back_to_overview()}
|
||||
</a>
|
||||
<h1 class="font-serif text-3xl text-brand-navy">Neues Dokument</h1>
|
||||
<h1 class="font-serif text-3xl text-brand-navy">{m.doc_new_heading()}</h1>
|
||||
</div>
|
||||
|
||||
{#if form?.error}
|
||||
@@ -73,13 +74,13 @@ function handleDateInput(e: Event) {
|
||||
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
|
||||
<!-- ── Section 1: Wer & Wann ── -->
|
||||
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Wer & Wann</h2>
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">{m.doc_section_who_when()}</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
|
||||
<!-- Datum -->
|
||||
<div>
|
||||
<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
|
||||
>Datum</label
|
||||
>{m.form_label_date()}</label
|
||||
>
|
||||
<input
|
||||
id="documentDate"
|
||||
@@ -87,7 +88,7 @@ function handleDateInput(e: Event) {
|
||||
inputmode="numeric"
|
||||
value={dateDisplay}
|
||||
oninput={handleDateInput}
|
||||
placeholder="TT.MM.JJJJ"
|
||||
placeholder={m.form_placeholder_date()}
|
||||
maxlength="10"
|
||||
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
|
||||
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
|
||||
@@ -96,31 +97,31 @@ function handleDateInput(e: Event) {
|
||||
<input type="hidden" name="documentDate" value={dateIso} />
|
||||
{#if dateInvalid}
|
||||
<p id="date-error" class="mt-1 text-xs text-red-600">
|
||||
Bitte im Format TT.MM.JJJJ eingeben, z.B. 20.12.2026
|
||||
{m.form_date_error()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Ort -->
|
||||
<div>
|
||||
<label for="location" class="mb-1 block text-sm font-medium text-gray-700">Ort</label>
|
||||
<label for="location" class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_location()}</label>
|
||||
<input
|
||||
id="location"
|
||||
type="text"
|
||||
name="location"
|
||||
placeholder="z.B. Berlin, Wien…"
|
||||
placeholder={m.form_placeholder_location()}
|
||||
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Absender -->
|
||||
<div>
|
||||
<PersonTypeahead name="senderId" label="Absender" bind:value={senderId} />
|
||||
<PersonTypeahead name="senderId" label={m.form_label_sender()} bind:value={senderId} />
|
||||
</div>
|
||||
|
||||
<!-- Empfänger -->
|
||||
<div>
|
||||
<p class="mb-1 block text-sm font-medium text-gray-700">Empfänger</p>
|
||||
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
|
||||
<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,12 +129,12 @@ function handleDateInput(e: Event) {
|
||||
|
||||
<!-- ── Section 2: Beschreibung ── -->
|
||||
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Beschreibung</h2>
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">{m.doc_section_description()}</h2>
|
||||
|
||||
<div class="space-y-5">
|
||||
<!-- Titel -->
|
||||
<div>
|
||||
<label for="title" class="mb-1 block text-sm font-medium text-gray-700">Titel *</label>
|
||||
<label for="title" class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_title()} *</label>
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
@@ -146,33 +147,33 @@ function handleDateInput(e: Event) {
|
||||
<!-- Aufbewahrungsort -->
|
||||
<div>
|
||||
<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
|
||||
>Aufbewahrungsort</label
|
||||
>{m.form_label_archive_location()}</label
|
||||
>
|
||||
<input
|
||||
id="documentLocation"
|
||||
type="text"
|
||||
name="documentLocation"
|
||||
placeholder="z.B. Schrank 3, Mappe B"
|
||||
placeholder={m.form_placeholder_archive_location()}
|
||||
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-gray-400">Wo befindet sich das Originaldokument?</p>
|
||||
<p class="mt-1 text-xs text-gray-400">{m.form_helper_archive_location()}</p>
|
||||
</div>
|
||||
|
||||
<!-- Schlagworte -->
|
||||
<div>
|
||||
<p class="mb-1 block text-sm font-medium text-gray-700">Schlagworte</p>
|
||||
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
|
||||
<TagInput bind:tags={tags} />
|
||||
<input type="hidden" name="tags" value={tags.join(',')} />
|
||||
</div>
|
||||
|
||||
<!-- Inhalt -->
|
||||
<div>
|
||||
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700">Inhalt</label>
|
||||
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_content()}</label>
|
||||
<textarea
|
||||
id="summary"
|
||||
name="summary"
|
||||
rows="5"
|
||||
placeholder="Kurze Beschreibung des Inhalts…"
|
||||
placeholder={m.form_placeholder_content()}
|
||||
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
|
||||
></textarea>
|
||||
</div>
|
||||
@@ -181,22 +182,22 @@ function handleDateInput(e: Event) {
|
||||
|
||||
<!-- ── Section 3: Transkription ── -->
|
||||
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Transkription</h2>
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">{m.form_label_transcription()}</h2>
|
||||
<textarea
|
||||
id="transcription"
|
||||
name="transcription"
|
||||
rows="12"
|
||||
placeholder="Vollständiger Text des Dokuments…"
|
||||
placeholder={m.form_placeholder_transcription()}
|
||||
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- ── Section 4: Datei ── -->
|
||||
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Datei</h2>
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">{m.doc_section_file()}</h2>
|
||||
|
||||
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
|
||||
Datei hochladen <span class="font-normal text-gray-400">(optional)</span>
|
||||
{m.doc_file_upload_label()} <span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
|
||||
</label>
|
||||
<input
|
||||
id="file-upload"
|
||||
@@ -216,13 +217,13 @@ function handleDateInput(e: Event) {
|
||||
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
|
||||
>
|
||||
<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
|
||||
Abbrechen
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
|
||||
>
|
||||
Speichern
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user