feat(capture): skriv hvor som helst, og se hvad feltet forstår

To ting fra Doda. Begynder man at skrive et sted i appen, åbner hurtig tilføjelse
med bogstavet allerede i feltet — ingen knap at ramme først, og tanken skal ikke
overleve en rejse hen for at finde et sted at ligge. Og under feltet står nu, hvad
parseren kan læse: #projekt, /sektion, @etiket, p1, en dato. Det stod i
pladsholderen før, som er det ene sted en hjælp ikke kan stå: den forsvinder ved
første anslag, altså præcis når den begynder at være nyttig.

Prisen er de enkelte bogstaver som genveje. Ét tastatur kan ikke både stave "tal
med Anders" og springe til I dag på samme t, og det, man gør halvtreds gange om
dagen, er at fange. Navigation ligger i paletten, som kan mere og koster ét
anslag. Genvejssiden er rettet, så den ikke lover q, t og u.

Undervejs, i den rækkefølge testene fandt dem: reglen var først "er det et
tekstfelt?", hvilket stjal bogstaver fra en fokuseret knap eller liste — den er nu
"har noget som helst fokus?". Hjælpelinjen lå i flowet og skubbede hele listen ned,
når feltet fik fokus, så klik landede en række forkert; tolv tests fangede det.
Den svæver nu, og efter at have svævet ovenpå den første opgave og slugt dens klik
tager den ikke længere imod pegeredskaber.

Og en fejl, der allerede lå der: q slog feltet op på aria-label="Ny opgave", så
genvejen gjorde stille ingenting for enhver, der kørte fladen på engelsk. Feltet
findes nu på et mærke, ikke på en oversat tekst.

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

web/e2e/smoke.spec.js

@@ -1768,3 +1768,49 @@ test('MCP-adressen svarer JSON, ikke app-skallen', async ({ request }) => {
 	expect(response.headers()['content-type']).toContain('application/json');
 	expect((await response.json()).code).toBe('unauthorized');
 });
+
+test('man kan skrive hvor som helst, og feltet fortæller hvad det forstår', async ({ page }) => {
+	const trouble = watchForTrouble(page);
+	await page.goto('/');
+
+	// Nothing focused, nothing clicked: just type. The thought does not have to
+	// survive a journey to find somewhere to put it.
+	await page.locator('body').click({ position: { x: 5, y: 5 } });
+	// "i dag" because this is the Today view: a task parsed onto no date at all is
+	// correctly absent from it, which would read as the capture having failed.
+	await page.keyboard.type('ring til Anders i dag');
+
+	const field = page.locator('[data-quickadd]');
+	await expect(field).toBeFocused();
+	// Every letter arrives, including the first — which is the one a naive
+	// implementation drops while it is busy moving focus.
+	await expect(field).toHaveValue('ring til Anders i dag');
+
+	// And the legend appears with the field, saying what the parser can read. It
+	// used to live in the placeholder, which vanishes at the first keystroke —
+	// exactly when the help starts being useful.
+	await expect(page.getByText('projekt', { exact: false }).first()).toBeVisible();
+
+	await page.keyboard.press('Enter');
+	await expect(page.getByText('ring til Anders', { exact: true })).toBeVisible();
+
+	// In English too. The shortcut used to find the field by its Danish label, so
+	// it silently did nothing for anybody running the interface in English.
+	await page.goto('/indstillinger');
+	await page.getByLabel('Sprog').selectOption('en');
+	await page.getByRole('button', { name: 'Gem' }).first().click();
+	await page.goto('/');
+	await page.locator('body').click({ position: { x: 5, y: 5 } });
+	await page.keyboard.type('call Anders');
+	await expect(page.locator('[data-quickadd]')).toHaveValue('call Anders');
+
+	// Back to Danish. The account is shared with every test after this one, and
+	// leaving it in English made three of them hunt for buttons by names that no
+	// longer existed — a failure that looks like the feature under test and is not.
+	await page.goto('/indstillinger');
+	await page.getByLabel('Language').selectOption('da');
+	await page.getByRole('button', { name: 'Save' }).first().click();
+	await expect(page.getByRole('button', { name: 'Gem' }).first()).toBeVisible();
+
+	expect(trouble).toEqual([]);
+});

web/src/lib/components/QuickAdd.svelte

@@ -21,6 +21,19 @@
 	let spans = $state([]);
 	let submitting = $state(false);
 	let input;
