refactor: move duplicates into library settings

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

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { resolve } from '$app/paths';
+	import { getLibraryState } from '$lib/state/library.svelte';
 
 	let { children } = $props();
 
+	// Set in (root)/+layout.svelte, above this group, so listing the libraries in
+	// the nav needs no load function.
+	const libraryState = getLibraryState();
+
 	// 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
@@ -14,12 +19,28 @@
 		{ title: 'Libraries', routeId: '/(root)/settings/libraries' },
 		{ title: 'Devices', routeId: '/(root)/settings/devices' }
 	] as const;
+
+	/**
+	 * Whether a nested library item is the one being looked at.
+	 *
+	 * Both halves are needed: the route id alone is shared by every library, so
+	 * matching on it would light all of them up at once.
+	 */
+	function isActiveLibrary(id: number) {
+		return (
+			page.route.id?.startsWith('/(root)/settings/libraries/[libraryId]') === true &&
+			page.params.libraryId === String(id)
+		);
+	}
 </script>
 
 <div class="flex h-[calc(100vh-var(--header-height)-2rem)] flex-col">
 	<h1 class="font-serif text-xl font-medium tracking-tight">Settings</h1>
 	<div class="mt-6 flex flex-1 gap-8 overflow-hidden">
-		<nav class="flex w-48 shrink-0 flex-col gap-1">
+		<!-- Scrolls on its own now that it holds a list that grows with the number
+		     of libraries; the row above it is overflow-hidden, so without this a
+		     long list is clipped rather than reachable. -->
+		<nav class="flex w-48 shrink-0 flex-col gap-1 overflow-y-auto">
 			{#each items as item}
 				<a
 					href={resolve(item.routeId)}
@@ -30,6 +51,26 @@
 				>
 					{item.title}
 				</a>
+
+				<!-- Libraries is the one item with children: a library's own settings
+				     hang off it, so every library and every section it has stay one
+				     click from here. -->
+				{#if item.routeId === '/(root)/settings/libraries'}
+					{#each libraryState.libraries as library (library.id)}
+						<a
+							href={resolve('/(root)/settings/libraries/[libraryId]/duplicates', {
+								libraryId: String(library.id)
+							})}
+							class="ml-3 truncate rounded-md border-l px-3 py-1.5 text-sm transition-colors hover:bg-muted {isActiveLibrary(
+								library.id
+							)
+								? 'bg-muted font-medium'
+								: 'text-muted-foreground'}"
+						>
+							{library.name}
+						</a>
+					{/each}
+				{/if}
 			{/each}
 		</nav>
 		<div class="flex-1 overflow-auto">{@render children()}</div>