From b287affeb29c8e76cb29fb7486321d945067337a Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 8 Apr 2026 20:46:55 +0200
Subject: [PATCH] feat: add Today quick-navigate button to nutrition and period
 tracker

Shows a Today button when not viewing current date/month. Nutrition
page button appears right-aligned in the date nav. Period tracker
button appears top-right of the calendar header with centered
month title and chevrons.
---
 .../components/fitness/PeriodTracker.svelte   | 24 ++++++++++++++++++-
 .../[nutrition=fitnessNutrition]/+page.svelte | 22 ++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/fitness/PeriodTracker.svelte b/src/lib/components/fitness/PeriodTracker.svelte
index 684870a9..35dbb8a7 100644
--- a/src/lib/components/fitness/PeriodTracker.svelte
+++ b/src/lib/components/fitness/PeriodTracker.svelte
@@ -662,6 +662,9 @@
 			<button class="cal-nav" onclick={() => calendarOffset++} disabled={calendarOffset >= 12}>
 				<ChevronRight size={16} />
 			</button>
+			{#if calendarOffset !== 0}
+				<button class="go-today-btn" onclick={() => calendarOffset = 0}>{lang === 'de' ? 'Heute' : 'Today'}</button>
+			{/if}
 		</div>
 		<div class="cal-weekdays">
 			{#each weekDays as wd}
@@ -1064,9 +1067,28 @@
 	}
 	.cal-header {
 		display: flex;
-		justify-content: space-between;
+		justify-content: center;
 		align-items: center;
+		gap: 0.25rem;
 		margin-bottom: 0.5rem;
+		position: relative;
+	}
+	.go-today-btn {
+		position: absolute;
+		right: 0;
+		font-size: 0.65rem;
+		font-weight: 600;
+		color: var(--color-primary);
+		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+		padding: 0.15rem 0.5rem;
+		border-radius: 5px;
+		cursor: pointer;
+		transition: background 0.15s;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.go-today-btn:hover {
+		background: color-mix(in srgb, var(--color-primary) 20%, transparent);
 	}
 	.cal-title {
 		font-size: 0.85rem;
diff --git a/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte b/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
index b28da279..0bedddc7 100644
--- a/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
+++ b/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
@@ -930,6 +930,9 @@
 		<button class="date-btn" onclick={() => navigateDate(1)} aria-label="Next day">
 			<ChevronRight size={20} />
 		</button>
+		{#if !isToday}
+			<button class="go-today-btn" onclick={goToday}>{t('today', lang)}</button>
+		{/if}
 	</div>
 
 	<div class="sidebar-col">
@@ -1677,7 +1680,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: 0.25rem;
-
+		position: relative;
 	}
 	.date-btn {
 		background: none;
@@ -1722,6 +1725,23 @@
 		padding: 0.15rem 0.4rem;
 		border-radius: 4px;
 	}
+	.go-today-btn {
+		position: absolute;
+		right: 0;
+		font-size: 0.7rem;
+		font-weight: 600;
+		color: var(--color-primary);
+		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+		padding: 0.25rem 0.6rem;
+		border-radius: 6px;
+		cursor: pointer;
+		transition: background 0.15s;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.go-today-btn:hover {
+		background: color-mix(in srgb, var(--color-primary) 20%, transparent);
+	}
 
 	/* ── Daily Summary Card ── */
 	.daily-summary {