From 708d02a1f7e139008e99683ec71bc34b3dd0a8e5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 22:46:29 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20unify=20date=20inputs=20=E2=80=94=20?=
 =?UTF-8?q?use=20DateInput=20component=20on=20both=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace native <input type="date"> on the document search page with
the custom DateInput component (German dd.mm.yyyy format with auto-dot
insertion). Align both pages' date input styling: add rounded-md,
border, bg-surface, px-3, text-ink, placeholder color, and focus ring
to match all other inputs in the card.

Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/SearchFilterBar.svelte            | 11 +++++------
 .../briefwechsel/CorrespondenzFilterControls.svelte   |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/SearchFilterBar.svelte b/frontend/src/routes/SearchFilterBar.svelte
index 589476df..20328af0 100644
--- a/frontend/src/routes/SearchFilterBar.svelte
+++ b/frontend/src/routes/SearchFilterBar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
 import TagInput from '$lib/components/TagInput.svelte';
+import DateInput from '$lib/components/DateInput.svelte';
 import SortDropdown from '$lib/components/SortDropdown.svelte';
 import { slide } from 'svelte/transition';
 import { m } from '$lib/paraglide/messages.js';
@@ -192,24 +193,22 @@ $effect(() => {
 						class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 						>{m.docs_filter_label_from()}</label
 					>
-					<input
-						type="date"
+					<DateInput
 						id="from"
 						bind:value={from}
 						onchange={onSearch}
-						class="block w-full border-line py-2.5 text-sm shadow-sm"
+						class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 				<div>
 					<label for="to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 						>{m.docs_filter_label_to()}</label
 					>
-					<input
-						type="date"
+					<DateInput
 						id="to"
 						bind:value={to}
 						onchange={onSearch}
-						class="block w-full border-line py-2.5 text-sm shadow-sm"
+						class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 			</div>
diff --git a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
index 77d2d511..8856638c 100644
--- a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
+++ b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
@@ -30,7 +30,7 @@ let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props
 			bind:value={fromDate}
 			onchange={() => onapplyFilters()}
 			placeholder={m.conv_strip_from_placeholder()}
-			class="block w-full border-line px-3 py-2.5 text-sm text-ink shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 
@@ -44,7 +44,7 @@ let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props
 			bind:value={toDate}
 			onchange={() => onapplyFilters()}
 			placeholder={m.conv_strip_to_placeholder()}
-			class="block w-full border-line px-3 py-2.5 text-sm text-ink shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 </div>