107 lines
3.4 KiB
Svelte
107 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import BackButton from '$lib/shared/primitives/BackButton.svelte';
|
|
import BulkSelectionBar from '$lib/document/BulkSelectionBar.svelte';
|
|
import { bulkSelectionStore } from '$lib/document/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} />
|