feat(opgaver): tal en opgave ind — en rund knap i bunden på telefonen

En stor rund knap nederst til højre, inden for tommelfingerens rækkevidde.
Den åbner en skuffe med quick-add-feltet og sætter markøren i det, så
tastaturet kommer frem — og så trykker man mikrofonen på tastaturet.

VI LAVER INGEN TALEGENKENDELSE, og det er et valg frem for en mangel. iOS'
egen diktering kører på enheden på nyere telefoner. En talegenkendelse
bygget ind her ville sende lyden fra et selvhostet program videre til Apple
eller Google — en datavej, der skulle forklares på privatlivssiden, for at
spare ét tryk. Af de tre AI-udbydere, instansen understøtter, har anthropic
i øvrigt slet ingen lyd-API, så serverside-transskription ville også dele
brugerne op efter hvem de har en nøgle hos.

Teksten lander i det felt, der i forvejen viser, hvad parseren forstod, så
"ring til tandlægen i dag kl 14 p1" bliver læst mens man ser på det, og
intet oprettes før man siger ja. Derfor hedder komponenten diktat og ikke
tale: den gør ikke selv noget ved lyden, den stiller feltet frem.

## Det ene, funktionen hænger på

Safari på iOS åbner kun tastaturet, hvis focus() kaldes INDE i den
brugerhandling, der bad om det. QuickAdds `autofocus` sker i en $effect,
altså efter klikket er returneret — det giver feltet en markør og intet
tastatur, og der er ingen fejl nogen steder.

Så skuffen er ALTID monteret og bare skubbet ud af syne med transform og
opacity. Ikke display:none, ikke visibility:hidden, ikke inert — alle tre
gør feltet ufokuserbart. Prøven påstår direkte, at feltet findes FØR
klikket, fordi det er den eneste del af iOS-kravet, en browser kan måles på;
plantet som `{#if open}` går den rød med Expected: 1, Received: 0.

## To kollisioner, hvor jeg kun så den ene

Skuffen lægger et felt mere på siden, og det rammer to ting:

- `data-quickadd`, som skriv-hvor-som-helst-genvejen slår op med
  querySelector — altså FØRSTE match. Set på forhånd og løst med en
  `marked`-prop.

- Det tilgængelige navn. Det så jeg IKKE, og otte prøver gik røde på
  `getByLabel('Ny opgave') resolved to 2 elements`. Det er heller ikke kun
  et prøveproblem: to felter med samme navn læses op to gange af en
  skærmlæser, uden at man kan høre forskel. De to ER forskellige ting — det
  ene er kassen på siden, det andet er det, knappen åbner — så de har hver
  sit navn nu.

## Og en fejl, skærmbilledet fandt

Fremhævningen bag teksten lå på en linje, inputtet ikke havde — en bleg
blok under sætningen. Spejlet stod på `white-space: pre-wrap`, men et
<input type="text"> er enkeltlinje per specifikation og kan ikke ombryde,
uanset hvad reglen siger. Komponentens egen kommentar forudser det ordret:
"same wrapping. Any difference shows up as highlighting that drifts out of
alignment as the line grows."

Sjældent synligt på et bredt felt, konstant på 390px med en dikteret
sætning. Spejlet står nu på `pre` og rulles med inputtets scrollLeft.

Knappen tegnes ikke over 820px — der er feltet fremme hele tiden og et
tastatur at skrive på — og ikke i urd-ansigtet, hvor der ingen opgaver er.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/lib/components/DictateSheet.svelte

