From 2e943b7f91acc7d2d36e0705f990b30cae586092 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 22:43:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20De=20Gruyter=20long=20arrows=20on=20?=
 =?UTF-8?q?both=20sort=20buttons,=20rotate=20swap=20icon=2090=C2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace ↑↓ text with Long-Arrow-Up/Down-MD.svg on the document search
SortDropdown and the Briefwechsel sort button. Rotate the swap button
SVG 90° so arrows point left/right matching the horizontal person
field layout.

Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/SortDropdown.svelte  | 16 +++++++++++++++-
 .../lib/components/SortDropdown.svelte.spec.ts   | 16 ++++++++++------
 .../briefwechsel/CorrespondenzPersonBar.svelte   |  1 +
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/SortDropdown.svelte b/frontend/src/lib/components/SortDropdown.svelte
index f6b2f7ec..753c82ac 100644
--- a/frontend/src/lib/components/SortDropdown.svelte
+++ b/frontend/src/lib/components/SortDropdown.svelte
@@ -47,6 +47,20 @@ function toggleDir() {
 		class="-ml-px flex items-center justify-center border border-line bg-muted px-3 py-2.5 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		aria-label={dir === 'asc' ? m.sort_dir_asc() : m.sort_dir_desc()}
 	>
-		{dir === 'asc' ? '↑' : '↓'}
+		{#if dir === 'asc'}
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Up-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 opacity-60"
+			/>
+		{:else}
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Down-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 opacity-60"
+			/>
+		{/if}
 	</button>
 </div>
diff --git a/frontend/src/lib/components/SortDropdown.svelte.spec.ts b/frontend/src/lib/components/SortDropdown.svelte.spec.ts
index 2c4282a8..98b12ac0 100644
--- a/frontend/src/lib/components/SortDropdown.svelte.spec.ts
+++ b/frontend/src/lib/components/SortDropdown.svelte.spec.ts
@@ -22,15 +22,19 @@ describe('SortDropdown', () => {
 		await expect.element(btn).toBeInTheDocument();
 	});
 
-	it('direction button shows ↑ when dir is asc', async () => {
+	it('direction button shows up arrow when dir is asc', async () => {
 		render(SortDropdown, { sort: 'DATE', dir: 'asc' });
-		const btn = page.getByRole('button');
-		await expect.element(btn).toHaveTextContent('↑');
+		await expect.element(page.getByRole('button')).toBeInTheDocument();
+		const img = document.querySelector('button img') as HTMLImageElement;
+		expect(img).not.toBeNull();
+		expect(img.src).toContain('Long-Arrow-Up');
 	});
 
-	it('direction button shows ↓ when dir is desc', async () => {
+	it('direction button shows down arrow when dir is desc', async () => {
 		render(SortDropdown, { sort: 'DATE', dir: 'desc' });
-		const btn = page.getByRole('button');
-		await expect.element(btn).toHaveTextContent('↓');
+		await expect.element(page.getByRole('button')).toBeInTheDocument();
+		const img = document.querySelector('button img') as HTMLImageElement;
+		expect(img).not.toBeNull();
+		expect(img.src).toContain('Long-Arrow-Down');
 	});
 });
diff --git a/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte b/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
index 666c2a07..e1e69ede 100644
--- a/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
+++ b/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
@@ -102,6 +102,7 @@ function handleSuggestionSelect(id: string) {
 			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" />