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>
This commit is contained in:
Till JS 2026-03-24 19:56:04 +01:00
parent 4b4cdd8cd8
commit ea37288f8e

View file

@ -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}