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

<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import type { DashboardResumeDTO } from '$lib/generated/api';

interface Props {
	resumeDoc: DashboardResumeDTO | null;
}

const { resumeDoc }: Props = $props();

function safeColor(color: string): string {
	return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
}
</script>

{#if resumeDoc === null}
	<div
		data-testid="resume-strip-empty"
		class="rounded-sm border border-line bg-surface p-8 text-center"
	>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width="24"
			height="24"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
			class="mx-auto text-ink-3"
		>
			<rect width="20" height="16" x="2" y="4" rx="2" />
			<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
		</svg>
		<h2 class="mt-3 font-serif text-xl text-ink">{m.dashboard_empty_title()}</h2>
		<p class="mt-1 font-sans text-sm text-ink-2">{m.dashboard_empty_body()}</p>
		<a
			href="/documents"
			class="mt-4 inline-block font-sans text-sm font-bold text-accent hover:underline"
		>
			{m.dashboard_empty_cta()}
		</a>
	</div>
{:else}
	<div data-testid="resume-strip" class="flex gap-4 rounded-sm border border-line bg-surface p-5">
		<div
			class="relative h-[252px] w-[180px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
		>
			{#if resumeDoc.thumbnailUrl}
				<img
					data-testid="resume-thumbnail-img"
					src={resumeDoc.thumbnailUrl}
					alt=""
					class="h-full w-full object-cover object-top dark:mix-blend-multiply"
					loading="lazy"
					decoding="async"
				/>
			{:else}
				<div
					data-testid="resume-thumbnail-fallback"
					class="flex h-full w-full items-center justify-center text-ink-3"
					aria-hidden="true"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="1.5"
						stroke="currentColor"
						class="h-24 w-24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z M9 12.75h6M9 15.75h6M9 18.75h3"
						/>
					</svg>
				</div>
			{/if}
		</div>

		<div class="flex flex-1 flex-col gap-2">
			<p class="flex items-center gap-1.5 font-sans text-xs text-ink-3">
				<span class="text-[#A6DAD8]">●</span>
				{m.dashboard_resume_label()}
				·
				{m.dashboard_blocks({ count: resumeDoc.totalBlocks })}
			</p>

			<h2 class="font-serif text-[1.75rem] leading-tight text-ink">{resumeDoc.title}</h2>

			<p class="font-sans text-sm text-ink-2 italic">{resumeDoc.caption}</p>

			<blockquote
				class="border-l-[3px] border-accent pl-3 font-serif text-[1.0625rem] leading-relaxed text-ink-2"
			>
				{resumeDoc.excerpt}
			</blockquote>

			<div class="mt-auto flex items-center gap-3 pt-2">
				<span class="font-sans text-xs font-bold text-ink">{resumeDoc.pct}%</span>
				<div
					role="progressbar"
					aria-valuenow={resumeDoc.pct}
					aria-valuemin={0}
					aria-valuemax={100}
					class="h-1.5 flex-1 overflow-hidden rounded-full bg-line"
				>
					<div class="h-full rounded-full bg-accent" style="width:{resumeDoc.pct}%"></div>
				</div>
				{#each resumeDoc.collaborators.slice(0, 3) as collab (collab.initials + collab.color)}
					<span
						class="-ml-1 inline-flex h-6 w-6 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white"
						style="background:{safeColor(collab.color)}">{collab.initials}</span
					>
				{/each}
			</div>

			<div class="mt-1 flex items-center gap-4">
				<a
					href="/documents/{resumeDoc.documentId}"
					class="inline-block rounded-sm bg-accent px-4 py-1.5 font-sans text-sm font-bold text-white transition-opacity hover:opacity-90"
				>
					{m.dashboard_resume_cta()}
				</a>
				<a href="/documents" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink">
					{m.dashboard_resume_other()}
				</a>
			</div>
		</div>
	</div>
{/if}