feat(ui): add TranscriptionPanelHeader with mode toggle and status

Segmented Lesen/Bearbeiten control, block count, last-edited date,
and close button. Lesen disabled when no blocks exist.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/TranscriptionPanelHeader.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+type Props = {
+	mode: 'read' | 'edit';
+	hasBlocks: boolean;
+	blockCount: number;
+	lastEditedAt: string | null;
+	onModeChange: (mode: 'read' | 'edit') => void;
+	onClose: () => void;
+};
+
+let { mode, hasBlocks, blockCount, lastEditedAt, onModeChange, onClose }: Props = $props();
+
+const formattedDate = $derived(
+	lastEditedAt
+		? new Intl.DateTimeFormat('de-DE', {
+				day: 'numeric',
+				month: 'short',
+				year: 'numeric'
+			}).format(new Date(lastEditedAt))
+		: null
+);
+
+function handleReadClick() {
+	if (hasBlocks) {
+		onModeChange('read');
+	}
+}
+</script>
+
+<div
+	class="flex h-[44px] items-center justify-between border-b border-line bg-surface px-3 font-sans"
+>
+	<!-- Segmented toggle -->
+	<div class="flex h-7 items-center rounded-full border border-line bg-muted p-0.5">
+		<button
+			type="button"
+			data-testid="mode-read"
+			aria-disabled={!hasBlocks}
+			onclick={handleReadClick}
+			class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'read'
+				? 'bg-primary text-primary-fg'
+				: 'text-ink-2 hover:text-ink'}"
+			style:opacity={!hasBlocks ? '0.35' : undefined}
+		>
+			{m.mode_read()}
+		</button>
+		<button
+			type="button"
+			data-testid="mode-edit"
+			onclick={() => onModeChange('edit')}
+			class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'edit'
+				? 'bg-primary text-primary-fg'
+				: 'text-ink-2 hover:text-ink'}"
+		>
+			{m.mode_edit()}
+		</button>
+	</div>
+
+	<!-- Status line -->
+	<p class="text-xs text-ink-2">
+		{#if blockCount === 1}
+			{m.transcription_status_section()}
+		{:else}
+			{m.transcription_status_sections({ count: blockCount })}
+		{/if}
+		{#if formattedDate}
+			<span class="ml-1"
+				>&middot; {m.transcription_status_last_edited({ time: formattedDate })}</span
+			>
+		{/if}
+	</p>
+
+	<!-- Close button -->
+	<button
+		type="button"
+		data-testid="panel-close"
+		onclick={onClose}
+		aria-label={m.transcription_panel_close()}
+		class="flex h-8 w-8 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+	>
+		<svg
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+		</svg>
+	</button>
+</div>

frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TranscriptionPanelHeader from './TranscriptionPanelHeader.svelte';
+
+describe('TranscriptionPanelHeader', () => {
+	it('should render Lesen and Bearbeiten buttons', async () => {
+		render(TranscriptionPanelHeader, {
+			mode: 'read',
+			hasBlocks: true,
+			blockCount: 3,
+			lastEditedAt: null,
+			onModeChange: () => {},
+			onClose: () => {}
+		});
+
+		await expect.element(page.getByText('Lesen')).toBeInTheDocument();
+		await expect.element(page.getByText('Bearbeiten')).toBeInTheDocument();
+	});
+
+	it('should disable Lesen button when hasBlocks is false', async () => {
+		render(TranscriptionPanelHeader, {
+			mode: 'edit',
+			hasBlocks: false,
+			blockCount: 0,
+			lastEditedAt: null,
+			onModeChange: () => {},
+			onClose: () => {}
+		});
+
+		const lesenBtn = document.querySelector('[data-testid="mode-read"]') as HTMLButtonElement;
+		expect(lesenBtn.getAttribute('aria-disabled')).toBe('true');
+	});
+
+	it('should call onModeChange when clicking Bearbeiten', async () => {
+		const onModeChange = vi.fn();
+		render(TranscriptionPanelHeader, {
+			mode: 'read',
+			hasBlocks: true,
+			blockCount: 3,
+			lastEditedAt: null,
+			onModeChange,
+			onClose: () => {}
+		});
+
+		const editBtn = document.querySelector('[data-testid="mode-edit"]')!;
+		editBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		expect(onModeChange).toHaveBeenCalledWith('edit');
+	});
+
+	it('should not call onModeChange when clicking disabled Lesen', async () => {
+		const onModeChange = vi.fn();
+		render(TranscriptionPanelHeader, {
+			mode: 'edit',
+			hasBlocks: false,
+			blockCount: 0,
+			lastEditedAt: null,
+			onModeChange,
+			onClose: () => {}
+		});
+
+		const readBtn = document.querySelector('[data-testid="mode-read"]')!;
+		readBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		expect(onModeChange).not.toHaveBeenCalled();
+	});
+
+	it('should call onClose when clicking close button', async () => {
+		const onClose = vi.fn();
+		render(TranscriptionPanelHeader, {
+			mode: 'read',
+			hasBlocks: true,
+			blockCount: 3,
+			lastEditedAt: null,
+			onModeChange: () => {},
+			onClose
+		});
+
+		const closeBtn = document.querySelector('[data-testid="panel-close"]')!;
+		closeBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it('should show singular block count for 1 block', async () => {
+		render(TranscriptionPanelHeader, {
+			mode: 'read',
+			hasBlocks: true,
+			blockCount: 1,
+			lastEditedAt: null,
+			onModeChange: () => {},
+			onClose: () => {}
+		});
+
+		await expect.element(page.getByText('1 Abschnitt')).toBeInTheDocument();
+	});
+
+	it('should show plural block count for multiple blocks', async () => {
+		render(TranscriptionPanelHeader, {
+			mode: 'read',
+			hasBlocks: true,
+			blockCount: 5,
+			lastEditedAt: null,
+			onModeChange: () => {},
+			onClose: () => {}
+		});
+
+		await expect.element(page.getByText('5 Abschnitte')).toBeInTheDocument();
+	});
+});