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

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
import { getInitials, personAvatarColor } from '$lib/utils/personFormat';

type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Tag = { id: string; name: string };

type Props = {
	documentDate: string | null;
	location: string | null;
	status: string;
	sender: Person | null;
	receivers: Person[];
	tags: Tag[];
};

let { documentDate, location, status, sender, receivers, tags }: Props = $props();

const VISIBLE_RECEIVER_LIMIT = 5;

const formattedDate = $derived(documentDate ? formatDate(documentDate) : '—');
const displayLocation = $derived(location ?? '—');
const statusLabel = $derived(formatDocumentStatus(status));
const visibleReceivers = $derived(receivers.slice(0, VISIBLE_RECEIVER_LIMIT));
const hiddenReceiverCount = $derived(Math.max(0, receivers.length - VISIBLE_RECEIVER_LIMIT));
const hasPersons = $derived(sender !== null || receivers.length > 0);
const hasTags = $derived(tags.length > 0);

let showAllReceivers = $state(false);

const displayedReceivers = $derived(showAllReceivers ? receivers : visibleReceivers);

function getFullName(person: Person): string {
	return person.displayName;
}
</script>

{#snippet personCard(person: Person)}
	<a
		href="/persons/{person.id}"
		class="group flex items-center gap-2.5 rounded px-2 py-1.5 transition-colors hover:bg-muted"
	>
		<span
			class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
			style="background-color: {personAvatarColor(person.id)}"
			aria-hidden="true"
		>
			{getInitials(person.displayName)}
		</span>
		<span class="font-serif text-sm text-ink">{getFullName(person)}</span>
	</a>
{/snippet}

<div class="border-b border-line p-6">
	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
		<!-- Column 1: Details -->
		<div>
			<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.doc_details_section_details()}
			</h2>
			<dl class="space-y-3 font-serif text-sm">
				<div>
					<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_date()}</dt>
					<dd class="text-ink">{formattedDate}</dd>
				</div>
				<div>
					<dt class="font-sans text-xs font-medium text-ink-3">{m.form_label_location()}</dt>
					<dd class="text-ink">{displayLocation}</dd>
				</div>
				<div>
					<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_status()}</dt>
					<dd class="text-ink">{statusLabel}</dd>
				</div>
			</dl>
		</div>

		<!-- Column 2: Personen -->
		<div>
			<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.doc_details_section_persons()}
			</h2>
			{#if hasPersons}
				<div class="space-y-3">
					{#if sender}
						<div>
							<p class="mb-1 font-sans text-xs font-medium text-ink-3">
								{m.doc_details_field_sender()}
							</p>
							{@render personCard(sender)}
						</div>
					{/if}
					{#if receivers.length > 0}
						<div>
							<p class="mb-1 font-sans text-xs font-medium text-ink-3">
								{m.doc_details_field_receivers()}
							</p>
							<div class="space-y-0.5">
								{#each displayedReceivers as receiver (receiver.id)}
									{@render personCard(receiver)}
								{/each}
							</div>
							{#if hiddenReceiverCount > 0 && !showAllReceivers}
								<button
									type="button"
									onclick={() => (showAllReceivers = true)}
									class="mt-1 px-2 font-sans text-xs font-medium text-ink-2 transition-colors hover:text-ink"
								>
									{m.doc_details_more_receivers({ count: hiddenReceiverCount })}
								</button>
							{/if}
						</div>
					{/if}
				</div>
			{:else}
				<p class="font-serif text-sm text-ink-3">{m.doc_details_no_persons()}</p>
			{/if}
		</div>

		<!-- Column 3: Schlagwoerter -->
		<div>
			<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.doc_details_section_tags()}
			</h2>
			{#if hasTags}
				<div class="flex flex-wrap gap-2">
					{#each tags as tag (tag.id)}
						<a
							href="/?tag={encodeURIComponent(tag.name)}"
							class="rounded bg-muted px-2 py-0.5 text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-accent"
						>
							{tag.name}
						</a>
					{/each}
				</div>
			{:else}
				<p class="font-serif text-sm text-ink-3">{m.doc_details_no_tags()}</p>
			{/if}
		</div>
	</div>
</div>