refactor(nav): Today tab shortcut to week view; delete /today route

- Today nav link targets /week?week=<currentWeek>&day=<todayKey>
- Today tab active: route=/week AND ?day===todayKey() (not just pathname)
- Week tab active: route=/week AND today tab not active
- Root / redirect updated from /today to /week?week=…&day=…
- /today route hard-deleted (src/routes/today/ removed)
- +layout.svelte imports todayKey/currentWeekKey for link generation
This commit is contained in:
2026-04-30 19:10:17 +02:00
parent bf0c728818
commit b25340644b
3 changed files with 20 additions and 29 deletions

View File

@@ -4,6 +4,7 @@
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { startSync, stopSync } from '$lib/stores/sync'; import { startSync, stopSync } from '$lib/stores/sync';
import { todayKey, currentWeekKey } from '$lib/utils';
let { children } = $props(); let { children } = $props();
@@ -16,18 +17,26 @@
onDestroy(stopSync); onDestroy(stopSync);
const navItems = [ function todayHref(): string {
{ href: '/today', label: 'Today' }, return `/week?week=${currentWeekKey()}&day=${todayKey()}`;
{ href: '/week', label: 'Week' }, }
{ href: '/history', label: 'History' },
{ href: '/settings', label: 'Settings' } // "Today" tab is active when on /week with ?day === todayKey().
]; const todayActive = $derived(
page.url.pathname === '/week' &&
page.url.searchParams.get('day') === todayKey()
);
const weekActive = $derived(
page.url.pathname === '/week' && !todayActive
);
</script> </script>
<nav> <nav>
{#each navItems as item} <a href={todayHref()} class:active={todayActive}>Today</a>
<a href={item.href} class:active={page.url.pathname === item.href}>{item.label}</a> <a href="/week" class:active={weekActive}>Week</a>
{/each} <a href="/history" class:active={page.url.pathname === '/history'}>History</a>
<a href="/settings" class:active={page.url.pathname === '/settings'}>Settings</a>
</nav> </nav>
<main> <main>

View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
onMount(() => goto('/today')); import { todayKey, currentWeekKey } from '$lib/utils';
onMount(() => goto(`/week?week=${currentWeekKey()}&day=${todayKey()}`));
</script> </script>

View File

@@ -1,19 +0,0 @@
<script lang="ts">
import DayDetail from '$lib/components/DayDetail.svelte';
import { todayKey, dayCapabilities } from '$lib/utils';
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-page">
<h1>Today — {today}</h1>
<DayDetail dayKey={today} {capabilities} />
</div>
<style>
.today-page { padding: 0; }
h1 { margin: 0 0 1rem; font-size: 1.4rem; }
</style>