familienarchiv/frontend/src/routes/+page.svelte

<script lang="ts">
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { goto } from '$app/navigation';
import TagInput from '$lib/components/TagInput.svelte';
import { slide } from 'svelte/transition';
import { untrack } from 'svelte';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';

let { data } = $props();

let q = $state(untrack(() => data.filters?.q || ''));
let qFocused = $state(false);
let from = $state(untrack(() => data.filters?.from || ''));
let to = $state(untrack(() => data.filters?.to || ''));
let senderId = $state(untrack(() => data.filters?.senderId || ''));
let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));

let searchTimer: ReturnType<typeof setTimeout>;

const hasAdvancedFilters = (filters: typeof data.filters) =>
	(filters?.tags?.length ?? 0) > 0 ||
	!!filters?.senderId ||
	!!filters?.receiverId ||
	!!filters?.from ||
	!!filters?.to;

let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));

function triggerSearch() {
	const params = new SvelteURLSearchParams();

	if (q) params.set('q', q);
	if (from) params.set('from', from);
	if (to) params.set('to', to);
	if (senderId) params.set('senderId', senderId);
	if (receiverId) params.set('receiverId', receiverId);
	if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));

	goto(`/?${params.toString()}`, {
		keepFocus: true,
		noScroll: true
	});
}

function handleTextSearch() {
	clearTimeout(searchTimer);
	searchTimer = setTimeout(() => {
		triggerSearch();
	}, 500);
}

// Trigger search when tags change
let prevTagStr = untrack(() => tagNames.join(','));
$effect(() => {
	const cur = tagNames.join(',');
	if (cur !== prevTagStr) {
		prevTagStr = cur;
		triggerSearch();
	}
});

// Sync local state with server data after navigation.
// Guard q: skip overwrite while the user is actively typing in the search field.
$effect(() => {
	if (!qFocused) q = data.filters?.q || '';
	from = data.filters?.from || '';
	to = data.filters?.to || '';
	senderId = data.filters?.senderId || '';
	receiverId = data.filters?.receiverId || '';
	tagNames = data.filters?.tags || [];
	if (hasAdvancedFilters(data.filters)) showAdvanced = true;
});
</script>

