From 5b7f23b8befe164c1a29a9719e3892dc68528198 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 21 Apr 2026 12:53:11 +0200
Subject: [PATCH] feat(fitness): surface period projection on stats page

PeriodTracker gains an optional mode prop ('entry' | 'projection' |
'full') that gates which sections render. The measure page keeps the
full tracker for the user's own cycle (logging plus calendar). The
stats page now mirrors it in projection mode and is the sole home
for shared cycles, which used to clutter the measure page.
---
 package.json                                  |  2 +-
 .../components/fitness/PeriodTracker.svelte   | 27 +++++++++++--------
 src/lib/js/fitnessI18n.ts                     |  1 +
 .../[measure=fitnessMeasure]/+page.server.ts  |  8 +++---
 .../[measure=fitnessMeasure]/+page.svelte     |  4 ---
 .../[stats=fitnessStats]/+page.server.ts      | 10 ++++---
 .../fitness/[stats=fitnessStats]/+page.svelte |  9 +++++++
 7 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 797947bf..25b25f3f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.40.6",
+	"version": "1.41.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/fitness/PeriodTracker.svelte b/src/lib/components/fitness/PeriodTracker.svelte
index c05bc109..12d6a76f 100644
--- a/src/lib/components/fitness/PeriodTracker.svelte
+++ b/src/lib/components/fitness/PeriodTracker.svelte
@@ -7,9 +7,11 @@
 	import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
 
 	/**
-	 * @type {{ periods: any[], lang: 'en' | 'de', sharedWith?: string[], readOnly?: boolean, ownerName?: string }}
+	 * @type {{ periods: any[], lang: 'en' | 'de', sharedWith?: string[], readOnly?: boolean, ownerName?: string, mode?: 'entry' | 'projection' | 'full' }}
 	 */
-	let { periods: initialPeriods = [], lang = 'en', sharedWith: initialSharedWith = [], readOnly = false, ownerName = '' } = $props();
+	let { periods: initialPeriods = [], lang = 'en', sharedWith: initialSharedWith = [], readOnly = false, ownerName = '', mode = 'full' } = $props();
+	const showEntry = $derived(mode !== 'projection');
+	const showProjection = $derived(mode !== 'entry');
 
 	// svelte-ignore state_referenced_locally
 	let periods = $state([...initialPeriods]);
@@ -592,18 +594,18 @@
 				<div class="status-main">
 					<span class="status-pill period-pill">{t('current_period', lang)}</span>
 					<span class="status-hero ongoing-hero">{t('period_day', lang)} {ongoingDay}</span>