@@ -0,0 +1,234 @@
+<script>
+	/**
+	 * Tal en opgave ind.
+	 *
+	 * En stor rund knap i bunden af skærmen, inden for tommelfingerens rækkevidde.
+	 * Den åbner en skuffe med quick-add-feltet og sætter markøren i det, så
+	 * tastaturet kommer frem — og så trykker man mikrofonen på tastaturet.
+	 *
+	 * VI LAVER INGEN TALEGENKENDELSE, og det er et valg frem for en mangel. iOS'
+	 * egen diktering kører på enheden på nyere telefoner; en talegenkendelse bygget
+	 * ind her ville sende lyden fra et selvhostet program videre til Apple eller
+	 * Google, og det er en datavej, der skal forklares på privatlivssiden for at
+	 * spare ét tryk. Teksten lander i det felt, der i forvejen viser, hvad parseren
+	 * forstod — så "ring til tandlægen i morgen kl 10 p1" bliver læst, mens man ser
+	 * på det, og intet oprettes før man siger ja.
+	 *
+	 * Derfor hedder komponenten diktat og ikke tale: den gør ikke selv noget ved
+	 * lyden, den stiller feltet frem.
+	 */
+	import QuickAdd from './QuickAdd.svelte';
+	import { app } from '$lib/stores.svelte.js';
+	import { t } from '$lib/i18n.svelte.js';
+
+	let open = $state(false);
+	let box;
+	let sheet;
+
+	/**
+	 * Åbner og sætter fokus I SAMME HUG som klikket.
+	 *
+	 * Rækkefølgen her er hele funktionen. Safari på iOS åbner kun tastaturet, hvis
+	 * `focus()` kaldes inde i den brugerhandling, der bad om det — og Sveltes
+	 * opdateringer er asynkrone, så feltet kan ikke være betinget tegnet og få
+	 * fokus i samme omgang. Derfor er skuffen ALTID monteret og bare skubbet ud af
+	 * syne med `transform` og `opacity`: elementet findes, så det kan fokuseres nu
+	 * frem for efter næste opdatering.
+	 *
+	 * `display: none` og `visibility: hidden` ville begge gøre feltet ufokuserbart,
+	 * og `inert` ligeså. Det er grunden til, at den lukkede tilstand er gennemsigtig
+	 * og uden pointer-events frem for skjult.
+	 */
+	function start() {
+		open = true;
+		box?.focusField();
+	}
+
+	function close() {
+		open = false;
+		// Tastaturet bliver stående, hvis feltet beholder fokus.
+		if (sheet?.contains(document.activeElement)) document.activeElement.blur();
+	}
+
+	function onkeydown(event) {
+		if (event.key === 'Escape' && open) {
+			event.preventDefault();
+			close();
+		}
+	}
+</script>
+
+<svelte:window {onkeydown} />
+
+<!-- Knappen tegnes ikke i urd-ansigtet: der er ingen opgaver at lægge noget i.
+     Og den er skjult over 820px i CSS frem for her, fordi en skærm, der skifter
+     bredde, ikke skal kunne tabe et felt, der har fokus. -->
+{#if !app.showsUrd}
+	<button class="fab" class:away={open} onclick={start} aria-label={t('task.speak')}>
+		<!-- En mikrofon, tegnet i samme streger som mærkerne: kapslen, bøjlen under
+		     den og foden. Ingen tekst i knappen — den er rund og tommelfingerstor,
+		     og navnet står i aria-label. -->
+		<svg viewBox="0 0 24 24" aria-hidden="true">
+			<rect x="9" y="2.5" width="6" height="11" rx="3" />
+			<path d="M5.5 11a6.5 6.5 0 0 0 13 0" />
+			<path d="M12 17.5V21" />
+		</svg>
+	</button>
+{/if}
+
+<div
+	class="scrim"
+	class:open
+	aria-hidden="true"
+	onclick={close}
+	onkeydown={null}
+	role="presentation"
+></div>
+
+<div
+	class="sheet"
+	class:open
+	bind:this={sheet}
+	role="dialog"
+	aria-modal="false"
+	aria-label={t('task.speak')}
+	aria-hidden={!open}
+>
+	<div class="grab" aria-hidden="true"></div>
+	<p class="hint">{t('task.speakHint')}</p>
+	<!-- `marked={false}`: den her må ikke være den, type-anywhere-genvejen finder.
+	     Se kommentaren ved `marked` i QuickAdd. -->
+	<QuickAdd bind:this={box} marked={false} label={t('task.speak')} onadded={close} />
+	<button class="done" onclick={close} tabindex={open ? 0 : -1}>{t('detail.close')}</button>
+</div>
+
+<style>
+	.fab {
+		position: fixed;
+		right: max(var(--s4), env(safe-area-inset-right));
+		/* Over hjemmeindikatoren på en iPhone, ikke under den. */
+		bottom: calc(var(--s4) + env(safe-area-inset-bottom));
+		z-index: 40;
+
+		width: 64px;
+		height: 64px;
+		border: none;
+		border-radius: var(--radius-full);
+		background: var(--accent);
+		color: var(--accent-ink);
+		box-shadow: var(--shadow-lg);
+		display: grid;
+		place-items: center;
+		cursor: pointer;
+		transition:
+			transform var(--fast) var(--ease-out),
+			opacity var(--fast) var(--ease-out);
+	}
+
+	.fab svg {
+		width: 28px;
+		height: 28px;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	.fab:active {
+		transform: scale(0.94);
+	}
+
+	/* Væk, mens skuffen er åben: den ville ellers stå oven på feltet. */
+	.fab.away {
+		opacity: 0;
+		pointer-events: none;
+		transform: translateY(8px);
+	}
+
+	.scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 44;
+		background: rgb(0 0 0 / 0.4);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--medium) var(--ease-out);
+	}
+
+	.scrim.open {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.sheet {
+		position: fixed;
+		inset: auto 0 0 0;
+		z-index: 45;
+		padding: var(--s3) max(var(--s3), env(safe-area-inset-left))
+			calc(var(--s3) + env(safe-area-inset-bottom)) max(var(--s3), env(safe-area-inset-right));
+		background: var(--surface-raised);
+		border-top: 1px solid var(--line);
+		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+		box-shadow: var(--shadow-lg);
+		display: grid;
+		gap: var(--s2);
+
+		/* Lukket: gennemsigtig og skubbet ned, IKKE display:none — feltet skal kunne
+		   fokuseres i samme hug som klikket. Se `start()`. */
+		opacity: 0;
+		transform: translateY(100%);
+		pointer-events: none;
+		transition:
+			transform var(--medium) var(--ease-out),
+			opacity var(--medium) var(--ease-out);
+	}
+
+	.sheet.open {
+		opacity: 1;
+		transform: translateY(0);
+		pointer-events: auto;
+	}
+
+	.grab {
+		width: 36px;
+		height: 4px;
+		border-radius: var(--radius-full);
+		background: var(--line-strong);
+		justify-self: center;
+	}
+
+	.hint {
+		margin: 0;
+		color: var(--ink-muted);
+		font-size: 0.85rem;
+		text-align: center;
+	}
+
+	.done {
+		justify-self: center;
+		background: none;
+		border: none;
+		color: var(--ink-muted);
+		padding: var(--s2);
+		cursor: pointer;
+	}
+
+	/* En skrivebordsskærm har feltet fremme hele tiden og et tastatur at skrive
+	   på. Knappen er til tommelfingeren. */
+	@media (min-width: 821px) {
+		.fab,
+		.scrim,
+		.sheet {
+			display: none;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fab,
+		.scrim,
+		.sheet {
+			transition: none;
+		}
+	}
+</style>

web/src/lib/components/QuickAdd.svelte

@@ -16,14 +16,53 @@
 	import { app } from '$lib/stores.svelte.js';
 	import { t } from '$lib/i18n.svelte.js';
 	import { readList } from '$lib/pastelist.js';
-	let { projectId = undefined, onadded = undefined, autofocus = false } = $props();
+	let {
+		projectId = undefined,
+		onadded = undefined,
+		autofocus = false,
+		/**
+		 * Whether this box carries the `data-quickadd` marker.
+		 *
+		 * The layout's type-anywhere shortcut finds the field with
+		 * `document.querySelector('[data-quickadd]')`, which returns the FIRST match
+		 * in the document. So a second box on the page — the dictate sheet's — has
+		 * to stay unmarked, or the shortcut starts typing into a box nobody can see.
+		 */
+		marked = true,
+		/**
+		 * The field's accessible name.
+		 *
+		 * A prop because the dictate sheet puts a second one of these on the page,
+		 * and two fields answering to "Ny opgave" is a screen reader reading the
+		 * same name twice with no way to tell which is which. They are different
+		 * affordances — one is the box on the page, the other is the thing the
+		 * round button opens — so they say different names.
+		 */
+		label = undefined
+	} = $props();
+
+	let fieldLabel = $derived(label ?? t('task.new'));
 
 	let text = $state('');
 	let spans = $state([]);
 	let submitting = $state(false);
 	let input;
+	let mirror;
 	let focused = $state(false);
 
+	/**
+	 * Keeps the tint under the right characters when the line is longer than the
+	 * field.
+	 *
+	 * The input scrolls horizontally and the mirror has to scroll with it. Done on
+	 * both `scroll` and `input` because typing at the end of a long line moves the
+	 * caret — and therefore the scroll — without ever firing a scroll event in some
+	 * browsers.
+	 */
+	function syncScroll() {
+		if (mirror && input) mirror.scrollLeft = input.scrollLeft;
+	}
+
 	// Kept beside the parser's own vocabulary on purpose: a legend that promises
 	// something internal/quickadd cannot read is worse than no legend. These four
 	// are what Parse recognises as marks; dates it reads as prose, which is why the
@@ -72,6 +111,20 @@
 		if (autofocus && input) input.focus();
 	});
 
