marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(transcribe): surface the "?" shortcut tip in the coach card (#327)

Browse Source 
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>
This commit is contained in:
Marcel
2026-06-04 16:58:34 +02:00
committed by marcel
parent 61256942e1
commit 0336d07980
2 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte
View File

@@ -72,5 +72,13 @@ import TranscribeDragDemo from './TranscribeDragDemo.svelte';
{m.transcribe_coach_footer_richtlinien()} {m.transcribe_coach_footer_richtlinien()}
<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span> <span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
</a> </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>
</div> </div>

9
frontend/src/lib/shared/help/TranscribeCoachEmptyState.svelte.spec.ts
View File

@@ -14,6 +14,8 @@ vi.mock('$lib/paraglide/messages.js', () => ({
transcribe_coach_step_3_title: () => 'Speichert automatisch.', transcribe_coach_step_3_title: () => 'Speichert automatisch.',
transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗', transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗',
transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗', 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)' common_opens_new_tab: () => '(öffnet in neuem Tab)'
} }
})); }));
@@ -63,6 +65,13 @@ describe('TranscribeCoachEmptyState', () => {
await expect.element(annotations.first()).toBeInTheDocument(); 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 () => { it('renders the drag demo animation region inside step 1', async () => {
render(TranscribeCoachEmptyState); render(TranscribeCoachEmptyState);
const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i }); const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });