familienarchiv/frontend/src/lib/components/StammbaumCard.svelte

<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';
import RelationshipChip from '$lib/components/RelationshipChip.svelte';
import AddRelationshipForm from '$lib/components/AddRelationshipForm.svelte';
import { chipLabel, otherName, inferredRelationshipLabel } from '$lib/relationshipLabels';
import type { components } from '$lib/generated/api';

type RelationshipDTO = components['schemas']['RelationshipDTO'];
type InferredRelationshipWithPersonDTO = components['schemas']['InferredRelationshipWithPersonDTO'];

interface Props {
	personId: string;
	familyMember: boolean;
	relationships: RelationshipDTO[];
	inferredRelationships: InferredRelationshipWithPersonDTO[];
	canWrite: boolean;
	relationshipError?: string | null;
}

let {
	personId,
	familyMember,
	relationships,
	inferredRelationships,
	canWrite,
	relationshipError = null
}: Props = $props();

type RelationType = NonNullable<RelationshipDTO['relationType']>;

const sortedDirect = $derived([...relationships].sort(byTypeThenYear));
const topDerived = $derived(inferredRelationships.slice(0, 5));

function byTypeThenYear(a: RelationshipDTO, b: RelationshipDTO): number {
	const order = relationTypeOrder(a.relationType) - relationTypeOrder(b.relationType);
	if (order !== 0) return order;
	return (a.fromYear ?? 0) - (b.fromYear ?? 0);
}

function relationTypeOrder(t: RelationType | undefined): number {
	const order: Record<string, number> = {
		PARENT_OF: 1,
		SPOUSE_OF: 2,
		SIBLING_OF: 3,
		FRIEND: 4,
		COLLEAGUE: 5,
		EMPLOYER: 6,
		DOCTOR: 7,
		NEIGHBOR: 8,
		OTHER: 9
	};
	return order[t ?? 'OTHER'] ?? 99;
}

function yearRange(rel: RelationshipDTO): string {
	const from = rel.fromYear;
	const to = rel.toYear;
	if (from && to) return `${from}–${to}`;
	if (from) return m.relation_year_from({ year: from });
	if (to) return m.relation_year_to({ year: to });
	return '';
}
</script>

<div class="mt-6 rounded-sm border border-line bg-surface p-6 shadow-sm">
	<!-- Header row: heading + family-member toggle -->
	<div class="mb-5 flex items-start justify-between gap-4">
		<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.stammbaum_relationships_heading()}
		</h2>
		{#if canWrite}
			<form method="POST" action="?/toggleFamilyMember" use:enhance>
				<input type="hidden" name="familyMember" value={familyMember ? 'false' : 'true'} />
				<button
					type="submit"
					role="switch"
					aria-checked={familyMember}
					aria-label={familyMember
						? m.relation_toggle_remove_from_tree()
						: m.relation_toggle_add_to_tree()}
					class="inline-flex items-center gap-2 font-sans text-xs font-medium text-ink-2 transition-colors hover:text-ink"
				>
					<span
						class="relative inline-block h-4 w-7 rounded-full transition-colors {familyMember
							? 'bg-primary'
							: 'bg-line'}"
					>
						<span
							class="absolute top-0.5 left-0.5 inline-block h-3 w-3 rounded-full bg-white transition-transform {familyMember
								? 'translate-x-3'
								: ''}"
						></span>
					</span>
					{m.relation_label_family_member()}
				</button>
			</form>
		{/if}
	</div>

	{#if relationshipError}
		<p class="mb-3 text-sm text-red-700" role="alert">{relationshipError}</p>
	{/if}

	<!-- In-tree banner -->
	{#if familyMember}
		<div
			class="mb-4 flex items-center justify-between rounded-sm border border-accent/30 bg-accent/10 px-3 py-2"
		>
			<div class="flex items-center gap-2">
				<span class="inline-block h-2 w-2 rounded-full bg-accent"></span>
				<span class="font-sans text-xs font-medium text-ink-2">{m.relation_label_in_tree()}</span>
			</div>
			<a
				href="/stammbaum?focus={personId}"
				class="font-sans text-xs font-medium text-primary hover:underline"
			>
				{m.relation_label_view_in_tree()}
			</a>
		</div>
	{/if}

	<!-- Direkte Beziehungen -->
	<h3 class="mb-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.relation_label_direct()}
	</h3>
	{#if sortedDirect.length === 0}
		<p class="mb-2 text-sm text-ink-2 italic">{m.person_relationships_empty()}</p>
	{:else}
		<ul class="mb-2 divide-y divide-line">
			{#each sortedDirect as rel (rel.id)}
				<RelationshipChip
					chipLabel={chipLabel(rel, personId)}
					otherName={otherName(rel, personId)}
					yearRange={yearRange(rel)}
					canWrite={canWrite}
					relId={rel.id}
				/>
			{/each}
		</ul>
	{/if}

	{#if canWrite}
		<AddRelationshipForm personId={personId} />
	{/if}

	<!-- Abgeleitete Beziehungen -->
	{#if topDerived.length > 0}
		<details class="mt-6">
			<summary
				class="cursor-pointer text-xs font-bold tracking-widest text-ink-3 uppercase select-none"
			>
				{m.relation_label_derived()}
			</summary>
			<ul class="mt-2 space-y-2">
				{#each topDerived as derived (derived.person.id)}
					<li class="flex items-center gap-2">
						<span
							class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
						>
							{inferredRelationshipLabel(derived.label)}
						</span>
						<a
							href="/persons/{derived.person.id}"
							class="min-w-0 flex-1 truncate font-serif text-sm text-ink-2 hover:underline"
						>
							{derived.person.displayName}
						</a>
					</li>
				{/each}
			</ul>
		</details>
	{/if}
</div>