From 0b33f323eebf8f25ea8425e47e3f46aa18a82963 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 21:57:57 +0200
Subject: [PATCH] feat(briefwechsel): restore direction arrow next to row title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #311 dropped the right/left arrow icons that signalled whether a
letter was sent or received. Readers who don't decode the colored
left border (new users, color-blind users, users at a glance) had
no visual cue for direction. Restore a 20×20 arrow inline with the
title — right-arrow for outgoing, left-arrow for incoming — kept
decorative (aria-hidden) since the aria-label already announces
"Gesendet:" / "Empfangen:".

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/lib/components/ThumbnailRow.svelte    | 17 ++++++++--
 .../components/ThumbnailRow.svelte.spec.ts    | 32 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/ThumbnailRow.svelte b/frontend/src/lib/components/ThumbnailRow.svelte
index f7eccac4..16d40e91 100644
--- a/frontend/src/lib/components/ThumbnailRow.svelte
+++ b/frontend/src/lib/components/ThumbnailRow.svelte
@@ -58,8 +58,21 @@ const ariaLabel = $derived(
 	<ConversationThumbnail doc={doc} />
 
 	<div class="flex min-w-0 flex-1 flex-col gap-1.5">
-		<div class="min-w-0 flex-1 truncate text-lg font-bold text-ink">
-			{title}
+		<div class="flex min-w-0 items-center gap-2">
+			<img
+				data-testid="thumb-row-direction-icon"
+				src={isOut
+					? '/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg'
+					: '/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg'}
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 shrink-0 opacity-70"
+				class:text-primary={isOut}
+				class:text-accent={!isOut}
+			/>
+			<div class="min-w-0 flex-1 truncate text-lg font-bold text-ink">
+				{title}
+			</div>
 		</div>
 
 		{#if doc.summary}
diff --git a/frontend/src/lib/components/ThumbnailRow.svelte.spec.ts b/frontend/src/lib/components/ThumbnailRow.svelte.spec.ts
index 97130ad6..e8d46587 100644
--- a/frontend/src/lib/components/ThumbnailRow.svelte.spec.ts
+++ b/frontend/src/lib/components/ThumbnailRow.svelte.spec.ts
@@ -109,12 +109,42 @@ describe('ThumbnailRow', () => {
 		});
 
 		const titleEl = [...document.querySelectorAll('div')].find(
-			(el) => el.textContent?.trim() === 'Liebe Anna'
+			(el) => el.textContent?.trim() === 'Liebe Anna' && el.className.includes('truncate')
 		) as HTMLElement | undefined;
 		expect(titleEl, 'title element not found').toBeDefined();
 		expect(titleEl!.className).toContain('text-lg');
 	});
 
+	it('renders a right-arrow icon for outgoing letters', () => {
+		render(ThumbnailRow, {
+			doc: baseDoc,
+			isOut: true,
+			showOtherParty: false
+		});
+
+		const arrow = document.querySelector(
+			'[data-testid="thumb-row-direction-icon"]'
+		) as HTMLImageElement | null;
+		expect(arrow).not.toBeNull();
+		expect(arrow!.getAttribute('src') ?? '').toMatch(/Long-Arrow-Right/);
+		// Decorative — direction is already announced via the aria-label prefix.
+		expect(arrow!.getAttribute('aria-hidden')).toBe('true');
+	});
+
+	it('renders a left-arrow icon for incoming letters', () => {
+		render(ThumbnailRow, {
+			doc: baseDoc,
+			isOut: false,
+			showOtherParty: false
+		});
+
+		const arrow = document.querySelector(
+			'[data-testid="thumb-row-direction-icon"]'
+		) as HTMLImageElement | null;
+		expect(arrow).not.toBeNull();
+		expect(arrow!.getAttribute('src') ?? '').toMatch(/Long-Arrow-Left/);
+	});
+
 	it('sets border-l class based on isOut', () => {
 		const { unmount } = render(ThumbnailRow, {
 			doc: baseDoc,