use the new endpoint with new names and standards

src/routes/(components)/ActiveMesocycleCard.svelte

@@ -1,43 +1,45 @@
 <script lang="ts">
 	import { Badge } from '$lib/components/ui/badge';
 	import { Progress } from '$lib/components/ui/progress';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { arraySum } from '$lib/utils/global';
+	import { onMount } from 'svelte';
 
-	export let activeMesocycle: WithSID<Mesocycle>;
-	export let activeExerciseSplit: WithSID<ExerciseSplit> | 'loading' | 'error';
+	export let activeMesocycleWithSplitDetails: WithSID<Mesocycle> & BasicExerciseSplitDetails;
 	let completedDays = 0;
-	let totalDaysInMesocycle = 100;
+	let totalDaysInMesocycle =
+		activeMesocycleWithSplitDetails.exerciseSplitSchedule.length *
+		arraySum(activeMesocycleWithSplitDetails.RIRProgression);
 
-	$: if (typeof activeExerciseSplit !== 'string') {
-		completedDays = activeMesocycle.workoutIds.length;
-		totalDaysInMesocycle =
-			activeExerciseSplit.splitDays.length * arraySum(activeMesocycle.RIRProgression);
-	}
+	onMount(() => {
+		const timer = setTimeout(
+			() => (completedDays = activeMesocycleWithSplitDetails.workoutIds.length),
+			500
+		);
+		return () => clearTimeout(timer);
+	});
 </script>
 
 <Button variant="outline" class="h-fit p-2 hover:border-foreground hover:bg-background">
-	<a class="flex w-full flex-col gap-1" href="/mesocycles/view/{activeMesocycle._id}">
+	<a
+		class="flex w-full flex-col gap-1"
+		href="/mesocycles/view/{activeMesocycleWithSplitDetails._id}"
+	>
 		<div class="flex items-center justify-between">
-			<span class="text-base font-medium">{activeMesocycle.name}</span>
+			<span class="text-base font-medium">{activeMesocycleWithSplitDetails.name}</span>
 			<Badge>
-				Cycle {(activeMesocycle.workoutIds.length / activeMesocycle.splitLength + 1).toFixed(0)}
+				Cycle {(
+					activeMesocycleWithSplitDetails.workoutIds.length /
+						activeMesocycleWithSplitDetails.exerciseSplitSchedule.length +
+					1
+				).toFixed(0)}
 			</Badge>
 		</div>
 		<div class="flex items-center justify-between gap-2">
 			<Progress value={completedDays} max={totalDaysInMesocycle} class="h-2 bg-secondary" />
