Render unknown URLs inside the app shell and move ListeningStats to the domain types

Add catch-all routes so unknown pages 404 inside the (app) layout and unknown
/api URLs return a JSON 404 instead of redirecting to the login page. Restore
the full root error page.

web-player/src/lib/server/mappers.ts

@@ -1,5 +1,5 @@
 import type { components } from '$lib/api/schema';
-import type { Album, LikedTrack, Mix, Paged, Playlist, Track } from '$lib/types';
+import type { Album, LikedTrack, ListeningStats, Mix, Paged, Playlist, Track } from '$lib/types';
 
 type TrackDto = components['schemas']['TrackApplicationResponse'];
 type AlbumDto = components['schemas']['AlbumApplicationResponse'];
@@ -84,12 +84,6 @@ export function toPlaylist(dto: PlaylistDto): Playlist {
 
 type ListeningStatsDto = components['schemas']['ListeningStatsResponse'];
 
-export interface ListeningStats {
-	tracksThisWeek: number;
-	secondsThisWeek: number;
-	streakDays: number;
-}
-
 export function toCount(value: number | string | null | undefined): number {
 	return Number(value ?? 0) || 0;
 }

web-player/src/lib/types.ts

@@ -51,6 +51,12 @@ export interface Mix {
 	tracks: Track[];
 }
 
+export interface ListeningStats {
+	tracksThisWeek: number;
+	secondsThisWeek: number;
+	streakDays: number;
+}
+
 export interface Paged<T> {
 	items: T[];
 	pageNumber: number;

web-player/src/routes/(app)/[...rest]/+page.server.ts

@@ -0,0 +1,6 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = () => {
+	error(404, 'Página no encontrada');
+};

web-player/src/routes/+error.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 </script>
 
-<div class="min-h-screen bg-bg text-fg antialiased">
-	<div class="mx-auto my-[14vh] max-w-prose-sm text-center">
+<div class="min-h-screen bg-bg px-6 text-fg antialiased">
+	<div class="animate-enter mx-auto my-[14vh] max-w-prose-sm text-center">
 		<h1 class="mb-2.5 text-display-3">
 			{page.status === 404 ? 'Página no encontrada' : 'Algo salió mal'}
 		</h1>
-		<a href="/" class="text-body text-fg-2 underline">Volver al inicio</a>
+		<p class="mb-6.5 text-body text-fg-2">
+			{page.status === 404
+				? 'Comprueba el enlace o vuelve al inicio.'
+				: 'No se pudo cargar la página. Inténtalo de nuevo en unos momentos.'}
+		</p>
+		<Button href="/" variant="secondary">Volver al inicio</Button>
 	</div>
 </div>

web-player/src/routes/api/[...rest]/+server.ts

@@ -0,0 +1,4 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const fallback: RequestHandler = () => json({ message: 'No encontrado.' }, { status: 404 });