feat(frontend): add OCR UI components and translations

- ScriptTypeSelect: native select for TYPEWRITER/HANDWRITING_LATIN/KURRENT
- OcrTrigger: wraps script type select + start button + confirmation dialog
- OcrProgress: SSE-based progress display with page counter and progress bar
- Paraglide translations for OCR (de/en/es): script types, trigger labels,
  confirmation dialog, progress messages, error messages
- ErrorCode type + getErrorMessage: OCR_SERVICE_UNAVAILABLE, OCR_JOB_NOT_FOUND,
  OCR_DOCUMENT_NOT_UPLOADED, OCR_PROCESSING_FAILED

All 687 frontend tests pass.

Refs #226

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-12 15:36:00 +02:00
parent cf8dc3559f
commit a4651aa317
7 changed files with 239 additions and 3 deletions

View File

@@ -0,0 +1,49 @@
<script lang="ts">
import { untrack } from 'svelte';
import * as m from '$lib/paraglide/messages.js';
import { getConfirmService } from '$lib/services/confirm.svelte';
import ScriptTypeSelect from './ScriptTypeSelect.svelte';
interface Props {
existingBlockCount: number;
storedScriptType: string;
onTrigger: (scriptType: string) => void;
}
let { existingBlockCount, storedScriptType, onTrigger }: Props = $props();
const { confirm } = getConfirmService();
let selectedScriptType: string = $state(
untrack(() => (storedScriptType && storedScriptType !== 'UNKNOWN' ? storedScriptType : ''))
);
async function handleClick() {
if (!selectedScriptType) return;
if (existingBlockCount > 0) {
const confirmed = await confirm({
title: m.ocr_confirm_title(),
body: m.ocr_confirm_body({ count: String(existingBlockCount) }),
confirmLabel: m.ocr_confirm_btn(),
destructive: true
});
if (!confirmed) return;
}
onTrigger(selectedScriptType);
}
</script>
<div class="flex flex-col gap-3">
<ScriptTypeSelect bind:value={selectedScriptType} />
<button
type="button"
disabled={!selectedScriptType}
title={!selectedScriptType ? m.ocr_trigger_btn_disabled() : undefined}
onclick={handleClick}
class="min-h-[44px] w-full rounded-sm bg-brand-navy font-sans text-sm font-medium text-white transition-colors hover:bg-brand-navy/90 disabled:cursor-not-allowed disabled:opacity-50"
>
{m.ocr_trigger_btn()}
</button>
</div>