familienarchiv/frontend/src/lib/person/PersonCard.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
import type { components } from '$lib/generated/api';

type Person = components['schemas']['PersonSummaryDTO'];

let { person }: { person: Person } = $props();

// "Unconfirmed" is exactly the `provisional` flag — the authoritative signal the importer
// sets and the triage flow clears. The badge, the "Zu prüfen (N)" count and the
// /persons/review list all key off this same flag, so badge ⇔ count ⇔ triage can never drift.
const isUnconfirmed = $derived(person.provisional === true);

// An empty / "?" last name is a separate, purely defensive concern: it must not crash the
// initials branch (reading lastName[0] on null throws) and must never render a "?" initial.
// It implies the placeholder glyph but — on its own — no "unbestätigt" badge.
const hasNoName = $derived(
	person.lastName == null || person.lastName.trim() === '' || person.lastName === '?'
);

// A non-PERSON type (institution/group) gets a typed glyph; a confirmed, named person gets
// initials. Provisional entries and nameless entries fall back to the neutral placeholder glyph.
const showGlyph = $derived(
	isUnconfirmed || hasNoName || (person.personType != null && person.personType !== 'PERSON')
);

const initials = $derived.by(() => {
	const first = person.firstName?.[0] ?? '';
	const last = person.lastName?.[0] ?? '';
	return first ? first + last : last;
});

const documentCount = $derived(person.documentCount ?? 0);
</script>

<a href="/persons/{person.id}" class="group block">
	<div
		class="flex h-full flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md"
	>
		<!-- Avatar: confirmed persons get a primary-coloured initials disc; institutions/groups
		     and unconfirmed entries get a neutral, muted glyph so "unverified" is pre-attentive. -->
		<div
			class={[
				'flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full font-serif text-base font-bold transition-colors',
				isUnconfirmed || hasNoName ? 'bg-muted text-ink-2' : 'bg-primary text-primary-fg'
			]}
		>
			{#if showGlyph}
				{#if person.personType === 'INSTITUTION'}
					<svg
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-2M5 21H3m2 0v-2m4-12h2m-2 4h2m4-4h2m-2 4h2"
						/>
					</svg>
				{:else if person.personType === 'GROUP'}
					<svg
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
						/>
					</svg>
				{:else}
					<!-- Neutral person glyph for unconfirmed / UNKNOWN entries (never a "?" initial). -->
					<img
						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
						alt=""
						aria-hidden="true"
						class="h-6 w-6 opacity-70"
					/>
				{/if}
			{:else}
				{initials}
			{/if}
		</div>

		<!-- Name -->
		<p class="font-serif text-sm font-bold text-ink group-hover:underline">
			{person.displayName}
		</p>

		{#if isUnconfirmed}
			<!-- State conveyed by text + the muted placeholder shape, never colour alone (WCAG 1.4.1). -->
			<span
				class="inline-flex items-center gap-1 rounded-full border border-line bg-muted px-2.5 py-0.5 font-sans text-xs font-semibold text-ink-2"
			>
				<svg
					class="h-3 w-3"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="2"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M12 9v3.75m0 3.75h.008M10.34 3.94l-7.5 12.99A1.5 1.5 0 004.14 19.5h15.72a1.5 1.5 0 001.3-2.57l-7.5-12.99a1.5 1.5 0 00-2.62 0z"
					/>
				</svg>
				{m.person_badge_unconfirmed()}
			</span>
		{:else if person.personType && person.personType !== 'PERSON'}
			<PersonTypeBadge personType={person.personType} />
		{/if}

		<!-- Alias -->
		{#if person.alias}
			<p class="font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
		{/if}

		<!-- Life dates — PersonSummaryDTO is year-shaped by design (ADR-039); the glyphs are
		     aria-hidden so screen readers only announce the years. -->
		{#if person.birthYear || person.deathYear}
			<p class="font-sans text-sm text-ink-3">
				{#if person.birthYear}
					<span aria-hidden="true">*</span> {person.birthYear}
				{/if}
				{#if person.birthYear && person.deathYear}–{/if}
				{#if person.deathYear}
					<span aria-hidden="true">†</span> {person.deathYear}
				{/if}
			</p>
		{/if}

		<!-- Doc count chip -->
		{#if documentCount > 0}
			<span
				class="mt-1 inline-flex items-center rounded-full border border-line bg-muted px-2.5 py-0.5 font-sans text-sm font-semibold text-ink-2"
			>
				{documentCount === 1
					? m.person_card_doc_count_one()
					: m.person_card_doc_count_many({ count: documentCount })}
			</span>
		{/if}
	</div>
</a>