From 7e6c47a50e5cdedf78ff9543c365c10af3d0d071 Mon Sep 17 00:00:00 2001
From: Andreas Schneider <aksdb@gmx.de>
Date: Fri, 8 May 2026 20:40:20 +0000
Subject: [PATCH] refactor: default to today-view

---
 web/src/lib/components/WeekView.svelte | 270 ++++++++++++++++++++++
 web/src/lib/utils.ts                   |   7 +
 web/src/routes/+layout.svelte          |  12 +-
 web/src/routes/+page.svelte            |   3 +-
 web/src/routes/today/+page.svelte      |  15 ++
 web/src/routes/week/+page.svelte       | 304 ++-----------------------
 web/vite.config.ts                     |   5 +-
 7 files changed, 313 insertions(+), 303 deletions(-)
 create mode 100644 web/src/lib/components/WeekView.svelte
 create mode 100644 web/src/routes/today/+page.svelte

diff --git a/web/src/lib/components/WeekView.svelte b/web/src/lib/components/WeekView.svelte
new file mode 100644
index 0000000..b8710be
--- /dev/null
+++ b/web/src/lib/components/WeekView.svelte
@@ -0,0 +1,270 @@
+<script lang="ts">
+	import { entries, days, weeks, settings, type Entry, type ClosedDay, type ClosedWeek, type Settings, ApiError } from '$lib/api/client';
+	import { triggerSync } from '$lib/stores/sync';
+	import {
+		weekDayKeys, formatDurationShort, formatDelta,
+		todayKey, isWorkday, dayCapabilities, defaultDayForWeek
+	} from '$lib/utils';
+	import DayChip from '$lib/components/DayChip.svelte';
+	import DayDetail from '$lib/components/DayDetail.svelte';
+
+	interface Props {
+		weekKey: string;
+		selectedDay: string;
+		onweekchange: (weekKey: string, dayKey: string) => void;
+		ondaychange: (dayKey: string) => void;
+	}
+
+	let { weekKey, selectedDay, onweekchange, ondaychange }: Props = $props();
+
+	function offsetWeek(wk: string, offset: number): string {
+		const [y, w] = wk.split('-W').map(Number);
+		const date = new Date(y, 0, 4);
+		date.setDate(date.getDate() + (w - 1) * 7 + offset * 7);
+		const thu = new Date(date);
+		thu.setDate(date.getDate() + 4 - (date.getDay() || 7));
+		const ys = new Date(thu.getFullYear(), 0, 1);
+		const weekNum = Math.ceil(((thu.getTime() - ys.getTime()) / 86400000 + 1) / 7);
+		return `${thu.getFullYear()}-W${String(weekNum).padStart(2, '0')}`;
+	}
+
+	function navigateWeek(offset: number) {
+		const wk = offsetWeek(weekKey, offset);
+		onweekchange(wk, defaultDayForWeek(wk));
+	}
+
+	// ── Data ────────────────────────────────────────────────────────────────────
+
+	let dayKeys = $derived(weekDayKeys(weekKey));
+	let closedDaysMap = $state<Record<string, ClosedDay>>({});
+	let weekEntries = $state<Entry[]>([]);
+	let closedWeek = $state<ClosedWeek | null>(null);
+	let currentSettings = $state<Settings | null>(null);
+	let error = $state('');
+
+	async function load() {
+		error = '';
+		const from = dayKeys[0];
+		const to = dayKeys[6];
+		try {
+			const [ds, ws, es] = await Promise.all([
+				days.list(from, to),
+				weeks.list(weekKey, weekKey),
+				entries.list(from, to)
+			]);
+			closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
+			closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
+			weekEntries = es ?? [];
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+		try {
+			currentSettings = await settings.current();
+		} catch (e) {
+			if (!(e instanceof ApiError && e.status === 503)) {
+				error = e instanceof ApiError ? e.message : String(e);
+			}
+		}
+	}
+
+	$effect(() => { weekKey; load(); });
+
+	// ── Keyboard navigation ──────────────────────────────────────────────────────
+
+	function handleStripKeydown(e: KeyboardEvent) {
+		const idx = dayKeys.indexOf(selectedDay);
+		if (e.key === 'ArrowRight' && idx < 6) {
+			ondaychange(dayKeys[idx + 1]);
+			e.preventDefault();
+		} else if (e.key === 'ArrowLeft' && idx > 0) {
+			ondaychange(dayKeys[idx - 1]);
+			e.preventDefault();
+		}
+	}
+
+	// ── Week actions ─────────────────────────────────────────────────────────────
+
+	async function handleCloseWeek() {
+		error = '';
+		try {
+			const cw = await weeks.close(weekKey);
+			closedWeek = cw;
+			triggerSync();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	async function handleReopenWeek() {
+		error = '';
+		try {
+			await weeks.reopen(weekKey);
+			closedWeek = null;
+			triggerSync();
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : String(e);
+		}
+	}
+
+	// ── Derived display values ───────────────────────────────────────────────────
+
+	const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+	function dayWorkedMs(dk: string): number {
+		const cd = closedDaysMap[dk];
+		if (cd) return cd.worked_ms;
+		return weekEntries
+			.filter((e) => e.day_key === dk && e.end_time != null)
+			.reduce((sum, e) => sum + (e.end_time! - e.start_time), 0);
+	}
+
+	function dailyExpectedMs(dk: string): number {
+		if (!currentSettings) return 0;
+		const mask = currentSettings.workdays_mask;
+		if (!isWorkday(dk, mask)) return 0;
+		const workdayCount = [1, 2, 4, 8, 16, 32, 64].filter((b) => mask & b).length;
+		return (currentSettings.hours_per_week * 3_600_000) / workdayCount;
+	}
+
+	const totalWorkedMs = $derived(
+		dayKeys.reduce((sum, dk) => sum + dayWorkedMs(dk), 0)
+	);
+	const expectedMs = $derived(
+		currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
+	);
+
+	const daysWithEntries = $derived(new Set(weekEntries.map((e) => e.day_key)));
+
+	const canCloseWeek = $derived(
+		!closedWeek &&
+		dayKeys[0] <= todayKey() &&
+		dayKeys.every((dk) => {
+			if (dk > todayKey()) return true;
+			if (!daysWithEntries.has(dk)) return true;
+			return !!closedDaysMap[dk];
+		})
+	);
+
+	const detailCaps = $derived(
+		dayCapabilities(selectedDay, todayKey(), !!closedDaysMap[selectedDay])
+	);
+
+	let chipRefs: Record<string, HTMLElement> = {};
+	$effect(() => {
+		const el = chipRefs[selectedDay];
+		el?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' });
+	});
+</script>
+
+<div class="week-view">
+	<div class="header">
+		<button onclick={() => navigateWeek(-1)} aria-label="Previous week">‹</button>
+		<h1>Week {weekKey}</h1>
+		<button onclick={() => navigateWeek(1)} aria-label="Next week">›</button>
+	</div>
+
+	{#if error}<p class="error">{error}</p>{/if}
+
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		class="day-strip"
+		role="tablist"
+		aria-label="Days of the week"
+		onkeydown={handleStripKeydown}
+	>
+		{#each dayKeys as dk, i (dk)}
+			<div class="chip-slot" bind:this={chipRefs[dk]}>
+				<DayChip
+					dayKey={dk}
+					weekdayLabel={DAY_NAMES[i]}
+					workedMs={dayWorkedMs(dk)}
+					expectedMs={dailyExpectedMs(dk)}
+					kind={closedDaysMap[dk]?.kind ?? null}
+					closed={!!closedDaysMap[dk]}
+					isToday={dk === todayKey()}
+					selected={dk === selectedDay}
+					isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
+					onclick={() => ondaychange(dk)}
+				/>
+			</div>
+		{/each}
+	</div>
+
+	<div class="summary">
+		<div class="row">
+			<span>Worked</span>
+			<strong>{formatDurationShort(totalWorkedMs)}</strong>
+		</div>
+		<div class="row">
+			<span>Expected</span>
+			<strong>{formatDurationShort(expectedMs)}</strong>
+		</div>
+		<div class="row delta" class:positive={totalWorkedMs >= expectedMs}>
+			<span>Delta</span>
+			<strong>{formatDelta(totalWorkedMs - expectedMs)}</strong>
+		</div>
+	</div>
+
+	{#if closedWeek}
+		<div class="week-closed">
+			<p>Week closed — overtime: <strong>{formatDelta(closedWeek.delta_ms)}</strong></p>
+			<button onclick={handleReopenWeek}>Reopen week</button>
+		</div>
+	{:else if canCloseWeek}
+		<button class="btn close-week" onclick={handleCloseWeek}>Close week</button>
+	{/if}
+
+	<div class="day-detail-panel" role="tabpanel">
+		<h2 class="detail-heading">{selectedDay}</h2>
+		<DayDetail
+			dayKey={selectedDay}
+			capabilities={detailCaps}
+			oninvalidate={(cd) => {
+				if (cd !== undefined) {
+					if (cd === null) {
+						const { [selectedDay]: _, ...rest } = closedDaysMap;
+						closedDaysMap = rest;
+					} else {
+						closedDaysMap = { ...closedDaysMap, [selectedDay]: cd };
+					}
+				} else {
+					load();
+				}
+			}}
+		/>
+	</div>
+</div>
+
+<style>
+	.week-view h1 { margin: 0; font-size: 1.2rem; }
+	.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
+	.header button { background: none; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 1.1rem; }
+	.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; margin-bottom: 1rem; }
+
+	.day-strip {
+		display: flex;
+		gap: 0.4rem;
+		margin-bottom: 1.25rem;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		-webkit-overflow-scrolling: touch;
+		padding-bottom: 0.25rem;
+		align-items: stretch;
+	}
+
+	.chip-slot {
+		flex: 1;
+		min-width: 2.8rem;
+		display: flex;
+	}
+
+	.summary { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
+	.row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
+	.delta strong { color: #c0392b; }
+	.delta.positive strong { color: #27ae60; }
+	.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>
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 423d087..49fe3db 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -180,3 +180,10 @@ export function dayCapabilities(
 		canReopenDay: false
 	};
 }
+
+/** Default day to select for a given week: today if in the week, else Monday. */
+export function defaultDayForWeek(weekKey: string): string {
+	const keys = weekDayKeys(weekKey);
+	const t = todayKey();
+	return keys.includes(t) ? t : keys[0];
+}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 170bdce..3940bf3 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -5,7 +5,6 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { startSync, stopSync, triggerSync, syncState } from '$lib/stores/sync';
-	import { todayKey, currentWeekKey } from '$lib/utils';
 
 	let { children } = $props();
 
@@ -26,14 +25,7 @@
 
 	onDestroy(stopSync);
 
-	function todayHref(): string {
-		return `/week?week=${currentWeekKey()}&day=${todayKey()}`;
-	}
-
-	const todayActive = $derived(
-		page.url.pathname === '/week' &&
-		page.url.searchParams.get('day') === todayKey()
-	);
+	const todayActive = $derived(page.url.pathname === '/today');
 
 	const weekActive = $derived(
 		page.url.pathname === '/week' && !todayActive
@@ -63,7 +55,7 @@
 
 <nav>
 	<div class="nav-links">
-		<a href={todayHref()} class:active={todayActive}>Today</a>
+		<a href="/today" class:active={todayActive}>Today</a>
 		<a href="/week" class:active={weekActive}>Week</a>
 		<a href="/history" class:active={page.url.pathname === '/history'}>History</a>
 		<a href="/settings" class:active={page.url.pathname === '/settings'}>Settings</a>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index c083b53..137d56d 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { todayKey, currentWeekKey } from '$lib/utils';
-	onMount(() => goto(`/week?week=${currentWeekKey()}&day=${todayKey()}`));
+	onMount(() => goto('/today', { replaceState: true }));
 </script>
diff --git a/web/src/routes/today/+page.svelte b/web/src/routes/today/+page.svelte
new file mode 100644
index 0000000..a2b385d
--- /dev/null
+++ b/web/src/routes/today/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { currentWeekKey, todayKey } from '$lib/utils';
+	import WeekView from '$lib/components/WeekView.svelte';
+
+	const weekKey = currentWeekKey();
+	let selectedDay = $state(todayKey());
+</script>
+
+<WeekView
+	{weekKey}
+	{selectedDay}
+	onweekchange={(wk, dk) => goto(`/week?week=${wk}&day=${dk}`)}
+	ondaychange={(dk) => { selectedDay = dk; }}
+/>
diff --git a/web/src/routes/week/+page.svelte b/web/src/routes/week/+page.svelte
index f5cc1d0..3c799ae 100644
--- a/web/src/routes/week/+page.svelte
+++ b/web/src/routes/week/+page.svelte
@@ -1,25 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { entries, days, weeks, settings, type Entry, type ClosedDay, type ClosedWeek, type Settings, ApiError } from '$lib/api/client';
-	import { triggerSync } from '$lib/stores/sync';
-	import {
-		currentWeekKey, weekDayKeys, formatDurationShort, formatDelta,
-		todayKey, isWorkday, dayCapabilities
-	} from '$lib/utils';
-	import DayChip from '$lib/components/DayChip.svelte';
-	import DayDetail from '$lib/components/DayDetail.svelte';
+	import { currentWeekKey, defaultDayForWeek } from '$lib/utils';
+	import WeekView from '$lib/components/WeekView.svelte';
 
-	// ── URL-driven state ────────────────────────────────────────────────────────
-
-	// Canonical default day for a given week: today if in the week, else Monday.
-	function defaultDayForWeek(wk: string): string {
-		const keys = weekDayKeys(wk);
-		const t = todayKey();
-		return keys.includes(t) ? t : keys[0];
-	}
-
-	// Read week+day from URL; fall back to current week + default day.
 	let weekKey = $derived(
 		$page.url.searchParams.get('week') ?? currentWeekKey()
 	);
@@ -27,7 +11,7 @@
 		$page.url.searchParams.get('day') ?? defaultDayForWeek(weekKey)
 	);
 
-	// On mount: if URL is bare /week (no params), canonicalize via replaceState.
+	// Canonicalize bare /week (no params) via replaceState so bookmarks work.
 	$effect(() => {
 		const url = $page.url;
 		if (!url.searchParams.has('week') || !url.searchParams.has('day')) {
@@ -39,278 +23,20 @@
 			goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
 		}
 	});
+</script>
 
-	function selectDay(dk: string) {
-		const next = new URL($page.url);
-		next.searchParams.set('day', dk);
-		goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
-	}
-
-	function navigateWeek(offset: number) {
-		const wk = offsetWeek(weekKey, offset);
-		const dk = defaultDayForWeek(wk);
+<WeekView
+	{weekKey}
+	{selectedDay}
+	onweekchange={(wk, dk) => {
 		const next = new URL($page.url);
 		next.searchParams.set('week', wk);
 		next.searchParams.set('day', dk);
-		// Push history so back/forward works for week navigation.
 		goto(next.toString(), { noScroll: true, keepFocus: true });
-	}
-
-	function offsetWeek(wk: string, offset: number): string {
-		const [y, w] = wk.split('-W').map(Number);
-		const date = new Date(y, 0, 4);
-		date.setDate(date.getDate() + (w - 1) * 7 + offset * 7);
-		const thu = new Date(date);
-		thu.setDate(date.getDate() + 4 - (date.getDay() || 7));
-		const ys = new Date(thu.getFullYear(), 0, 1);
-		const weekNum = Math.ceil(((thu.getTime() - ys.getTime()) / 86400000 + 1) / 7);
-		return `${thu.getFullYear()}-W${String(weekNum).padStart(2, '0')}`;
-	}
-
-	// ── Data ────────────────────────────────────────────────────────────────────
-
-	let dayKeys = $derived(weekDayKeys(weekKey));
-	let closedDaysMap = $state<Record<string, ClosedDay>>({});
-	let weekEntries = $state<Entry[]>([]);
-	let closedWeek = $state<ClosedWeek | null>(null);
-	let currentSettings = $state<Settings | null>(null);
-	let error = $state('');
-
-	async function load() {
-		error = '';
-		const from = dayKeys[0];
-		const to = dayKeys[6];
-		try {
-			const [ds, ws, es] = await Promise.all([
-				days.list(from, to),
-				weeks.list(weekKey, weekKey),
-				entries.list(from, to)
-			]);
-			closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
-			closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
-			weekEntries = es ?? [];
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-		// Load settings independently so a missing settings row doesn't break the rest.
-		try {
-			currentSettings = await settings.current();
-		} catch (e) {
-			if (!(e instanceof ApiError && e.status === 503)) {
-				error = e instanceof ApiError ? e.message : String(e);
-			}
-		}
-	}
-
-	$effect(() => { weekKey; load(); });
-
-	// ── Keyboard navigation for chip strip ──────────────────────────────────────
-
-	function handleStripKeydown(e: KeyboardEvent) {
-		const idx = dayKeys.indexOf(selectedDay);
-		if (e.key === 'ArrowRight' && idx < 6) {
-			selectDay(dayKeys[idx + 1]);
-			e.preventDefault();
-		} else if (e.key === 'ArrowLeft' && idx > 0) {
-			selectDay(dayKeys[idx - 1]);
-			e.preventDefault();
-		}
-	}
-
-	// ── Week actions ─────────────────────────────────────────────────────────────
-
-	async function handleCloseWeek() {
-		error = '';
-		try {
-			const cw = await weeks.close(weekKey);
-			closedWeek = cw;
-			triggerSync();
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	async function handleReopenWeek() {
-		error = '';
-		try {
-			await weeks.reopen(weekKey);
-			closedWeek = null;
-			triggerSync();
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : String(e);
-		}
-	}
-
-	// ── Derived display values ───────────────────────────────────────────────────
-
-	const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-
-	function dayWorkedMs(dk: string): number {
-		const cd = closedDaysMap[dk];
-		if (cd) return cd.worked_ms;
-		return weekEntries
-			.filter((e) => e.day_key === dk && e.end_time != null)
-			.reduce((sum, e) => sum + (e.end_time! - e.start_time), 0);
-	}
-
-	function dailyExpectedMs(dk: string): number {
-		if (!currentSettings) return 0;
-		const mask = currentSettings.workdays_mask;
-		if (!isWorkday(dk, mask)) return 0;
-		const workdayCount = [1, 2, 4, 8, 16, 32, 64].filter((b) => mask & b).length;
-		return (currentSettings.hours_per_week * 3_600_000) / workdayCount;
-	}
-
-	const totalWorkedMs = $derived(
-		dayKeys.reduce((sum, dk) => sum + dayWorkedMs(dk), 0)
-	);
-	const expectedMs = $derived(
-		currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
-	);
-
-	const daysWithEntries = $derived(new Set(weekEntries.map((e) => e.day_key)));
-
-	const canCloseWeek = $derived(
-		!closedWeek &&
-		dayKeys[0] <= todayKey() &&
-		dayKeys.every((dk) => {
-			if (dk > todayKey()) return true;
-			if (!daysWithEntries.has(dk)) return true;
-			return !!closedDaysMap[dk];
-		})
-	);
-
-	// Capabilities for the selected day, reactive on closedDaysMap updates.
-	const detailCaps = $derived(
-		dayCapabilities(selectedDay, todayKey(), !!closedDaysMap[selectedDay])
-	);
-
-	// Scroll selected chip into view when selection changes.
-	let chipRefs: Record<string, HTMLElement> = {};
-	$effect(() => {
-		const el = chipRefs[selectedDay];
-		el?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' });
-	});
-</script>
-
-<div class="week-view">
-	<div class="header">
-		<button onclick={() => navigateWeek(-1)} aria-label="Previous week">‹</button>
-		<h1>Week {weekKey}</h1>
-		<button onclick={() => navigateWeek(1)} aria-label="Next week">›</button>
-	</div>
-
-	{#if error}<p class="error">{error}</p>{/if}
-
-	<!-- Day strip -->
-	<!-- svelte-ignore a11y_interactive_supports_focus -->
-	<div
-		class="day-strip"
-		role="tablist"
-		aria-label="Days of the week"
-		onkeydown={handleStripKeydown}
-	>
-		{#each dayKeys as dk, i (dk)}
-			<div class="chip-slot" bind:this={chipRefs[dk]}>
-				<DayChip
-					dayKey={dk}
-					weekdayLabel={DAY_NAMES[i]}
-					workedMs={dayWorkedMs(dk)}
-					expectedMs={dailyExpectedMs(dk)}
-					kind={closedDaysMap[dk]?.kind ?? null}
-					closed={!!closedDaysMap[dk]}
-					isToday={dk === todayKey()}
-					selected={dk === selectedDay}
-					isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
-					onclick={() => selectDay(dk)}
-				/>
-			</div>
-		{/each}
-	</div>
-
-	<div class="summary">
-		<div class="row">
-			<span>Worked</span>
-			<strong>{formatDurationShort(totalWorkedMs)}</strong>
-		</div>
-		<div class="row">
-			<span>Expected</span>
-			<strong>{formatDurationShort(expectedMs)}</strong>
-		</div>
-		<div class="row delta" class:positive={totalWorkedMs >= expectedMs}>
-			<span>Delta</span>
-			<strong>{formatDelta(totalWorkedMs - expectedMs)}</strong>
-		</div>
-	</div>
-
-	{#if closedWeek}
-		<div class="week-closed">
-			<p>Week closed — overtime: <strong>{formatDelta(closedWeek.delta_ms)}</strong></p>
-			<button onclick={handleReopenWeek}>Reopen week</button>
-		</div>
-	{:else if canCloseWeek}
-		<button class="btn close-week" onclick={handleCloseWeek}>Close week</button>
-	{/if}
-
-	<!-- Day detail panel -->
-	<div class="day-detail-panel" role="tabpanel">
-		<h2 class="detail-heading">{selectedDay}</h2>
-		<DayDetail
-			dayKey={selectedDay}
-			capabilities={detailCaps}
-			oninvalidate={(cd) => {
-				if (cd !== undefined) {
-					// Day was closed or reopened — update map immediately so detailCaps reacts.
-					// Do NOT call load() here; Dexie doesn't have the server result yet and
-					// would overwrite the optimistic update.
-					if (cd === null) {
-						const { [selectedDay]: _, ...rest } = closedDaysMap;
-						closedDaysMap = rest;
-					} else {
-						closedDaysMap = { ...closedDaysMap, [selectedDay]: cd };
-					}
-				} else {
-					// Entry mutation — reload entries/days from Dexie.
-					load();
-				}
-			}}
-		/>
-	</div>
-</div>
-
-<style>
-	.week-view h1 { margin: 0; font-size: 1.2rem; }
-	.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
-	.header button { background: none; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 1.1rem; }
-	.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; margin-bottom: 1rem; }
-
-	.day-strip {
-		display: flex;
-		gap: 0.4rem;
-		margin-bottom: 1.25rem;
-		overflow-x: auto;
-		scroll-snap-type: x mandatory;
-		-webkit-overflow-scrolling: touch;
-		padding-bottom: 0.25rem;
-		/* let chips grow to fill available width */
-		align-items: stretch;
-	}
-
-	/* Each slot is a flex child that stretches and provides the container
-	   query context via the .chip-wrap inside DayChip */
-	.chip-slot {
-		flex: 1;
-		min-width: 2.8rem;
-		display: flex;
-	}
-
-	.summary { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
-	.row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
-	.delta strong { color: #c0392b; }
-	.delta.positive strong { color: #27ae60; }
-	.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>
+	}}
+	ondaychange={(dk) => {
+		const next = new URL($page.url);
+		next.searchParams.set('day', dk);
+		goto(next.toString(), { replaceState: true, noScroll: true, keepFocus: true });
+	}}
+/>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index a79eb92..ac295eb 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -19,7 +19,8 @@ export default defineConfig({
 				globPatterns: ['**/*.{js,css,svg,png,ico,woff,woff2}'],
 				additionalManifestEntries: [
 					{ url: '/', revision: buildId },
-					{ url: '/index.html', revision: buildId }
+					{ url: '/index.html', revision: buildId },
+					{ url: '/today', revision: buildId }
 				],
 				cleanupOutdatedCaches: true,
 				clientsClaim: true,
@@ -48,7 +49,7 @@ export default defineConfig({
 				theme_color: '#1a1a2e',
 				background_color: '#f8f9fa',
 				display: 'standalone',
-				start_url: '/',
+				start_url: '/today',
 				icons: [
 					{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
 					{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' }