feat(#240): Mission Control Strip frontend — 5 components + dashboard wiring
Adds the full-width 3-column collaboration widget below the existing
dashboard grid. Renders without the backend running (Promise.allSettled
isolation keeps failures silent).
Components (src/lib/components/):
- ExpertBadge.svelte — purple pill with icon, no props
- SegmentationColumn.svelte — col 1: links to /enrich/{id}, weekly pulse
- TranscriptionColumn.svelte — col 2: per-doc progress bar when blocks exist
- ReadyColumn.svelte — col 3: mint border when filled, dashed empty state
- MissionControlStrip.svelte — strip wrapper, 1-col mobile / 3-col sm+
i18n: 19 new keys added to de/en/es (mission_control_*)
Page wiring:
- +page.server.ts: 4 new Promise.allSettled calls for segmentation-queue,
transcription-queue, ready-to-read, weekly-stats; all failures silent
- +page.svelte: MissionControlStrip rendered below the grid in isDashboard
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
71
frontend/src/lib/components/SegmentationColumn.svelte
Normal file
71
frontend/src/lib/components/SegmentationColumn.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<div class="mb-1 flex items-center gap-2">
|
||||
<h3 class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
{m.mission_control_segmentation_heading()}
|
||||
</h3>
|
||||
{#if weeklyCount > 0}
|
||||
<span class="rounded-full bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700">
|
||||
{m.mission_control_weekly_pulse({ count: weeklyCount })}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="mt-1 mb-3 text-xs text-gray-400">
|
||||
{m.mission_control_segmentation_description()}
|
||||
</p>
|
||||
|
||||
{#if docs.length === 0}
|
||||
<p class="text-xs text-gray-400 italic">{m.mission_control_segmentation_empty()}</p>
|
||||
{:else}
|
||||
<ul class="space-y-1">
|
||||
{#each docs as doc (doc.id)}
|
||||
<li>
|
||||
<a
|
||||
href="/enrich/{doc.id}"
|
||||
class="hover:bg-brand-sand/30 flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy 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-gray-400">{formatDate(doc.documentDate)}</span>
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user