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
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
@@ -29,7 +30,7 @@
|
||||
<div class="mb-6">
|
||||
<a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group">
|
||||
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" />
|
||||
Zurück zur Übersicht
|
||||
{m.btn_back_to_overview()}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -42,7 +43,7 @@
|
||||
<!-- Edit Form -->
|
||||
<form method="POST" action="?/update" use:enhance>
|
||||
<div class="flex flex-col gap-6">
|
||||
<h2 class="text-xl font-serif text-brand-navy border-b border-gray-100 pb-3">Person bearbeiten</h2>
|
||||
<h2 class="text-xl font-serif text-brand-navy border-b border-gray-100 pb-3">{m.person_edit_heading()}</h2>
|
||||
|
||||
{#if form?.updateError}
|
||||
<p class="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{form.updateError}</p>
|
||||
@@ -50,7 +51,7 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="firstName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Vorname *</label>
|
||||
<label for="firstName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_first_name()} *</label>
|
||||
<input
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
@@ -61,7 +62,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Nachname *</label>
|
||||
<label for="lastName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_last_name()} *</label>
|
||||
<input
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
@@ -72,7 +73,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label for="alias" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Rufname / Alias</label>
|
||||
<label for="alias" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_alias()}</label>
|
||||
<input
|
||||
id="alias"
|
||||
name="alias"
|
||||
@@ -85,10 +86,10 @@
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button type="submit" class="px-5 py-2 bg-brand-navy text-white text-sm font-bold uppercase tracking-widest rounded hover:bg-brand-navy/80 transition-colors">
|
||||
Speichern
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
<button type="button" onclick={() => (editMode = false)} class="px-5 py-2 border border-gray-300 text-gray-600 text-sm font-bold uppercase tracking-widest rounded hover:bg-gray-50 transition-colors">
|
||||
Abbrechen
|
||||
{m.btn_cancel()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,19 +110,19 @@
|
||||
</h1>
|
||||
<button onclick={() => (editMode = true)} class="ml-4 flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:border-brand-navy hover:text-brand-navy transition-colors">
|
||||
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg" alt="" aria-hidden="true" class="w-3.5 h-3.5" />
|
||||
Bearbeiten
|
||||
{m.btn_edit()}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Voller Name</span>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.person_label_full_name()}</span>
|
||||
<span class="block text-lg font-serif text-brand-navy">{person.firstName} {person.lastName}</span>
|
||||
</div>
|
||||
|
||||
{#if person.alias}
|
||||
<div>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Rufname / Alias</span>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.form_label_alias()}</span>
|
||||
<span class="block text-lg font-serif text-brand-navy italic">"{person.alias}"</span>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -136,9 +137,9 @@
|
||||
{#key person.id}
|
||||
<div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
|
||||
<div class="p-6 md:p-8">
|
||||
<h2 class="text-lg font-serif text-brand-navy mb-1">Person zusammenführen</h2>
|
||||
<h2 class="text-lg font-serif text-brand-navy mb-1">{m.person_merge_heading()}</h2>
|
||||
<p class="text-sm text-gray-500 font-sans mb-5">
|
||||
Diese Person wird in die gewählte Zielperson überführt. Alle Dokumente und Verknüpfungen werden übertragen, danach wird diese Person gelöscht.
|
||||
{m.person_merge_description()}
|
||||
</p>
|
||||
|
||||
{#if form?.mergeError}
|
||||
@@ -152,7 +153,7 @@
|
||||
<div class="flex-1">
|
||||
<PersonTypeahead
|
||||
name="_targetPersonDisplay"
|
||||
label="Zusammenführen mit"
|
||||
label={m.person_merge_target_label()}
|
||||
value={mergeTargetId}
|
||||
onchange={(value) => { mergeTargetId = value; showMergeConfirm = false; }}
|
||||
/>
|
||||
@@ -165,7 +166,7 @@
|
||||
onclick={() => (showMergeConfirm = true)}
|
||||
class="px-4 py-2 text-sm font-bold uppercase tracking-widest border border-red-300 text-red-600 rounded hover:bg-red-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Zusammenführen
|
||||
{m.person_btn_merge()}
|
||||
</button>
|
||||
{:else}
|
||||
<div class="flex gap-2">
|
||||
@@ -173,14 +174,14 @@
|
||||
type="submit"
|
||||
class="px-4 py-2 text-sm font-bold uppercase tracking-widest bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Ja, zusammenführen
|
||||
{m.person_btn_merge_confirm()}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showMergeConfirm = false)}
|
||||
class="px-4 py-2 text-sm font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
{m.btn_cancel()}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -188,7 +189,7 @@
|
||||
|
||||
{#if showMergeConfirm}
|
||||
<p class="mt-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-3 py-2">
|
||||
Achtung: Diese Aktion ist nicht rückgängig zu machen. <strong>{person.firstName} {person.lastName}</strong> wird gelöscht.
|
||||
{m.person_merge_warning()} <strong>{person.firstName} {person.lastName}</strong> wird gelöscht.
|
||||
</p>
|
||||
{/if}
|
||||
</form>
|
||||
@@ -199,7 +200,7 @@
|
||||
<!-- Linked Documents Section -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
|
||||
<h2 class="text-xl font-serif text-brand-navy">Gesendete Dokumente</h2>
|
||||
<h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
|
||||
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
|
||||
{documents.length}
|
||||
</span>
|
||||
@@ -207,7 +208,7 @@
|
||||
|
||||
{#if documents.length === 0}
|
||||
<div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
|
||||
<p class="text-gray-500 font-sans">Diese Person ist noch nicht als Absender verknüpft.</p>
|
||||
<p class="text-gray-500 font-sans">{m.person_no_docs()}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="space-y-3">
|
||||
|
||||
Reference in New Issue
Block a user