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
2026-04-16 10:15:21 +02:00
parent aa8fb70d10
commit 94b5d1a5a8
7 changed files with 122 additions and 90 deletions

View File

@@ -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>