refactor: resolve() internal links instead of plain hrefs

Type-checks every link against the real route tree. Caught a dead one: the
book page linked tags to /tag/{id}, a route that has never existed.

frontend/src/routes/(root)/settings/+layout.svelte

@@ -1,25 +1,19 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { resolve } from '$app/paths';
+
 	let { children } = $props();
 
+	// Route ids rather than paths: resolve() is called in the markup so it stays a
+	// direct call the lint rule can see, and the active check compares route ids.
+	// A pathname comparison would miss during SSR, where resolve() returns a
+	// relative path, and only settle after hydration.
 	const items = [
-		{
-			title: 'Account',
-			url: '/settings/account'
-		},
-		{
-			title: 'Appearance',
-			url: '/settings/appearance'
-		},
-		{
-			title: 'Libraries',
-			url: '/settings/libraries'
-		},
-		{
-			title: 'Devices',
-			url: '/settings/devices'
-		}
-	];
+		{ title: 'Account', routeId: '/(root)/settings/account' },
+		{ title: 'Appearance', routeId: '/(root)/settings/appearance' },
+		{ title: 'Libraries', routeId: '/(root)/settings/libraries' },
+		{ title: 'Devices', routeId: '/(root)/settings/devices' }
+	] as const;
 </script>
 
 <div class="flex h-[calc(100vh-var(--header-height)-2rem)] flex-col">
@@ -28,8 +22,9 @@
 		<nav class="flex w-48 shrink-0 flex-col gap-1">
 			{#each items as item}
 				<a
-					href={item.url}
-					class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page.url.pathname.endsWith(item.url)
+					href={resolve(item.routeId)}
+					class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page
+						.route.id === item.routeId
 						? 'bg-muted'
 						: 'text-muted-foreground'}"
 				>