fix(#240): align Mission Control Strip UI with final spec
- Strip heading: "Mitarbeiten" → "Was braucht Aufmerksamkeit?" - Column 1 heading: "Segmentierung" → "Rahmen einzeichnen"; add green skill pill "✓ Ohne Vorkenntnisse"; heading color gray → ink (navy) - Column 2 heading: "Transkription" → "Text eintippen"; add navy skill pill "Kurrent hilfreich"; heading color gray → ink; weekly pulse color green → ink (task, not achievement); progress bar track bg-gray-200/h-1.5 → bg-ink/20/h-1; add transition-all to fill - Column 3 heading: "Lesefertig" → "Lesefertig ✓"; heading color gray → green-800; add "N Dokumente bereit" subtitle in green; add "Alle N lesen →" link at bottom; reviewed % color gray → green-800 - All columns: add CTA buttons at bottom (Jetzt einzeichnen / Jetzt tippen); empty state removed from cols 1 & 2 (columns hide when empty); empty-state ghost CTA in col 3 restyled as bordered button with hover:bg-ink - Strip: add visibility guard — hides when all three lists are empty - i18n: add mission_control_seg_skill_pill, mission_control_trans_skill_pill, mission_control_ready_subtitle, mission_control_ready_all_cta in de/en/es; update heading and CTA copy in all three locales Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -556,17 +556,21 @@
|
||||
"transcription_block_segmentation_only": "Nur Segmentierung",
|
||||
"training_chip_kurrent": "Kurrent-Erkennung",
|
||||
"training_chip_segmentation": "Segmentierung",
|
||||
"mission_control_heading": "Mitarbeiten",
|
||||
"mission_control_segmentation_heading": "Segmentierung",
|
||||
"mission_control_heading": "Was braucht Aufmerksamkeit?",
|
||||
"mission_control_segmentation_heading": "Rahmen einzeichnen",
|
||||
"mission_control_segmentation_description": "Textbereiche markieren — keine Vorkenntnisse nötig",
|
||||
"mission_control_segmentation_cta": "Segmentieren",
|
||||
"mission_control_seg_skill_pill": "✓ Ohne Vorkenntnisse",
|
||||
"mission_control_segmentation_cta": "Jetzt einzeichnen →",
|
||||
"mission_control_segmentation_empty": "Alle Dokumente haben bereits Segmentierungsblöcke.",
|
||||
"mission_control_transcription_heading": "Transkription",
|
||||
"mission_control_transcription_heading": "Text eintippen",
|
||||
"mission_control_transcription_description": "Text abschreiben — Kurrent-Kenntnisse hilfreich",
|
||||
"mission_control_transcription_cta": "Transkribieren",
|
||||
"mission_control_trans_skill_pill": "Kurrent hilfreich",
|
||||
"mission_control_transcription_cta": "Jetzt tippen →",
|
||||
"mission_control_transcription_empty": "Keine Dokumente warten auf Transkription.",
|
||||
"mission_control_ready_heading": "Lesefertig",
|
||||
"mission_control_ready_heading": "Lesefertig ✓",
|
||||
"mission_control_ready_description": "Vollständig transkribiert und geprüft",
|
||||
"mission_control_ready_subtitle": "{count} Dokumente bereit",
|
||||
"mission_control_ready_all_cta": "Alle {count} lesen →",
|
||||
"mission_control_ready_empty": "Noch keine Dokumente vollständig transkribiert.",
|
||||
"mission_control_ready_empty_cta": "Jetzt mitmachen",
|
||||
"mission_control_weekly_pulse": "↑ +{count} diese Woche",
|
||||
|
||||
@@ -556,17 +556,21 @@
|
||||
"transcription_block_segmentation_only": "Segmentation only",
|
||||
"training_chip_kurrent": "Kurrent recognition",
|
||||
"training_chip_segmentation": "Segmentation",
|
||||
"mission_control_heading": "Contribute",
|
||||
"mission_control_segmentation_heading": "Segmentation",
|
||||
"mission_control_heading": "What needs attention?",
|
||||
"mission_control_segmentation_heading": "Draw regions",
|
||||
"mission_control_segmentation_description": "Mark text areas — no prior knowledge needed",
|
||||
"mission_control_segmentation_cta": "Segment",
|
||||
"mission_control_seg_skill_pill": "✓ No prior knowledge",
|
||||
"mission_control_segmentation_cta": "Start marking →",
|
||||
"mission_control_segmentation_empty": "All documents already have segmentation blocks.",
|
||||
"mission_control_transcription_heading": "Transcription",
|
||||
"mission_control_transcription_heading": "Type the text",
|
||||
"mission_control_transcription_description": "Type out text — Kurrent knowledge helpful",
|
||||
"mission_control_transcription_cta": "Transcribe",
|
||||
"mission_control_trans_skill_pill": "Kurrent helpful",
|
||||
"mission_control_transcription_cta": "Start typing →",
|
||||
"mission_control_transcription_empty": "No documents waiting for transcription.",
|
||||
"mission_control_ready_heading": "Ready to Read",
|
||||
"mission_control_ready_heading": "Ready to read ✓",
|
||||
"mission_control_ready_description": "Fully transcribed and reviewed",
|
||||
"mission_control_ready_subtitle": "{count} documents ready",
|
||||
"mission_control_ready_all_cta": "Read all {count} →",
|
||||
"mission_control_ready_empty": "No documents fully transcribed yet.",
|
||||
"mission_control_ready_empty_cta": "Start contributing",
|
||||
"mission_control_weekly_pulse": "↑ +{count} this week",
|
||||
|
||||
@@ -556,17 +556,21 @@
|
||||
"transcription_block_segmentation_only": "Solo segmentación",
|
||||
"training_chip_kurrent": "Reconocimiento Kurrent",
|
||||
"training_chip_segmentation": "Segmentación",
|
||||
"mission_control_heading": "Colaborar",
|
||||
"mission_control_segmentation_heading": "Segmentación",
|
||||
"mission_control_heading": "¿Qué necesita atención?",
|
||||
"mission_control_segmentation_heading": "Marcar regiones",
|
||||
"mission_control_segmentation_description": "Marcar áreas de texto — sin conocimientos previos",
|
||||
"mission_control_segmentation_cta": "Segmentar",
|
||||
"mission_control_seg_skill_pill": "✓ Sin conocimientos previos",
|
||||
"mission_control_segmentation_cta": "Empezar a marcar →",
|
||||
"mission_control_segmentation_empty": "Todos los documentos ya tienen bloques de segmentación.",
|
||||
"mission_control_transcription_heading": "Transcripción",
|
||||
"mission_control_transcription_heading": "Escribir el texto",
|
||||
"mission_control_transcription_description": "Escribir el texto — conocimiento de Kurrent útil",
|
||||
"mission_control_transcription_cta": "Transcribir",
|
||||
"mission_control_trans_skill_pill": "Kurrent útil",
|
||||
"mission_control_transcription_cta": "Empezar a escribir →",
|
||||
"mission_control_transcription_empty": "No hay documentos esperando transcripción.",
|
||||
"mission_control_ready_heading": "Listo para leer",
|
||||
"mission_control_ready_heading": "Listo para leer ✓",
|
||||
"mission_control_ready_description": "Completamente transcrito y revisado",
|
||||
"mission_control_ready_subtitle": "{count} documentos listos",
|
||||
"mission_control_ready_all_cta": "Leer todos ({count}) →",
|
||||
"mission_control_ready_empty": "Aún no hay documentos completamente transcritos.",
|
||||
"mission_control_ready_empty_cta": "Empezar a colaborar",
|
||||
"mission_control_weekly_pulse": "↑ +{count} esta semana",
|
||||
|
||||
@@ -30,16 +30,21 @@ interface Props {
|
||||
let { segmentationDocs, transcriptionDocs, readyDocs, weeklyStats }: Props = $props();
|
||||
</script>
|
||||
|
||||
<section class="mt-4 rounded-sm border border-line bg-white p-6">
|
||||
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
{m.mission_control_heading()}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<SegmentationColumn docs={segmentationDocs} weeklyCount={weeklyStats?.segmentationCount ?? 0} />
|
||||
<TranscriptionColumn
|
||||
docs={transcriptionDocs}
|
||||
weeklyCount={weeklyStats?.transcriptionCount ?? 0}
|
||||
/>
|
||||
<ReadyColumn docs={readyDocs} weeklyCount={weeklyStats?.readyCount ?? 0} />
|
||||
</div>
|
||||
</section>
|
||||
{#if segmentationDocs.length > 0 || transcriptionDocs.length > 0 || readyDocs.length > 0}
|
||||
<section class="mt-4 rounded-sm border border-line bg-white p-6">
|
||||
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
{m.mission_control_heading()}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<SegmentationColumn
|
||||
docs={segmentationDocs}
|
||||
weeklyCount={weeklyStats?.segmentationCount ?? 0}
|
||||
/>
|
||||
<TranscriptionColumn
|
||||
docs={transcriptionDocs}
|
||||
weeklyCount={weeklyStats?.transcriptionCount ?? 0}
|
||||
/>
|
||||
<ReadyColumn docs={readyDocs} weeklyCount={weeklyStats?.readyCount ?? 0} />
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
@@ -34,20 +34,22 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
|
||||
</script>
|
||||
|
||||
{#if docs.length > 0}
|
||||
<div class="rounded-sm border border-brand-mint bg-brand-mint/10 p-4">
|
||||
<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_ready_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 class="flex flex-col gap-3 rounded-sm border border-brand-mint bg-brand-mint/10 p-4">
|
||||
<div>
|
||||
<div class="mb-1 flex items-center gap-2">
|
||||
<h3 class="font-sans text-xs font-bold tracking-widest text-green-800 uppercase">
|
||||
{m.mission_control_ready_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="text-xs font-semibold text-green-800">
|
||||
{m.mission_control_ready_subtitle({ count: docs.length })}
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-1 mb-3 text-xs text-gray-400">
|
||||
{m.mission_control_ready_description()}
|
||||
</p>
|
||||
<ul class="space-y-1">
|
||||
{#each docs as doc (doc.id)}
|
||||
<li>
|
||||
@@ -61,7 +63,7 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
|
||||
<span class="text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
|
||||
{/if}
|
||||
{#if doc.textedBlockCount > 0}
|
||||
<span class="text-xs text-gray-500">
|
||||
<span class="text-xs font-semibold text-green-800">
|
||||
{m.mission_control_reviewed_pct({ pct: reviewedPct(doc) })}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -70,6 +72,9 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<a href="/documents" class="mt-auto block text-xs font-semibold text-green-800 hover:underline">
|
||||
{m.mission_control_ready_all_cta({ count: docs.length })}
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
@@ -77,8 +82,8 @@ function reviewedPct(doc: TranscriptionQueueItemDTO): number {
|
||||
>
|
||||
<p class="text-xs text-gray-400">{m.mission_control_ready_empty()}</p>
|
||||
<a
|
||||
href="/enrich"
|
||||
class="mt-2 inline-flex items-center gap-1 rounded text-xs font-semibold text-brand-navy hover:underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
|
||||
href="/enrich?filter=NEEDS_SEGMENTATION&next=1"
|
||||
class="mt-2 inline-flex items-center rounded-sm border border-ink px-3 py-2 text-xs font-semibold text-ink transition-colors hover:bg-ink hover:text-white focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
|
||||
>
|
||||
{m.mission_control_ready_empty_cta()}
|
||||
</a>
|
||||
|
||||
@@ -29,24 +29,23 @@ function formatDate(dateStr: string): string {
|
||||
}
|
||||
</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 })}
|
||||
{#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-green-200 bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-800"
|
||||
>
|
||||
{m.mission_control_seg_skill_pill()}
|
||||
</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}
|
||||
{#if weeklyCount > 0}
|
||||
<p class="mt-1 text-xs font-semibold text-green-700">
|
||||
{m.mission_control_weekly_pulse({ count: weeklyCount })}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
{#each docs as doc (doc.id)}
|
||||
<li>
|
||||
@@ -67,5 +66,11 @@ function formatDate(dateStr: string): string {
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
href="/enrich?filter=NEEDS_SEGMENTATION&next=1"
|
||||
class="mt-auto block w-full rounded-sm bg-ink py-2 text-center text-xs font-semibold text-white transition-colors hover:bg-ink-2 focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-1 focus-visible:outline-none"
|
||||
>
|
||||
{m.mission_control_segmentation_cta()}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -34,24 +34,23 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
|
||||
}
|
||||
</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_transcription_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 })}
|
||||
{#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_transcription_heading()}
|
||||
</h3>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full border border-line bg-surface px-2 py-0.5 text-xs font-semibold text-ink"
|
||||
>
|
||||
{m.mission_control_trans_skill_pill()}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="mt-1 mb-3 text-xs text-gray-400">
|
||||
{m.mission_control_transcription_description()}
|
||||
</p>
|
||||
|
||||
{#if docs.length === 0}
|
||||
<p class="text-xs text-gray-400 italic">{m.mission_control_transcription_empty()}</p>
|
||||
{:else}
|
||||
{#if weeklyCount > 0}
|
||||
<p class="mt-1 text-xs font-semibold text-ink">
|
||||
{m.mission_control_weekly_pulse({ count: weeklyCount })}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
{#each docs as doc (doc.id)}
|
||||
<li>
|
||||
@@ -72,13 +71,13 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
|
||||
<div class="mt-1.5 flex items-center gap-2">
|
||||
<span class="shrink-0 text-xs text-gray-400">
|
||||
{m.mission_control_blocks_progress({
|
||||
texted: doc.textedBlockCount,
|
||||
total: doc.annotationCount
|
||||
})}
|
||||
texted: doc.textedBlockCount,
|
||||
total: doc.annotationCount
|
||||
})}
|
||||
</span>
|
||||
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
|
||||
<div class="h-1 flex-1 overflow-hidden rounded-full bg-ink/20">
|
||||
<div
|
||||
class="h-full rounded-full bg-ink"
|
||||
class="h-full rounded-full bg-ink transition-all"
|
||||
style="width: {blockProgress(doc).toFixed(0)}%"
|
||||
></div>
|
||||
</div>
|
||||
@@ -90,5 +89,11 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
href="/enrich?filter=NEEDS_TRANSCRIPTION&next=1"
|
||||
class="mt-auto block w-full rounded-sm bg-ink py-2 text-center text-xs font-semibold text-white transition-colors hover:bg-ink-2 focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-1 focus-visible:outline-none"
|
||||
>
|
||||
{m.mission_control_transcription_cta()}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user