fix(persons): align pages with Concept A spec — card layout, stats bar, status labels, save button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -337,5 +337,6 @@
 	"person_danger_zone_heading": "Gefahrenzone",
 	"persons_new_birth_year": "Geburtsjahr",
 	"persons_new_death_year": "Todesjahr",
-	"persons_new_notes": "Notizen"
+	"persons_new_notes": "Notizen",
+	"person_save_changes": "Änderungen speichern"
 }

frontend/messages/en.json

@@ -337,5 +337,6 @@
 	"person_danger_zone_heading": "Danger zone",
 	"persons_new_birth_year": "Birth year",
 	"persons_new_death_year": "Death year",
-	"persons_new_notes": "Notes"
+	"persons_new_notes": "Notes",
+	"person_save_changes": "Save changes"
 }

frontend/messages/es.json

@@ -337,5 +337,6 @@
 	"person_danger_zone_heading": "Zona de peligro",
 	"persons_new_birth_year": "Año de nacimiento",
 	"persons_new_death_year": "Año de fallecimiento",
-	"persons_new_notes": "Notas"
+	"persons_new_notes": "Notas",
+	"person_save_changes": "Guardar cambios"
 }

frontend/src/routes/persons/+page.svelte

@@ -11,7 +11,6 @@ let { data } = $props();
 let q = $state(untrack(() => data.q || ''));
 let qFocused = $state(false);
 
-// Sync URL → local state after navigation, but not while the user is typing.
 $effect(() => {
 	if (!qFocused) q = data.q || '';
 });
