feat: add foundational Tier 1 components and store methods

Add generic BottomSheet, Toast, and ConfirmDialog components.
Add startTask/stopTask optimistic methods to tasks store.
Add --color-active-bg/text theme tokens for all three themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

opal-web/src/app.css

@@ -68,6 +68,8 @@
 	--color-overdue-text: #f85149;
 	--color-tag-bg: rgba(139, 148, 158, 0.1);
 	--color-tag-text: #8b949e;
+	--color-active-bg: rgba(57, 208, 186, 0.15);
+	--color-active-text: #39d0ba;
 
 	color-scheme: dark;
 }
@@ -118,6 +120,8 @@
 	--color-overdue-text: #be123c;
 	--color-tag-bg: #f5f5f4;
 	--color-tag-text: #78716c;
+	--color-active-bg: rgba(99, 102, 241, 0.12);
+	--color-active-text: #4f46e5;
 
 	color-scheme: light;
 }
@@ -168,6 +172,8 @@
 	--color-overdue-text: #ef4444;
 	--color-tag-bg: rgba(148, 163, 184, 0.1);
 	--color-tag-text: #94a3b8;
+	--color-active-bg: rgba(139, 92, 246, 0.15);
+	--color-active-text: #8b5cf6;
 
 	color-scheme: dark;
 }

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

