chore(deps): update deps

package.json

@@ -17,42 +17,42 @@
 	"dependencies": {
 		"bits-ui": "^0.20.1",
 		"class-variance-authority": "^0.7.0",
-		"clsx": "^2.1.0",
+		"clsx": "^2.1.1",
 		"formsnap": "^0.5.1",
 		"lucide-svelte": "^0.363.0",
-		"mdsvex": "^0.11.0",
-		"mode-watcher": "^0.3.0",
+		"mdsvex": "^0.11.2",
+		"mode-watcher": "^0.3.1",
 		"svelte-boring-avatars": "^1.2.6",
-		"svelte-sonner": "^0.3.19",
-		"tailwind-merge": "^2.2.2",
+		"svelte-sonner": "^0.3.28",
+		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1",
-		"vaul-svelte": "^0.3.0"
+		"vaul-svelte": "^0.3.2"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.42.1",
-		"@sveltejs/adapter-node": "^5.0.1",
-		"@sveltejs/kit": "^2.5.4",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@tailwindcss/typography": "^0.5.10",
-		"@typescript-eslint/eslint-plugin": "^7.3.1",
-		"@typescript-eslint/parser": "^7.3.1",
-		"autoprefixer": "^10.4.19",
-		"boring-avatars": "^1.10.1",
-		"eslint": "^8.57.0",
+		"@playwright/test": "^1.47.1",
+		"@sveltejs/adapter-node": "^5.2.3",
+		"@sveltejs/kit": "^2.5.28",
+		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@tailwindcss/typography": "^0.5.15",
+		"@typescript-eslint/eslint-plugin": "^7.18.0",
+		"@typescript-eslint/parser": "^7.18.0",
+		"autoprefixer": "^10.4.20",
+		"boring-avatars": "^1.11.2",
+		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"postcss": "^8.4.38",
-		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.2",
-		"prettier-plugin-tailwindcss": "^0.5.12",
-		"svelte": "^4.2.12",
-		"svelte-check": "^3.6.8",
-		"sveltekit-superforms": "^2.11.0",
-		"tailwindcss": "^3.4.1",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.3",
-		"vite": "^5.2.6",
-		"vitest": "^1.4.0",
-		"zod": "^3.22.4"
+		"eslint-plugin-svelte": "^2.44.0",
+		"postcss": "^8.4.47",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.5.14",
+		"svelte": "^4.2.19",
+		"svelte-check": "^3.8.6",
+		"sveltekit-superforms": "^2.18.1",
+		"tailwindcss": "^3.4.12",
+		"tslib": "^2.7.0",
+		"typescript": "^5.6.2",
+		"vite": "^5.4.6",
+		"vitest": "^1.6.0",
+		"zod": "^3.23.8"
 	}
 }

src/hooks.client.ts

@@ -0,0 +1,12 @@
+import type { HandleClientError } from "@sveltejs/kit";
+
+export const handleError: HandleClientError = ({ error, status }) => {
+  const errorId = crypto.randomUUID();
+
+  console.error(`Client - Error ID: ${errorId} - Status: ${status} - ${error}`);
+
+  return {
+    message: 'Whoops!',
+    errorId,
+  };
+};

src/hooks.server.ts

