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:
@@ -4,6 +4,7 @@
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { startSync, stopSync } from '$lib/stores/sync';
|
||||
import { todayKey, currentWeekKey } from '$lib/utils';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
@@ -16,18 +17,26 @@
|
||||
|
||||
onDestroy(stopSync);
|
||||
|
||||
const navItems = [
|
||||
{ href: '/today', label: 'Today' },
|
||||
{ href: '/week', label: 'Week' },
|
||||
{ href: '/history', label: 'History' },
|
||||
{ href: '/settings', label: 'Settings' }
|
||||
];
|
||||
function todayHref(): string {
|
||||
return `/week?week=${currentWeekKey()}&day=${todayKey()}`;
|
||||
}
|
||||
|
||||
// "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>
|
||||
|
||||
<nav>
|
||||
{#each navItems as item}
|
||||
<a href={item.href} class:active={page.url.pathname === item.href}>{item.label}</a>
|
||||
{/each}
|
||||
<a href={todayHref()} 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>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
onMount(() => goto('/today'));
|
||||
import { todayKey, currentWeekKey } from '$lib/utils';
|
||||
onMount(() => goto(`/week?week=${currentWeekKey()}&day=${todayKey()}`));
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user