- Strip full-bleed: remove max-w container, put strips at page level - Remove page heading/subtitle above strip (not in spec) - Swap button always visible (drop opacity-0, keep pointer-events-none) - Korrespondent placeholder "Alle Korrespondenten" + label "— optional" - Add placeholder prop to PersonTypeahead; add onfocused callback prop - "Person suchen" button now focuses #senderId-search instead of no-op navigate - Wire CorrespondentSuggestionsDropdown on correspondent field focus - Hint bar: bold name via <strong>, year-only dates (no ISO strings) - Asymmetry bar: use first name only to prevent label overflow Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
1.0 KiB
Svelte
34 lines
1.0 KiB
Svelte
<script lang="ts">
|
||
import { conv_strip_sort_newest, conv_strip_sort_oldest } from '$lib/messages-extra';
|
||
|
||
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' ? conv_strip_sort_oldest() : conv_strip_sort_newest());
|
||
let fromYear = $derived(fromDate ? fromDate.substring(0, 4) : '');
|
||
let toYear = $derived(toDate ? toDate.substring(0, 4) : '');
|
||
</script>
|
||
|
||
<div
|
||
class="flex items-center gap-[5px] border-b border-[#FDBA74] bg-[#FFF7ED] px-[18px] py-[6px] text-xs text-[#92400E]"
|
||
>
|
||
<span class="text-sm" aria-hidden="true">📋</span>
|
||
|
||
{#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>
|