From dff203d526fcdf4a3671cb14dfc78f46b1684a55 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 24 Apr 2026 21:06:50 +0200
Subject: [PATCH] feat(transcribe): wire coach into TranscriptionEditView, hide
 training footer when empty

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/TranscriptionEditView.svelte   | 23 ++++---------------
 .../TranscriptionEditView.svelte.spec.ts      | 16 +++++++++++--
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/components/TranscriptionEditView.svelte b/frontend/src/lib/components/TranscriptionEditView.svelte
index c156f6c0..c4188982 100644
--- a/frontend/src/lib/components/TranscriptionEditView.svelte
+++ b/frontend/src/lib/components/TranscriptionEditView.svelte
@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import TranscriptionBlock from './TranscriptionBlock.svelte';
 import OcrTrigger from './OcrTrigger.svelte';
+import TranscribeCoachEmptyState from './TranscribeCoachEmptyState.svelte';
 import type { TranscriptionBlockData } from '$lib/types';
 import { createBlockAutoSave } from '$lib/hooks/useBlockAutoSave.svelte';
 import { createBlockDragDrop } from '$lib/hooks/useBlockDragDrop.svelte';
@@ -231,28 +232,12 @@ async function handleLabelToggle(label: string) {
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-1 flex-col items-center justify-center px-6 py-12 text-center">
-			<svg
-				class="mb-4 h-16 w-16 text-ink-3"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				stroke-width="1"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-				/>
-			</svg>
-
-			<p class="max-w-xs text-sm leading-relaxed text-ink-3">
-				{m.transcription_empty_draw_hint()}
-			</p>
+		<div class="p-4">
+			<TranscribeCoachEmptyState />
 		</div>
 	{/if}
 
-	{#if canWrite}
+	{#if canWrite && hasBlocks}
 		<div class="border-t border-line px-4 py-3">
 			<p class="mb-2 font-sans text-xs font-medium text-ink-2">Für Training vormerken</p>
 			<div class="flex flex-wrap gap-2">
diff --git a/frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts b/frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts
index b076e590..a48f0148 100644
--- a/frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts
+++ b/frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts
@@ -61,9 +61,21 @@ describe('TranscriptionEditView — rendering', () => {
 		await expect.element(page.getByText(/Block 3/)).toBeInTheDocument();
 	});
 
-	it('shows empty state when no blocks', async () => {
+	it('shows coach card when no blocks', async () => {
 		renderView({ blocks: [] });
-		await expect.element(page.getByText(/Zeichnen Sie Bereiche/)).toBeInTheDocument();
+		await expect
+			.element(page.getByRole('heading', { level: 2 }))
+			.toHaveTextContent('Erste Transkription?');
+	});
+
+	it('hides training footer when no blocks', async () => {
+		renderView({ blocks: [], canWrite: true });
+		await expect.element(page.getByText('Für Training vormerken')).not.toBeInTheDocument();
+	});
+
+	it('shows training footer when blocks exist', async () => {
+		renderView({ blocks: [block1], canWrite: true });
+		await expect.element(page.getByText('Für Training vormerken')).toBeInTheDocument();
 	});
 });