From a6cd0ea41d97f134d3af9ea806fdc388b265e1ac Mon Sep 17 00:00:00 2001
From: Joakim <joakim@jnss.me>
Date: Sat, 14 Feb 2026 17:30:02 +0100
Subject: [PATCH] feat(web): update TaskItem and TaskList for single-screen
 design

TaskItem: remove onClick navigation, wrap in SwipeAction for
swipe-to-complete, update priority colors (H=red, M=amber, L=gray,
default=hidden), add due-today amber color.

TaskList: accept activeReport prop for context-aware empty states,
replace onToggle/onTaskClick with onComplete, make scrollable with
flex:1 and overflow-y:auto.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 opal-web/src/lib/components/TaskItem.svelte | 152 ++++++++++----------
 opal-web/src/lib/components/TaskList.svelte |  52 ++++---
 2 files changed, 109 insertions(+), 95 deletions(-)

diff --git a/opal-web/src/lib/components/TaskItem.svelte b/opal-web/src/lib/components/TaskItem.svelte
index 5a0fa9f..bdd5d14 100644
--- a/opal-web/src/lib/components/TaskItem.svelte
+++ b/opal-web/src/lib/components/TaskItem.svelte
@@ -1,65 +1,66 @@
 <script>
+	import { isToday as isTodayFn } from 'date-fns';
 	import { formatRelative, isOverdue } from '$lib/utils/dates.js';
+	import SwipeAction from './SwipeAction.svelte';
 	import Checkbox from './ui/Checkbox.svelte';
-	
+
 	/**
 	 * @type {import('$lib/api/types.js').Task}
 	 */
 	export let task;
-	
+
 	/**
 	 * @type {(uuid: string) => void}
 	 */
-	export let onToggle;
-	
-	/**
-	 * @type {(uuid: string) => void}
-	 */
-	export let onClick;
-	
-	$: isDue = task.due && isOverdue(task.due);
-	$: priorityLabel = ['Low', 'Default', 'Medium', 'High'][task.priority];
+	export let onComplete;
+
+	$: overdue = task.due && isOverdue(task.due);
+	$: dueToday = task.due && isTodayFn(new Date(task.due * 1000));
 </script>
 
-<div class="task-item" on:click={() => onClick(task.uuid)} role="button" tabindex="0">
-	<div class="task-checkbox" on:click|stopPropagation={() => onToggle(task.uuid)}>
-		<Checkbox checked={task.status === 'C'} />
-	</div>
-	
-	<div class="task-content">
-		<div class="task-header">
-			<span class="task-description" class:completed={task.status === 'C'}>
-				{task.description}
-			</span>
+<SwipeAction onSwipe={() => onComplete(task.uuid)}>
+	<div class="task-item">
+		<div class="task-checkbox" on:click|stopPropagation={() => onComplete(task.uuid)} role="button" tabindex="-1">
+			<Checkbox checked={task.status === 'C'} />
 		</div>
