86a216918f
Replace all hardcoded Tailwind colours with semantic tokens: - bg-white → bg-surface (outer strip container) - text-gray-400 → text-ink-3 (dates, meta text, empty-state copy) - text-green-800 / text-green-700 → text-ink / text-ink-2 (headings, pulse, reviewed %) - bg-green-50 / border-green-200 → bg-accent-bg / border-line (skill pill, weekly pulse badge) - bg-ink text-white → bg-primary text-primary-fg (CTA buttons; dark: mint bg + navy text) - hover:text-white → hover:text-primary-fg (ghost CTA hover text) - focus-visible:ring-brand-navy → focus-visible:ring-focus-ring (all doc links) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
77 lines
2.3 KiB
Svelte
77 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
import { getLocale } from '$lib/paraglide/runtime.js';
|
|
import ExpertBadge from './ExpertBadge.svelte';
|
|
|
|
type TranscriptionQueueItemDTO = {
|
|
id: string;
|
|
title: string;
|
|
documentDate?: string;
|
|
needsExpert: boolean;
|
|
annotationCount: number;
|
|
textedBlockCount: number;
|
|
reviewedBlockCount: number;
|
|
};
|
|
|
|
interface Props {
|
|
docs: TranscriptionQueueItemDTO[];
|
|
weeklyCount: number;
|
|
}
|
|
|
|
let { docs, weeklyCount }: Props = $props();
|
|
|
|
function formatDate(dateStr: string): string {
|
|
return new Intl.DateTimeFormat(getLocale(), {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
}).format(new Date(dateStr + 'T12:00:00'));
|
|
}
|
|
</script>
|
|
|
|
{#if docs.length > 0}
|
|
<div class="flex flex-col gap-3 rounded-sm border border-line bg-surface p-4">
|
|
<div>
|
|
<h3 class="mb-1 font-sans text-xs font-bold tracking-widest text-ink uppercase">
|
|
{m.mission_control_segmentation_heading()}
|
|
</h3>
|
|
<span
|
|
class="inline-flex items-center gap-1 rounded-full border border-line bg-accent-bg px-2 py-0.5 text-xs font-semibold text-ink"
|
|
>
|
|
{m.mission_control_seg_skill_pill()}
|
|
</span>
|
|
{#if weeklyCount > 0}
|
|
<p class="mt-1 text-xs font-semibold text-ink-2">
|
|
{m.mission_control_weekly_pulse({ count: weeklyCount })}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
<ul class="space-y-1">
|
|
{#each docs as doc (doc.id)}
|
|
<li>
|
|
<a
|
|
href="/documents/{doc.id}"
|
|
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
|
|
>
|
|
<div class="flex flex-wrap items-center gap-1.5">
|
|
<span class="font-serif text-sm text-ink">{doc.title}</span>
|
|
{#if doc.needsExpert}
|
|
<ExpertBadge />
|
|
{/if}
|
|
</div>
|
|
{#if doc.documentDate}
|
|
<span class="mt-0.5 text-xs text-ink-3">{formatDate(doc.documentDate)}</span>
|
|
{/if}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
<a
|
|
href="/enrich?filter=NEEDS_SEGMENTATION&next=1"
|
|
class="mt-auto block w-full rounded-sm bg-primary py-2 text-center text-xs font-semibold text-primary-fg transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1 focus-visible:outline-none"
|
|
>
|
|
{m.mission_control_segmentation_cta()}
|
|
</a>
|
|
</div>
|
|
{/if}
|