@@ -0,0 +1,248 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+
+	/** @type {boolean} */
+	export let open = false;
+
+	/** @type {() => void} */
+	export let onClose;
+
+	let dragOffset = 0;
+	let dragging = false;
+	let locked = false;
+
+	/** @type {number|null} */
+	let startY = null;
+	/** @type {number|null} */
+	let startX = null;
+	/** @type {number|null} */
+	let lastY = null;
+	/** @type {number} */
+	let lastTime = 0;
+	/** @type {number} */
+	let velocity = 0;
+
+	const DISMISS_THRESHOLD = 150;
+	const VELOCITY_THRESHOLD = 0.5;
+
+	/** @type {HTMLDivElement|null} */
+	let sheetEl = null;
+
+	// Body scroll lock
+	$: if (open) {
+		document.documentElement.style.overflow = 'hidden';
+	} else {
+		document.documentElement.style.overflow = '';
+		dragOffset = 0;
+		dragging = false;
+		locked = false;
+	}
+
+	/**
+	 * @param {KeyboardEvent} e
+	 */
+	function handleKeydown(e) {
+		if (!open) return;
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose();
+		}
+		// Focus trap
+		if (e.key === 'Tab' && sheetEl) {
+			const focusable = sheetEl.querySelectorAll(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			);
+			if (focusable.length === 0) return;
+			const first = /** @type {HTMLElement} */ (focusable[0]);
+			const last = /** @type {HTMLElement} */ (focusable[focusable.length - 1]);
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('keydown', handleKeydown);
+	});
+
+	onDestroy(() => {
+		document.removeEventListener('keydown', handleKeydown);
+		document.documentElement.style.overflow = '';
+	});
+
+	/**
+	 * @param {TouchEvent} e
+	 */
+	function handleDragStart(e) {
+		const touch = e.touches[0];
+		startY = touch.clientY;
+		startX = touch.clientX;
+		lastY = touch.clientY;
+		lastTime = Date.now();
+		locked = false;
+		dragging = false;
+		velocity = 0;
+	}
+
+	/**
+	 * @param {TouchEvent} e
+	 */
+	function handleDragMove(e) {
+		if (startY === null || startX === null) return;
+		const touch = e.touches[0];
+		const deltaY = touch.clientY - startY;
+		const deltaX = touch.clientX - startX;
+
+		if (!locked && !dragging) {
+			if (Math.abs(deltaY) > 10 && Math.abs(deltaY) > Math.abs(deltaX) * 2) {
+				dragging = true;
+				locked = true;
+			} else if (Math.abs(deltaX) > 10) {
+				startY = null;
+				startX = null;
+				return;
+			}
+		}
+
+		if (dragging) {
+			if (e.cancelable) e.preventDefault();
+			// Only allow dragging down (positive)
+			dragOffset = Math.max(0, deltaY);
+
+			// Track velocity
+			const now = Date.now();
+			const dt = now - lastTime;
+			if (dt > 0 && lastY !== null) {
+				velocity = (touch.clientY - lastY) / dt;
+			}
+			lastY = touch.clientY;
+			lastTime = now;
+		}
+	}
+
+	function handleDragEnd() {
+		if (!dragging) {
+			startY = null;
+			startX = null;
+			return;
+		}
+
+		if (dragOffset > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
+			onClose();
+		}
+		dragOffset = 0;
+		dragging = false;
+		startY = null;
+		startX = null;
+	}
+
+	function handleScrimClick() {
+		onClose();
+	}
+
+	$: transitioning = !dragging && dragOffset === 0;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div class="sheet-scrim" class:open on:click={handleScrimClick}>
+	<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+	<div
+		bind:this={sheetEl}
+		class="sheet"
+		class:open
+		class:transitioning
+		style:transform={open
+			? `translateY(${dragOffset}px)`
+			: undefined}
+		on:click|stopPropagation
+		role="dialog"
+		aria-modal="true"
+	>
+		<div
+			class="sheet-handle"
+			on:touchstart={handleDragStart}
+			on:touchmove={handleDragMove}
+			on:touchend={handleDragEnd}
+		>
+			<div class="handle-bar"></div>
+		</div>
+		<div class="sheet-content">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<style>
+	.sheet-scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		background: rgba(0, 0, 0, 0.5);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.3s ease;
+	}
+
+	.sheet-scrim.open {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.sheet {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		max-height: 85dvh;
+		background: var(--bg-primary);
+		border-radius: 1rem 1rem 0 0;
+		box-shadow: var(--shadow-lg);
+		transform: translateY(100%);
+		display: flex;
+		flex-direction: column;
+		z-index: 51;
+	}
+
+	.sheet.transitioning {
+		transition: transform 0.3s ease-out;
+	}
+
+	.sheet.open {
+		transform: translateY(0);
+	}
+
+	.sheet-handle {
+		display: flex;
+		justify-content: center;
+		padding: var(--spacing-sm) 0;
+		cursor: grab;
+		touch-action: none;
+		flex-shrink: 0;
+	}
+
+	.handle-bar {
+		width: 2.5rem;
+		height: 0.25rem;
+		background: var(--text-tertiary);
+		border-radius: 9999px;
+	}
+
+	.sheet-content {
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0 var(--spacing-md) var(--spacing-lg);
+	}
+
+	@media (min-width: 769px) {
+		.sheet {
+			max-width: 480px;
+			left: 50%;
+			margin-left: -240px;
+		}
+	}
+</style>

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

@@ -0,0 +1,178 @@
+<script>
+	/** @type {string} */
+	export let title;
+
+	/** @type {string} */
+	export let message;
+
+	/** @type {string|undefined} */
+	export let detail = undefined;
+
+	/** @type {string} */
+	export let confirmLabel;
+
+	/** @type {'danger'|'primary'} */
+	export let confirmVariant = 'danger';
+
+	/** @type {() => void} */
+	export let onConfirm;
+
+	/** @type {() => void} */
+	export let onCancel;
+
+	/** @type {HTMLDialogElement|null} */
+	let dialogEl = null;
+
+	/** @type {HTMLButtonElement|null} */
+	let cancelBtn = null;
+
+	export function open() {
+		dialogEl?.showModal();
+		requestAnimationFrame(() => cancelBtn?.focus());
+	}
+
+	function handleConfirm() {
+		dialogEl?.close();
+		onConfirm();
+	}
+
+	function handleCancel() {
+		dialogEl?.close();
+		onCancel();
+	}
+
+	/**
+	 * @param {MouseEvent} e
+	 */
+	function handleBackdropClick(e) {
+		if (e.target === dialogEl) {
+			handleCancel();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialogEl}
+	class="confirm-dialog"
+	on:click={handleBackdropClick}
+	on:cancel|preventDefault={handleCancel}
+>
+	<div class="dialog-content">
+		<h3 class="dialog-title">{title}</h3>
+
+		<p class="dialog-message">"{message}"</p>
+
+		{#if detail}
+			<p class="dialog-detail">{detail}</p>
+		{/if}
+
+		<div class="dialog-actions">
+			<button
+				bind:this={cancelBtn}
+				class="btn btn-ghost"
+				on:click={handleCancel}
+				type="button"
+			>
+				Cancel
+			</button>
+			<button
+				class="btn btn-{confirmVariant}"
+				on:click={handleConfirm}
+				type="button"
+			>
+				{confirmLabel}
+			</button>
+		</div>
+	</div>
+</dialog>
+
+<style>
+	.confirm-dialog {
+		border: none;
+		border-radius: var(--border-radius);
+		background: transparent;
+		padding: 0;
+		margin: auto;
+		max-width: min(360px, calc(100vw - 2rem));
+		width: 100%;
+	}
+
+	.confirm-dialog::backdrop {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.dialog-content {
+		background-color: var(--bg-primary);
+		border: 1px solid var(--border-color);
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-lg);
+		padding: var(--spacing-lg);
+	}
+
+	.dialog-title {
+		font-size: var(--font-size-lg);
+		font-weight: 600;
+		color: var(--text-primary);
+		margin: 0 0 var(--spacing-md) 0;
+	}
+
+	.dialog-message {
+		font-size: var(--font-size-base);
+		color: var(--text-primary);
+		margin: 0 0 var(--spacing-xs) 0;
+		word-break: break-word;
+	}
+
+	.dialog-detail {
+		font-size: var(--font-size-sm);
+		color: var(--text-secondary);
+		margin: 0 0 var(--spacing-lg) 0;
+	}
+
+	.dialog-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+	}
+
+	.btn {
+		padding: var(--spacing-sm) var(--spacing-md);
+		border: none;
+		border-radius: var(--border-radius);
+		font-size: var(--font-size-sm);
+		font-family: inherit;
+		font-weight: 500;
+		cursor: pointer;
+		min-height: 40px;
+		min-width: unset;
+	}
+
+	.btn-ghost {
+		background: none;
+		color: var(--text-secondary);
+	}
+
+	.btn-ghost:hover {
+		background-color: var(--bg-secondary);
+		color: var(--text-primary);
+	}
+
+	.btn-danger {
+		background-color: var(--color-danger);
+		color: white;
+	}
+
+	.btn-danger:hover {
+		opacity: 0.9;
+	}
+
+	.btn-primary {
+		background-color: var(--color-primary);
+		color: white;
+	}
+
+	.btn-primary:hover {
+		opacity: 0.9;
+	}
+</style>

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

@@ -0,0 +1,105 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	/** @type {string} */
+	export let message;
+
+	/** @type {{ label: string, handler: () => void }|undefined} */
+	export let action = undefined;
+
+	/** @type {number} */
+	export let duration = 5000;
+
+	/** @type {() => void} */
+	export let onDismiss;
+
+	/** @type {ReturnType<typeof setTimeout>|null} */
+	let timer = null;
+
+	function startTimer() {
+		if (duration > 0) {
+			timer = setTimeout(() => {
+				onDismiss();
+			}, duration);
+		}
+	}
+
+	function clearTimer() {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	}
+
+	function handleAction() {
+		clearTimer();
+		if (action) action.handler();
+		onDismiss();
+	}
+
+	onMount(() => {
+		startTimer();
+	});
+
+	onDestroy(() => {
+		clearTimer();
+	});
+</script>
+
+<div class="toast" transition:fly={{ y: 20, duration: 200 }}>
+	<span class="toast-message">{message}</span>
+	{#if action}
+		<button class="toast-action" on:click={handleAction} type="button">
+			{action.label}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.toast {
+		position: fixed;
+		bottom: calc(3.5rem + var(--spacing-md));
+		left: var(--spacing-md);
+		right: var(--spacing-md);
+		max-width: var(--content-max-width);
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--spacing-md);
+		padding: var(--spacing-sm) var(--spacing-md);
+		background-color: var(--bg-tertiary);
+		border: 1px solid var(--border-color);
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-md);
+		z-index: 40;
+	}
+
+	.toast-message {
+		font-size: var(--font-size-sm);
+		color: var(--text-primary);
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.toast-action {
+		font-size: var(--font-size-sm);
+		font-weight: 600;
+		color: var(--color-primary);
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: var(--spacing-xs) var(--spacing-sm);
+		border-radius: 0.25rem;
+		white-space: nowrap;
+		min-width: unset;
+		min-height: 36px;
+	}
+
+	.toast-action:hover {
+		background-color: var(--bg-secondary);
+	}
+</style>

opal-web/src/lib/stores/tasks.js

@@ -140,6 +140,55 @@ function createTasksStore() {
 			}
 		},
 
+		/**
+		 * Start task timer (optimistic)
+		 * @param {string} uuid
+		 */
+		async startTask(uuid) {
+			const now = Math.floor(Date.now() / 1000);
+			update(tasks => tasks.map(t =>
+				t.uuid === uuid ? { ...t, start: now } : t
+			));
+			try {
+				const updated = await tasksAPI.start(uuid);
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? updated : t
+				));
+			} catch (error) {
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? { ...t, start: null } : t
+				));
+				throw error;
+			}
+		},
+
+		/**
+		 * Stop task timer (optimistic)
+		 * @param {string} uuid
+		 */
+		async stopTask(uuid) {
+			/** @type {number|null} */
+			let prevStart = null;
+			update(tasks => tasks.map(t => {
+				if (t.uuid === uuid) {
+					prevStart = t.start;
+					return { ...t, start: null };
+				}
+				return t;
+			}));
+			try {
+				const updated = await tasksAPI.stop(uuid);
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? updated : t
+				));
+			} catch (error) {
+				update(tasks => tasks.map(t =>
+					t.uuid === uuid ? { ...t, start: prevStart } : t
+				));
+				throw error;
+			}
+		},
+
 		/**
 		 * Complete task
 		 * @param {string} uuid