+	/**
+	 * Focus the field from outside, synchronously.
+	 *
+	 * This exists because of iOS and nothing else. Safari opens the on-screen
+	 * keyboard only when `focus()` is called INSIDE the user gesture that asked for
+	 * it — so the `autofocus` effect above, which runs after the click handler has
+	 * returned, gives the field a caret and no keyboard. For the dictate button that
+	 * is the whole feature failing quietly: the sheet opens, nothing to dictate
+	 * into, and there is no error anywhere.
+	 */
+	export function focusField() {
+		input?.focus();
+	}
+
 	/** Splits the raw text into highlighted and plain runs, by byte offset. */
 	let segments = $derived.by(() => {
 		if (!spans.length) return [{ text, kind: null }];
@@ -197,7 +250,7 @@
 		<!-- The mirror sits behind the input and must match it exactly: same font,
 		     same padding, same wrapping. Any difference shows up as highlighting
 		     that drifts out of alignment as the line grows. -->
-		<div class="mirror" aria-hidden="true">
+		<div class="mirror" aria-hidden="true" bind:this={mirror}>
 			{#each segments as segment}
 				{#if segment.kind}
 					<mark data-kind={segment.kind}>{segment.text}</mark>
@@ -211,12 +264,14 @@
 			bind:this={input}
 			bind:value={text}
 			{onkeydown}
+			onscroll={syncScroll}
+			oninput={syncScroll}
 			onfocus={() => (focused = true)}
 			onblur={() => (focused = false)}
 			type="text"
-			data-quickadd
+			data-quickadd={marked ? '' : undefined}
 			placeholder={t('task.placeholder')}
-			aria-label={t('task.new')}
+			aria-label={fieldLabel}
 			autocomplete="off"
 			spellcheck="false"
 			{onpaste}
@@ -385,8 +440,16 @@
 		letter-spacing: normal;
 		padding: 0;
 		border: 0;
-		white-space: pre-wrap;
-		overflow-wrap: anywhere;
+		/* `pre`, not `pre-wrap`, and that is the whole alignment.
+		   
+		   An <input type="text"> is single-line by specification and cannot wrap
+		   whatever CSS says. So a wrapping mirror behind a non-wrapping input does
+		   not drift a little — it puts the tint on a second line that the input does
+		   not have, and the highlight ends up under empty space. Rare on a wide
+		   desktop field, constant in the dictate sheet on a 390px phone, where a
+		   spoken sentence overflows immediately. */
+		white-space: pre;
+		overflow-wrap: normal;
 	}
 
 	.mirror {
@@ -394,6 +457,10 @@
 		inset: 0;
 		pointer-events: none;
 		color: transparent;
+		/* Scrolled in step with the input by hand — see `syncScroll`. The overflow
+		   has to be hidden rather than visible, or the long tail of a line paints
+		   out past the field's edge. */
+		overflow: hidden;
 	}
 
 	/* The tint is behind the glyphs, not on them: colouring the text itself would