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

<script lang="ts">
import { goto } from '$app/navigation';
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';

let { data } = $props();

let q = $state(untrack(() => data.q || ''));
let qFocused = $state(false);

// Sync URL → local state after navigation, but not while the user is typing.
$effect(() => {
	if (!qFocused) q = data.q || '';
});

let searchTimeout: ReturnType<typeof setTimeout>;

function handleSearch() {
	clearTimeout(searchTimeout);
	searchTimeout = setTimeout(() => {
		goto(`/persons?q=${q}`, { keepFocus: true });
	}, 300);
}
</script>

<div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
	<!-- Header Area -->
	<div
		class="mb-10 flex flex-col justify-between gap-6 border-b border-ink/10 pb-6 md:flex-row md:items-end"
	>
		<div>
			<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
			<p class="mt-2 max-w-xl font-sans text-sm text-ink/60">
				{m.persons_subtitle()}
			</p>
			{#if data.canWrite}
				<a
					href="/persons/new"
					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
				>
					<img
						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
						alt=""
						aria-hidden="true"
						class="h-4 w-4"
					/>
					{m.persons_btn_new()}
				</a>
			{/if}
		</div>

		<!-- Search Input -->
		<div class="w-full md:w-80">
			<label for="search" class="sr-only">Suche</label>
			<div class="relative">
				<input
					id="search"
					type="text"
					placeholder={m.persons_search_placeholder()}
					bind:value={q}
					oninput={handleSearch}
					onfocus={() => (qFocused = true)}
					onblur={() => (qFocused = false)}
					class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
				/>
				<div
					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-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>
		</div>
	</div>

	{#if data.persons.length === 0}
		<div
			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
		>
			<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-ink">
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-6 w-6"
				/>
			</div>
			<p class="font-serif text-lg text-ink">{m.persons_empty_heading()}</p>
			<p class="mt-1 font-sans text-sm text-ink-2">{m.persons_empty_text()}</p>
		</div>
	{:else}
		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
			{#each data.persons as person (person.id)}
				<a href="/persons/{person.id}" class="group block h-full">
					<div
						class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-line bg-surface p-6 shadow-sm transition-all duration-200 hover:border-primary hover:shadow-md"
					>
						<!-- Decorative Accent on Hover -->
						<div
							class="absolute top-0 bottom-0 left-0 w-1 bg-primary opacity-0 transition-opacity group-hover:opacity-100"
						></div>

						<!-- Avatar -->
						<div class="flex-shrink-0">
							<div
								class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-primary-fg transition-colors group-hover:bg-accent group-hover:text-ink"
							>
								{person.firstName[0]}{person.lastName[0]}
							</div>
						</div>

						<!-- Info -->
						<div class="min-w-0 flex-1">
							<p
								class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
							>
								{person.firstName}
								{person.lastName}
							</p>
							{#if person.alias}
								<p class="mt-0.5 truncate font-sans text-xs text-ink-2">"{person.alias}"</p>
							{/if}
						</div>
					</div>
				</a>
			{/each}
		</div>
	{/if}
</div>