From ea37288f8e43a0b604427b17b1fa06ecbc1e999c Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 24 Mar 2026 19:56:04 +0100
Subject: [PATCH] feat(todo): long press to open expanded edit form on mobile

500ms long press on a task item opens the expanded form with all fields.
Touch move or release before 500ms cancels the long press.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../web/src/lib/components/TaskItem.svelte    | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/todo/apps/web/src/lib/components/TaskItem.svelte b/apps/todo/apps/web/src/lib/components/TaskItem.svelte
index 83966bc35..61e0d4305 100644
--- a/apps/todo/apps/web/src/lib/components/TaskItem.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskItem.svelte
@@ -308,6 +308,32 @@
 		return `${completed}/${task.subtasks.length}`;
 	});
 
+	// Long press to expand (mobile)
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function handleTouchStart() {
+		longPressTimer = setTimeout(() => {
+			longPressTimer = null;
+			if (!isExpanded && onExpand) {
+				onExpand();
+			}
+		}, 500);
+	}
+
+	function handleTouchEnd() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	function handleTouchMove() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
 	// Only allow drag from the drag handle
 	function handlePointerDown(e: PointerEvent) {
 		const target = e.target as HTMLElement;
@@ -321,7 +347,14 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="task-item-wrapper" class:expanded={isExpanded} onpointerdown={handlePointerDown}>
+<div
+	class="task-item-wrapper"
+	class:expanded={isExpanded}
+	onpointerdown={handlePointerDown}
+	ontouchstart={handleTouchStart}
+	ontouchend={handleTouchEnd}
+	ontouchmove={handleTouchMove}
+>
 	<div
 		class="task-item group"
 		class:completed={task.isCompleted}