-					{#if predictions.predictedEndOfOngoing}
+					{#if showProjection && predictions.predictedEndOfOngoing}
 						<span class="status-detail">{t('predicted_end', lang)}</span>
 						<span class="status-relative">{relativeDate(predictions.predictedEndOfOngoing)}</span>
 						<span class="status-date">{formatDate(predictions.predictedEndOfOngoing)}</span>
 					{/if}
-					{#if !readOnly}
+					{#if showEntry && !readOnly}
 						<button class="end-btn" onclick={endPeriod} disabled={loading}>
 							{t('end_period', lang)}
 						</button>
 					{/if}
 				</div>
-				{#if nextCycle}
+				{#if showProjection && nextCycle}
 					<div class="status-side">
 						<div class="status-side-item ovulation-accent">
 							<span class="status-side-label">{t('ovulation', lang)}</span>
@@ -617,13 +619,13 @@
 					</div>
 				{/if}
 			</div>
-		{:else if nextCycle}
+		{:else if showProjection && nextCycle}
 			<div class="status-split">
 				<div class="status-main">
 					<span class="status-pill period-pill">{t('next_period', lang)}</span>
 					<span class="status-hero">{relativeRange(nextCycle.start, nextCycle.end)}</span>
 					<span class="status-date">{formatDate(nextCycle.start)} — {formatDate(nextCycle.end)}</span>
-					{#if !readOnly}
+					{#if showEntry && !readOnly}
 						<button class="start-btn" onclick={startPeriod} disabled={loading}>
 							{t('start_period', lang)}
 						</button>
@@ -641,9 +643,9 @@
 					</div>
 				</div>
 			</div>
-		{:else}
+		{:else if showEntry}
 			<div class="status-block">
-				<span class="status-empty">{t('no_period_data', lang)}</span>
+				<span class="status-empty">{sorted.length === 0 ? t('no_period_data', lang) : t('no_active_period', lang)}</span>
 				{#if !readOnly}
 					<button class="start-btn" onclick={startPeriod} disabled={loading}>
 						{t('start_period', lang)}
@@ -653,6 +655,7 @@
 		{/if}
 	</div>
 
+	{#if showProjection}
 	<!-- Calendar -->
 	<div class="calendar">
 		<div class="cal-header">
@@ -691,7 +694,9 @@
 		</div>
 	</div>
 
-	{#if completed.length >= 2}
+	{/if}
+
+	{#if showProjection && completed.length >= 2}
 		<div class="cycle-stats">
 			<div class="cycle-stat">
 				<span class="cycle-stat-label">{t('cycle_length', lang)}</span>
@@ -710,7 +715,7 @@
 		</div>
 	{/if}
 
-	{#if !readOnly}
+	{#if showEntry && !readOnly}
 		<!-- History + Share row -->
 		{#if sorted.length > 0}
 			<div class="history">
diff --git a/src/lib/js/fitnessI18n.ts b/src/lib/js/fitnessI18n.ts
index 07378df4..cd725721 100644
--- a/src/lib/js/fitnessI18n.ts
+++ b/src/lib/js/fitnessI18n.ts
@@ -402,6 +402,7 @@ const translations: Translations = {
 	period_tracker: { en: 'Period Tracker', de: 'Periodentracker' },
 	current_period: { en: 'Current Period', de: 'Aktuelle Periode' },
 	no_period_data: { en: 'No period data yet. Log your first period to start tracking.', de: 'Noch keine Periodendaten. Erfasse deine erste Periode.' },
+	no_active_period: { en: 'No active period.', de: 'Keine aktive Periode.' },
 	start_period: { en: 'Start Period', de: 'Periode starten' },
 	end_period: { en: 'Period Ended', de: 'Periode vorbei' },
 	period_day: { en: 'Day', de: 'Tag' },
diff --git a/src/routes/fitness/[measure=fitnessMeasure]/+page.server.ts b/src/routes/fitness/[measure=fitnessMeasure]/+page.server.ts
index dfaddaf0..b43fc702 100644
--- a/src/routes/fitness/[measure=fitnessMeasure]/+page.server.ts
+++ b/src/routes/fitness/[measure=fitnessMeasure]/+page.server.ts
@@ -1,13 +1,12 @@
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch }) => {
-	const [latestRes, listRes, goalRes, periodRes, shareRes, sharedRes] = await Promise.all([
+	const [latestRes, listRes, goalRes, periodRes, shareRes] = await Promise.all([
 		fetch('/api/fitness/measurements/latest'),
 		fetch('/api/fitness/measurements?limit=200'),
 		fetch('/api/fitness/goal'),
 		fetch('/api/fitness/period').catch(() => null),
-		fetch('/api/fitness/period/share').catch(() => null),
-		fetch('/api/fitness/period/shared').catch(() => null)
+		fetch('/api/fitness/period/share').catch(() => null)
 	]);
 
 	return {
@@ -15,7 +14,6 @@ export const load: PageServerLoad = async ({ fetch }) => {
 		measurements: await listRes.json(),
 		profile: goalRes.ok ? await goalRes.json() : {},
 		periods: periodRes?.ok ? (await periodRes.json()).entries : [],
-		periodSharedWith: shareRes?.ok ? (await shareRes.json()).sharedWith : [],
-		sharedPeriods: sharedRes?.ok ? (await sharedRes.json()).shared : []
+		periodSharedWith: shareRes?.ok ? (await shareRes.json()).sharedWith : []
 	};
 };
diff --git a/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte b/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
index 5c6a26f6..5d6f6fe4 100644
--- a/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
+++ b/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
@@ -353,10 +353,6 @@
 		<PeriodTracker periods={data.periods ?? []} {lang} sharedWith={data.periodSharedWith ?? []} />
 	{/if}
 
-	{#each data.sharedPeriods ?? [] as shared (shared.owner)}
-		<PeriodTracker periods={shared.entries} {lang} readOnly ownerName={shared.owner} />
-	{/each}
-
 	<div class="page-footer-actions">
 		<button type="button" class="edit-profile-link" onclick={openProfileEdit}>
 			<UserCog size={14} />
diff --git a/src/routes/fitness/[stats=fitnessStats]/+page.server.ts b/src/routes/fitness/[stats=fitnessStats]/+page.server.ts
index 26a0a224..c753d722 100644
--- a/src/routes/fitness/[stats=fitnessStats]/+page.server.ts
+++ b/src/routes/fitness/[stats=fitnessStats]/+page.server.ts
@@ -2,17 +2,21 @@ import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
 	const session = await locals.auth();
-	const [res, goalRes, heatmapRes, nutritionRes, latestRes] = await Promise.all([
+	const [res, goalRes, heatmapRes, nutritionRes, latestRes, periodRes, sharedRes] = await Promise.all([
 		fetch('/api/fitness/stats/overview'),
 		fetch('/api/fitness/goal'),
 		fetch('/api/fitness/stats/muscle-heatmap?weeks=8'),
 		fetch('/api/fitness/stats/nutrition'),
-		fetch('/api/fitness/measurements/latest')
+		fetch('/api/fitness/measurements/latest'),
+		fetch('/api/fitness/period').catch(() => null),
+		fetch('/api/fitness/period/shared').catch(() => null)
 	]);
 	const stats = await res.json();
 	const goal = goalRes.ok ? await goalRes.json() : { weeklyWorkouts: null, streak: 0 };
 	const muscleHeatmap = heatmapRes.ok ? await heatmapRes.json() : { weeks: [], totals: {}, muscleGroups: [] };
 	const nutritionStats = nutritionRes.ok ? await nutritionRes.json() : null;
 	const latest = latestRes.ok ? await latestRes.json() : {};
-	return { session, stats, goal, muscleHeatmap, nutritionStats, latest };
+	const periods = periodRes?.ok ? (await periodRes.json()).entries : [];
+	const sharedPeriods = sharedRes?.ok ? (await sharedRes.json()).shared : [];
+	return { session, stats, goal, muscleHeatmap, nutritionStats, latest, periods, sharedPeriods };
 };
diff --git a/src/routes/fitness/[stats=fitnessStats]/+page.svelte b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
index 3da2a0e4..3e08d4d6 100644
--- a/src/routes/fitness/[stats=fitnessStats]/+page.svelte
+++ b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
@@ -5,6 +5,7 @@
 	import MuscleHeatmap from '$lib/components/fitness/MuscleHeatmap.svelte';
 	import { Dumbbell, Route, Flame, Weight, Beef, Droplet, Wheat, Scale, Target, Info, Ruler } from '@lucide/svelte';
 	import FitnessStreakAura from '$lib/components/fitness/FitnessStreakAura.svelte';
+	import PeriodTracker from '$lib/components/fitness/PeriodTracker.svelte';
 	import { onMount } from 'svelte';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import { toast } from '$lib/js/toast.svelte';
@@ -429,6 +430,14 @@
 			</div>
 		</section>
 	{/if}
+
+	{#if data.goal?.sex === 'female'}
+		<PeriodTracker periods={data.periods ?? []} {lang} mode="projection" />
+	{/if}
+
+	{#each data.sharedPeriods ?? [] as shared (shared.owner)}
+		<PeriodTracker periods={shared.entries} {lang} readOnly ownerName={shared.owner} mode="projection" />
+	{/each}
 </div>
 
 <style>