From e8c6dd393053f0041f4a996b18b411b872e29c3a Mon Sep 17 00:00:00 2001
From: Joakim <joakim@jnss.me>
Date: Tue, 6 Jan 2026 16:16:44 +0100
Subject: [PATCH] feat(frontend): implement task CRUD functionality

- Create TaskItem component with checkbox, meta info, tags
- Create TaskList component with loading/empty states
- Update home page with task list and filter toggle (pending/completed)
- Add new task form with description, project, priority, due date, tags
- Add task detail placeholder page
- Implement task toggle (complete/uncomplete)
- Add filter bar to switch between pending and completed tasks
- Support for optimistic UI updates and offline queueing
- Visual indicators for priority, due dates, overdue tasks
- Mobile-optimized list items with proper touch targets
---
 opal-web/src/lib/components/TaskItem.svelte   | 163 ++++++++++++++++
 opal-web/src/lib/components/TaskList.svelte   |  84 +++++++++
 opal-web/src/routes/+page.svelte              | 178 +++++++++++++++++-
 opal-web/src/routes/tasks/[uuid]/+page.svelte |  26 +++
 opal-web/src/routes/tasks/new/+page.svelte    | 172 +++++++++++++++++
 5 files changed, 621 insertions(+), 2 deletions(-)
 create mode 100644 opal-web/src/lib/components/TaskItem.svelte
 create mode 100644 opal-web/src/lib/components/TaskList.svelte
 create mode 100644 opal-web/src/routes/tasks/[uuid]/+page.svelte
 create mode 100644 opal-web/src/routes/tasks/new/+page.svelte

