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

feat(#320): guided empty state + Kurrent primer for first-time transcribers #330

Merged
marcel merged 13 commits from feat/issue-320-transcribe-coach into main 2026-04-25 12:24:04 +02:00
Conversation 39 Commits 13 Files Changed 16 +16 -4
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bdd91aa165 - Show all commits

18
frontend/src/lib/components/TranscribeDragDemo.svelte
View File

@@ -1,7 +1,19 @@
<script lang="ts">
const prefersReducedMotion = $derived(
// $derived from .matches is a one-shot snapshot — it doesn't react when the
// user toggles the OS setting at runtime. Use $state + addEventListener instead.
let prefersReducedMotion = $state(
typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
);
$effect(() => {
if (typeof window === 'undefined') return;
const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
const handler = (e: MediaQueryListEvent) => {
prefersReducedMotion = e.matches;
};
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
});
</script>
{#if prefersReducedMotion}
@@ -10,7 +22,7 @@ const prefersReducedMotion = $derived(
role="img"
aria-label="Eine gestrichelte Umrandung markiert eine Zeile Kurrentschrift auf dem Dokument."
viewBox="0 0 600 180"
class="border-brand-sand block w-full rounded-sm border bg-[#FAF8F1]"
class="border-brand-sand block w-full rounded-sm border bg-parchment"
>
<g
stroke="#2a2a2a"
@@ -61,7 +73,7 @@ const prefersReducedMotion = $derived(
role="img"
aria-label="Animation: Ein Cursor zieht einen gestrichelten Rahmen um eine Zeile Kurrentschrift. Beim Loslassen wird der Rahmen durchgehend und ein Häkchen erscheint."
viewBox="0 0 600 180"
class="border-brand-sand block w-full rounded-sm border bg-[#FAF8F1]"
class="border-brand-sand block w-full rounded-sm border bg-parchment"
>
<!-- Kurrent writing (static) -->
<g

2
frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts
View File

@@ -177,6 +177,6 @@ describe('TranscriptionPanelHeader', () => {
const helpBtn = document.querySelector('button[aria-expanded]') as HTMLButtonElement;
helpBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
await vi.waitFor(() => expect(document.querySelector('[role="tooltip"]')).not.toBeNull());
await vi.waitFor(() => expect(document.querySelector('[role="region"]')).not.toBeNull());
});
});