From 1cc302b289ad3fc2c4d4bb4acebd6d18435799eb Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 4 Jun 2026 16:58:34 +0200
Subject: [PATCH] feat(transcribe): surface the "?" shortcut tip in the coach
 card (#327)

Adds a secondary keyboard hint to the existing coach footer row pointing
transcribers at the "?" cheatsheet, with a semantic <kbd>. Cross-references
the shortcuts introduced for the empty-state coach (#320).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/shared/help/TranscribeCoachEmptyState.svelte | 8 ++++++++
 .../shared/help/TranscribeCoachEmptyState.svelte.spec.ts | 9 +++++++++
 2 files changed, 17 insertions(+)

diff --git a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
index 26b31f8d..9f22d29c 100644
--- a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
+++ b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
@@ -72,5 +72,13 @@ import TranscribeDragDemo from './TranscribeDragDemo.svelte';
 			{m.transcribe_coach_footer_richtlinien()}
 			<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
 		</a>
+		<p class="w-full text-ink-3">
+			{m.transcribe_coach_shortcut_hint_before()}
+			<kbd
+				class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-[11px] text-ink shadow-sm"
+				>?</kbd
+			>
+			{m.transcribe_coach_shortcut_hint_after()}
+		</p>
 	</div>
 </div>
diff --git a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
index 5f8d397a..2c7eedd3 100644
--- a/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
+++ b/frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
@@ -14,6 +14,8 @@ vi.mock('$lib/paraglide/messages.js', () => ({
 		transcribe_coach_step_3_title: () => 'Speichert automatisch.',
 		transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗',
 		transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗',
+		transcribe_coach_shortcut_hint_before: () => 'Tipp: Drücken Sie',
+		transcribe_coach_shortcut_hint_after: () => 'für eine Übersicht aller Tastenkürzel.',
 		common_opens_new_tab: () => '(öffnet in neuem Tab)'
 	}
 }));
@@ -63,6 +65,13 @@ describe('TranscribeCoachEmptyState', () => {
 		await expect.element(annotations.first()).toBeInTheDocument();
 	});
 
+	it('renders the keyboard-shortcut hint with a "?" key cap', async () => {
+		render(TranscribeCoachEmptyState);
+		await expect.element(page.getByText('Tastenkürzel', { exact: false })).toBeInTheDocument();
+		const kbd = document.querySelector('kbd');
+		expect(kbd?.textContent).toBe('?');
+	});
+
 	it('renders the drag demo animation region inside step 1', async () => {
 		render(TranscribeCoachEmptyState);
 		const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });