From 86584a53a835cfeddceaaff265a1ef6cf7d3a847 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 24 Apr 2026 21:00:01 +0200 Subject: [PATCH] feat(transcribe): add TranscribeCoachEmptyState and TranscribeDragDemo components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New coach card replaces the icon+sentence empty state in the Transcribe panel (edit mode). Three-step guide with 5-s SMIL drawing animation in step 1 only. Animation freezes at the final frame when prefers-reduced-motion is active. Footer links to Wikipedia Kurrent and the Richtlinien page open in new tabs with visible '(öffnet in neuem Tab)' annotations. 34 new i18n keys in de/en/es. Co-Authored-By: Claude Sonnet 4.6 --- frontend/messages/de.json | 42 +++- frontend/messages/en.json | 42 +++- frontend/messages/es.json | 42 +++- .../TranscribeCoachEmptyState.svelte | 76 +++++++ .../TranscribeCoachEmptyState.svelte.spec.ts | 71 ++++++ .../lib/components/TranscribeDragDemo.svelte | 205 ++++++++++++++++++ .../TranscribeDragDemo.svelte.spec.ts | 23 ++ 7 files changed, 498 insertions(+), 3 deletions(-) create mode 100644 frontend/src/lib/components/TranscribeCoachEmptyState.svelte create mode 100644 frontend/src/lib/components/TranscribeCoachEmptyState.svelte.spec.ts create mode 100644 frontend/src/lib/components/TranscribeDragDemo.svelte create mode 100644 frontend/src/lib/components/TranscribeDragDemo.svelte.spec.ts diff --git a/frontend/messages/de.json b/frontend/messages/de.json index 5e56ed54..ca71677f 100644 --- a/frontend/messages/de.json +++ b/frontend/messages/de.json @@ -810,5 +810,45 @@ "pagination_prev": "Zurück", "pagination_next": "Weiter", "pagination_page_of": "Seite {page} von {total}", - "pagination_nav_label": "Seitennavigation" + "pagination_nav_label": "Seitennavigation", + + "common_opens_new_tab": "(öffnet in neuem Tab)", + + "transcribe_coach_title": "Erste Transkription?", + "transcribe_coach_preamble": "Unser Kurrent-Erkenner lernt noch. Jede Transkription, die Sie zum Training freigeben, bringt ihm die Schrift bei — so funktioniert's:", + "transcribe_coach_step_1_title": "Rahmen ziehen.", + "transcribe_coach_step_1_body": "Klicken und ziehen Sie mit der Maus einen Rahmen um den Text, den Sie transkribieren möchten.", + "transcribe_coach_step_2_title": "Text eingeben.", + "transcribe_coach_step_2_body": "Geben Sie den Text, den Sie im Rahmen sehen, in das neue Textfeld ein.", + "transcribe_coach_step_3_title": "Speichert automatisch.", + "transcribe_coach_footer_kurrent": "Hilfe zu Kurrent ↗", + "transcribe_coach_footer_richtlinien": "Transkriptions-Richtlinien ↗", + + "transcription_mode_help_label": "Lese- und Bearbeitungsmodus", + "transcription_mode_help_body": "Lesen zeigt die Transkription als fließenden Text. Bearbeiten öffnet die Textfelder für jede Passage.", + + "richtlinien_title": "Transkriptions-Richtlinien", + "richtlinien_intro": "Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln. Die Seite wächst mit: sobald wir eine neue Konvention beschließen, landet sie hier.", + "richtlinien_wiki_text": "Das vollständige Kurrent- und Sütterlin-Alphabet brauchen Sie für diese Seite nicht — das erledigt Wikipedia. Hier sind unsere eigenen Regeln für das, was Wikipedia nicht beantwortet.", + "richtlinien_wiki_link": "Wikipedia →", + "richtlinien_rules_label": "Regeln für die Transkription", + "richtlinien_rule_unleserlich_title": "Nicht lesbare Wörter", + "richtlinien_rule_unleserlich_body": "Wenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie [unleserlich]. Jemand anderes schaut später nochmal drauf.", + "richtlinien_rule_durchgestrichen_title": "Durchgestrichene Wörter", + "richtlinien_rule_durchgestrichen_body": "Auch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix durchgestrichen:", + "richtlinien_rule_langes_s_title": "Das lange s (ſ)", + "richtlinien_rule_langes_s_body": "Das ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s.", + "richtlinien_rule_name_title": "Unsichere Namen", + "richtlinien_rule_name_body": "Wenn Sie einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern.", + "richtlinien_rule_dialekt_title": "Dialekt, Fremdwörter, fremde Zitate", + "richtlinien_rule_dialekt_body": "Plattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen.", + "richtlinien_beispiel_label": "Beispiel", + "richtlinien_klaerung_label": "Noch in Klärung", + "richtlinien_klaerung_intro": "Diese Fragen klären wir noch — stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie es in den Kommentaren:", + "richtlinien_klaer_abkuerzungen": "Abkürzungen", + "richtlinien_klaer_datumsformate": "Datumsformate", + "richtlinien_klaer_umbrueche": "Originale Zeilenumbrüche", + "richtlinien_klaer_caps": "Alte Groß-/Kleinschreibung", + "richtlinien_closing_title": "Fehlt eine Regel?", + "richtlinien_closing_body": "Stolpern Sie beim Transkribieren über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln sie und besprechen sie beim nächsten Familientreffen." } diff --git a/frontend/messages/en.json b/frontend/messages/en.json index 5e2591ef..f4088c20 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -810,5 +810,45 @@ "pagination_prev": "Previous", "pagination_next": "Next", "pagination_page_of": "Page {page} of {total}", - "pagination_nav_label": "Pagination" + "pagination_nav_label": "Pagination", + + "common_opens_new_tab": "(opens in new tab)", + + "transcribe_coach_title": "First transcription?", + "transcribe_coach_preamble": "Our Kurrent recogniser is still learning. Every transcription you release for training teaches it the handwriting — here's how it works:", + "transcribe_coach_step_1_title": "Draw a frame.", + "transcribe_coach_step_1_body": "Click and drag a frame around the text you want to transcribe.", + "transcribe_coach_step_2_title": "Enter the text.", + "transcribe_coach_step_2_body": "Type the text you see inside the frame into the new text field.", + "transcribe_coach_step_3_title": "Saves automatically.", + "transcribe_coach_footer_kurrent": "Kurrent help ↗", + "transcribe_coach_footer_richtlinien": "Transcription guidelines ↗", + + "transcription_mode_help_label": "Read and edit mode", + "transcription_mode_help_body": "Read shows the transcription as flowing text. Edit opens the text fields for each passage.", + + "richtlinien_title": "Transcription Guidelines", + "richtlinien_intro": "So every letter is transcribed consistently — whether Tante Hedwig or Cousin Paul is typing — here are our rules. The page grows with us: as soon as we agree a new convention, it lands here.", + "richtlinien_wiki_text": "You don't need the full Kurrent and Sütterlin alphabet on this page — that's what Wikipedia is for. Here are our own rules for everything Wikipedia can't answer.", + "richtlinien_wiki_link": "Wikipedia →", + "richtlinien_rules_label": "Transcription rules", + "richtlinien_rule_unleserlich_title": "Illegible words", + "richtlinien_rule_unleserlich_body": "If you can't decipher a word even after trying, write [unleserlich]. Someone else will take another look later.", + "richtlinien_rule_durchgestrichen_title": "Struck-through words", + "richtlinien_rule_durchgestrichen_body": "Struck-through text still belongs to the letter. Write it in square brackets with prefix durchgestrichen:", + "richtlinien_rule_langes_s_title": "The long s (ſ)", + "richtlinien_rule_langes_s_body": "The ſ is just an old written form of the letter s — not a separate sound. Always write a normal s.", + "richtlinien_rule_name_title": "Uncertain names", + "richtlinien_rule_name_body": "If you think you can read a name but aren't sure, add a question mark in square brackets.", + "richtlinien_rule_dialekt_title": "Dialect, foreign words, foreign quotes", + "richtlinien_rule_dialekt_body": "Low German, French, Latin phrases — copy them verbatim, exactly as written.", + "richtlinien_beispiel_label": "Example", + "richtlinien_klaerung_label": "Still to be decided", + "richtlinien_klaerung_intro": "These questions are still open — if you hit one while transcribing, make a plausible choice and note it in the comments:", + "richtlinien_klaer_abkuerzungen": "Abbreviations", + "richtlinien_klaer_datumsformate": "Date formats", + "richtlinien_klaer_umbrueche": "Original line breaks", + "richtlinien_klaer_caps": "Old capitalisation", + "richtlinien_closing_title": "Missing a rule?", + "richtlinien_closing_body": "If you hit a situation while transcribing that isn't listed here — leave a comment on the relevant block. We collect them and discuss them at the next family gathering." } diff --git a/frontend/messages/es.json b/frontend/messages/es.json index b64d0405..8747a9df 100644 --- a/frontend/messages/es.json +++ b/frontend/messages/es.json @@ -810,5 +810,45 @@ "pagination_prev": "Anterior", "pagination_next": "Siguiente", "pagination_page_of": "Página {page} de {total}", - "pagination_nav_label": "Paginación" + "pagination_nav_label": "Paginación", + + "common_opens_new_tab": "(abre en pestaña nueva)", + + "transcribe_coach_title": "¿Primera transcripción?", + "transcribe_coach_preamble": "Nuestro reconocedor de Kurrent aún está aprendiendo. Cada transcripción que libera para el entrenamiento le enseña la escritura — así funciona:", + "transcribe_coach_step_1_title": "Dibujar un marco.", + "transcribe_coach_step_1_body": "Haga clic y arrastre un marco alrededor del texto que desea transcribir.", + "transcribe_coach_step_2_title": "Ingresar el texto.", + "transcribe_coach_step_2_body": "Escriba el texto que ve dentro del marco en el nuevo campo de texto.", + "transcribe_coach_step_3_title": "Se guarda automáticamente.", + "transcribe_coach_footer_kurrent": "Ayuda sobre Kurrent ↗", + "transcribe_coach_footer_richtlinien": "Normas de transcripción ↗", + + "transcription_mode_help_label": "Modo lectura y edición", + "transcription_mode_help_body": "Lectura muestra la transcripción como texto continuo. Edición abre los campos de texto para cada pasaje.", + + "richtlinien_title": "Normas de transcripción", + "richtlinien_intro": "Para que todas las cartas se transcriban de forma uniforme — ya sea la tía Hedwig o el primo Paul quien escriba — aquí están nuestras reglas. La página crece con nosotros.", + "richtlinien_wiki_text": "No necesitas el alfabeto Kurrent completo aquí — eso lo hace Wikipedia. Aquí están nuestras propias reglas para lo que Wikipedia no responde.", + "richtlinien_wiki_link": "Wikipedia →", + "richtlinien_rules_label": "Reglas de transcripción", + "richtlinien_rule_unleserlich_title": "Palabras ilegibles", + "richtlinien_rule_unleserlich_body": "Si no puedes descifrar una palabra, escribe [unleserlich]. Otra persona lo revisará después.", + "richtlinien_rule_durchgestrichen_title": "Palabras tachadas", + "richtlinien_rule_durchgestrichen_body": "El texto tachado también pertenece a la carta. Escríbelo entre corchetes con el prefijo durchgestrichen:", + "richtlinien_rule_langes_s_title": "La s larga (ſ)", + "richtlinien_rule_langes_s_body": "La ſ es solo una forma antigua de la letra s. Escribe siempre una s normal.", + "richtlinien_rule_name_title": "Nombres inciertos", + "richtlinien_rule_name_body": "Si crees reconocer un nombre pero no estás seguro, añade un signo de interrogación entre corchetes.", + "richtlinien_rule_dialekt_title": "Dialecto, palabras extranjeras, citas", + "richtlinien_rule_dialekt_body": "Bajo alemán, francés, frases latinas — cópialas tal cual están escritas.", + "richtlinien_beispiel_label": "Ejemplo", + "richtlinien_klaerung_label": "Aún por decidir", + "richtlinien_klaerung_intro": "Estas preguntas aún están abiertas — si encuentras alguna mientras transcribes, elige algo razonable y nótalo en los comentarios:", + "richtlinien_klaer_abkuerzungen": "Abreviaturas", + "richtlinien_klaer_datumsformate": "Formatos de fecha", + "richtlinien_klaer_umbrueche": "Saltos de línea originales", + "richtlinien_klaer_caps": "Mayúsculas antiguas", + "richtlinien_closing_title": "¿Falta una regla?", + "richtlinien_closing_body": "Si al transcribir encuentras una situación que no está aquí — deja un comentario en el bloque. Las recogemos y las discutimos en la próxima reunión familiar." } diff --git a/frontend/src/lib/components/TranscribeCoachEmptyState.svelte b/frontend/src/lib/components/TranscribeCoachEmptyState.svelte new file mode 100644 index 00000000..8bb18705 --- /dev/null +++ b/frontend/src/lib/components/TranscribeCoachEmptyState.svelte @@ -0,0 +1,76 @@ + + +
+

