35303831f7
- UploadSuccessBanner dismiss button: 24×24 → 40×40 hit area (icon stays at 16px). Matches senior-first baseline Leonie flagged. - DashboardNeedsMetadata chevron: adds motion-reduce:transition-none and motion-reduce:group-hover:translate-x-0 so users with prefers-reduced- motion do not see the hover translate. - Row title prefixed with an sr-only "PDF: " span so assistive tech announces the document affordance alongside the title. Addresses Leonie's review concerns #2, #3, and the sr-only nit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
74 lines
2.1 KiB
Svelte
74 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
import { relativeTimeDe } from '$lib/relativeTime';
|
|
|
|
type IncompleteDoc = {
|
|
id: string;
|
|
title: string;
|
|
uploadedAt: string;
|
|
};
|
|
|
|
interface Props {
|
|
topDocs: IncompleteDoc[];
|
|
totalCount: number;
|
|
}
|
|
|
|
let { topDocs, totalCount }: Props = $props();
|
|
|
|
const showFooter = $derived(totalCount > 5);
|
|
</script>
|
|
|
|
{#if topDocs.length > 0}
|
|
<div data-testid="dashboard-needs-metadata" class="rounded-sm border border-line bg-surface p-6">
|
|
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
|
|
{m.dashboard_needs_metadata_heading()}
|
|
</h2>
|
|
<ul class="divide-y divide-line">
|
|
{#each topDocs as doc (doc.id)}
|
|
<li>
|
|
<a
|
|
href="/enrich/{doc.id}"
|
|
class="group flex items-center gap-3 py-3 text-ink hover:bg-accent-bg/40"
|
|
>
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Copy-Item-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-5 w-5 shrink-0 opacity-50 group-hover:opacity-80"
|
|
/>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="truncate font-serif text-base text-ink group-hover:underline">
|
|
<span class="sr-only">PDF: </span>{doc.title}
|
|
</div>
|
|
<div class="font-sans text-xs text-ink-3">
|
|
{relativeTimeDe(new Date(doc.uploadedAt))}
|
|
</div>
|
|
</div>
|
|
<svg
|
|
class="h-4 w-4 shrink-0 text-ink-3 transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{#if showFooter}
|
|
<div class="mt-4">
|
|
<a
|
|
href="/enrich"
|
|
class="font-sans text-sm font-medium text-ink-2 hover:text-ink hover:underline"
|
|
>
|
|
{m.dashboard_needs_metadata_show_all_count({ count: totalCount })}
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|