@@ -31,41 +30,22 @@ function handleSearch() {
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-	<!-- Header Area -->
-	<div
-		class="mb-10 flex flex-col justify-between gap-6 border-b border-ink/10 pb-6 md:flex-row md:items-end"
-	>
+	<!-- Header: title+stats on left, search+CTA on right -->
+	<div class="mb-10 flex flex-wrap items-end justify-between gap-4 border-b border-ink/10 pb-6">
 		<div>
-			<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
-			<p class="mt-2 max-w-xl font-sans text-sm text-ink-2">
-				{m.persons_subtitle()}
-			</p>
-			<div class="mt-1">
+			<h1 class="font-serif text-3xl font-medium text-ink">{m.page_title_persons()}</h1>
+			<div class="mt-2">
 				<PersonsStatsBar
 					totalPersons={data.stats.totalPersons ?? 0}
 					totalDocuments={data.stats.totalDocuments ?? 0}
 				/>
 			</div>
-			{#if data.canWrite}
-				<a
-					href="/persons/new"
-					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-				>
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-4 w-4"
-					/>
-					{m.persons_btn_new()}
-				</a>
-			{/if}
 		</div>
 
-		<!-- Search Input -->
-		<div class="w-full md:w-80">
-			<label for="search" class="sr-only">Suche</label>
+		<div class="flex items-center gap-3">
+			<!-- Search -->
 			<div class="relative">
+				<label for="search" class="sr-only">Suche</label>
 				<input
 					id="search"
 					type="text"
@@ -74,7 +54,7 @@ function handleSearch() {
 					oninput={handleSearch}
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
-					class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+					class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 				/>
 				<div
 					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
@@ -87,55 +67,68 @@ function handleSearch() {
 					/>
 				</div>
 			</div>
+
+			<!-- New person CTA -->
+			{#if data.canWrite}
+				<a
+					href="/persons/new"
+					class="inline-flex items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
+				>
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-4 w-4"
+					/>
+					{m.persons_btn_new()}
+				</a>
+			{/if}
 		</div>
 	</div>
 
 	{#if data.persons.length === 0}
 		<PersonsEmptyState />
 	{:else}
-		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
 			{#each data.persons as person (person.id)}
-				<a href="/persons/{person.id}" class="group block h-full">
+				<a href="/persons/{person.id}" class="group block">
 					<div
-						class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-line bg-surface p-6 shadow-sm transition-all duration-200 hover:border-primary hover:shadow-md"
+						class="flex h-full flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md"
 					>
-						<!-- Decorative Accent on Hover -->
-						<div
-							class="absolute top-0 bottom-0 left-0 w-1 bg-primary opacity-0 transition-opacity group-hover:opacity-100"
-						></div>
-
 						<!-- Avatar -->
-						<div class="flex-shrink-0">
 						<div
-								class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-primary-fg transition-colors group-hover:bg-accent group-hover:text-ink"
+							class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary font-serif text-base font-bold text-primary-fg transition-colors"
 						>
 							{person.firstName?.[0]}{person.lastName?.[0]}
 						</div>
-						</div>
 
-						<!-- Info -->
-						<div class="min-w-0 flex-1">
-							<p class="truncate font-serif text-base font-medium text-ink group-hover:underline">
+						<!-- Name -->
+						<p class="font-serif text-sm font-bold text-ink group-hover:underline">
 							{person.firstName}
 							{person.lastName}
 						</p>
+
+						<!-- Alias -->
 						{#if person.alias}
-								<p class="mt-0.5 truncate font-sans text-xs text-ink-2 italic">"{person.alias}"</p>
+							<p class="font-sans text-xs text-ink-2 italic">„{person.alias}"</p>
 						{/if}
+
+						<!-- Life dates -->
 						{#if person.birthYear || person.deathYear}
-								<p class="mt-0.5 font-sans text-xs text-ink-3">
+							<p class="font-sans text-[11px] text-ink-3">
 								{formatLifeDateRange(person.birthYear, person.deathYear)}
 							</p>
 						{/if}
+
+						<!-- Doc count chip -->
 						{#if (person.documentCount ?? 0) > 0}
 							<span
-									class="mt-1.5 inline-flex items-center rounded-full bg-primary px-2 py-0.5 font-sans text-[10px] font-bold text-primary-fg"
+								class="mt-1 inline-flex items-center rounded-full border border-line bg-muted px-2.5 py-0.5 font-sans text-[11px] font-semibold text-ink-2"
 							>
-									{person.documentCount}
+								{person.documentCount} docs
 							</span>
 						{/if}
 					</div>
-					</div>
 				</a>
 			{/each}
 		</div>

frontend/src/routes/persons/PersonsStatsBar.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
-
 let {
 	totalPersons,
 	totalDocuments
@@ -8,19 +6,20 @@ let {
 	totalPersons: number;
 	totalDocuments: number;
 } = $props();
-
-const personsLabel = $derived(
-	totalPersons === 1
-		? m.persons_stats_persons_one()
-		: m.persons_stats_persons_many({ count: totalPersons })
-);
-const documentsLabel = $derived(
-	totalDocuments === 1
-		? m.persons_stats_documents_one()
-		: m.persons_stats_documents_many({ count: totalDocuments })
-);
 </script>
 
-<p class="font-sans text-sm text-ink-2">
-	{personsLabel} · {documentsLabel}
-</p>
+<div class="flex items-baseline gap-4">
+	<div class="flex items-baseline gap-1.5">
+		<span class="font-sans text-2xl font-black text-ink">{totalPersons}</span>
+		<span class="font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase">
+			Persons
+		</span>
+	</div>
+	<span class="font-sans text-lg text-line">·</span>
+	<div class="flex items-baseline gap-1.5">
+		<span class="font-sans text-2xl font-black text-ink">{totalDocuments}</span>
+		<span class="font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase">
+			Documents
+		</span>
+	</div>
+</div>

frontend/src/routes/persons/[id]/PersonCard.svelte

@@ -19,31 +19,61 @@ let {
 } = $props();
 </script>
 
-<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
-	<div class="h-2 w-full bg-primary"></div>
+<div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
+	<!-- Navy top accent bar -->
+	<div class="h-1.5 w-full bg-primary"></div>
 
-	<div class="p-8 md:p-10">
-		<!-- View Mode -->
-		<div class="flex flex-col items-start gap-8 md:flex-row">
-			<div class="flex-shrink-0">
+	<div class="p-6">
+		<!-- Avatar — navy circle, centered -->
+		<div class="mb-4 flex justify-center">
 			<div
-					class="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
+				class="flex h-16 w-16 items-center justify-center rounded-full bg-primary font-serif text-xl font-bold text-primary-fg"
 			>
-					<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
+				{person.firstName[0]}{person.lastName[0]}
 			</div>
 		</div>
 
-			<div class="w-full flex-1">
-				<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
-					<h1 class="font-serif text-4xl text-ink">
+		<!-- Name — centered, serif -->
+		<h1 class="mb-1 text-center font-serif text-xl font-bold text-ink">
 			{person.firstName}
 			{person.lastName}
 		</h1>
-					<div class="ml-4 flex flex-shrink-0 items-center gap-2">
+
+		<!-- Alias — centered, italic -->
+		{#if person.alias}
+			<p class="mb-1 text-center font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
+		{/if}
+
+		<!-- Life dates — centered -->
+		{#if person.birthYear || person.deathYear}
+			<p class="mb-4 text-center font-sans text-sm text-ink-3">
+				{formatLifeDateRange(person.birthYear, person.deathYear)}
+			</p>
+		{:else}
+			<div class="mb-4"></div>
+		{/if}
+
+		<!-- Notes -->
+		{#if person.notes}
+			<div class="mb-4">
+				<span
+					class="mb-1 block font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase"
+				>
+					{m.person_label_notes()}
+				</span>
+				<p
+					class="rounded border border-line bg-muted p-3 font-sans text-sm leading-relaxed text-ink-2"
+				>
+					{person.notes}
+				</p>
+			</div>
+		{/if}
+
+		<!-- Edit button — full width, outlined -->
 		{#if canWrite}
 			<a
 				href="/persons/{person.id}/edit"
-								class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
+				class="flex w-full items-center justify-center gap-1.5 rounded border border-line px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
 			>
 				<img
 					src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
@@ -56,44 +86,3 @@ let {
 		{/if}
 	</div>
 </div>
-
-				<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
-					{#if person.alias}
-						<div>
-							<span
-								class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-								>{m.form_label_alias()}</span
-							>
-							<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
-						</div>
-					{/if}
-
-					{#if person.birthYear || person.deathYear}
-						<div>
-							<span
-								class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-							>
-								{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
-							</span>
-							<span class="block font-serif text-lg text-ink">
-								{formatLifeDateRange(person.birthYear, person.deathYear)}
-							</span>
-						</div>
-					{/if}
-
-					{#if person.notes}
-						<div class="md:col-span-2">
-							<span
-								class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
-								>{m.person_label_notes()}</span
-							>
-							<p class="font-serif text-base whitespace-pre-wrap text-ink">
-								{person.notes}
-							</p>
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

frontend/src/routes/persons/[id]/PersonDocumentList.svelte

@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
+import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
 
 const DOCS_PREVIEW_LIMIT = 5;
 
@@ -106,7 +107,7 @@ const visibleDocuments = $derived(
 										? 'border-accent/50 bg-accent/20 text-ink'
 										: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
 								>
-									{doc.status}
+									{formatDocumentStatus(doc.status)}
 								</span>
 								<img
 									src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"

frontend/src/routes/persons/[id]/edit/PersonEditSaveBar.svelte

@@ -16,6 +16,6 @@ let { discardHref }: { discardHref: string } = $props();
 		formaction="?/update"
 		class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
 	>
-		{m.btn_save()}
+		{m.person_save_changes()}
 	</button>
 </div>