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
3 changed files with 7 additions and 3 deletions
Showing only changes of commit 74124dcc5d - Show all commits

View File

@@ -57,7 +57,7 @@ function handleBackdropClick(event: MouseEvent) {
type="button"
onclick={onClose}
aria-label={m.cheatsheet_close()}
class="flex h-11 w-11 items-center justify-center rounded-sm text-ink-2 hover:bg-muted"
class="flex h-11 w-11 items-center justify-center rounded-sm text-ink-2 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-mint focus-visible:outline-none"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-width="2" d="M6 6l12 12M18 6L6 18" />
@@ -71,7 +71,7 @@ function handleBackdropClick(event: MouseEvent) {
{#each group as shortcut (shortcut.cap)}
<div class="flex items-center justify-between gap-4">
<kbd
class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
class="rounded border border-line bg-muted px-2 py-0.5 font-mono text-sm text-ink shadow-sm"
>{shortcut.cap}</kbd
>
<span class="flex-1 text-right font-serif text-sm text-ink">{shortcut.label}</span>

View File

@@ -27,6 +27,10 @@ function isEditableTarget(target: EventTarget | null): boolean {
return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
}
// `node` is unused: the listener is global (window) so a shortcut fires no
// matter where focus sits on the page. It is still authored as a Svelte action
// (`use:transcribeShortcuts`) so its lifecycle is tied to the host element's
// mount/unmount and `destroy()` reliably removes the listener.
export function transcribeShortcuts(_node: HTMLElement, initial: TranscribeShortcutOptions) {
let options = initial;

View File

@@ -422,7 +422,7 @@ onMount(() => {
{/if}
</div>
{#if drawArmed && panelMode === 'edit'}
{#if drawArmed}
<div
class="pointer-events-none absolute bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-full bg-ink px-4 py-2 font-sans text-xs text-white shadow-lg"
role="status"