New features

TODO.txt

@@ -0,0 +1,15 @@
+TODO: 
+
+Summary delen:
+- Sette ukentlig mål
+- Endre Period card
+- vise graf for hver øvelse
+
+Hjem skjerm:
+- flere små hurtigknapper
+- Bytte om mellom dager på homepage
+- Dark mode
+- Auth
+
+animasjoner
+gradienter overalt

src/lib/workout/exercises.ts

@@ -93,7 +93,7 @@ function formatTime(seconds: number): string {
 	const remainingSeconds = seconds % 60;
 
 	if (remainingSeconds === 0) return `${minutes} minutes`;
-	return `${minutes}m ${remainingSeconds}s`;
+	return `${minutes}m ${Math.round(remainingSeconds)}s`;
 }
 
 // Get strongly typed entries directly from exerciseConfigs

src/routes/+page.svelte

@@ -4,11 +4,11 @@
 </script>
 
 <div class="min-h-screen bg-gray-100 py-8">
-	<div class="container mx-auto px-4">
+	<div class="container mx-auto max-w-6xl px-4">
 		<h1 class="mb-8 text-center text-4xl font-bold text-gray-800">🏋️ Egentrening</h1>
 		<p class="mb-8 text-center text-gray-600">Track your daily fitness progress</p>
 
-		<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+		<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
 			<WorkoutDisplay />
 
 			<WorkoutLogger />

src/routes/summary/+page.svelte

@@ -11,13 +11,13 @@
 	const startPeriod = timePeriods[0];
 	let selectedPeriod = $state<TimePeriod>(startPeriod);
 
-	let workoutSummary = $state((await getWorkoutHistory(startPeriod.days)).data);
+	let workoutSummary = $derived((await getWorkoutHistory(selectedPeriod.days)).data);
 </script>
 
 <div class="mx-auto max-w-4xl p-6">
 	{@render header()}
 
-	<TimePeriodSelector bind:workoutSummary {timePeriods} bind:selectedPeriod />
+	<TimePeriodSelector {timePeriods} bind:selectedPeriod />
 
 	<svelte:boundary>
 		<OverviewCards {workoutSummary} {selectedPeriod} />

src/routes/summary/TimePeriodSelector.svelte

@@ -6,15 +6,15 @@
 	interface Props {
 		timePeriods: TimePeriod[];
 		selectedPeriod: TimePeriod;
-		workoutSummary: WorkoutDataSummary;
 	}
 
-	let { workoutSummary = $bindable(), timePeriods, selectedPeriod = $bindable() }: Props = $props();
+	let { timePeriods, selectedPeriod = $bindable() }: Props = $props();
 
 	async function onPeriodChange(period: TimePeriod) {
 		if (period.label === selectedPeriod.label) return;
-		selectedPeriod = period;
+		selectedPeriod.label = period.label;
-		workoutSummary = (await getWorkoutHistory(period.days)).data;
+		if (period.days === selectedPeriod.days) return;
+		selectedPeriod.days = period.days;
 	}
 </script>
 

src/routes/summary/summaryUtils.ts

@@ -27,22 +27,13 @@ function calculateActualDays(label: string): number {
 
 export type TimePeriod = {
 	label: string;
-	get days(): number;
+	days: number;
 };
 
-function createTimePeriod(label: string): TimePeriod {
-	return {
-		label,
-		get days() {
-			return calculateActualDays(this.label);
-		}
-	};
-}
-
 export const timePeriods: TimePeriod[] = [
-	createTimePeriod('This week'),
+	{ label: 'This week', days: calculateActualDays('This week') },
-	createTimePeriod('This month'),
+	{ label: 'This month', days: calculateActualDays('This month') },
-	createTimePeriod('This year')
+	{ label: 'This year', days: calculateActualDays('This year') }
 ];
 
 /**