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>