+ {m.transcribe_coach_title()} +

+

+ {m.transcribe_coach_preamble()} +

+ +
    + +
  1. + +
    + {m.transcribe_coach_step_1_title()} + {m.transcribe_coach_step_1_body()} + +
    +
    2. + + +
  2. + +
    + {m.transcribe_coach_step_2_title()} + {m.transcribe_coach_step_2_body()} +
    +
    3. + + +
  3. + +
    + {m.transcribe_coach_step_3_title()} +
    +
    4. +
+ +
+ + {m.transcribe_coach_footer_kurrent()} + {m.common_opens_new_tab()} + + + {m.transcribe_coach_footer_richtlinien()} + {m.common_opens_new_tab()} + +
+
diff --git a/frontend/src/lib/components/TranscribeCoachEmptyState.svelte.spec.ts b/frontend/src/lib/components/TranscribeCoachEmptyState.svelte.spec.ts new file mode 100644 index 00000000..5f8d397a --- /dev/null +++ b/frontend/src/lib/components/TranscribeCoachEmptyState.svelte.spec.ts @@ -0,0 +1,71 @@ +import { describe, it, expect, afterEach, vi } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import TranscribeCoachEmptyState from './TranscribeCoachEmptyState.svelte'; + +vi.mock('$lib/paraglide/messages.js', () => ({ + m: { + transcribe_coach_title: () => 'Erste Transkription?', + transcribe_coach_preamble: () => 'Unser Kurrent-Erkenner lernt noch.', + transcribe_coach_step_1_title: () => 'Rahmen ziehen.', + transcribe_coach_step_1_body: () => 'Klicken und ziehen Sie mit der Maus einen Rahmen.', + transcribe_coach_step_2_title: () => 'Text eingeben.', + transcribe_coach_step_2_body: () => 'Geben Sie den Text ein.', + transcribe_coach_step_3_title: () => 'Speichert automatisch.', + transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗', + transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗', + common_opens_new_tab: () => '(öffnet in neuem Tab)' + } +})); + +afterEach(() => { + cleanup(); + vi.restoreAllMocks(); +}); + +describe('TranscribeCoachEmptyState', () => { + it('renders the title and preamble', async () => { + render(TranscribeCoachEmptyState); + await expect + .element(page.getByRole('heading', { level: 2 })) + .toHaveTextContent('Erste Transkription?'); + await expect.element(page.getByText('Unser Kurrent-Erkenner lernt noch.')).toBeInTheDocument(); + }); + + it('renders three numbered steps', async () => { + render(TranscribeCoachEmptyState); + await expect.element(page.getByText('Rahmen ziehen.')).toBeInTheDocument(); + await expect + .element(page.getByText('Klicken und ziehen Sie mit der Maus einen Rahmen.')) + .toBeInTheDocument(); + await expect.element(page.getByText('Text eingeben.')).toBeInTheDocument(); + await expect.element(page.getByText('Geben Sie den Text ein.')).toBeInTheDocument(); + await expect.element(page.getByText('Speichert automatisch.')).toBeInTheDocument(); + }); + + it('renders footer links to Wikipedia Kurrent and Richtlinien page', async () => { + render(TranscribeCoachEmptyState); + const kurrentLink = page.getByRole('link', { name: /Hilfe zu Kurrent/ }); + await expect.element(kurrentLink).toBeInTheDocument(); + await expect.element(kurrentLink).toHaveAttribute('target', '_blank'); + await expect.element(kurrentLink).toHaveAttribute('rel', 'noopener noreferrer'); + await expect.element(kurrentLink).toHaveAttribute('referrerpolicy', 'no-referrer'); + + const richtlinienLink = page.getByRole('link', { name: /Transkriptions-Richtlinien/ }); + await expect.element(richtlinienLink).toBeInTheDocument(); + await expect.element(richtlinienLink).toHaveAttribute('target', '_blank'); + await expect.element(richtlinienLink).toHaveAttribute('rel', 'noopener noreferrer'); + }); + + it('renders visible "(öffnet in neuem Tab)" annotation on each footer link', async () => { + render(TranscribeCoachEmptyState); + const annotations = page.getByText('(öffnet in neuem Tab)'); + await expect.element(annotations.first()).toBeInTheDocument(); + }); + + it('renders the drag demo animation region inside step 1', async () => { + render(TranscribeCoachEmptyState); + const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i }); + await expect.element(demo).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/lib/components/TranscribeDragDemo.svelte b/frontend/src/lib/components/TranscribeDragDemo.svelte new file mode 100644 index 00000000..d2c5753f --- /dev/null +++ b/frontend/src/lib/components/TranscribeDragDemo.svelte @@ -0,0 +1,205 @@ + + +{#if prefersReducedMotion} + + + + + + + + + + + + + + + + +{:else} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{/if} diff --git a/frontend/src/lib/components/TranscribeDragDemo.svelte.spec.ts b/frontend/src/lib/components/TranscribeDragDemo.svelte.spec.ts new file mode 100644 index 00000000..154063de --- /dev/null +++ b/frontend/src/lib/components/TranscribeDragDemo.svelte.spec.ts @@ -0,0 +1,23 @@ +import { describe, it, expect, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import TranscribeDragDemo from './TranscribeDragDemo.svelte'; + +afterEach(() => { + cleanup(); +}); + +describe('TranscribeDragDemo', () => { + it('renders an SVG with an aria-label describing the animation', async () => { + render(TranscribeDragDemo); + const svg = page.getByRole('img'); + await expect.element(svg).toBeInTheDocument(); + await expect.element(svg).toHaveAttribute('aria-label'); + }); + + it('contains a dashed-border rectangle animation element', async () => { + const { container } = render(TranscribeDragDemo); + const rect = container.querySelector('rect'); + expect(rect).not.toBeNull(); + }); +});