From aa127de9bd01dc8516359f20da9ce2a3651b0c26 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 20 Mar 2026 16:29:11 +0100
Subject: [PATCH] refactor(conversations): move swap button between person
 input fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On desktop the button sits between the two typeaheads as an icon-only
button (icon rotated 90° to point left/right) aligned to the input
baseline. On mobile it renders full-width with the label text between
the stacked fields.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/conversations/+page.svelte     | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index 787a44f5..436667ec 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -76,7 +76,7 @@ const enrichedDocuments = $derived(
 
 	<!-- FILTER BAR -->
 	<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
-		<div class="mb-6 grid grid-cols-1 gap-8 md:grid-cols-2">
+		<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 			<!-- Sender -->
 			<div
 				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
@@ -91,6 +91,31 @@ const enrichedDocuments = $derived(
 				/>
 			</div>
 
+			<!-- Swap button — icon-only on desktop, full-width with text on mobile -->
+			<div class="flex items-end">
+				<button
+					data-testid="conv-swap-btn"
+					onclick={swapPersons}
+					class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto"
+					title={m.conv_swap_btn()}
+				>
+					<svg
+						class="h-4 w-4 flex-shrink-0 md:rotate-90"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
+						></path>
+					</svg>
+					<span class="md:hidden">{m.conv_swap_btn()}</span>
+				</button>
+			</div>
+
 			<!-- Receiver -->
 			<div
 				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
@@ -106,27 +131,6 @@ const enrichedDocuments = $derived(
 			</div>
 		</div>
 
-		{#if senderId && receiverId}
-			<div class="mb-4 flex justify-center">
-				<button
-					data-testid="conv-swap-btn"
-					onclick={swapPersons}
-					class="flex items-center gap-2 rounded-sm border border-brand-sand px-4 py-2 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
-					title={m.conv_swap_btn()}
-				>
-					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
-						></path>
-					</svg>
-					{m.conv_swap_btn()}
-				</button>
-			</div>
-		{/if}
-
 		<div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
 			<!-- Date From -->
 			<div>