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

@@ -1,5 +1,7 @@
 <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';
 
 	/**
@@ -10,19 +12,15 @@
 	/**
 	 * @type {(uuid: string) => void}
 	 */
-	export let onToggle;
+	export let onComplete;
 
-	/**
-	 * @type {(uuid: string) => void}
-	 */
-	export let onClick;
-	
-	$: isDue = task.due && isOverdue(task.due);
-	$: priorityLabel = ['Low', 'Default', 'Medium', 'High'][task.priority];
+	$: 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)}>
+<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>
 
@@ -38,14 +36,16 @@
 					<span class="meta-item project">{task.project}</span>
 				{/if}
 
-			{#if task.priority > 1}
-				<span class="meta-item priority priority-{task.priority}">
-					{priorityLabel}
-				</span>
+				{#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={isDue}>
+					<span class="meta-item due" class:overdue class:due-today={dueToday}>
 						{formatRelative(task.due)}
 					</span>
 				{/if}
@@ -59,7 +59,8 @@
 				{/if}
 			</div>
 		</div>
-</div>
+	</div>
+</SwipeAction>
 
 <style>
 	.task-item {
@@ -68,24 +69,15 @@
 		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 {
@@ -127,14 +119,19 @@
 		color: #4338ca;
 	}
 
-	.priority {
+	.priority-high {
+		background-color: #fee2e2;
+		color: #991b1b;
+	}
+
+	.priority-medium {
 		background-color: #fef3c7;
 		color: #92400e;
 	}
 
-	.priority-3 {
-		background-color: #fee2e2;
-		color: #991b1b;
+	.priority-low {
+		background-color: var(--bg-tertiary);
+		color: var(--text-tertiary);
 	}
 
 	.due {
@@ -142,6 +139,11 @@
 		color: #1e40af;
 	}
 
+	.due.due-today {
+		background-color: #fef3c7;
+		color: #92400e;
+	}
+
 	.due.overdue {
 		background-color: #fee2e2;
 		color: #991b1b;

opal-web/src/lib/components/TaskList.svelte

@@ -9,15 +9,27 @@
 	/**
 	 * @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">
@@ -37,8 +49,7 @@
 		{#each tasks as task (task.uuid)}
 			<TaskItem
 				{task}
-				onToggle={onToggle}
-				onClick={onTaskClick}
+				{onComplete}
 			/>
 		{/each}
 	{/if}
@@ -46,10 +57,10 @@
 
 <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 {
@@ -68,6 +79,7 @@
 		justify-content: center;
 		padding: var(--spacing-xl);
 		text-align: center;
+		height: 100%;
 	}
 
 	.empty-icon {