diff --git a/opal-web/src/lib/components/TaskItem.svelte b/opal-web/src/lib/components/TaskItem.svelte
new file mode 100644
index 0000000..5a0fa9f
--- /dev/null
+++ b/opal-web/src/lib/components/TaskItem.svelte
@@ -0,0 +1,163 @@
+<script>
+	import { formatRelative, isOverdue } from '$lib/utils/dates.js';
+	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];
+</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>
+		</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}
+				</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>
+</div>
+
+<style>
+	.task-item {
+		display: flex;
+		gap: var(--spacing-md);
+		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;
+	}
+	
+	.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 {
+		background-color: #fee2e2;
+		color: #991b1b;
+	}
+	
+	.due {
+		background-color: #dbeafe;
+		color: #1e40af;
+	}
+	
+	.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;
+		background-color: var(--bg-tertiary);
+		color: var(--text-secondary);
+		border-radius: 0.25rem;
+	}
+</style>
diff --git a/opal-web/src/lib/components/TaskList.svelte b/opal-web/src/lib/components/TaskList.svelte
new file mode 100644
index 0000000..3f3f967
--- /dev/null
+++ b/opal-web/src/lib/components/TaskList.svelte
@@ -0,0 +1,84 @@
+<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 loading = false;
+	export let emptyMessage = 'No tasks found';
+</script>
+
+<div class="task-list">
+	{#if loading}
+		<div class="loading-container">
+			<div class="loading"></div>
+			<p class="text-secondary">Loading tasks...</p>
+		</div>
+	{:else if tasks.length === 0}
+		<div class="empty-state">
+			<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+			</svg>
+			<p class="empty-message">{emptyMessage}</p>
+		</div>
+	{:else}
+		{#each tasks as task (task.uuid)}
+			<TaskItem 
+				{task}
+				onToggle={onToggle}
+				onClick={onTaskClick}
+			/>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.task-list {
+		background-color: var(--bg-primary);
+		border-radius: var(--border-radius);
+		overflow: hidden;
+		box-shadow: var(--shadow-sm);
+	}
+	
+	.loading-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing-xl);
+		gap: var(--spacing-md);
+	}
+	
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing-xl);
+		text-align: center;
+	}
+	
+	.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);
+	}
+</style>
diff --git a/opal-web/src/routes/+page.svelte b/opal-web/src/routes/+page.svelte
index cc88df0..c08de5a 100644
--- a/opal-web/src/routes/+page.svelte
+++ b/opal-web/src/routes/+page.svelte
@@ -1,2 +1,176 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { authStore } from '$lib/stores/auth.js';
+	import { tasksStore, pendingTasks, completedTasks } from '$lib/stores/tasks.js';
+	import TaskList from '$lib/components/TaskList.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	
+	let loading = true;
+	let showCompleted = false;
+	
+	$: displayTasks = showCompleted ? $completedTasks : $pendingTasks;
+	
+	onMount(async () => {
+		// Redirect to login if not authenticated
+		if (!$authStore.isAuthenticated) {
+			goto('/auth/login');
+			return;
+		}
+		
+		// Load tasks
+		try {
+			await tasksStore.load({ status: showCompleted ? 'C' : 'P' });
+		} catch (error) {
+			console.error('Failed to load tasks:', error);
+		} finally {
+			loading = false;
+		}
+	});
+	
+	/**
+	 * Toggle task completion
+	 * @param {string} uuid
+	 */
+	async function handleToggle(uuid) {
+		try {
+			await tasksStore.complete(uuid);
+			// Reload tasks
+			await tasksStore.load({ status: showCompleted ? 'C' : 'P' });
+		} catch (error) {
+			console.error('Failed to toggle task:', error);
+		}
+	}
+	
+	/**
+	 * Navigate to task detail
+	 * @param {string} uuid
+	 */
+	function handleTaskClick(uuid) {
+		goto(`/tasks/${uuid}`);
+	}
+	
+	/**
+	 * Toggle between pending and completed view
+	 */
+	async function toggleView() {
+		showCompleted = !showCompleted;
+		loading = true;
+		try {
+			await tasksStore.load({ status: showCompleted ? 'C' : 'P' });
+		} catch (error) {
+			console.error('Failed to load tasks:', error);
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="page">
+	<div class="container">
+		<div class="header">
+			<h1>Tasks</h1>
+			<a href="/tasks/new" class="new-btn">
+				<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+				</svg>
+				New
+			</a>
+		</div>
+		
+		<div class="filter-bar">
+			<button 
+				class="filter-btn"
+				class:active={!showCompleted}
+				on:click={() => !showCompleted || toggleView()}
+			>
+				Pending ({$pendingTasks.length})
+			</button>
+			<button 
+				class="filter-btn"
+				class:active={showCompleted}
+				on:click={() => showCompleted || toggleView()}
+			>
+				Completed ({$completedTasks.length})
+			</button>
+		</div>
+		
+		<TaskList 
+			tasks={displayTasks}
+			{loading}
+			onToggle={handleToggle}
+			onTaskClick={handleTaskClick}
+			emptyMessage={showCompleted ? 'No completed tasks' : 'No pending tasks. Add one to get started!'}
+		/>
+	</div>
+</div>
+
+<style>
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--spacing-lg);
+	}
+	
+	.header h1 {
+		margin-bottom: 0;
+	}
+	
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+	
+	.new-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.25rem 0.75rem;
+		background-color: var(--color-primary);
+		color: white;
+		border-radius: var(--border-radius);
+		font-size: var(--font-size-sm);
+		font-weight: 500;
+		text-decoration: none;
+		transition: background-color 0.2s;
+	}
+	
+	.new-btn:hover {
+		background-color: var(--color-primary-dark);
+		text-decoration: none;
+	}
+	
+	.filter-bar {
+		display: flex;
+		gap: var(--spacing-sm);
+		margin-bottom: var(--spacing-md);
+		background-color: var(--bg-primary);
+		padding: var(--spacing-sm);
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-sm);
+	}
+	
+	.filter-btn {
+		flex: 1;
+		padding: 0.5rem 1rem;
+		background-color: transparent;
+		border: none;
+		border-radius: var(--border-radius);
+		font-size: var(--font-size-sm);
+		font-weight: 500;
+		color: var(--text-secondary);
+		cursor: pointer;
+		transition: all 0.2s;
+		font-family: inherit;
+	}
+	
+	.filter-btn.active {
+		background-color: var(--color-primary);
+		color: white;
+	}
+	
+	.filter-btn:hover:not(.active) {
+		background-color: var(--bg-tertiary);
+	}
+</style>
diff --git a/opal-web/src/routes/tasks/[uuid]/+page.svelte b/opal-web/src/routes/tasks/[uuid]/+page.svelte
new file mode 100644
index 0000000..a920d70
--- /dev/null
+++ b/opal-web/src/routes/tasks/[uuid]/+page.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	
+	$: uuid = $page.params.uuid;
+</script>
+
+<div class="page">
+	<div class="container">
+		<h1>Task Detail</h1>
+		<p class="text-secondary">UUID: {uuid}</p>
+		<p class="text-secondary mb-lg">Task detail view coming in next iteration...</p>
+		<a href="/" class="btn-link">← Back to tasks</a>
+	</div>
+</div>
+
+<style>
+	.btn-link {
+		display: inline-block;
+		padding: 0.75rem 1.5rem;
+		background-color: var(--color-primary);
+		color: white;
+		border-radius: var(--border-radius);
+		text-decoration: none;
+	}
+</style>
diff --git a/opal-web/src/routes/tasks/new/+page.svelte b/opal-web/src/routes/tasks/new/+page.svelte
new file mode 100644
index 0000000..a8c37a6
--- /dev/null
+++ b/opal-web/src/routes/tasks/new/+page.svelte
@@ -0,0 +1,172 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { tasksStore } from '$lib/stores/tasks.js';
+	import { generateUUID } from '$lib/utils/uuid.js';
+	import { toUnix } from '$lib/utils/dates.js';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Input from '$lib/components/ui/Input.svelte';
+	import Select from '$lib/components/ui/Select.svelte';
+	
+	let description = '';
+	let project = '';
+	let priority = '1';
+	let dueDate = '';
+	let tags = '';
+	let saving = false;
+	let error = '';
+	
+	const priorityOptions = [
+		{ value: '0', label: 'Low' },
+		{ value: '1', label: 'Default' },
+		{ value: '2', label: 'Medium' },
+		{ value: '3', label: 'High' }
+	];
+	
+	async function handleSubmit() {
+		if (!description.trim()) {
+			error = 'Description is required';
+			return;
+		}
+		
+		saving = true;
+		error = '';
+		
+		try {
+			/** @type {Partial<import('$lib/api/types.js').Task>} */
+			const task = {
+				uuid: generateUUID(),
+				description: description.trim(),
+				status: /** @type {'P'} */ ('P'),
+				priority: /** @type {0|1|2|3} */ (parseInt(priority)),
+				created: toUnix(new Date()),
+				modified: toUnix(new Date()),
+				tags: tags.trim() ? tags.split(',').map(t => t.trim()).filter(t => t) : [],
+				project: project.trim() || null,
+				due: dueDate ? toUnix(new Date(dueDate)) : null
+			};
+			
+			await tasksStore.add(task);
+			goto('/');
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to create task';
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<div class="page">
+	<div class="container">
+		<div class="header">
+			<a href="/" class="back-btn">
+				<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+				</svg>
+				Back
+			</a>
+			<h1>New Task</h1>
+		</div>
+		
+		<form on:submit|preventDefault={handleSubmit} class="task-form">
+			{#if error}
+				<div class="error-banner">{error}</div>
+			{/if}
+			
+			<Input
+				label="Description"
+				placeholder="What needs to be done?"
+				bind:value={description}
+				required
+				id="description"
+			/>
+			
+			<Input
+				label="Project"
+				placeholder="Optional"
+				bind:value={project}
+				id="project"
+			/>
+			
+			<Select
+				label="Priority"
+				options={priorityOptions}
+				bind:value={priority}
+				id="priority"
+			/>
+			
+			<Input
+				label="Due Date"
+				type="date"
+				bind:value={dueDate}
+				id="due"
+			/>
+			
+			<Input
+				label="Tags"
+				placeholder="Comma separated (e.g., work, urgent)"
+				bind:value={tags}
+				id="tags"
+			/>
+			
+			<div class="actions">
+				<Button type="button" variant="secondary" on:click={() => goto('/')}>
+					Cancel
+				</Button>
+				<Button type="submit" loading={saving}>
+					Create Task
+				</Button>
+			</div>
+		</form>
+	</div>
+</div>
+
+<style>
+	.header {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-md);
+		margin-bottom: var(--spacing-lg);
+	}
+	
+	.back-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--color-primary);
+		text-decoration: none;
+		font-size: var(--font-size-sm);
+	}
+	
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+	
+	.task-form {
+		background-color: var(--bg-primary);
+		border-radius: var(--border-radius);
+		padding: var(--spacing-lg);
+		box-shadow: var(--shadow-sm);
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-md);
+	}
+	
+	.error-banner {
+		background-color: #fee2e2;
+		color: var(--color-danger);
+		padding: var(--spacing-md);
+		border-radius: var(--border-radius);
+		font-size: var(--font-size-sm);
+	}
+	
+	.actions {
+		display: flex;
+		gap: var(--spacing-md);
+		margin-top: var(--spacing-md);
+	}
+	
+	.actions > :global(button) {
+		flex: 1;
+	}
+</style>