feat(tasks): write a task straight into a section

The box at the top puts things in the project with no section, which is right for
capturing. But a project has sections because the work belongs somewhere, and
dragging every new task down into the right one is a second gesture for something
you already knew when you typed it.

Two ways in, because they answer different moments. A field at the foot of each
section and each board column — standing there is enough, no syntax to know. And
`/section` in quick add, for the box at the top and for Today and Upcoming, where
you are not standing in a section at all.

The field goes through quick add rather than createTask, so a line written there
still parses its dates, priorities and labels.

The sigil needed care: '#' and '@' never turn up in a Danish task line by accident
and '/' turns up constantly. It has to follow whitespace and be followed
immediately by the name, which "km/t", "3/4" and "20 kr / stk" all fail. The bare
form is greedy, because "Kunder/Ordrer" is a real section name and the sigil is
inside it.

A section id from the client is checked against the project the task actually
landed in. A `#project` in the same line can move the task elsewhere, and the id
would otherwise follow it into a project that section does not belong to.

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

web/src/routes/projekt/[id]/+page.svelte

@@ -277,6 +277,36 @@
 	let renamingSection = $state(null);
 	let sectionName = $state('');
 
+	/**
+	 * A task written straight into a section.
+	 *
+	 * The quick-add box at the top of the page puts things in the project with no
+	 * section, which is right for "capture it now" — but a project with sections has
+	 * them because the work belongs somewhere, and dragging every new task down into
+	 * the right one is a second gesture for something you already knew when you
+	 * typed it.
+	 *
+	 * It goes through quick add rather than createTask, so a line written here still
+	 * parses its dates, priorities and labels. The section is passed rather than
+	 * written, so `/Produktion` is not needed when you are already standing in it.
+	 */
+	let addingIn = $state(null);
+	let newInSection = $state('');
+
+	async function addToSection(event, sectionId) {
+		event.preventDefault();
+		const text = newInSection.trim();
+		if (!text) return;
+		newInSection = '';
+		addingIn = null;
+		try {
+			const created = await api.quickAdd(text, project.id, sectionId);
+			app.upsert(created);
+		} catch (e) {
+			app.toast(humanMessage(e));
+		}
+	}
+
 	async function addSection(event) {
 		event.preventDefault();
 		const name = sectionName.trim();
@@ -684,6 +714,29 @@
 					{#if !tasks.length}
 						<p class="empty">{t('view.emptySection')}</p>
 					{/if}
+
+					{#if canEdit}
+						{#if addingIn === section.id}
+							<form class="add-task" onsubmit={(e) => addToSection(e, section.id)}>
+								<input
+									bind:value={newInSection}
+									use:focusOnMount
+									placeholder={t('view.addTaskHere')}
+									aria-label={t('view.addTaskIn', { name: section.name })}
+									onblur={() => !newInSection.trim() && (addingIn = null)}
+									onkeydown={(e) => e.key === 'Escape' && (addingIn = null)}
+								/>
+							</form>
+						{:else}
+							<button
+								class="add-task-open"
+								onclick={() => {
+									addingIn = section.id;
+									newInSection = '';
+								}}>{t('view.addTask')}</button
+							>
+						{/if}
+					{/if}
 				</section>
 			{/each}
 
@@ -1267,6 +1320,38 @@
 		border-color: var(--accent);
 	}
 
+	/* Quiet until wanted. A section that is not being added to should read as a
+	   heading and its rows, not as a form. */
+	.add-task-open {
+		align-self: flex-start;
+		padding: var(--s2) 0 var(--s2) var(--s2);
+		font-size: var(--text-sm);
+		color: var(--ink-faint);
+		opacity: 0;
+		transition: opacity var(--fast) var(--ease);
+	}
+
+	section:hover .add-task-open,
+	.add-task-open:focus-visible {
+		opacity: 1;
+	}
+
+	.add-task-open:hover {
+		color: var(--ink-muted);
+	}
+
+	.add-task input {
+		width: 100%;
+		padding: var(--s2);
+		background: transparent;
+		border: 0;
+		border-bottom: 1px solid var(--accent);
+		font: inherit;
+		font-size: var(--text-sm);
+		color: var(--ink);
+		outline: none;
+	}
+
 	.add-section {
 		margin-top: var(--s5);
 	}