feat(briefwechsel): restore direction arrow next to row title

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>

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}

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,