-			{#if activeExerciseSplit === 'loading'}
-				<Skeleton class="h-5 basis-32" />
-			{:else if activeExerciseSplit === 'error'}
-				<span class="basis-32 text-sm text-muted-foreground">
-					{activeMesocycle.workoutIds.length}/?
-				</span>
-			{:else}
-				<span class="basis-32 text-sm text-muted-foreground">
-					{activeMesocycle.workoutIds.length}/{totalDaysInMesocycle} days done
-				</span>
-			{/if}
+			<span class="basis-32 text-sm text-muted-foreground">
+				{activeMesocycleWithSplitDetails.workoutIds.length}/{totalDaysInMesocycle} days done
+			</span>
 		</div>
 	</a>
 </Button>

src/routes/(components)/StartWorkoutButton.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-	export let activeMesocycle: WithSID<Mesocycle>;
-	export let activeExerciseSplit: WithSID<ExerciseSplit>;
-
+	export let activeMesocycleWithSplitDetails: WithSID<Mesocycle> & BasicExerciseSplitDetails;
 	import Button from '$lib/components/ui/button/button.svelte';
 	import ProceedSymbol from 'virtual:icons/lucide/circle-arrow-right';
 
 	const todaysDay =
-		activeExerciseSplit.splitDays[
-			Math.floor(activeMesocycle.workoutIds.length / activeMesocycle.splitLength)
+		activeMesocycleWithSplitDetails.exerciseSplitSchedule[
+			Math.floor(
+				activeMesocycleWithSplitDetails.workoutIds.length /
+					activeMesocycleWithSplitDetails.exerciseSplitSchedule.length
+			)
 		];
 </script>
 
 <div class="flex gap-1">
 	<div class="text-box grow">
-		<span class="font-semibold">{todaysDay?.name}</span>
+		<span class="font-semibold">{todaysDay}</span>
 	</div>
 	<Button size="icon" aria-label="start-workout">
 		<a href="/workouts/new/start">

src/routes/+layout.server.ts

@@ -1,16 +1,16 @@
 export const load = async ({ locals, fetch }) => {
 	const session = await locals.auth();
 
-	const activeMesocyclePromise = (async () => {
-		const response = await fetch('/api/mesocycles/active');
+	const activeMesocycleWithSplitDetailsPromise = (async () => {
+		const response = await fetch('/api/mesocycles/active?withBasicSplitDetails');
 		if (response.status === 200) {
-			return (await response.json()) as WithSID<Mesocycle>;
+			return (await response.json()) as WithSID<Mesocycle> & BasicExerciseSplitDetails;
 		} else if (response.status === 204) {
 			return undefined;
 		} else {
 			return { errorMessage: await response.text() };
 		}
 	})();
 
-	return { session, activeMesocyclePromise };
+	return { session, activeMesocycleWithSplitDetailsPromise };
 };

src/routes/+page.svelte

@@ -10,27 +10,19 @@
 	import { toast } from 'svelte-sonner';
 	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
 
-	let activeMesocycle: WithSID<Mesocycle> | 'loading' | 'error' | undefined = 'loading';
-	let activeExerciseSplit: WithSID<ExerciseSplit> | 'loading' | 'error' = 'loading';
+	let activeMesocycleWithSplitDetails:
+		| (WithSID<Mesocycle> & BasicExerciseSplitDetails)
+		| 'loading'
+		| 'error'
+		| undefined = 'loading';
 
 	onMount(async () => {
-		const response = await data.activeMesocyclePromise;
-		if (response === undefined) activeMesocycle = undefined;
+		const response = await data.activeMesocycleWithSplitDetailsPromise;
+		if (response === undefined) activeMesocycleWithSplitDetails = undefined;
 		else if ('errorMessage' in response) {
 			toast.error('Error', { description: response.errorMessage });
-			activeMesocycle = 'error';
-		} else {
-			activeMesocycle = response;
-			const exerciseSplitResponse = await fetch(
-				`/api/exercise-splits/${activeMesocycle.exerciseSplitId}`
-			);
-			if (exerciseSplitResponse.ok) {
-				activeExerciseSplit = (await exerciseSplitResponse.json()) as WithSID<ExerciseSplit>;
-			} else {
-				toast.error('Error', { description: await exerciseSplitResponse.text() });
-				activeExerciseSplit = 'error';
-			}
-		}
+			activeMesocycleWithSplitDetails = 'error';
+		} else activeMesocycleWithSplitDetails = response;
 	});
 </script>
 
@@ -40,26 +32,26 @@
 	<span class="text-sm font-medium text-muted-foreground">Active mesocycle</span>
 	<Separator class="w-px grow" />
 </div>
-{#if activeMesocycle === 'loading'}
+{#if activeMesocycleWithSplitDetails === 'loading'}
 	<Skeleton class="h-[66px] w-full" />
-{:else if activeMesocycle === 'error'}
+{:else if activeMesocycleWithSplitDetails === 'error'}
 	<div class="muted-text-box">An error occurred</div>
-{:else if activeMesocycle === undefined}
+{:else if activeMesocycleWithSplitDetails === undefined}
 	<CreateMesocycleButton />
 {:else}
-	<ActiveMesocycleCard {activeMesocycle} {activeExerciseSplit} />
+	<ActiveMesocycleCard {activeMesocycleWithSplitDetails} />
 {/if}
 
 <div class="mb-1 mt-4 flex items-center gap-2">
 	<span class="text-sm font-medium text-muted-foreground">Today's workout</span>
 	<Separator class="w-px grow" />
 </div>
-{#if activeMesocycle === 'loading' || activeExerciseSplit === 'loading'}
+{#if activeMesocycleWithSplitDetails === 'loading'}
 	<Skeleton class="h-[42px] w-full" />
-{:else if activeMesocycle === 'error' || activeExerciseSplit === 'error'}
+{:else if activeMesocycleWithSplitDetails === 'error'}
 	<div class="muted-text-box">An error occurred</div>
-{:else if activeMesocycle === undefined}
+{:else if activeMesocycleWithSplitDetails === undefined}
 	<CreateMesocycleButton />
 {:else}
-	<StartWorkoutButton {activeExerciseSplit} {activeMesocycle} />
+	<StartWorkoutButton {activeMesocycleWithSplitDetails} />
 {/if}

src/routes/mesocycles/+page.server.ts

@@ -7,7 +7,7 @@ export const load = async ({ fetch, url, parent }) => {
 	if (searchString) fetchURL += `&search=${searchString}`;
 	if (includeTotalCount) fetchURL += '&includeTotalCount';
 
-	const { activeMesocyclePromise } = await parent();
+	const { activeMesocycleWithSplitDetailsPromise } = await parent();
 	const mesocyclesPromise = (async () => {
 		const response = await fetch(fetchURL);
 		if (response.ok)
@@ -18,5 +18,5 @@ export const load = async ({ fetch, url, parent }) => {
 		else return { errorMessage: await response.text() };
 	})();
 
-	return { mesocyclesPromise, activeMesocyclePromise };
+	return { mesocyclesPromise, activeMesocycleWithSplitDetailsPromise };
 };

src/routes/mesocycles/+page.svelte

@@ -24,7 +24,7 @@
 	let searchString = $page.url.searchParams.get('search') ?? '';
 
 	onMount(() => {
-		data.activeMesocyclePromise.then((response) => {
+		data.activeMesocycleWithSplitDetailsPromise.then((response) => {
 			if (response === undefined) activeMesocycle = undefined;
 			else if ('errorMessage' in response) {
 				toast.error('Error', { description: response.errorMessage });

src/routes/mesocycles/[mode]/mesocycleStore.ts

@@ -2,10 +2,7 @@ import { muscleGroups } from '$lib/constants';
 import { persisted } from 'svelte-persisted-store';
 import type { Writable } from 'svelte/store';
 
-type InProgressMesocycle = OptionalProps<
-	Mesocycle,
-	'exerciseSplitId' | 'RIRProgression' | 'splitLength'
->;
+type InProgressMesocycle = OptionalProps<Mesocycle, 'exerciseSplitId' | 'RIRProgression'>;
 
 const defaultMesocycle: InProgressMesocycle = {
 	name: '',