From 858c9f056437b7aba77139e2bac654378f068ace Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 20:28:32 +0200
Subject: [PATCH] i18n(briefwechsel): DistributionBar reads text + aria-label
 via Paraglide

Drops the hardcoded German strings ("Briefverteilung in diesem Zeitraum",
"{n} von {name}") and routes every visible + assistive-tech string
through dist_bar_aria and dist_bar_segment message keys. An English
or Spanish user now sees "from" / "de" instead of "von" both on
screen and in the aria-label their screen reader announces.

Refs #305
Fixes @leonievoss i18n concern from PR review

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |  2 ++
 frontend/messages/en.json                     |  2 ++
 frontend/messages/es.json                     |  2 ++
 .../src/lib/components/DistributionBar.svelte | 12 ++++++---
 .../components/DistributionBar.svelte.spec.ts | 25 ++++++++++++++-----
 5 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 7df88f45..9f8c71b8 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -165,6 +165,8 @@
 	"conv_hero_divider": "oder",
 	"conv_empty_recent_label": "Zuletzt geöffnet",
 	"conv_no_party": "—",
+	"dist_bar_segment": "{count} von {name}",
+	"dist_bar_aria": "Briefverteilung in diesem Zeitraum: {outCount} von {senderName}, {inCount} von {receiverName}",
 	"admin_heading": "Admin Dashboard",
 	"admin_tab_users": "Benutzer",
 	"admin_tab_groups": "Gruppen",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index dc5cbc93..f93f2a4e 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -165,6 +165,8 @@
 	"conv_hero_divider": "or",
 	"conv_empty_recent_label": "Recently opened",
 	"conv_no_party": "—",
+	"dist_bar_segment": "{count} from {name}",
+	"dist_bar_aria": "Letter distribution in this period: {outCount} from {senderName}, {inCount} from {receiverName}",
 	"admin_heading": "Admin Dashboard",
 	"admin_tab_users": "Users",
 	"admin_tab_groups": "Groups",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 80ea31a0..7d976d46 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -165,6 +165,8 @@
 	"conv_hero_divider": "o",
 	"conv_empty_recent_label": "Recientemente abiertos",
 	"conv_no_party": "—",
+	"dist_bar_segment": "{count} de {name}",
+	"dist_bar_aria": "Distribución de cartas en este período: {outCount} de {senderName}, {inCount} de {receiverName}",
 	"admin_heading": "Panel de administración",
 	"admin_tab_users": "Usuarios",
 	"admin_tab_groups": "Grupos",
diff --git a/frontend/src/lib/components/DistributionBar.svelte b/frontend/src/lib/components/DistributionBar.svelte
index d0e52292..4b9a09ad 100644
--- a/frontend/src/lib/components/DistributionBar.svelte
+++ b/frontend/src/lib/components/DistributionBar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
 interface Props {
 	outCount: number;
 	inCount: number;
@@ -12,16 +14,20 @@ const total = $derived(outCount + inCount);
 const outPct = $derived(total > 0 ? (outCount / total) * 100 : 0);
 const shortSenderName = $derived(senderName.split(' ')[0] ?? senderName);
 const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);
+
+const ariaLabel = $derived(m.dist_bar_aria({ outCount, senderName, inCount, receiverName }));
+const outSegmentText = $derived(m.dist_bar_segment({ count: outCount, name: shortSenderName }));
+const inSegmentText = $derived(m.dist_bar_segment({ count: inCount, name: shortReceiverName }));
 </script>
 
 <div
 	class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2"
 	role="img"
-	aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName}, {inCount} von {receiverName}"
+	aria-label={ariaLabel}
 >
 	<div class="flex justify-between text-sm font-bold">
 		<span class="inline-flex items-center gap-1 text-primary"
-			>{outCount} von {shortSenderName}
+			>{outSegmentText}
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
 				alt=""
@@ -30,7 +36,7 @@ const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);
 			/></span
 		>
 		<span class="inline-flex items-center gap-1 text-accent"
-			>{inCount} von {shortReceiverName}
+			>{inSegmentText}
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
 				alt=""
diff --git a/frontend/src/lib/components/DistributionBar.svelte.spec.ts b/frontend/src/lib/components/DistributionBar.svelte.spec.ts
index 3af8bca0..4a3ecb8c 100644
--- a/frontend/src/lib/components/DistributionBar.svelte.spec.ts
+++ b/frontend/src/lib/components/DistributionBar.svelte.spec.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
+import * as m from '$lib/paraglide/messages.js';
 
 import DistributionBar from './DistributionBar.svelte';
 
@@ -8,7 +9,7 @@ afterEach(() => {
 });
 
 describe('DistributionBar', () => {
-	it('renders both counts and short names, and the two-tone fill bar', async () => {
+	it('renders the Paraglide aria-label and visible segments', async () => {
 		render(DistributionBar, {
 			outCount: 3,
 			inCount: 7,
@@ -18,11 +19,22 @@ describe('DistributionBar', () => {
 
 		const container = document.querySelector('[role="img"]') as HTMLElement;
 		expect(container).toBeTruthy();
-		expect(container.getAttribute('aria-label')).toContain('3 von Hans Müller');
-		expect(container.getAttribute('aria-label')).toContain('7 von Anna Schmidt');
 
-		expect(container.textContent).toContain('3 von Hans');
-		expect(container.textContent).toContain('7 von Anna');
+		// The aria-label must come from Paraglide, not a hardcoded German string,
+		// so the EN / ES users aren't served "Briefverteilung in diesem Zeitraum".
+		const expectedAria = m.dist_bar_aria({
+			outCount: 3,
+			senderName: 'Hans Müller',
+			inCount: 7,
+			receiverName: 'Anna Schmidt'
+		});
+		expect(container.getAttribute('aria-label')).toBe(expectedAria);
+
+		// The visible "{count} from/von {name}" spans must also come from Paraglide.
+		const outText = m.dist_bar_segment({ count: 3, name: 'Hans' });
+		const inText = m.dist_bar_segment({ count: 7, name: 'Anna' });
+		expect(container.textContent).toContain(outText);
+		expect(container.textContent).toContain(inText);
 
 		// 3/10 → 30% / 70% split on the two segments
 		const segments = container.querySelectorAll('[data-testid="dist-bar-segment"]');
@@ -40,7 +52,8 @@ describe('DistributionBar', () => {
 		});
 
 		const container = document.querySelector('[role="img"]') as HTMLElement;
-		expect(container.textContent).toContain('1 von SingleWord');
+		const expected = m.dist_bar_segment({ count: 1, name: 'SingleWord' });
+		expect(container.textContent).toContain(expected);
 	});
 
 	it('renders a zero-percent left segment when outCount is zero', async () => {