-		
-		<div class="task-meta">
-			{#if task.project}
-				<span class="meta-item project">{task.project}</span>
-			{/if}
-			
-			{#if task.priority > 1}
-				<span class="meta-item priority priority-{task.priority}">
-					{priorityLabel}
+
+		<div class="task-content">
+			<div class="task-header">
+				<span class="task-description" class:completed={task.status === 'C'}>
+					{task.description}
 				</span>
-			{/if}
-			
-			{#if task.due}
-				<span class="meta-item due" class:overdue={isDue}>
-					{formatRelative(task.due)}
-				</span>
-			{/if}
-			
-			{#if task.tags && task.tags.length > 0}
-				<div class="tags">
-					{#each task.tags as tag}
-						<span class="tag">{tag}</span>
-					{/each}
-				</div>
-			{/if}
+			</div>
+
+			<div class="task-meta">
+				{#if task.project}
+					<span class="meta-item project">{task.project}</span>
+				{/if}
+
+				{#if task.priority === 3}
+					<span class="meta-item priority-high">High</span>
+				{:else if task.priority === 2}
+					<span class="meta-item priority-medium">Med</span>
+				{:else if task.priority === 0}
+					<span class="meta-item priority-low">Low</span>
+				{/if}
+
+				{#if task.due}
+					<span class="meta-item due" class:overdue class:due-today={dueToday}>
+						{formatRelative(task.due)}
+					</span>
+				{/if}
+
+				{#if task.tags && task.tags.length > 0}
+					<div class="tags">
+						{#each task.tags as tag}
+							<span class="tag">{tag}</span>
+						{/each}
+					</div>
+				{/if}
+			</div>
 		</div>
 	</div>
-</div>
+</SwipeAction>
 
 <style>
 	.task-item {
@@ -68,91 +69,92 @@
 		padding: var(--spacing-md);
 		background-color: var(--bg-primary);
 		border-bottom: 1px solid var(--border-color);
-		cursor: pointer;
-		transition: background-color 0.2s;
 		-webkit-tap-highlight-color: transparent;
 	}
-	
-	.task-item:hover {
-		background-color: var(--bg-secondary);
-	}
-	
-	.task-item:active {
-		background-color: var(--bg-tertiary);
-	}
-	
+
 	.task-checkbox {
 		flex-shrink: 0;
 		display: flex;
 		align-items: flex-start;
 		padding-top: 0.125rem;
+		cursor: pointer;
 	}
-	
+
 	.task-content {
 		flex: 1;
 		min-width: 0;
 	}
-	
+
 	.task-header {
 		margin-bottom: var(--spacing-xs);
 	}
-	
+
 	.task-description {
 		font-size: var(--font-size-base);
 		color: var(--text-primary);
 		word-break: break-word;
 	}
-	
+
 	.task-description.completed {
 		text-decoration: line-through;
 		color: var(--text-secondary);
 	}
-	
+
 	.task-meta {
 		display: flex;
 		flex-wrap: wrap;
 		gap: var(--spacing-xs);
 		align-items: center;
 	}
-	
+
 	.meta-item {
 		font-size: var(--font-size-xs);
 		padding: 0.125rem 0.5rem;
 		border-radius: 0.25rem;
 		font-weight: 500;
 	}
-	
+
 	.project {
 		background-color: #e0e7ff;
 		color: #4338ca;
 	}
-	
-	.priority {
-		background-color: #fef3c7;
-		color: #92400e;
-	}
-	
-	.priority-3 {
+
+	.priority-high {
 		background-color: #fee2e2;
 		color: #991b1b;
 	}
-	
+
+	.priority-medium {
+		background-color: #fef3c7;
+		color: #92400e;
+	}
+
+	.priority-low {
+		background-color: var(--bg-tertiary);
+		color: var(--text-tertiary);
+	}
+
 	.due {
 		background-color: #dbeafe;
 		color: #1e40af;
 	}
-	
+
+	.due.due-today {
+		background-color: #fef3c7;
+		color: #92400e;
+	}
+
 	.due.overdue {
 		background-color: #fee2e2;
 		color: #991b1b;
 	}
-	
+
 	.tags {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.25rem;
 	}
-	
+
 	.tag {
 		font-size: var(--font-size-xs);
 		padding: 0.125rem 0.5rem;
diff --git a/opal-web/src/lib/components/TaskList.svelte b/opal-web/src/lib/components/TaskList.svelte
index 3f3f967..30c9cf4 100644
--- a/opal-web/src/lib/components/TaskList.svelte
+++ b/opal-web/src/lib/components/TaskList.svelte
@@ -1,23 +1,35 @@
 <script>
 	import TaskItem from './TaskItem.svelte';
-	
+
 	/**
 	 * @type {import('$lib/api/types.js').Task[]}
 	 */
 	export let tasks = [];
-	
+
 	/**
 	 * @type {(uuid: string) => void}
 	 */
-	export let onToggle;
-	
-	/**
-	 * @type {(uuid: string) => void}
-	 */
-	export let onTaskClick;
-	
+	export let onComplete;
+
 	export let loading = false;
-	export let emptyMessage = 'No tasks found';
+	export let activeReport = 'list';
+
+	/** @type {Record<string, string>} */
+	const emptyMessages = {
+		list: 'No pending tasks. Add one below!',
+		completed: 'No completed tasks yet.',
+		overdue: 'Nothing overdue. Nice work!',
+		waiting: 'No waiting tasks.',
+		active: 'No active tasks.',
+		next: 'No next tasks.',
+		ready: 'No ready tasks.',
+		recurring: 'No recurring tasks.',
+		template: 'No template tasks.',
+		newest: 'No tasks found.',
+		oldest: 'No tasks found.'
+	};
+
+	$: emptyMessage = emptyMessages[activeReport] || 'No tasks found';
 </script>
 
 <div class="task-list">
@@ -35,10 +47,9 @@
 		</div>
 	{:else}
 		{#each tasks as task (task.uuid)}
-			<TaskItem 
+			<TaskItem
 				{task}
-				onToggle={onToggle}
-				onClick={onTaskClick}
+				{onComplete}
 			/>
 		{/each}
 	{/if}
@@ -46,12 +57,12 @@
 
 <style>
 	.task-list {
+		flex: 1;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
 		background-color: var(--bg-primary);
-		border-radius: var(--border-radius);
-		overflow: hidden;
-		box-shadow: var(--shadow-sm);
 	}
-	
+
 	.loading-container {
 		display: flex;
 		flex-direction: column;
@@ -60,7 +71,7 @@
 		padding: var(--spacing-xl);
 		gap: var(--spacing-md);
 	}
-	
+
 	.empty-state {
 		display: flex;
 		flex-direction: column;
@@ -68,15 +79,16 @@
 		justify-content: center;
 		padding: var(--spacing-xl);
 		text-align: center;
+		height: 100%;
 	}
-	
+
 	.empty-icon {
 		width: 4rem;
 		height: 4rem;
 		color: var(--text-tertiary);
 		margin-bottom: var(--spacing-md);
 	}
-	
+
 	.empty-message {
 		color: var(--text-secondary);
 		font-size: var(--font-size-lg);