From bd2f982c489b15ce1165c051fdedf35af979f784 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Tue, 8 Sep 2026 17:06:51 +0200
Subject: Migrate date handling from Date to Temporal API

Routine scheduling, health series, service stamps, session expiry, and
date formatting move to native Temporal (Instant / ZonedDateTime in
UTC), with ISO strings kept at DB and chart boundaries. Ambient types
in src/temporal-ambient.d.ts cover the native runtime; no polyfill.
Observable behavior and stored formats are unchanged.
---
 src/lib/components/HealthChart.svelte | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/lib/components/HealthChart.svelte')

diff --git a/src/lib/components/HealthChart.svelte b/src/lib/components/HealthChart.svelte
index f1f87ed..c6121e3 100644
--- a/src/lib/components/HealthChart.svelte
+++ b/src/lib/components/HealthChart.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { AreaChart, Area, Points, Text } from 'layerchart';
 	import type { HealthPoint } from '$lib/shared/routine-metrics';
+	import { formatDayMonth } from '$lib/shared/temporal';
 
 	let {
 		series,
@@ -12,11 +13,6 @@
 		ariaLabel: string;
 	} = $props();
 
-	const dateFormatter = new Intl.DateTimeFormat('fr-FR', {
-		day: 'numeric',
-		month: 'short',
-	});
-
 	const data = $derived(
 		series.map((p) => ({ date: new Date(p.at), health: p.health })),
 	);
@@ -25,24 +21,28 @@
 	);
 
 	// Up to 5 x ticks spread across the series, skipping repeats (two samples
-	// the same day would print the same label twice).
+	// the same day would print the same label twice). Dates stay Date objects
+	// because LayerChart's time scale consumes them; labels go through Temporal.
 	const xTicks = $derived.by(() => {
 		if (data.length < 2) return undefined;
 		const step = Math.max(1, Math.floor((data.length - 1) / 4));
-		const ticks: Date[] = [];
+		const dayKey = (date: Date): string =>
+			Temporal.Instant.fromEpochMilliseconds(date.getTime())
+				.toString()
+				.slice(0, 10);
+		const values: Date[] = [];
 		for (let i = 0; i < data.length; i += step) {
 			const last = i + step >= data.length;
 			const date = last ? data[data.length - 1].date : data[i].date;
-			const label = dateFormatter.format(date);
 			if (
-				ticks.length > 0 &&
-				dateFormatter.format(ticks[ticks.length - 1]) === label
+				values.length > 0 &&
+				dayKey(values[values.length - 1]) === dayKey(date)
 			)
 				continue;
-			ticks.push(date);
+			values.push(date);
 			if (last) break;
 		}
-		return ticks;
+		return values;
 	});
 </script>
 
@@ -60,7 +60,7 @@
 			props={{
 				xAxis: {
 					ticks: xTicks,
-					format: (d: Date) => dateFormatter.format(d),
+					format: (d: Date) => formatDayMonth(d.toISOString()),
 					tickLabel: xTickLabel,
 				},
 				yAxis: { ticks: [25, 50, 75, 100] },
-- 
cgit v1.3