From 001e875f316cf4dffb323b463e8a020fc9f45439 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 7 Apr 2026 08:50:58 +0200
Subject: [PATCH] fix(ui): use De Gruyter long arrows for swap button and
 timeline entries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap button: stack right/left arrows vertically at h-3.5 for a
compact look. Timeline: replace → ← text with Long-Arrow icons on
each letter entry and the distribution bar summary.

Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../briefwechsel/ConversationTimeline.svelte  | 34 ++++++++++++++-----
 .../CorrespondenzPersonBar.svelte             | 30 ++++++++--------
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/src/routes/briefwechsel/ConversationTimeline.svelte b/frontend/src/routes/briefwechsel/ConversationTimeline.svelte
index 3502803d..4a2842e7 100644
--- a/frontend/src/routes/briefwechsel/ConversationTimeline.svelte
+++ b/frontend/src/routes/briefwechsel/ConversationTimeline.svelte
@@ -84,8 +84,24 @@ const newDocUrl = $derived(
 		aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}"
 	>
 		<div class="flex justify-between text-sm font-bold">
-			<span class="text-primary">{outCount} von {shortSenderName} →</span>
-			<span class="text-accent">{inCount} von {shortReceiverName} ←</span>
+			<span class="inline-flex items-center gap-1 text-primary"
+				>{outCount} von {shortSenderName}
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="inline h-3.5 w-3.5 opacity-60"
+				/></span
+			>
+			<span class="inline-flex items-center gap-1 text-accent"
+				>{inCount} von {shortReceiverName}
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="inline h-3.5 w-3.5 opacity-60"
+				/></span
+			>
 		</div>
 		<div class="flex h-[5px] overflow-hidden rounded-full bg-line">
 			<div class="h-full bg-primary transition-all" style="width: {outPct}%"></div>
@@ -115,14 +131,14 @@ const newDocUrl = $derived(
 			class:border-l-primary={isOut}
 			class:border-l-accent={!isOut}
 		>
-			<span
-				class="w-[16px] shrink-0 text-sm font-black"
-				class:text-primary={isOut}
-				class:text-accent={!isOut}
+			<img
+				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"
-			>
-				{isOut ? '→' : '←'}
-			</span>
+				class="h-4 w-4 shrink-0 opacity-60"
+			/>
 
 			<div class="min-w-0 flex-1">
 				<div class="mb-[2px] truncate text-sm font-bold text-ink">
diff --git a/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte b/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
index 36bdb2d4..62d67337 100644
--- a/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
+++ b/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
@@ -91,22 +91,20 @@ function handleSuggestionSelect(id: string) {
 		class:pointer-events-none={!swapVisible}
 		tabindex={swapVisible ? 0 : -1}
 	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="14"
-			height="14"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			aria-hidden="true"
-			class="rotate-90"
-		>
-			<path d="M7 16V4m0 0L3 8m4-4l4 4" />
-			<path d="M17 8v12m0 0l4-4m-4 4l-4-4" />
-		</svg>
+		<div class="-my-1 flex flex-col items-center">
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-3.5 w-3.5 opacity-60"
+			/>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-3.5 w-3.5 opacity-60"
+			/>
+		</div>
 	</button>
 
 	<!-- Korrespondent field -->