+	let focused = $state(false);
+
+	// 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
+	// last entry is an example rather than a symbol.
+	let syntax = $derived([
+		{ mark: '#', what: t('task.syntaxProject') },
+		{ mark: '/', what: t('task.syntaxSection') },
+		{ mark: '@', what: t('task.syntaxLabel') },
+		{ mark: 'p1', what: t('task.syntaxPriority') },
+		{ mark: t('task.syntaxDateMark'), what: t('task.syntaxDate') }
+	]);
 
 	let previewController = null;
 	let previewTimer = null;
@@ -143,7 +156,10 @@
 			bind:this={input}
 			bind:value={text}
 			{onkeydown}
+			onfocus={() => (focused = true)}
+			onblur={() => (focused = false)}
 			type="text"
+			data-quickadd
 			placeholder={t('task.placeholder')}
 			aria-label={t('task.new')}
 			autocomplete="off"
@@ -154,10 +170,52 @@
 	{#if text.trim()}
 		<button type="submit" class="submit" disabled={submitting}>{t('task.add')}</button>
 	{/if}
+
+	<!-- What the parser understands, spelled out while somebody is typing into it.
+	     It was in the placeholder before, which is the one place a hint cannot be:
+	     the placeholder disappears at the first keystroke, so the help was gone
+	     exactly when it started being useful.
+
+	     Floated rather than in the flow. In the flow it pushed the whole list down
+	     the moment the field took focus, and a click aimed at the first task landed
+	     on the second — twelve tests caught it, which is twelve more than the eye
+	     would have. -->
+	{#if focused}
+		<p class="syntax">
+			{#each syntax as item}
+				<span><kbd>{item.mark}</kbd> {item.what}</span>
+			{/each}
+		</p>
+	{/if}
 </form>
 
 <style>
+	/* Sits under the field it explains, in the same rhythm as a hint anywhere else. */
+	.syntax {
+		/* Nothing to click, and it floats over the first task in the list — which it
+		   promptly swallowed the clicks of. Legends are for reading. */
+		pointer-events: none;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		background: var(--surface);
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--s1) var(--s3);
+		padding: var(--s1) 0 0 var(--s4);
+		font-size: var(--text-xs);
+		color: var(--ink-faint);
+	}
+
+	.syntax kbd {
+		font-family: var(--mono, ui-monospace, monospace);
+		color: var(--ink-muted);
+	}
+
 	.quickadd {
+		position: relative;
 		display: flex;
 		align-items: center;
 		gap: var(--s3);

web/src/lib/locales/da.js

@@ -57,6 +57,12 @@ export const da = {
 	// --- a task in a list ----------------------------------------------------------
 	'task.add': 'Tilføj',
 	'task.new': 'Ny opgave',
+	'task.syntaxProject': 'projekt',
+	'task.syntaxSection': 'sektion',
+	'task.syntaxLabel': 'etiket',
+	'task.syntaxPriority': 'prioritet',
+	'task.syntaxDateMark': 'i morgen kl 10',
+	'task.syntaxDate': 'forfalder',
 	'task.placeholder': 'Tilføj en opgave — prøv “betal moms i morgen kl 10 p1 #Firma”',
 	'task.complete': 'Markér som færdig',
 	'task.reopen': 'Genåbn opgave',
@@ -371,6 +377,8 @@ export const da = {
 	'data.templatesHint':
 		'Et projekt gemt som en form, der kan bruges igen. Datoerne i skabelonen er relative, så de bliver regnet ud fra den startdato, du vælger.',
 
+	'keys.anyLetter': 'et bogstav',
+	'keys.typeToCapture': 'begynder en opgave, med bogstavet i feltet',
 	'keys.navigation': 'Navigation',
 	'keys.jumpToQuickAdd': 'Hop til feltet “tilføj opgave”',
 	'keys.thisPage': 'Denne side',

web/src/lib/locales/en.js

@@ -53,6 +53,12 @@ export const en = {
 	// --- a task in a list ----------------------------------------------------------
 	'task.add': 'Add',
 	'task.new': 'New task',
+	'task.syntaxProject': 'project',
+	'task.syntaxSection': 'section',
+	'task.syntaxLabel': 'label',
+	'task.syntaxPriority': 'priority',
+	'task.syntaxDateMark': 'tomorrow at 10',
+	'task.syntaxDate': 'due',
 	'task.placeholder': 'Add a task — try “pay VAT tomorrow at 10 p1 #Company”',
 	'task.complete': 'Mark as done',
 	'task.reopen': 'Reopen task',
@@ -366,6 +372,8 @@ export const en = {
 	'data.templatesHint':
 		'A project saved as a shape you can use again. The dates in a template are relative, so they are worked out from the start date you pick.',
 
+	'keys.anyLetter': 'any letter',
+	'keys.typeToCapture': 'starts a task, with the letter already in the field',
 	'keys.navigation': 'Navigation',
 	'keys.jumpToQuickAdd': 'Jump to the “add a task” field',
 	'keys.thisPage': 'This page',

web/src/routes/+layout.svelte

@@ -29,16 +29,31 @@
 	});
 
 	/**
-	 * Global shortcuts, mapped the way Todoist maps them so muscle memory carries
-	 * over. They are ignored while a text field has focus — otherwise typing "t"
-	 * in a task title would navigate away mid-sentence.
+	 * Global keys.
+	 *
+	 * Typing anywhere starts a task, with the letter already in the field. That is
+	 * the whole gesture: no button to hit first, no shortcut to remember, and the
+	 * thought you had while looking at a list does not have to survive a journey to
+	 * find somewhere to put it.
+	 *
+	 * It costs the single-letter navigation. "t" for today and "u" for upcoming
+	 * cannot also be the first letter of "tal med Anders" — one keyboard cannot
+	 * serve both, and capturing is the thing done fifty times a day. Navigation
+	 * lives in the palette, which does more and is one keystroke away.
+	 *
+	 * Ignored while a field already has focus, while a task is open — the drawer is
+	 * a place you are, not one you pass through — and for anything held with a
+	 * modifier, which belongs to the browser and the system.
 	 */
 	function onkeydown(event) {
 		const el = event.target;
-		const typing =
-			el instanceof HTMLInputElement ||
-			el instanceof HTMLTextAreaElement ||
-			el?.isContentEditable;
+		// Only when nothing has focus. The first version asked the narrower question
+		// — "is this a text field?" — and so captured a letter typed at a focused
+		// select, button or link, which is where that letter belongs. A key pressed
+		// at something is meant for it; only a key pressed at the page itself is
+		// spare.
+		const idle = el === document.body || el === document.documentElement;
+		const typing = !idle;
 
 		if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
 			event.preventDefault();
@@ -46,25 +61,24 @@
 			return;
 		}
 		if (typing || event.metaKey || event.ctrlKey || event.altKey) return;
-		// The navigation shortcuts are for the list. With a task open, "t" means the
-		// letter t — the drawer is a place you are, not a place you pass through.
 		if (app.detailId) return;
 
-		switch (event.key) {
-			case 'q':
-				event.preventDefault();
-				document.querySelector('input[aria-label="Ny opgave"]')?.focus();
-				break;
-			case 't':
-				goto('/');
-				break;
-			case 'u':
-				goto('/upcoming');
-				break;
-			case '?':
-				goto('/genveje');
-				break;
-		}
+		// One character, so Tab, Escape, the arrows and the function keys stay
+		// themselves. Space is excluded too: a task that begins with a space begins
+		// with a mis-hit, and space is what people press to scroll a long list.
+		if (event.key.length !== 1 || event.key === ' ') return;
+
+		// Found by a marker rather than by its label. This used to look the field up
+		// by aria-label="Ny opgave", which meant the shortcut quietly did nothing for
+		// anybody running the interface in English.
+		const field = document.querySelector('[data-quickadd]');
+		if (!field) return;
+
+		event.preventDefault();
+		field.focus();
+		field.value += event.key;
+		// Svelte binds on input, and setting .value in script does not raise one.
+		field.dispatchEvent(new Event('input', { bubbles: true }));
 	}
 </script>
 

web/src/routes/genveje/+page.svelte

@@ -1,16 +1,20 @@
 <script>
-	/** The shortcuts, listed. Mapped to Todoist's so muscle memory carries over. */
+	/**
+	 * The shortcuts, listed.
+	 *
+	 * The single-letter navigation this page used to carry — q, t, u — is gone.
+	 * Typing anywhere now starts a task, and one keyboard cannot both spell "tal
+	 * med Anders" and jump to Today on the same "t". Navigation moved into the
+	 * palette, which does more and costs one keystroke.
+	 */
 	import { t } from '$lib/i18n.svelte.js';
 
 	const groups = $derived([
 		{
 			title: t('keys.navigation'),
 			keys: [
-				['q', t('keys.jumpToQuickAdd')],
-				['t', t('nav.today')],
-				['u', t('nav.upcoming')],
-				['⌘K / Ctrl+K', t('nav.search')],
-				['?', t('keys.thisPage')]
+				[t('keys.anyLetter'), t('keys.typeToCapture')],
+				['⌘K / Ctrl+K', t('nav.search')]
 			]
 		},
 		{