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

feat(transcribe): keyboard shortcuts for the transcribe power path + cheatsheet overlay (#327) #728

Merged
marcel merged 12 commits from feat/issue-327-transcribe-shortcuts into main 2026-06-04 17:54:26 +02:00
Conversation 16 Commits 12 Files Changed 22 +10 -2
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 39ef5f2d83 - Show all commits

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

@@ -72,10 +72,10 @@ 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">
<p class="w-full text-ink-3 [@media(pointer:coarse)]:hidden">
{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"
class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
>?</kbd
>
{m.transcribe_coach_shortcut_hint_after()}

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

@@ -72,6 +72,14 @@ describe('TranscribeCoachEmptyState', () => {
expect(kbd?.textContent).toBe('?');
});
it('hides the keyboard hint on touch-only (coarse-pointer) devices', async () => {
render(TranscribeCoachEmptyState);
const hint = document.querySelector('kbd')?.closest('p');
// The hint is gated behind a fine-pointer media query so touch-only
// transcribers are never told to press a key they do not have (#327).
expect(hint?.className).toContain('pointer:coarse');
});
it('renders the drag demo animation region inside step 1', async () => {
render(TranscribeCoachEmptyState);
const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });