c4715f1637
Wrap person bar + filter controls in a card matching the document search page (rounded-sm border p-6 shadow-sm). Switch PersonTypeahead to default mode with matching label/input overrides. Bump date inputs and sort button to text-sm py-2.5. Filter row uses border-t separator like the document search advanced section. Refs: #179 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
1.3 KiB
Svelte
51 lines
1.3 KiB
Svelte
<script lang="ts">
|
||
import { m } from '$lib/paraglide/messages.js';
|
||
|
||
interface Props {
|
||
senderName: string;
|
||
fromDate?: string;
|
||
toDate?: string;
|
||
sortDir?: string;
|
||
}
|
||
|
||
let { senderName, fromDate = '', toDate = '', sortDir = 'DESC' }: Props = $props();
|
||
|
||
let hasDateFilter = $derived(!!(fromDate || toDate));
|
||
let sortLabel = $derived(
|
||
sortDir === 'ASC' ? m.conv_strip_sort_oldest() : m.conv_strip_sort_newest()
|
||
);
|
||
let fromYear = $derived(fromDate ? fromDate.substring(0, 4) : '');
|
||
let toYear = $derived(toDate ? toDate.substring(0, 4) : '');
|
||
</script>
|
||
|
||
<div
|
||
class="mt-4 flex items-center gap-1.5 rounded-sm border border-accent bg-accent-bg px-4 py-2.5 text-sm text-ink"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
class="shrink-0"
|
||
>
|
||
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
|
||
<rect x="9" y="3" width="6" height="4" rx="1" />
|
||
</svg>
|
||
|
||
{#if hasDateFilter}
|
||
<strong>{senderName}</strong>
|
||
<span>·</span>
|
||
<span>{fromYear}–{toYear}</span>
|
||
<span>·</span>
|
||
<span>{sortLabel}</span>
|
||
{:else}
|
||
Alle Briefe von <strong>{senderName}</strong> — wähle einen Korrespondenten oben um einzugrenzen
|
||
{/if}
|
||
</div>
|