From d0c1f41c133a3def56889ee4b4e4202e70a4d809 Mon Sep 17 00:00:00 2001
From: Andreas Schneider <aksdb@gmx.de>
Date: Thu, 30 Apr 2026 19:06:55 +0200
Subject: [PATCH] refactor: extract DayDetail component; render today inside
 week view

- New DayDetail.svelte: self-contained day panel with full capability
  gating (canStartStop, canAddInterval, canEditEntries, canMarkKind,
  canCloseDay, canReopenDay)
- Closed-day state: banner + read-only entry list with 'Reopen day to
  edit' hint; mark-kind buttons still available
- Close Day button disabled (with tooltip) when running entry exists
- Timer only ticks when dayKey === todayKey() and entry is running;
  properly cleaned up on dayKey change and component destroy
- oninvalidate() callback: called after every mutation so parent
  (week view) can refetch and update the chip strip
- /today route: refactored to thin wrapper using DayDetail
- Week page: renders DayDetail below summary when today is in the
  displayed week; oninvalidate triggers full week reload
---
 web/src/lib/components/DayDetail.svelte | 488 ++++++++++++++++++++++++
 web/src/routes/today/+page.svelte       | 401 +------------------
 web/src/routes/week/+page.svelte        |  20 +
 3 files changed, 517 insertions(+), 392 deletions(-)
 create mode 100644 web/src/lib/components/DayDetail.svelte

