marcel/familienarchiv
1
0
Fork 0
Code Issues 106 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(conversations): move swap button between person input fields

Browse Source 
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>
This commit is contained in:
Marcel
2026-03-20 16:29:11 +01:00
parent 65a8048e25
commit aa127de9bd
1 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/routes/conversations/+page.svelte
View File

@@ -76,7 +76,7 @@ const enrichedDocuments = $derived(
<!-- FILTER BAR --> <!-- FILTER BAR -->
<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm"> <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 --> <!-- Sender -->
<div <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" 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> </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 --> <!-- Receiver -->
<div <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" 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>
</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"> <div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
<!-- Date From --> <!-- Date From -->
<div> <div>