From 6c2fc6960aab5faa160967e561a868dd9bfaad9c Mon Sep 17 00:00:00 2001
From: Joakim <joakim@jnss.me>
Date: Sat, 14 Feb 2026 17:41:28 +0100
Subject: [PATCH] feat(web): add fade-out animation for checkbox task
 completion

When a task is completed via checkbox tap, it fades out and collapses
before being removed from the list, matching the swipe-to-complete
animation behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 opal-web/src/lib/components/TaskItem.svelte | 31 +++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/opal-web/src/lib/components/TaskItem.svelte b/opal-web/src/lib/components/TaskItem.svelte
index bdd5d14..08e2841 100644
--- a/opal-web/src/lib/components/TaskItem.svelte
+++ b/opal-web/src/lib/components/TaskItem.svelte
@@ -14,13 +14,29 @@
 	 */
 	export let onComplete;
 
+	let completing = false;
+
 	$: overdue = task.due && isOverdue(task.due);
 	$: dueToday = task.due && isTodayFn(new Date(task.due * 1000));
+
+	function handleCheckbox() {
+		if (completing) return;
+		completing = true;
+	}
+
+	/**
+	 * @param {TransitionEvent} e
+	 */
+	function handleTransitionEnd(e) {
+		if (e.propertyName === 'opacity' && completing) {
+			onComplete(task.uuid);
+		}
+	}
 </script>
 
 <SwipeAction onSwipe={() => onComplete(task.uuid)}>
-	<div class="task-item">
-		<div class="task-checkbox" on:click|stopPropagation={() => onComplete(task.uuid)} role="button" tabindex="-1">
+	<div class="task-item" class:completing on:transitionend={handleTransitionEnd}>
+		<div class="task-checkbox" on:click|stopPropagation={handleCheckbox} role="button" tabindex="-1">
 			<Checkbox checked={task.status === 'C'} />
 		</div>
 
@@ -70,6 +86,17 @@
 		background-color: var(--bg-primary);
 		border-bottom: 1px solid var(--border-color);
 		-webkit-tap-highlight-color: transparent;
+		transition: opacity 0.25s ease, max-height 0.25s ease 0.05s;
+		max-height: 200px;
+		opacity: 1;
+	}
+
+	.task-item.completing {
+		opacity: 0;
+		max-height: 0;
+		padding-top: 0;
+		padding-bottom: 0;
+		overflow: hidden;
 	}
 
 	.task-checkbox {