Fix code smells

LaDOSE.Src/LaDOSE.WebApp/src/routes/games/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { deleteGame, listGames, saveGame, searchSmashGames } from '$lib/api/games';
-	import { toErrorMessage } from '$lib/api/errors';
+	import { errorReporter } from '$lib/api/errors';
 	import type { GameDTO } from '$lib/api/schema-helpers';
-	import { blankDraft, nextOrder, toDraft, toDto, type Draft } from '$lib/games/draft';
-	import { session } from '$lib/stores/session.svelte';
+	import { requireSession } from '$lib/auth/guard.svelte';
+	import { blankDraft, isDirty, nextOrder, toDraft, toDto, type Draft } from '$lib/games/draft';
 	import {
 		alertError,
 		alertNotice,
@@ -21,7 +20,8 @@
 
 	let games = $state<GameDTO[]>([]);
 	let draft = $state<Draft>({ ...blankDraft });
-	let pristine = $state(JSON.stringify(blankDraft));
+	/** The draft as it was last loaded or saved; `dirty` compares against it. */
+	let pristine = $state<Draft>({ ...blankDraft });
 	let smashMatches = $state<GameDTO[] | null>(null);
 
 	let loading = $state(false);
@@ -33,30 +33,18 @@
 
 	const ordered = $derived([...games].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
 	const isNew = $derived(draft.id === 0);
-	const dirty = $derived(JSON.stringify(draft) !== pristine);
+	const dirty = $derived(isDirty(draft, pristine));
 	const canSave = $derived(draft.name.trim() !== '' && !saving);
 	/** The provider searches start.gg by name; the long name is the one that matches. */
 	const searchTerm = $derived(draft.longName.trim() || draft.name.trim());
 
-	let started = false;
-	$effect(() => {
-		if (!session.isLoggedIn) {
-			goto('/login', { replaceState: true });
-			return;
-		}
-		if (!started) {
-			started = true;
-			void refresh();
-		}
-	});
+	const guard = requireSession(() => void refresh());
 
-	function report(cause: unknown, fallback: string) {
-		error = toErrorMessage(cause, fallback);
-	}
+	const report = errorReporter((message) => (error = message));
 
 	function load(game: GameDTO) {
 		draft = toDraft(game);
-		pristine = JSON.stringify(draft);
+		pristine = { ...draft };
 		smashMatches = null;
 	}
 
@@ -78,7 +66,7 @@
 
 	function reset() {
 		draft = { ...blankDraft, order: nextOrder(games) };
-		pristine = JSON.stringify(draft);
+		pristine = { ...draft };
 		smashMatches = null;
 	}
 
@@ -160,6 +148,7 @@
 </svelte:head>
 
 <main id="main" class="mx-auto max-w-5xl px-4 py-10">
+	{#if guard.ready}
 	<header class="mb-8">
 		<h1 class="text-3xl font-semibold tracking-tight">Games</h1>
 		<p class="mt-1 text-sm text-muted">
@@ -349,4 +338,5 @@
 			</form>
 		</section>
 	</div>
+	{/if}
 </main>