<!-- Outer Container: Matches the 'Sand' background of the layout -->
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
	<!-- SEARCH & FILTER CARD -->
	<div class="mb-8 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
		<!-- ROW 1: Main Search (One Line) -->
		<div class="flex items-center gap-4">
			<!-- Full Text Search -->
			<div class="relative flex-1">
				<input
					type="text"
					bind:value={q}
					oninput={handleTextSearch}
					onfocus={() => (qFocused = true)}
					onblur={() => (qFocused = false)}
					placeholder={m.docs_search_placeholder()}
					class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
				/>
				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
					<img
						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
						alt=""
						aria-hidden="true"
						class="h-4 w-4 opacity-40"
					/>
				</div>
			</div>

			<!-- Toggle Advanced Button -->
			<button
				onclick={() => (showAdvanced = !showAdvanced)}
				class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
			>
				<img
					src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
					alt=""
					aria-hidden="true"
					class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
				/>
				{m.docs_btn_filter()}
			</button>

			<!-- Reset Button -->
			<a
				href="/"
				class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
				title={m.docs_btn_reset_title()}
			>
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-5 w-5 opacity-40"
				/>
			</a>
		</div>

		<!-- ROW 2: Advanced Filters (Collapsible) -->
		{#if showAdvanced}
			<div
				transition:slide
				class="mt-6 grid grid-cols-1 gap-6 border-t border-gray-100 pt-6 md:grid-cols-12"
			>
				<!-- Tag Filter -->
				<div class="md:col-span-12">
					<p class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase">
						{m.docs_filter_label_tags()}
					</p>
					<TagInput bind:tags={tagNames} allowCreation={false} />
				</div>

				<!-- Sender -->
				<div class="md:col-span-3">
					<div
						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
					>
						<PersonTypeahead
							name="senderId"
							label={m.docs_filter_label_sender()}
							bind:value={senderId}
							initialName={data.initialValues?.senderName}
							onchange={triggerSearch}
						/>
					</div>
				</div>

				<!-- Receiver -->
				<div class="md:col-span-3">
					<div
						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
					>
						<PersonTypeahead
							name="receiverId"
							label={m.docs_filter_label_receivers()}
							bind:value={receiverId}
							initialName={data.initialValues?.receiverName}
							onchange={triggerSearch}
						/>
					</div>
				</div>

				<!-- Dates -->
				<div class="grid grid-cols-2 gap-4 md:col-span-6">
					<div>
						<label
							for="from"
							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
							>{m.docs_filter_label_from()}</label
						>
						<input
							type="date"
							id="from"
							bind:value={from}
							onchange={triggerSearch}
							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
						/>
					</div>
					<div>
						<label
							for="to"
							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
							>{m.docs_filter_label_to()}</label
						>
						<input
							type="date"
							id="to"
							bind:value={to}
							onchange={triggerSearch}
							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
						/>
					</div>
				</div>
			</div>
		{/if}
	</div>

	<!-- DOCUMENT LIST HEADER -->
	<div class="mb-2 flex justify-end">
		{#if data.canWrite}
			<a
				href="/documents/new"
				class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
			>
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-4 w-4"
				/>
				{m.docs_btn_new()}
			</a>
		{/if}
	</div>

	<!-- DOCUMENT LIST -->
	<div class="border border-brand-sand bg-white shadow-sm">
		{#if data.error}
			<div class="bg-red-50 p-8 text-center text-red-600">
				{data.error}
			</div>
		{:else if data.documents && data.documents.length > 0}
			<ul class="divide-y divide-gray-100">
				{#each data.documents as doc (doc.id)}
					<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
						<!-- LINK TO DETAIL PAGE -->
						<a href="/documents/{doc.id}" class="block p-6">
							<div class="flex flex-col gap-6 sm:flex-row">
								<!-- Main Info -->
								<div class="flex-1">
									<div class="mb-2 flex items-baseline justify-between">
										<!-- Title: Serif & Brand Navy -->
										<h3
											class="font-serif text-xl font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
										>
											{doc.title || doc.originalFilename}
										</h3>
									</div>

									<!-- Metadata Row -->
									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
										<div class="flex items-center">
											<img
												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
												alt=""
												aria-hidden="true"
												class="mr-1.5 h-4 w-4"
											/>
											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
										</div>
										{#if doc.location}
											<div class="flex items-center">
												<img
													src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
													alt=""
													aria-hidden="true"
													class="mr-1.5 h-4 w-4"
												/>
												{doc.location}
											</div>
										{/if}
									</div>

									<!-- Sender/Receiver Info -->
									<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
										<div class="flex items-baseline">
											<span
												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
												>{m.docs_list_from()}</span
											>
											{#if doc.sender}
												<span class="text-gray-900"
													>{doc.sender.firstName} {doc.sender.lastName}</span
												>
											{:else}
												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
											{/if}
										</div>
										<div class="flex items-baseline">
											<span
												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
												>{m.docs_list_to()}</span
											>
											{#if doc.receivers && doc.receivers.length > 0}
												<span class="text-gray-900">
													{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
												</span>
											{:else}
												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
											{/if}
										</div>
									</div>

									<!-- Tags Display -->
									{#if doc.tags && doc.tags.length > 0}
										<div class="mt-4 flex flex-wrap gap-2 pt-3">
											{#each doc.tags as tag (tag.id)}
												<button
													type="button"
													class="relative z-10 inline-flex cursor-pointer items-center rounded bg-brand-sand/30 px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
													onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
												>
													{tag.name}
												</button>
											{/each}
										</div>
									{/if}
								</div>

								<!-- Arrow Icon -->
								<div
									class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
								>
									<img
										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
										alt=""
										aria-hidden="true"
										class="h-6 w-6"
									/>
								</div>
							</div>
						</a>
					</li>
				{/each}
			</ul>
		{:else}
			<!-- Empty State -->
			<div class="p-16 text-center">
				<div
					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
				>
					<img
						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
						alt=""
						aria-hidden="true"
						class="h-6 w-6"
					/>
				</div>
				<h3 class="font-serif text-lg font-medium text-brand-navy">{m.docs_empty_heading()}</h3>
				<p class="mt-1 font-sans text-sm text-gray-500">
					{m.docs_empty_text()}
				</p>
				<button
					onclick={() => goto('/')}
					class="mt-6 text-sm font-bold tracking-wide text-brand-mint uppercase transition hover:text-brand-navy"
				>
					{m.docs_empty_btn_clear()}
				</button>
			</div>
		{/if}
	</div>
</main>