From c2a664d89128e4fb326fbb3d55828fd5b05ebba3 Mon Sep 17 00:00:00 2001
From: Kristian Wind <kw@KW-MacBook.local>
Date: Mon, 17 Aug 2026 10:40:05 +0200
Subject: [PATCH] feat(web): drag to reorder in the list view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The board has had it since it was written; the list has not, and
POST /tasks/{id}/move was already tested and working.

Where the board shows the target column, a list has to show the target
gap — the whole decision is "above this one or below it" — so a line is
drawn where the row would land, chosen by which half of the row the
pointer is in rather than by counting rows, which is what keeps it where
the eye expects it when rows have different heights.

The move sends both neighbours. The API's after_id is the task above,
which reads as the opposite of "after" in a vertical list, so the locals
here are named for where they end up on screen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/lib/components/TaskList.svelte   | 167 +++++++++++++++++++++++
 web/src/routes/projekt/[id]/+page.svelte |  10 +-
 2 files changed, 170 insertions(+), 7 deletions(-)
 create mode 100644 web/src/lib/components/TaskList.svelte

diff --git a/web/src/lib/components/TaskList.svelte b/web/src/lib/components/TaskList.svelte
new file mode 100644
index 0000000..22a36d1
--- /dev/null
+++ b/web/src/lib/components/TaskList.svelte
@@ -0,0 +1,167 @@
+<script>
+	/**
+	 * A list of tasks that can be reordered by dragging.
+	 *
+	 * The board view drags cards between columns; this drags rows within one. Both
+	 * use the native HTML drag-and-drop API for the same reason — it works with a
+	 * trackpad, a mouse and the browser's own affordances without reimplementing
+	 * any of them.
+	 *
+	 * Where the board shows the target *column*, a list has to show the target
+	 * *gap*: the whole decision here is "above this one or below it", so a line is
+	 * drawn where the row would land.
+	 */
+	import { app } from '$lib/stores.svelte.js';
+	import { api } from '$lib/api.js';
+	import TaskRow from './TaskRow.svelte';
+
+	let { tasks, projectId, sectionId = '', canEdit = true } = $props();
+
+	let draggingId = $state(null);
+	/** The row the line is drawn at, and which side of it. */
+	let overId = $state(null);
+	let overBelow = $state(false);
+
+	function onDragStart(event, task) {
+		if (!canEdit) return;
+		draggingId = task.id;
+		event.dataTransfer.effectAllowed = 'move';
+		// Firefox refuses to start a drag unless something is set on the transfer.
+		event.dataTransfer.setData('text/plain', task.id);
+	}
+
+	function onDragOver(event, task) {
+		if (!canEdit || !draggingId || draggingId === task.id) return;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = 'move';
+
+		// Which half of the row the pointer is in decides the gap. Comparing against
+		// the row's own midpoint rather than counting rows is what keeps the line
+		// where the eye expects it when rows have different heights.
+		const box = event.currentTarget.getBoundingClientRect();
+		overId = task.id;
+		overBelow = event.clientY > box.top + box.height / 2;
+	}
+
+	function clearOver() {
+		overId = null;
+	}
+
+	async function onDrop(event, target) {
+		event.preventDefault();
+		const id = draggingId;
+		const below = overBelow;
+		draggingId = null;
+		overId = null;
+		if (!id || !canEdit || id === target.id) return;
+
+		const ordered = [...tasks].sort((a, b) => a.sort_order - b.sort_order);
+		const without = ordered.filter((t) => t.id !== id);
+		const at = without.findIndex((t) => t.id === target.id);
+		if (at < 0) return;
+
+		// The gap the row lands in, named by where they end up on screen — the API's
+		// after_id is the task above, which is the opposite of what "after" reads as
+		// in a vertical list.
+		const index = below ? at + 1 : at;
+		const above = without[index - 1];
+		const beneath = without[index];
+
+		const task = app.get(id);
+		if (!task) return;
+		const previous = { ...task };
+
+		// Optimistic: the row is in its new place before the request goes out. The
+		// midpoint is a local guess — the server owns the real value and sends it
+		// back, and if the gap has run out of precision it respaces the section and
+		// tries again.
+		const order =
+			above && beneath
+				? (above.sort_order + beneath.sort_order) / 2
+				: above
+					? above.sort_order + 1024
+					: (beneath?.sort_order ?? 1024) - 1024;
+
+		app.replace(id, { ...task, sort_order: order });
+
+		try {
+			app.replace(
+				id,
+				await api.moveTask(id, {
+					project_id: projectId,
+					section_id: sectionId,
+					after_id: above?.id ?? '',
+					before_id: beneath?.id ?? ''
+				})
+			);
+		} catch {
+			app.replace(id, previous);
+			app.toast('Kunne ikke flytte opgaven.');
+		}
+	}
+
+	let ordered = $derived([...tasks].sort((a, b) => a.sort_order - b.sort_order));
+</script>
+
+{#each ordered as task (task.id)}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="sortable"
+		class:dragging={draggingId === task.id}
+		class:drop-above={overId === task.id && !overBelow}
+		class:drop-below={overId === task.id && overBelow}
+		draggable={canEdit}
+		ondragstart={(e) => onDragStart(e, task)}
+		ondragend={() => {
+			draggingId = null;
+			overId = null;
+		}}
+		ondragover={(e) => onDragOver(e, task)}
+		ondragleave={clearOver}
+		ondrop={(e) => onDrop(e, task)}
+	>
+		<TaskRow {task} />
+	</div>
+{/each}
+
+<style>
+	.sortable {
+		position: relative;
+		transition: opacity var(--fast) var(--ease);
+	}
+
+	/* Only the handle-less body drags; the checkbox stays clickable because the
+	   drag needs a few pixels of movement before the browser calls it a drag. */
+	.sortable[draggable='true'] {
+		cursor: grab;
+	}
+
+	.sortable.dragging {
+		opacity: 0.4;
+		cursor: grabbing;
+	}
+
+	/* A line in the gap rather than a highlighted row: the row is not the target,
+	   the space between two rows is. */
+	.sortable::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background: var(--accent);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--fast) var(--ease);
+	}
+
+	.sortable.drop-above::before {
+		top: -1px;
+		opacity: 1;
+	}
+
+	.sortable.drop-below::before {
+		bottom: -1px;
+		opacity: 1;
+	}
+</style>
diff --git a/web/src/routes/projekt/[id]/+page.svelte b/web/src/routes/projekt/[id]/+page.svelte
index 29511a8..6daaaf2 100644
--- a/web/src/routes/projekt/[id]/+page.svelte
+++ b/web/src/routes/projekt/[id]/+page.svelte
@@ -3,7 +3,7 @@
 	import { page } from '$app/stores';
 	import { api, humanMessage } from '$lib/api.js';
 	import { app } from '$lib/stores.svelte.js';
-	import TaskRow from '$lib/components/TaskRow.svelte';
+	import TaskList from '$lib/components/TaskList.svelte';
 	import QuickAdd from '$lib/components/QuickAdd.svelte';
 	import BoardView from '$lib/components/BoardView.svelte';
 	import CalendarView from '$lib/components/CalendarView.svelte';
@@ -168,18 +168,14 @@
 			<CalendarView />
 		{:else}
 			<section>
-				{#each unsectioned as task (task.id)}
-					<TaskRow {task} />
-				{/each}
+				<TaskList tasks={unsectioned} projectId={project.id} sectionId="" {canEdit} />
 			</section>
 
 			{#each sections as section (section.id)}
 				{@const tasks = open.filter((t) => t.section_id === section.id)}
 				<section>
 					<h2>{section.name}</h2>
-					{#each tasks as task (task.id)}
-						<TaskRow {task} />
-					{/each}
+					<TaskList {tasks} projectId={project.id} sectionId={section.id} {canEdit} />
 					{#if !tasks.length}
 						<p class="empty">Tom</p>
 					{/if}