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>
2026-08-18 11:13:10 +02:00
parent 9cc7df69f0
commit 0dbf7a40bf
11 changed files with 463 additions and 9 deletions
@@ -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);
 	}