From 6b53cbfc5b744e263111c9967cd6e4d6fc909bcc Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 19 May 2026 20:38:28 +0200
Subject: [PATCH] feat(transcription): show dismissible error banner when
 markAllReviewed fails

Adds markAllError state and catch block to handleMarkAllReviewed.
Error banner renders below the review progress bar with role="alert"
and aria-live="polite" for screen reader announcement. Dismiss button
clears the error; next successful call also clears it automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../TranscriptionEditView.svelte              | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/frontend/src/lib/document/transcription/TranscriptionEditView.svelte b/frontend/src/lib/document/transcription/TranscriptionEditView.svelte
index 9aeb473e..8986d11d 100644
--- a/frontend/src/lib/document/transcription/TranscriptionEditView.svelte
+++ b/frontend/src/lib/document/transcription/TranscriptionEditView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import { getErrorMessage } from '$lib/shared/errors.js';
 import TranscriptionBlock from './TranscriptionBlock.svelte';
 import OcrTrigger from '$lib/ocr/OcrTrigger.svelte';
 import TranscribeCoachEmptyState from '$lib/shared/help/TranscribeCoachEmptyState.svelte';
@@ -49,6 +50,7 @@ let activeBlockId: string | null = $state(null);
 let localLabels: string[] = $derived.by(() => [...trainingLabels]);
 let listEl: HTMLElement | null = $state(null);
 let markingAllReviewed = $state(false);
+let markAllError = $state<string | null>(null);
 
 const sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
 const hasBlocks = $derived(blocks.length > 0);
@@ -67,8 +69,11 @@ $effect(() => {
 async function handleMarkAllReviewed() {
 	if (!onMarkAllReviewed) return;
 	markingAllReviewed = true;
+	markAllError = null;
 	try {
 		await onMarkAllReviewed();
+	} catch (e) {
+		markAllError = getErrorMessage(e instanceof Error ? e.message : undefined);
 	} finally {
 		markingAllReviewed = false;
 	}
@@ -217,6 +222,32 @@ async function handleLabelToggle(label: string) {
 					style="width: {reviewProgress}%"
 				></div>
 			</div>
+			{#if markAllError}
+				<div
+					role="alert"
+					aria-live="polite"
+					class="mt-1.5 flex items-center gap-2 rounded-sm border border-red-200 bg-red-50 px-3 py-2 font-sans text-xs text-red-700"
+				>
+					<span class="flex-1">{markAllError}</span>
+					<button
+						onclick={() => (markAllError = null)}
+						aria-label={m.comp_dismiss()}
+						class="flex min-h-[44px] min-w-[44px] items-center justify-center rounded text-red-500 hover:text-red-700 focus-visible:ring-2 focus-visible:ring-red-500"
+					>
+						<svg
+							class="h-4 w-4"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+							aria-hidden="true"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				</div>
+			{/if}
 		</div>
 		<div class="p-4">
 			<!-- svelte-ignore a11y_no_static_element_interactions -->