Allow granular routine frequencies like 5/2w

3 files changed, 28 insertions, 37 deletions

diff --git a/src/routes/projects/[id]/+page.server.ts b/src/routes/projects/[id]/+page.server.ts
index 3321bcd..83d7571 100644
--- a/src/routes/projects/[id]/+page.server.ts
+++ b/src/routes/projects/[id]/+page.server.ts
@@ -9,11 +9,8 @@ import {
 	loadArchived,
 } from '$lib/server/services/routines';
 import { completeRoutineAction } from '$lib/server/services/routine-actions';
-import {
-	numericId,
-	parseFormString,
-	parseFrequencyDays,
-} from '$lib/server/services/validation';
+import { numericId, parseFormString } from '$lib/server/services/validation';
+import { Frequency } from '$lib/shared/frequency';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ params }) => {
@@ -44,7 +41,7 @@ export const actions: Actions = {
 			await add(
 				numericId(params.id),
 				name,
-				parseFrequencyDays(data.get('frequencyDays')),
+				Frequency.parse(data.get('frequency')?.toString() ?? '').toSpec(),
 			);
 		} catch {
 			return fail(400, { error: 'Fréquence invalide' });
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 7d9a146..f93e018 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -6,11 +6,8 @@
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Row from '$lib/components/Row.svelte';
-	import {
-		formatFrequency,
-		parseIntervalToDays,
-		type RoutineState,
-	} from '$lib/shared/routine-metrics';
+	import type { RoutineState } from '$lib/shared/routine-metrics';
+	import { Frequency } from '$lib/shared/frequency';
 	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	import { formatDayMonth } from '$lib/shared/temporal';
 	import { filterByName } from '$lib/shared/filter-items';
@@ -20,7 +17,7 @@
 	let name = $state('');
 	let frequency = $state('');
 
-	const frequencyDays = $derived(parseIntervalToDays(frequency));
+	const freq = $derived(Frequency.safeParse(frequency));
 
 	let showArchived = $state(false);
 	let archiveFilter = $state('');
@@ -83,25 +80,25 @@
 		/>
 		<input
 			class="form-input frequency-input"
-			class:input-invalid={frequency !== '' && frequencyDays === null}
+			class:input-invalid={frequency !== '' && freq === null}
 			type="text"
-			name="frequencyDays"
+			name="frequency"
 			bind:value={frequency}
-			placeholder="2w"
+			placeholder="2w, 5/2w"
 			autocomplete="off"
-			aria-label="Intervalle (ex: 1d, 2w, 3m)"
+			aria-label="Fréquence (ex : 2w, 5/2w)"
 		/>
 		<Button
 			variant="accent"
-			disabled={!name.trim() || frequencyDays === null}
+			disabled={!name.trim() || freq === null}
 			ariaLabel="Ajouter"
 		>
 			+
 		</Button>
 	</form>
 
-	{#if frequency !== '' && frequencyDays === null}
-		<p class="error">Intervalle invalide — ex : 1d, 2w, 3m, 1y</p>
+	{#if frequency !== '' && freq === null}
+		<p class="error">Fréquence invalide — ex : 1d, 2w, 5/2w</p>
 	{/if}
 
 	{#if form?.error}
@@ -136,7 +133,7 @@
 						>{routine.name}</a
 					>
 					<span class="routine-meta">
-						{formatFrequency(routine.frequencyDays)}
+						{Frequency.parse(routine.frequency).format()}
 						{#if routine.lastDoneAt}
 							· fait le {formatDayMonth(routine.lastDoneAt)}
 						{:else}
@@ -184,7 +181,7 @@
 								>{routine.name}</a
 							>
 							<span class="archived-date">
-								{formatFrequency(routine.frequencyDays)} · archivée le
+								{Frequency.parse(routine.frequency).format()} · archivée le
 								{formatDayMonth(routine.archivedAt)}
 							</span>
 						</Row>
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index 359fd5b..bd74b90 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -5,11 +5,8 @@
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Row from '$lib/components/Row.svelte';
-	import {
-		formatFrequency,
-		parseIntervalToDays,
-		computeHealthSeries,
-	} from '$lib/shared/routine-metrics';
+	import { computeHealthSeries } from '$lib/shared/routine-metrics';
+	import { Frequency } from '$lib/shared/frequency';
 	import { formatDayMonth, formatDayMonthYear } from '$lib/shared/temporal';
 	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	let { data, form } = $props();
@@ -31,7 +28,7 @@
 	});
 	$effect(() => {
 		name = data.routine.name;
-		frequency = `${data.routine.frequencyDays}d`;
+		frequency = data.routine.frequency;
 		description = data.routine.description;
 	});
 	$effect(() => {
@@ -41,7 +38,7 @@
 			return () => clearTimeout(t);
 		}
 	});
-	const frequencyDays = $derived(parseIntervalToDays(frequency));
+	const freq = $derived(Frequency.safeParse(frequency));
 	const frozenAt = $derived(
 		data.routine.archived
 			? Temporal.Instant.from(data.routine.archivedAt ?? data.routine.createdAt)
@@ -99,16 +96,16 @@
 				/>
 			</label>
 			<label>
-				<span class="form-label">Intervalle</span>
+				<span class="form-label">Fréquence</span>
 				<input
 					class="form-input frequency"
-					class:input-invalid={frequency !== '' && frequencyDays === null}
+					class:input-invalid={frequency !== '' && freq === null}
 					type="text"
-					name="frequencyDays"
+					name="frequency"
 					bind:value={frequency}
-					placeholder="2w"
+					placeholder="2w, 5/2w"
 					autocomplete="off"
-					aria-label="Intervalle (ex: 1d, 2w, 3m)"
+					aria-label="Fréquence (ex : 2w, 5/2w)"
 				/>
 			</label>
 			<label>
@@ -122,11 +119,11 @@
 					autocomplete="off"
 				></textarea>
 			</label>
-			{#if frequency !== '' && frequencyDays === null}
-				<p class="error">Intervalle invalide — ex : 1d, 2w, 3m, 1y</p>
+			{#if frequency !== '' && freq === null}
+				<p class="error">Fréquence invalide — ex : 1d, 2w, 5/2w</p>
 			{/if}
 			<Button
-				disabled={!name.trim() || frequencyDays === null}
+				disabled={!name.trim() || freq === null}
 				style="position: relative; padding-right: 2.75rem;"
 			>
 				<span>Enregistrer</span>
@@ -151,7 +148,7 @@
 					overdueDays={data.state.overdueDays}
 				/>
 				<span class="chart-meta">
-					{formatFrequency(data.routine.frequencyDays)}
+					{Frequency.parse(data.routine.frequency).format()}
 					{#if data.state.lastDoneAt}
 						· fait le {formatDayMonth(data.state.lastDoneAt)}
 					{:else}