diff --git a/web/src/lib/components/DayDetail.svelte b/web/src/lib/components/DayDetail.svelte
new file mode 100644
index 0000000..5459b42
--- /dev/null
+++ b/web/src/lib/components/DayDetail.svelte
@@ -0,0 +1,488 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { entries, days, type Entry, type ClosedDay, ApiError } from '$lib/api/client';
+	import {
+		todayKey, formatTime, formatDuration, formatDurationShort,
+		parseTimeInput, toTimeInput, type DayCapabilities
+	} from '$lib/utils';
+
+	interface Props {
+		dayKey: string;
+		capabilities: DayCapabilities;
+		/** Called after any mutation that changes day or entry state. */
+		oninvalidate?: () => void;
+	}
+
+	let { dayKey, capabilities, oninvalidate }: Props = $props();
+
+	let entryList = $state<Entry[]>([]);
+	let closedDay = $state<ClosedDay | null>(null);
+	let running = $state<Entry | null>(null);
+	let elapsed = $state(0);
+	let note = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	// Add-interval form
+	let showAddForm = $state(false);
+	let addStart = $state('');
+	let addEnd = $state('');
+	let addNote = $state('');
+	let addError = $state('');
+
+	// Inline edit state
+	let editingId = $state<string | null>(null);
+	let editStart = $state('');
+	let editEnd = $state('');
+	let editNote = $state('');
+	let editError = $state('');
+
+	let timer: ReturnType<typeof setInterval> | null = null;
+
+	async function load() {
+		loading = true;
+		error = '';
+		try {
+			const [es, ds] = await Promise.all([
+				entries.list(dayKey, dayKey),
+				days.list(dayKey, dayKey)
+			]);
+			entryList = es ?? [];
+			closedDay = (ds ?? []).find((d) => d.day_key === dayKey) ?? null;
+			running = entryList.find((e) => e.end_time === null) ?? null;
+			startTimer();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function startTimer() {
+		if (timer) clearInterval(timer);
+		// Only tick if this is today and a running entry exists.
+		if (running && dayKey === todayKey()) {
+			timer = setInterval(() => {
+				elapsed = Date.now() - running!.start_time;
+			}, 500);
+			elapsed = Date.now() - running.start_time;
+		} else {
+			elapsed = 0;
+		}
+	}
+
+	// Reload when dayKey changes.
+	$effect(() => {
+		dayKey; // dependency
+		editingId = null;
+		showAddForm = false;
+		load();
+	});
+
+	onDestroy(() => { if (timer) clearInterval(timer); });
+
+	async function handleStart() {
+		error = '';
+		try {
+			const e = await entries.start(note);
+			running = e;
+			entryList = [...entryList, e];
+			note = '';
+			startTimer();
+			oninvalidate?.();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	async function handleStop() {
+		if (!running) return;
+		error = '';
+		try {
+			const e = await entries.stop(running.id);
+			entryList = entryList.map((x) => (x.id === e.id ? e : x));
+			running = null;
+			if (timer) clearInterval(timer);
+			elapsed = 0;
+			oninvalidate?.();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	async function handleCloseDay() {
+		error = '';
+		try {
+			const cd = await days.close(dayKey);
+			closedDay = cd;
+			oninvalidate?.();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	async function handleMark(kind: 'holiday' | 'vacation' | 'sick') {
+		error = '';
+		try {
+			const cd = await days.mark(dayKey, kind);
+			closedDay = cd;
+			oninvalidate?.();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	async function handleReopenDay() {
+		error = '';
+		try {
+			await days.reopen(dayKey);
+			closedDay = null;
+			oninvalidate?.();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	async function handleDeleteEntry(id: string) {
+		error = '';
+		try {
+			await entries.delete(id);
+			entryList = entryList.filter((e) => e.id !== id);
+			oninvalidate?.();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	// ── Add interval ────────────────────────────────────────────────────────────
+
+	function openAddForm() {
+		addStart = '';
+		addEnd = '';
+		addNote = '';
+		addError = '';
+		showAddForm = true;
+	}
+
+	function closeAddForm() {
+		showAddForm = false;
+		addError = '';
+	}
+
+	async function handleAddInterval() {
+		addError = '';
+		const startMs = parseTimeInput(dayKey, addStart);
+		const endMs = parseTimeInput(dayKey, addEnd);
+		if (startMs === null) { addError = 'Invalid start time'; return; }
+		if (endMs === null) { addError = 'Invalid end time'; return; }
+		if (endMs <= startMs) { addError = 'End must be after start'; return; }
+		try {
+			const e = await entries.createInterval(startMs, endMs, addNote);
+			entryList = [...entryList, e].sort((a, b) => a.start_time - b.start_time);
+			closeAddForm();
+			oninvalidate?.();
+		} catch (e) {
+			addError = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	// ── Inline edit ─────────────────────────────────────────────────────────────
+
+	function startEdit(entry: Entry) {
+		editingId = entry.id;
+		editStart = toTimeInput(entry.start_time);
+		editEnd = entry.end_time ? toTimeInput(entry.end_time) : '';
+		editNote = entry.note;
+		editError = '';
+	}
+
+	function cancelEdit() {
+		editingId = null;
+		editError = '';
+	}
+
+	async function saveEdit(entry: Entry) {
+		editError = '';
+		const startMs = parseTimeInput(dayKey, editStart);
+		if (startMs === null) { editError = 'Invalid start time'; return; }
+
+		let endMs: number | undefined;
+		if (!entry.end_time && editEnd === '') {
+			// still running, no end — fine
+		} else {
+			const parsed = parseTimeInput(dayKey, editEnd);
+			if (parsed === null) { editError = 'Invalid end time'; return; }
+			if (parsed <= startMs) { editError = 'End must be after start'; return; }
+			endMs = parsed;
+		}
+
+		try {
+			const updated = await entries.update(entry.id, {
+				start_time: startMs,
+				...(endMs !== undefined ? { end_time: endMs } : {}),
+				note: editNote
+			});
+			entryList = entryList
+				.map((e) => (e.id === updated.id ? updated : e))
+				.sort((a, b) => a.start_time - b.start_time);
+			if (running?.id === updated.id) running = updated;
+			editingId = null;
+			oninvalidate?.();
+		} catch (e) {
+			editError = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	const totalWorkedMs = $derived(
+		entryList.reduce((sum, e) => {
+			if (e.end_time === null) return sum;
+			return sum + (e.end_time - e.start_time);
+		}, 0)
+	);
+
+	// Close day is disabled when today has a running entry (even if canCloseDay is true).
+	const closeDayDisabled = $derived(!!running && dayKey === todayKey());
+</script>
+
+<div class="day-detail">
+	{#if error}
+		<p class="error">{error}</p>
+	{/if}
+
+	{#if closedDay}
+		<!-- Closed-day banner -->
+		<div class="closed-banner" data-kind={closedDay.kind}>
+			<span>Day closed ({closedDay.kind}) — {formatDurationShort(closedDay.worked_ms)} worked</span>
+			{#if capabilities.canReopenDay}
+				<button onclick={handleReopenDay}>Reopen</button>
+			{/if}
+		</div>
+
+		<!-- Entries (read-only with hint) -->
+		{#if entryList.length > 0}
+			<section class="entries">
+				<div class="entries-header">
+					<h2>Entries</h2>
+					<span class="readonly-hint">Reopen day to edit</span>
+				</div>
+				{#each entryList as entry (entry.id)}
+					<div class="entry">
+						<span class="time">{formatTime(entry.start_time)}</span>
+						<span class="dash">→</span>
+						<span class="time">{entry.end_time ? formatTime(entry.end_time) : '…'}</span>
+						{#if entry.end_time}
+							<span class="dur">{formatDuration(entry.end_time - entry.start_time)}</span>
+						{/if}
+						{#if entry.note}
+							<span class="note">{entry.note}</span>
+						{/if}
+					</div>
+				{/each}
+				<div class="total">Total: {formatDurationShort(totalWorkedMs)}</div>
+			</section>
+		{/if}
+
+		<!-- Mark kind (always available even when closed) -->
+		{#if capabilities.canMarkKind}
+			<div class="quick-mark">
+				<span>Remark as:</span>
+				<button onclick={() => handleMark('holiday')}>Holiday</button>
+				<button onclick={() => handleMark('vacation')}>Vacation</button>
+				<button onclick={() => handleMark('sick')}>Sick</button>
+			</div>
+		{/if}
+
+	{:else}
+		<!-- Open day -->
+
+		{#if capabilities.canStartStop}
+			<!-- Timer (today only) -->
+			<div class="timer-section">
+				{#if running}
+					<div class="timer running">{formatDuration(elapsed)}</div>
+					<button class="btn stop" onclick={handleStop}>&#9632; Stop</button>
+				{:else}
+					<div class="timer idle">{formatDuration(totalWorkedMs)}</div>
+					<div class="start-row">
+						<input bind:value={note} placeholder="Note (optional)" onkeydown={(e) => e.key === 'Enter' && handleStart()} />
+						<button class="btn start" onclick={handleStart}>&#9654; Start</button>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if capabilities.canMarkKind}
+			<div class="quick-mark">
+				<span>Mark day as:</span>
+				<button onclick={() => handleMark('holiday')}>Holiday</button>
+				<button onclick={() => handleMark('vacation')}>Vacation</button>
+				<button onclick={() => handleMark('sick')}>Sick</button>
+			</div>
+		{/if}
+
+		{#if capabilities.canCloseDay && entryList.length > 0 && !running}
+			<button
+				class="btn close-day"
+				onclick={handleCloseDay}
+				disabled={closeDayDisabled}
+				title={closeDayDisabled ? 'Stop timer first' : undefined}
+			>Close day</button>
+		{/if}
+
+		<!-- Entry list -->
+		{#if !capabilities.canEditEntries && entryList.length === 0}
+			<!-- Future day with no entries — show nothing -->
+		{:else}
+			<section class="entries">
+				<div class="entries-header">
+					<h2>Entries</h2>
+					{#if capabilities.canAddInterval}
+						<button class="btn-add" onclick={openAddForm} title="Add interval">+ Add interval</button>
+					{/if}
+				</div>
+
+				{#if showAddForm && capabilities.canAddInterval}
+					<div class="interval-form">
+						<h3>Add interval</h3>
+						{#if addError}<p class="form-error">{addError}</p>{/if}
+						<div class="form-row">
+							<label>
+								Start
+								<input type="time" bind:value={addStart} required />
+							</label>
+							<label>
+								End
+								<input type="time" bind:value={addEnd} required />
+							</label>
+							<label class="note-label">
+								Note
+								<input type="text" bind:value={addNote} placeholder="Optional" />
+							</label>
+						</div>
+						<div class="form-actions">
+							<button class="btn save" onclick={handleAddInterval}>Save</button>
+							<button class="btn cancel" onclick={closeAddForm}>Cancel</button>
+						</div>
+					</div>
+				{/if}
+
+				{#if entryList.length === 0}
+					<p class="empty">No entries.</p>
+				{:else}
+					{#each entryList as entry (entry.id)}
+						{#if editingId === entry.id && capabilities.canEditEntries}
+							<div class="entry editing">
+								{#if editError}<p class="form-error">{editError}</p>{/if}
+								<div class="edit-row">
+									<input type="time" bind:value={editStart} class="time-input" />
+									<span class="dash">→</span>
+									<input type="time" bind:value={editEnd} class="time-input" placeholder="--:--" disabled={!entry.end_time && editEnd === ''} />
+									<input type="text" bind:value={editNote} class="note-input" placeholder="Note" />
+								</div>
+								<div class="edit-actions">
+									<button class="btn save sm" onclick={() => saveEdit(entry)}>Save</button>
+									<button class="btn cancel sm" onclick={cancelEdit}>Cancel</button>
+								</div>
+							</div>
+						{:else}
+							<div class="entry" class:running={entry.end_time === null}>
+								<span class="time">{formatTime(entry.start_time)}</span>
+								<span class="dash">→</span>
+								<span class="time">{entry.end_time ? formatTime(entry.end_time) : '…'}</span>
+								{#if entry.end_time}
+									<span class="dur">{formatDuration(entry.end_time - entry.start_time)}</span>
+								{/if}
+								{#if entry.note}
+									<span class="note">{entry.note}</span>
+								{/if}
+								{#if entry.auto_stopped}
+									<span class="badge auto">auto-stopped</span>
+								{/if}
+								{#if capabilities.canEditEntries}
+									<button class="edit-btn" onclick={() => startEdit(entry)} title="Edit">&#9998;</button>
+									<button class="del" onclick={() => handleDeleteEntry(entry.id)} title="Delete">&#10005;</button>
+								{/if}
+							</div>
+						{/if}
+					{/each}
+					<div class="total">Total: {formatDurationShort(totalWorkedMs)}</div>
+				{/if}
+			</section>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.day-detail { padding-top: 0.5rem; }
+	h2 { font-size: 1rem; margin: 0; color: #495057; }
+	h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: #343a40; }
+	.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; margin-bottom: 0.75rem; }
+	.closed-banner { display: flex; align-items: center; justify-content: space-between;
+		padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 500; }
+	.closed-banner[data-kind="work"] { background: #d4edda; color: #155724; }
+	.closed-banner[data-kind="holiday"] { background: #fff3cd; color: #856404; }
+	.closed-banner[data-kind="vacation"] { background: #cce5ff; color: #004085; }
+	.closed-banner[data-kind="sick"] { background: #f8d7da; color: #721c24; }
+	.closed-banner button { background: none; border: 1px solid currentColor; border-radius: 6px;
+		padding: 0.2rem 0.6rem; font-size: 0.875rem; cursor: pointer; color: inherit; }
+	.readonly-hint { font-size: 0.78rem; color: #6c757d; font-style: italic; }
+	.timer-section { text-align: center; padding: 1.25rem 0 0.75rem; }
+	.timer { font-size: 3rem; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; font-weight: 300; }
+	.timer.running { color: #2c7be5; }
+	.timer.idle { color: #6c757d; }
+	.start-row { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
+	.start-row input { padding: 0.5rem 0.75rem; border: 1px solid #ced4da; border-radius: 6px; font-size: 0.95rem; width: 200px; }
+	.btn { padding: 0.5rem 1.2rem; border: none; border-radius: 6px; font-size: 0.95rem; font-weight: 600; transition: opacity 0.15s; cursor: pointer; }
+	.btn:hover:not(:disabled) { opacity: 0.88; }
+	.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+	.btn.start { background: #2c7be5; color: #fff; margin-top: 1rem; }
+	.btn.stop { background: #e74c3c; color: #fff; margin-top: 1rem; }
+	.btn.close-day { background: #343a40; color: #fff; margin-top: 0.75rem; display: block; }
+	.btn.save { background: #2c7be5; color: #fff; }
+	.btn.cancel { background: #e9ecef; color: #343a40; }
+	.btn.sm { padding: 0.3rem 0.8rem; font-size: 0.875rem; }
+	.quick-mark { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }
+	.quick-mark span { color: #6c757d; font-size: 0.875rem; }
+	.quick-mark button { padding: 0.3rem 0.65rem; border: 1px solid #ced4da; background: #fff;
+		border-radius: 6px; font-size: 0.875rem; cursor: pointer; }
+	.quick-mark button:hover { background: #e9ecef; }
+	.entries { border-top: 1px solid #dee2e6; margin-top: 1.25rem; padding-top: 0.75rem; }
+	.entries-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
+	.btn-add { background: none; border: 1px solid #2c7be5; color: #2c7be5; border-radius: 6px;
+		padding: 0.25rem 0.75rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
+	.btn-add:hover { background: #eaf3ff; }
+	.interval-form { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px;
+		padding: 1rem; margin-bottom: 1rem; }
+	.form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
+	.form-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #495057; }
+	.form-row input[type="time"], .form-row input[type="text"] {
+		padding: 0.4rem 0.6rem; border: 1px solid #ced4da; border-radius: 6px; font-size: 0.9rem; }
+	.note-label { flex: 1; min-width: 160px; }
+	.form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
+	.form-error { color: #c0392b; font-size: 0.85rem; margin: 0 0 0.5rem; }
+	.entry { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;
+		border-bottom: 1px solid #f1f3f5; font-size: 0.9rem; }
+	.entry.running { background: #eaf3ff; border-radius: 6px; padding: 0.5rem; }
+	.entry.editing { display: block; background: #f8f9fa; border: 1px solid #dee2e6;
+		border-radius: 6px; padding: 0.6rem 0.75rem; margin-bottom: 0.25rem; }
+	.edit-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+	.time-input { width: 90px; padding: 0.3rem 0.4rem; border: 1px solid #ced4da;
+		border-radius: 5px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
+	.note-input { flex: 1; min-width: 120px; padding: 0.3rem 0.5rem;
+		border: 1px solid #ced4da; border-radius: 5px; font-size: 0.9rem; }
+	.edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
+	.time { font-variant-numeric: tabular-nums; color: #343a40; }
+	.dash { color: #adb5bd; }
+	.dur { font-variant-numeric: tabular-nums; color: #6c757d; margin-left: auto; }
+	.note { color: #495057; font-style: italic; }
+	.badge.auto { font-size: 0.75rem; background: #fff3cd; color: #856404;
+		padding: 0.1rem 0.4rem; border-radius: 4px; }
+	.edit-btn { margin-left: auto; background: none; border: none; color: #adb5bd;
+		font-size: 1rem; padding: 0 0.25rem; cursor: pointer; }
+	.edit-btn:hover { color: #2c7be5; }
+	.del { background: none; border: none; color: #adb5bd; font-size: 1rem;
+		padding: 0 0.25rem; cursor: pointer; }
+	.del:hover { color: #e74c3c; }
+	.total { text-align: right; padding: 0.5rem 0; color: #495057; font-weight: 600; }
+	.empty { color: #6c757d; font-style: italic; }
+</style>
diff --git a/web/src/routes/today/+page.svelte b/web/src/routes/today/+page.svelte
index 32c7d65..80e77e0 100644
--- a/web/src/routes/today/+page.svelte
+++ b/web/src/routes/today/+page.svelte
@@ -1,402 +1,19 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { entries, days, type Entry, type ClosedDay, ApiError } from '$lib/api/client';
-	import { todayKey, formatTime, formatDuration, formatDurationShort, parseTimeInput, toTimeInput } from '$lib/utils';
+	import DayDetail from '$lib/components/DayDetail.svelte';
+	import { todayKey, dayCapabilities } from '$lib/utils';
 
-	let today = todayKey();
-	let entryList: Entry[] = $state([]);
-	let closedDay: ClosedDay | null = $state(null);
-	let running: Entry | null = $state(null);
-	let elapsed = $state(0);
-	let note = $state('');
-	let error = $state('');
-	let loading = $state(false);
-
-	// Add-interval form
-	let showAddForm = $state(false);
-	let addStart = $state('');
-	let addEnd = $state('');
-	let addNote = $state('');
-	let addError = $state('');
-
-	// Inline edit state
-	let editingId = $state<string | null>(null);
-	let editStart = $state('');
-	let editEnd = $state('');
-	let editNote = $state('');
-	let editError = $state('');
-
-	let timer: ReturnType<typeof setInterval> | null = null;
-
-	async function load() {
-		loading = true;
-		error = '';
-		try {
-			const [es, ds] = await Promise.all([
-				entries.list(today, today),
-				days.list(today, today)
-			]);
-			entryList = es ?? [];
-			closedDay = (ds ?? []).find((d) => d.day_key === today) ?? null;
-			running = entryList.find((e) => e.end_time === null) ?? null;
-			startTimer();
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		} finally {
-			loading = false;
-		}
-	}
-
-	function startTimer() {
-		if (timer) clearInterval(timer);
-		if (running) {
-			timer = setInterval(() => {
-				elapsed = Date.now() - running!.start_time;
-			}, 500);
-			elapsed = Date.now() - running.start_time;
-		} else {
-			elapsed = 0;
-		}
-	}
-
-	async function handleStart() {
-		error = '';
-		try {
-			const e = await entries.start(note);
-			running = e;
-			entryList = [...entryList, e];
-			note = '';
-			startTimer();
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	async function handleStop() {
-		if (!running) return;
-		error = '';
-		try {
-			const e = await entries.stop(running.id);
-			entryList = entryList.map((x) => (x.id === e.id ? e : x));
-			running = null;
-			if (timer) clearInterval(timer);
-			elapsed = 0;
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	async function handleCloseDay() {
-		error = '';
-		try {
-			const cd = await days.close(today);
-			closedDay = cd;
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	async function handleMark(kind: 'holiday' | 'vacation' | 'sick') {
-		error = '';
-		try {
-			const cd = await days.mark(today, kind);
-			closedDay = cd;
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	async function handleReopenDay() {
-		error = '';
-		try {
-			await days.reopen(today);
-			closedDay = null;
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	async function handleDeleteEntry(id: string) {
-		error = '';
-		try {
-			await entries.delete(id);
-			entryList = entryList.filter((e) => e.id !== id);
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	// ── Add interval ────────────────────────────────────────────────────────────
-
-	function openAddForm() {
-		addStart = '';
-		addEnd = '';
-		addNote = '';
-		addError = '';
-		showAddForm = true;
-	}
-
-	function closeAddForm() {
-		showAddForm = false;
-		addError = '';
-	}
-
-	async function handleAddInterval() {
-		addError = '';
-		const startMs = parseTimeInput(today, addStart);
-		const endMs = parseTimeInput(today, addEnd);
-		if (startMs === null) { addError = 'Invalid start time'; return; }
-		if (endMs === null) { addError = 'Invalid end time'; return; }
-		if (endMs <= startMs) { addError = 'End must be after start'; return; }
-		try {
-			const e = await entries.createInterval(startMs, endMs, addNote);
-			entryList = [...entryList, e].sort((a, b) => a.start_time - b.start_time);
-			closeAddForm();
-		} catch (e) {
-			addError = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	// ── Inline edit ─────────────────────────────────────────────────────────────
-
-	function startEdit(entry: Entry) {
-		editingId = entry.id;
-		editStart = toTimeInput(entry.start_time);
-		editEnd = entry.end_time ? toTimeInput(entry.end_time) : '';
-		editNote = entry.note;
-		editError = '';
-	}
-
-	function cancelEdit() {
-		editingId = null;
-		editError = '';
-	}
-
-	async function saveEdit(entry: Entry) {
-		editError = '';
-		const startMs = parseTimeInput(today, editStart);
-		if (startMs === null) { editError = 'Invalid start time'; return; }
-
-		// end_time: only required if the entry is not running
-		let endMs: number | undefined;
-		if (!entry.end_time && editEnd === '') {
-			// still running, no end — that's fine, don't send end_time
-		} else {
-			const parsed = parseTimeInput(today, editEnd);
-			if (parsed === null) { editError = 'Invalid end time'; return; }
-			if (parsed <= startMs) { editError = 'End must be after start'; return; }
-			endMs = parsed;
-		}
-
-		try {
-			const updated = await entries.update(entry.id, {
-				start_time: startMs,
-				...(endMs !== undefined ? { end_time: endMs } : {}),
-				note: editNote
-			});
-			entryList = entryList
-				.map((e) => (e.id === updated.id ? updated : e))
-				.sort((a, b) => a.start_time - b.start_time);
-			if (running?.id === updated.id) running = updated;
-			editingId = null;
-		} catch (e) {
-			editError = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	const totalWorkedMs = $derived(
-		entryList.reduce((sum, e) => {
-			if (e.end_time === null) return sum;
-			return sum + (e.end_time - e.start_time);
-		}, 0)
-	);
-
-	onMount(load);
-	onDestroy(() => { if (timer) clearInterval(timer); });
+	const today = todayKey();
+	// Today is always open on mount; DayDetail will discover closed state from API.
+	// We pass a conservative open-today capabilities set; DayDetail adapts once loaded.
+	const capabilities = dayCapabilities(today, today, false);
 </script>
 
-<div class="today">
+<div class="today-page">
 	<h1>Today — {today}</h1>
-
-	{#if error}
-		<p class="error">{error}</p>
-	{/if}
-
-	{#if closedDay}
-		<div class="closed-banner" data-kind={closedDay.kind}>
-			<span>Day closed ({closedDay.kind}) — {formatDurationShort(closedDay.worked_ms)} worked</span>
-			<button onclick={handleReopenDay}>Reopen</button>
-		</div>
-	{:else}
-		<!-- Timer -->
-		<div class="timer-section">
-			{#if running}
-				<div class="timer running">{formatDuration(elapsed)}</div>
-				<button class="btn stop" onclick={handleStop}>■ Stop</button>
-			{:else}
-				<div class="timer idle">{formatDuration(totalWorkedMs)}</div>
-				<div class="start-row">
-					<input bind:value={note} placeholder="Note (optional)" onkeydown={(e) => e.key === 'Enter' && handleStart()} />
-					<button class="btn start" onclick={handleStart}>▶ Start</button>
-				</div>
-			{/if}
-		</div>
-
-		<!-- Quick mark -->
-		<div class="quick-mark">
-			<span>Mark day as:</span>
-			<button onclick={() => handleMark('holiday')}>🏖 Holiday</button>
-			<button onclick={() => handleMark('vacation')}>✈ Vacation</button>
-			<button onclick={() => handleMark('sick')}>🤒 Sick</button>
-		</div>
-
-		<!-- Close day -->
-		{#if entryList.length > 0 && !running}
-			<button class="btn close-day" onclick={handleCloseDay}>Close day</button>
-		{/if}
-	{/if}
-
-	<!-- Entry list -->
-	<section class="entries">
-		<div class="entries-header">
-			<h2>Entries</h2>
-			{#if !closedDay}
-				<button class="btn-add" onclick={openAddForm} title="Add interval">+ Add interval</button>
-			{/if}
-		</div>
-
-		<!-- Add-interval form -->
-		{#if showAddForm}
-			<div class="interval-form">
-				<h3>Add interval</h3>
-				{#if addError}<p class="form-error">{addError}</p>{/if}
-				<div class="form-row">
-					<label>
-						Start
-						<input type="time" bind:value={addStart} required />
-					</label>
-					<label>
-						End
-						<input type="time" bind:value={addEnd} required />
-					</label>
-					<label class="note-label">
-						Note
-						<input type="text" bind:value={addNote} placeholder="Optional" />
-					</label>
-				</div>
-				<div class="form-actions">
-					<button class="btn save" onclick={handleAddInterval}>Save</button>
-					<button class="btn cancel" onclick={closeAddForm}>Cancel</button>
-				</div>
-			</div>
-		{/if}
-
-		{#if entryList.length === 0}
-			<p class="empty">No entries yet today.</p>
-		{:else}
-			{#each entryList as entry (entry.id)}
-				{#if editingId === entry.id}
-					<!-- Inline edit row -->
-					<div class="entry editing">
-						{#if editError}<p class="form-error">{editError}</p>{/if}
-						<div class="edit-row">
-							<input type="time" bind:value={editStart} class="time-input" />
-							<span class="dash">→</span>
-							<input type="time" bind:value={editEnd} class="time-input" placeholder="--:--" disabled={!entry.end_time && editEnd === ''} />
-							<input type="text" bind:value={editNote} class="note-input" placeholder="Note" />
-						</div>
-						<div class="edit-actions">
-							<button class="btn save sm" onclick={() => saveEdit(entry)}>Save</button>
-							<button class="btn cancel sm" onclick={cancelEdit}>Cancel</button>
-						</div>
-					</div>
-				{:else}
-					<div class="entry" class:running={entry.end_time === null}>
-						<span class="time">{formatTime(entry.start_time)}</span>
-						<span class="dash">→</span>
-						<span class="time">{entry.end_time ? formatTime(entry.end_time) : '…'}</span>
-						{#if entry.end_time}
-							<span class="dur">{formatDuration(entry.end_time - entry.start_time)}</span>
-						{/if}
-						{#if entry.note}
-							<span class="note">{entry.note}</span>
-						{/if}
-						{#if entry.auto_stopped}
-							<span class="badge auto">auto-stopped</span>
-						{/if}
-						{#if !closedDay}
-							<button class="edit-btn" onclick={() => startEdit(entry)} title="Edit">✎</button>
-							<button class="del" onclick={() => handleDeleteEntry(entry.id)} title="Delete">✕</button>
-						{/if}
-					</div>
-				{/if}
-			{/each}
-			<div class="total">Total: {formatDurationShort(totalWorkedMs)}</div>
-		{/if}
-	</section>
+	<DayDetail dayKey={today} {capabilities} />
 </div>
 
 <style>
+	.today-page { padding: 0; }
 	h1 { margin: 0 0 1rem; font-size: 1.4rem; }
-	h2 { font-size: 1rem; margin: 0; color: #495057; }
-	h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: #343a40; }
-	.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; }
-	.closed-banner { display: flex; align-items: center; justify-content: space-between;
-		padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 500; }
-	.closed-banner[data-kind="work"] { background: #d4edda; color: #155724; }
-	.closed-banner[data-kind="holiday"] { background: #fff3cd; color: #856404; }
-	.closed-banner[data-kind="vacation"] { background: #cce5ff; color: #004085; }
-	.closed-banner[data-kind="sick"] { background: #f8d7da; color: #721c24; }
-	.timer-section { text-align: center; padding: 2rem 0 1rem; }
-	.timer { font-size: 3.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; font-weight: 300; }
-	.timer.running { color: #2c7be5; }
-	.timer.idle { color: #6c757d; }
-	.start-row { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
-	.start-row input { padding: 0.5rem 0.75rem; border: 1px solid #ced4da; border-radius: 6px; font-size: 0.95rem; width: 220px; }
-	.btn { padding: 0.55rem 1.4rem; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; transition: opacity 0.15s; cursor: pointer; }
-	.btn:hover { opacity: 0.88; }
-	.btn.start { background: #2c7be5; color: #fff; margin-top: 1rem; }
-	.btn.stop { background: #e74c3c; color: #fff; margin-top: 1rem; }
-	.btn.close-day { background: #343a40; color: #fff; margin-top: 1rem; display: block; }
-	.btn.save { background: #2c7be5; color: #fff; }
-	.btn.cancel { background: #e9ecef; color: #343a40; }
-	.btn.sm { padding: 0.3rem 0.8rem; font-size: 0.875rem; }
-	.quick-mark { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
-	.quick-mark span { color: #6c757d; font-size: 0.875rem; }
-	.quick-mark button { padding: 0.35rem 0.75rem; border: 1px solid #ced4da; background: #fff; border-radius: 6px; font-size: 0.875rem; cursor: pointer; }
-	.quick-mark button:hover { background: #e9ecef; }
-	.entries { border-top: 1px solid #dee2e6; margin-top: 1.5rem; padding-top: 0.75rem; }
-	.entries-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
-	.btn-add { background: none; border: 1px solid #2c7be5; color: #2c7be5; border-radius: 6px;
-		padding: 0.25rem 0.75rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
-	.btn-add:hover { background: #eaf3ff; }
-	/* Add-interval form */
-	.interval-form { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px;
-		padding: 1rem; margin-bottom: 1rem; }
-	.form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
-	.form-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #495057; }
-	.form-row input[type="time"], .form-row input[type="text"] {
-		padding: 0.4rem 0.6rem; border: 1px solid #ced4da; border-radius: 6px; font-size: 0.9rem; }
-	.note-label { flex: 1; min-width: 160px; }
-	.form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
-	.form-error { color: #c0392b; font-size: 0.85rem; margin: 0 0 0.5rem; }
-	/* Entry rows */
-	.entry { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #f1f3f5; font-size: 0.9rem; }
-	.entry.running { background: #eaf3ff; border-radius: 6px; padding: 0.5rem 0.5rem; }
-	.entry.editing { display: block; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.6rem 0.75rem; margin-bottom: 0.25rem; }
-	.edit-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
-	.time-input { width: 90px; padding: 0.3rem 0.4rem; border: 1px solid #ced4da; border-radius: 5px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
-	.note-input { flex: 1; min-width: 120px; padding: 0.3rem 0.5rem; border: 1px solid #ced4da; border-radius: 5px; font-size: 0.9rem; }
-	.edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
-	.time { font-variant-numeric: tabular-nums; color: #343a40; }
-	.dash { color: #adb5bd; }
-	.dur { font-variant-numeric: tabular-nums; color: #6c757d; margin-left: auto; }
-	.note { color: #495057; font-style: italic; }
-	.badge.auto { font-size: 0.75rem; background: #fff3cd; color: #856404; padding: 0.1rem 0.4rem; border-radius: 4px; }
-	.edit-btn { margin-left: auto; background: none; border: none; color: #adb5bd; font-size: 1rem; padding: 0 0.25rem; cursor: pointer; }
-	.edit-btn:hover { color: #2c7be5; }
-	.del { background: none; border: none; color: #adb5bd; font-size: 1rem; padding: 0 0.25rem; cursor: pointer; }
-	.del:hover { color: #e74c3c; }
-	.total { text-align: right; padding: 0.5rem 0; color: #495057; font-weight: 600; }
-	.empty { color: #6c757d; font-style: italic; }
 </style>
diff --git a/web/src/routes/week/+page.svelte b/web/src/routes/week/+page.svelte
index fe01c12..ac0d157 100644
--- a/web/src/routes/week/+page.svelte
+++ b/web/src/routes/week/+page.svelte
@@ -5,6 +5,8 @@
 		currentWeekKey, weekDayKeys, formatDurationShort, formatDelta, todayKey, isWorkday
 	} from '$lib/utils';
 	import DayChip from '$lib/components/DayChip.svelte';
+	import DayDetail from '$lib/components/DayDetail.svelte';
+	import { dayCapabilities } from '$lib/utils';
 
 	let weekKey = $state(currentWeekKey());
 	let dayKeys = $derived(weekDayKeys(weekKey));
@@ -102,6 +104,15 @@
 
 	function prevWeek() { weekKey = offsetWeek(weekKey, -1); }
 	function nextWeek() { weekKey = offsetWeek(weekKey, 1); }
+
+	// Today in this week?
+	const todayInWeek = $derived(dayKeys.includes(todayKey()));
+	const detailDayKey = $derived(todayInWeek ? todayKey() : null);
+	const detailCaps = $derived(
+		detailDayKey
+			? dayCapabilities(detailDayKey, todayKey(), !!closedDaysMap[detailDayKey])
+			: null
+	);
 	function offsetWeek(wk: string, offset: number): string {
 		const [y, w] = wk.split('-W').map(Number);
 		const date = new Date(y, 0, 4);
@@ -163,6 +174,13 @@
 	{:else if canCloseWeek}
 		<button class="btn close-week" onclick={handleCloseWeek}>Close week</button>
 	{/if}
+
+	{#if detailDayKey && detailCaps}
+		<div class="day-detail-panel">
+			<h2 class="detail-heading">{detailDayKey}</h2>
+			<DayDetail dayKey={detailDayKey} capabilities={detailCaps} oninvalidate={load} />
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -188,4 +206,6 @@
 	.btn.close-week { background: #343a40; color: #fff; border: none; padding: 0.55rem 1.4rem; border-radius: 6px; font-size: 1rem; font-weight: 600; }
 	.week-closed { background: #d4edda; border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; }
 	.week-closed button { background: none; border: 1px solid #155724; color: #155724; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.875rem; }
+	.day-detail-panel { border-top: 2px solid #dee2e6; margin-top: 1.25rem; padding-top: 0.75rem; }
+	.detail-heading { font-size: 1rem; font-weight: 600; color: #495057; margin: 0 0 0.5rem; }
 </style>