f7eefb525f
text-ink-3 on bg-ink-3/10 (low-saturation grey on lighter grey) gave roughly 2.8:1 contrast — below the 4.5:1 AA threshold for normal-weight small text. Switching the foreground to text-ink-1 keeps the muted background but lifts the text contrast well above 7:1. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
66 lines
2.0 KiB
Svelte
66 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
import { relativeTimeDe } from '$lib/shared/relativeTime';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type Document = components['schemas']['Document'];
|
|
|
|
interface Props {
|
|
documents: Document[];
|
|
}
|
|
|
|
const { documents }: Props = $props();
|
|
|
|
function isNew(doc: Document): boolean {
|
|
return new Date(doc.createdAt).getTime() === new Date(doc.updatedAt).getTime();
|
|
}
|
|
</script>
|
|
|
|
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
|
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.dashboard_reader_recent_docs_heading()}
|
|
</h2>
|
|
<ul class="flex flex-col divide-y divide-line">
|
|
{#each documents as doc (doc.id)}
|
|
<li class="py-3 first:pt-0 last:pb-0">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="flex min-w-0 flex-col gap-1">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<a
|
|
href="/documents/{doc.id}"
|
|
class="text-ink-1 truncate rounded-sm font-serif text-sm transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
|
>
|
|
{doc.title}
|
|
</a>
|
|
{#if isNew(doc)}
|
|
<span
|
|
class="rounded bg-brand-mint/20 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide text-brand-navy uppercase"
|
|
>
|
|
{m.dashboard_badge_new()}
|
|
</span>
|
|
{:else}
|
|
<span
|
|
class="text-ink-1 rounded bg-ink-3/10 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide uppercase"
|
|
>
|
|
{m.dashboard_badge_updated()}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{#if doc.sender}
|
|
<a
|
|
href="/persons/{doc.sender.id}"
|
|
class="font-sans text-xs text-ink-3 transition-colors hover:text-brand-mint"
|
|
>
|
|
{doc.sender.displayName ?? doc.sender.lastName}
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
<span class="shrink-0 font-sans text-xs text-ink-3">
|
|
{relativeTimeDe(new Date(doc.updatedAt))}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|