@@ -5,12 +5,11 @@ import { API_URL } from '$env/static/private';
 import type { User } from '$lib/types';
 
 export const handle: Handle = async ({ event, resolve }) => {
-
 	const session = event.cookies.get('session');
 
 	if (!session) {
 		event.locals.user = undefined;
-		return resolve(event);
+		return await resolve(event);
 	}
 
 	const res = await fetch(`${API_URL}/player/`, {
@@ -22,7 +21,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (!res.ok) {
 		event.locals.user = undefined;
 		event.cookies.delete('session', { path: '/' });
-		return resolve(event);
+		return await resolve(event);
 	}
 
 	try {
@@ -33,11 +32,10 @@ export const handle: Handle = async ({ event, resolve }) => {
 		event.cookies.delete('session', { path: '/' });
 	}
 
-	return resolve(event);
+	return await resolve(event);
 };
 
-export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookies } }) => {
-
+export const handleFetch: HandleFetch = ({ request, fetch, event: { cookies } }) => {
 	const session = cookies.get('session');
 
 	if (!session) {
@@ -53,10 +51,10 @@ export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookie
 	return fetch(request);
 }
 
-export const handleError: HandleServerError = async ({ error, status }) => {
+export const handleError: HandleServerError = ({ error, status }) => {
 	const errorId = crypto.randomUUID();
 
-	console.error(`Error ID: ${errorId} - Status: ${status} - ${error}`);
+	console.error(`Server - Error ID: ${errorId} - Status: ${status} - ${error}`);
 
 	return {
 		message: 'Whoops!',

src/lib/components/ui/sonner/sonner.svelte

@@ -7,7 +7,7 @@
 
 <Sonner
 	theme={$mode}
-	class="toaster group"
+	class="toaster group top-24"
 	toastOptions={{
 		classes: {
 			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",

src/routes/(app)/+layout.svelte

@@ -18,8 +18,8 @@
 				class="flex w-full flex-1 transform flex-col overflow-y-auto p-4 duration-300 ease-in-out"
 			>
 				<slot />
-				<Toaster position="top-right" />
 			</div>
+			<Toaster position="top-right" />
 		</div>
 	</div>
 </div>

src/routes/(app)/chapters/[chapterId=id]/+page.svelte

@@ -19,11 +19,11 @@
 		difficultyList?: string;
 	};
 
-	let name = '';
+	let name: string = '';
 	let themeList: string[] = [];
 	let difficultyList: string[] = [];
 
-	const difficulties = data.chapter?.puzzles?.reduce((acc, puzzle) => {
+	const difficulties = data.chapter?.puzzles?.reduce((acc: Record<string, string>, puzzle) => {
 		const tag = puzzle.tags?.find((tag) =>
 			['easy', 'medium', 'hard'].includes(tag.name.toLowerCase())
 		);
@@ -35,7 +35,7 @@
 		return acc;
 	}, {}) as Record<string, string>;
 
-	const themes = data.chapter?.puzzles?.reduce((acc, puzzle) => {
+	const themes = data.chapter?.puzzles?.reduce((acc: Record<string, string>, puzzle) => {
 		puzzle.tags?.forEach((tag) => {
 			if (!['easy', 'medium', 'hard'].includes(tag.name.toLowerCase())) {
 				acc[tag.name] = tag.name.toLowerCase();
@@ -64,7 +64,7 @@
 
 	export const snapshot: Snapshot<Filters> = {
 		capture: () => ({
-			name,
+			name: name,
 			themeList: themeList.length ? themeList.join(',') : '',
 			difficultyList: difficultyList.length ? difficultyList.join(',') : ''
 		}),
@@ -102,48 +102,52 @@
 			{/if}
 		</div>
 	</header>
-	<div class="flex flex-col md:flex-row gap-2">
+	<div class="flex flex-col gap-2 md:flex-row">
 		<Input bind:value={name} placeholder="Rechercher un puzzle" />
-		<Select.Root
-			multiple
-			selected={themeList.map((theme) => ({ label: theme, value: theme }))}
-			onSelectedChange={(v) => {
-				if (v) {
-					themeList = v.map((item) => item.value);
-				} else {
-					themeList = [];
-				}
-			}}
-		>
-			<Select.Trigger class="md:w-[180px]">
-				<Select.Value placeholder="Thème" />
-			</Select.Trigger>
-			<Select.Content>
-				{#each Object.entries(themes) as [key, value]}
-					<Select.Item {value}>{key}</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
-		<Select.Root
-			multiple
-			selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
-			onSelectedChange={(v) => {
-				if (v) {
-					difficultyList = v.map((item) => item.value);
-				} else {
-					difficultyList = [];
-				}
-			}}
-		>
-			<Select.Trigger class="md:w-[180px]">
-				<Select.Value placeholder="Difficulté" />
-			</Select.Trigger>
-			<Select.Content>
-				{#each Object.entries(difficulties) as [key, value]}
-					<Select.Item {value}>{key}</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
+		{#if Object.keys(themes).length}
+			<Select.Root
+				multiple
+				selected={themeList.map((theme) => ({ label: theme, value: theme }))}
+				onSelectedChange={(v) => {
+					if (v) {
+						themeList = v.map((item) => item.value);
+					} else {
+						themeList = [];
+					}
+				}}
+			>
+				<Select.Trigger class="md:w-[180px]">
+					<Select.Value placeholder="Thème" />
+				</Select.Trigger>
+				<Select.Content>
+					{#each Object.entries(themes) as [key, value]}
+						<Select.Item {value}>{key}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		{/if}
+		{#if Object.keys(difficulties).length}
+			<Select.Root
+				multiple
+				selected={difficultyList.map((difficulty) => ({ label: difficulty, value: difficulty }))}
+				onSelectedChange={(v) => {
+					if (v) {
+						difficultyList = v.map((item) => item.value);
+					} else {
+						difficultyList = [];
+					}
+				}}
+			>
+				<Select.Trigger class="md:w-[180px]">
+					<Select.Value placeholder="Difficulté" />
+				</Select.Trigger>
+				<Select.Content>
+					{#each Object.entries(difficulties) as [key, value]}
+						<Select.Item {value}>{key}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		{/if}
 	</div>
 	<ul class="flex flex-col gap-2">
 		{#if !filteredPuzzles.length}

src/routes/(seo)/robots.txt/+server.ts

@@ -1,7 +1,6 @@
-import type { RequestHandler } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
 
 export const GET: RequestHandler = async () => {
-
   const entries = [
     'User-agent: *',
     'Disallow: /',

src/routes/+error.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+	import { page } from '$app/stores';
 
-	import Button from '$lib/components/ui/button/button.svelte';
+	import { Button } from '$lib/components/ui/button';
 </script>
 
 <div class="flex min-h-screen items-center justify-center">
-	<div class="text-center">
+	<div class="flex flex-col gap-4 text-center">
 		<h1 class="text-6xl font-bold text-red-500">Oops!</h1>
-		<p class="mt-4 text-xl">Apparement tu as navigué en eau trouble...</p>
-		<Button class="mt-4" href="/">Retour au port</Button>
-		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.message}</p>
-		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.errorId}</p>
+		<p class="text-xl">Apparement tu as navigué en eau trouble...</p>
+		<Button href="/">Retour au port</Button>
+		<span class="text-xs text-muted-foreground">Error ID: {$page.error?.errorId}</span>
 	</div>
 </div>