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

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/components/BackButton.svelte';
import BulkSelectionBar from '$lib/components/document/BulkSelectionBar.svelte';
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';

let { data } = $props();

const documents = $derived(data.documents);
const count = $derived(documents.length);
const canWrite = $derived(data.canWrite);
</script>

<!-- Reserve bottom padding when the bulk-selection bar is visible so the
	 sticky bar does not occlude the last document row (WCAG 1.4.10). -->
<div class="mx-auto max-w-4xl px-4 py-10" class:pb-32={bulkSelectionStore.size > 0 && canWrite}>
	<!-- Back Link -->
	<BackButton />

	<!-- Page Header -->
	<div class="mb-8 flex items-center justify-between border-b border-line pb-6">
		<div>
			<h1 class="font-serif text-3xl font-medium text-ink">
				{m.enrich_list_heading()}
			</h1>
			{#if count > 0}
				<p class="mt-2 font-sans text-sm text-ink-2">
					{count}
					{m.enrich_list_count()}
				</p>
			{/if}
		</div>

		{#if count > 0}
			<a
				href="/enrich/{documents[0].id}"
				class="bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
			>
				{m.enrich_list_start()}
			</a>
		{/if}
	</div>

	<!-- Empty State -->
	{#if count === 0}
		<div
			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-20 text-center"
		>
			<div class="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Check/Check-Circle-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-7 w-7 opacity-50"
				/>
			</div>
			<p class="font-serif text-lg font-medium text-ink">
				{m.enrich_list_empty_heading()}
			</p>
			<p class="mt-2 max-w-xs font-sans text-sm text-ink-2">
				{m.enrich_list_empty_body()}
			</p>
		</div>
	{:else}
		<!-- Document Rows -->
		<div class="border border-line bg-surface shadow-sm">
			<ul class="divide-y divide-line-2">
				{#each documents as doc (doc.id)}
					<li class="group relative transition-colors duration-200 hover:bg-muted">
						<a href="/enrich/{doc.id}" class="absolute inset-0 z-0 block" aria-label={doc.title}
						></a>
						<div class="pointer-events-none relative z-10 flex items-center justify-between p-6">
							{#if canWrite}
								<label
									class="pointer-events-auto mr-4 flex min-h-[44px] min-w-[44px] flex-shrink-0 cursor-pointer items-center"
									data-testid="bulk-select-checkbox"
								>
									<input
										type="checkbox"
										class="h-5 w-5 cursor-pointer accent-brand-navy"
										checked={bulkSelectionStore.has(doc.id)}
										onchange={() => bulkSelectionStore.toggle(doc.id)}
										aria-label={m.bulk_edit_select_document({ title: doc.title })}
									/>
								</label>
							{/if}
							<div class="min-w-0 flex-1">
								<p class="font-serif text-lg font-medium text-ink group-hover:underline">
									{doc.title}
								</p>
							</div>
							<img
								src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
								alt=""
								aria-hidden="true"
								class="ml-4 h-5 w-5 shrink-0 opacity-30 transition-opacity group-hover:opacity-70"
							/>
						</div>
					</li>
				{/each}
			</ul>
		</div>
	{/if}
</div>

<BulkSelectionBar canWrite={canWrite} />