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/eslint.config.js

@@ -29,6 +29,12 @@ export default defineConfig(
 			'no-undef': 'off'
 		}
 	},
+	{
+		// Generated shadcn components take href as a prop and cannot resolve it —
+		// that is the caller's job. Editing them here would be lost on regeneration.
+		files: ['src/lib/components/ui/**'],
+		rules: { 'svelte/no-navigation-without-resolve': 'off' }
+	},
 	{
 		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
 		languageOptions: {

frontend/src/lib/components/forms/books-upload.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import * as Field from '$lib/components/ui/field/index.js';
 	import { Button } from '$lib/components/ui/button';
@@ -36,8 +37,8 @@
 
 	const onUpload: FileDropZoneProps['onUpload'] = async (uploadedFiles) => {
 		// Rename files to use webkitRelativePath so directory structure is preserved through form submission
-		const renamedFiles = uploadedFiles.map(f =>
+		const renamedFiles = uploadedFiles.map(
-			new File([f], f.webkitRelativePath || f.name, { type: f.type })
+			(f) => new File([f], f.webkitRelativePath || f.name, { type: f.type })
 		);
 		uploadBooks.fields.files.set([...Array.from(files), ...renamedFiles]);
 		if (autoUploadOnDrop && files.length > 0) {
@@ -55,9 +56,12 @@
 		let libraryId = books.items[0].library_id;
 		libraryState.setActive(libraryId);
 		if (books.items.length === 1) {
-			goto(`/book/${books.items[0].id}`);
+			goto(resolve('/(root)/(library)/book/[bookId]', { bookId: String(books.items[0].id) }));
 		} else {
-			goto(`/library/${libraryId}/view?orderBy=created_at&sortOrder=desc`);
+			// The path is resolved; the query string is what the rule cannot see past.
+			const view = resolve('/(root)/(library)/library/[libraryId]/view', { libraryId: String(libraryId) });
+			// eslint-disable-next-line svelte/no-navigation-without-resolve
+			goto(`${view}?orderBy=created_at&sortOrder=desc`);
 		}
 	}
 </script>
@@ -88,8 +92,10 @@
 						}
 
 						// Update library book count
-						const count = uploadBooks.result.total
+						const count = uploadBooks.result.total;
-						libraryState.libraries.find(lib => uploadBooks.fields.library_id.value() == lib.id.toString())!.total += count
+						libraryState.libraries.find(
+							(lib) => uploadBooks.fields.library_id.value() == lib.id.toString()
+						)!.total += count;
 
 						// Reset the files field
 						uploadBooks.fields.files.set([]);

frontend/src/lib/components/layout/app-sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { Separator } from '$lib/components/ui/separator/index.js';
 
 	import ChitaiMark from '$lib/components/icons/chitai-mark.svelte';
@@ -27,7 +28,7 @@
 	// directly in the markup keeps it static.
 	const header = $derived({
 		title: 'chitai',
-		url: `/library/${libraryState.activeLibrary!.id}`
+		url: resolve('/(root)/(library)/library/[libraryId]', { libraryId: String(libraryState.activeLibrary!.id) })
 	});
 </script>
 
@@ -40,6 +41,8 @@
 		-->
 		<Sidebar.MenuButton class="mt-1 -ml-1.5">
 			{#snippet child({ props })}
+				<!-- header.url is built with resolve(); the rule cannot trace the variable. -->
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 				<a href={header.url} {...props}>
 					<ChitaiMark class="mr-3 size-7!" />
 					<span class="font-serif text-xl tracking-tight">{header.title}</span>

frontend/src/lib/components/layout/nav-main.svelte

@@ -1,118 +1,137 @@
 <script lang="ts">
-    import { page } from '$app/state';
+	import { resolve } from '$app/paths';
-    import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import { page } from '$app/state';
-    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
-    import { Badge } from "$lib/components/ui/badge/index.js";
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import { useSidebar } from '$lib/components/ui/sidebar/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
-    import { getBookshelfState } from '$lib/state/bookshelf.svelte';
+	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
-    import { getLibraryState } from '$lib/state/library.svelte';
+	import { getBookshelfState } from '$lib/state/bookshelf.svelte';
-    import { House, LibraryBig, Rows3, ChevronRightIcon } from '@lucide/svelte';
+	import { getLibraryState } from '$lib/state/library.svelte';
+	import { House, LibraryBig, Rows3, ChevronRightIcon } from '@lucide/svelte';
 
-    const libraryState = getLibraryState();
+	const libraryState = getLibraryState();
-    const bookshelfState = getBookshelfState();
+	const bookshelfState = getBookshelfState();
-    const sidebar = useSidebar();
+	const sidebar = useSidebar();
 
-    // Owned here so the collapsed rail can force it open when it expands the
+	// Owned here so the collapsed rail can force it open when it expands the
-    // sidebar. Previously open={isActive}, which was always false — the Shelves
+	// sidebar. Previously open={isActive}, which was always false — the Shelves
-    // item has no route of its own, so pathname never matched.
+	// item has no route of its own, so pathname never matched.
-    let shelvesOpen = $state(false);
+	let shelvesOpen = $state(false);
 
-    // Deliberately a plain const, not $derived. These objects hold component
+	// Deliberately a plain const, not $derived. These objects hold component
-    // references, and `<item.icon />` is a dynamic component — if the array were
+	// references, and `<item.icon />` is a dynamic component — if the array were
-    // rebuilt on every navigation the icons would remount, flashing and shifting
+	// rebuilt on every navigation the icons would remount, flashing and shifting
-    // layout. Only the url and active state need to be reactive, so they are
+	// layout. Only the url and active state need to be reactive, so they are
-    // computed per-item in the markup instead.
+	// computed per-item in the markup instead.
-    const items = [
+	//
-        { title: 'Home', icon: House, path: (id?: number) => `/library/${id}` },
+	// Active state is matched on route id rather than pathname. resolve() returns
-        { title: 'Library', icon: LibraryBig, path: (id?: number) => `/library/${id}/view` },
+	// an absolute path on the client but a relative one during SSR, so comparing
-        { title: 'Shelves', icon: Rows3, path: () => '#', shelves: [] }
+	// it to page.url.pathname would be false on the server and true after
-    ];
+	// hydration — the highlight would flash in.
+	const items = [
+		{
+			title: 'Home',
+			icon: House,
+			routeId: '/(root)/(library)/library/[libraryId]',
+			path: (id?: number) => resolve('/(root)/(library)/library/[libraryId]', { libraryId: String(id ?? '') })
+		},
+		{
+			title: 'Library',
+			icon: LibraryBig,
+			routeId: '/(root)/(library)/library/[libraryId]/view',
+			path: (id?: number) => resolve('/(root)/(library)/library/[libraryId]/view', { libraryId: String(id ?? '') })
+		},
+		{ title: 'Shelves', icon: Rows3, routeId: null, path: () => '#', shelves: [] }
+	];
 </script>
 
 {#snippet shelvesTrigger(item: { title: string; icon: typeof House })}
-    <item.icon class="scale-125" />
+	<item.icon class="scale-125" />
-    <span class="text-md ml-2">{item.title}</span>
+	<span class="text-md ml-2">{item.title}</span>
-    <ChevronRightIcon
+	<ChevronRightIcon
-        class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+		class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-    />
+	/>
 {/snippet}
 
 <Sidebar.Group>
-    <Sidebar.Menu>
+	<Sidebar.Menu>
-        {#each items as item (item.title)}
+		{#each items as item (item.title)}
-            {@const url = item.path(libraryState.activeLibrary?.id)}
+			{@const url = item.path(libraryState.activeLibrary?.id)}
-            {@const isActive = page.url.pathname === url}
+			{@const isActive = item.routeId !== null && page.route.id === item.routeId}
-            {#if 'shelves' in item}
+			{#if 'shelves' in item}
-                <Collapsible.Root bind:open={shelvesOpen} class="group/collapsible">
+				<Collapsible.Root bind:open={shelvesOpen} class="group/collapsible">
-                    {#snippet child({ props })}
+					{#snippet child({ props })}
-                        <Sidebar.MenuItem {...props}>
+						<Sidebar.MenuItem {...props}>
-                            {#if sidebar.state === 'collapsed'}
+							{#if sidebar.state === 'collapsed'}
-                                <!--
+								<!--
                                     Sidebar.MenuSub is group-data-[collapsible=icon]:hidden, so
                                     toggling in the rail opens a list nobody can see. Expand the
                                     sidebar and open the section instead of toggling.
                                 -->
-                                <Sidebar.MenuButton
+								<Sidebar.MenuButton
-                                    tooltipContent={item.title}
+									tooltipContent={item.title}
-                                    class="h-10"
+									class="h-10"
-                                    onclick={() => {
+									onclick={() => {
-                                        sidebar.setOpen(true);
+										sidebar.setOpen(true);
-                                        shelvesOpen = true;
+										shelvesOpen = true;
-                                    }}
+									}}
-                                >
+								>
-                                    {@render shelvesTrigger(item)}
+									{@render shelvesTrigger(item)}
-                                </Sidebar.MenuButton>
+								</Sidebar.MenuButton>
-                            {:else}
+							{:else}
-                                <Collapsible.Trigger>
+								<Collapsible.Trigger>
-                                    {#snippet child({ props })}
+									{#snippet child({ props })}
-                                        <Sidebar.MenuButton {...props} tooltipContent={item.title} class="h-10">
+										<Sidebar.MenuButton {...props} tooltipContent={item.title} class="h-10">
-                                            {@render shelvesTrigger(item)}
+											{@render shelvesTrigger(item)}
-                                        </Sidebar.MenuButton>
+										</Sidebar.MenuButton>
-                                    {/snippet}
+									{/snippet}
-                                </Collapsible.Trigger>
+								</Collapsible.Trigger>
-                            {/if}
+							{/if}
-                            <Collapsible.Content>
+							<Collapsible.Content>
-                                <Sidebar.MenuSub class="w-full">
+								<Sidebar.MenuSub class="w-full">
-                                        {#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
+									{#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
-                                            <Sidebar.MenuSubItem>
+										<Sidebar.MenuSubItem>
-                                                <Sidebar.MenuSubButton>
+											<Sidebar.MenuSubButton>
-                                                    {#snippet child({ props })}
+												{#snippet child({ props })}
-                                                        <a
+													<a
-                                                            href={`/library/${libraryState.activeLibrary!.id}/view?shelves=${shelf.id}`}
+														href="{resolve('/(root)/(library)/library/[libraryId]/view', {
-                                                            {...props}
+															libraryId: String(libraryState.activeLibrary!.id)
-                                                        >
+														})}?shelves={shelf.id}"
-                                                            <Badge 
+														{...props}
-                                                            variant="outline"
+													>
-                                                            class="scale-90 font-semibold bg-sidebar-primary text-sidebar-primary-foreground mr-1">
+														<Badge
-                                                                {shelf.total}
+															variant="outline"
-                                                            </Badge>
+															class="mr-1 scale-90 bg-sidebar-primary font-semibold text-sidebar-primary-foreground"
-                                                            <span>{shelf.title}</span>
+														>
-                                                            
+															{shelf.total}
-                                                            
+														</Badge>
-                                                        </a>
+														<span>{shelf.title}</span>
-                                                    {/snippet}
+													</a>
-                                                </Sidebar.MenuSubButton>
+												{/snippet}
-                                            </Sidebar.MenuSubItem>
+											</Sidebar.MenuSubButton>
-                                        {/each}
+										</Sidebar.MenuSubItem>
-                                </Sidebar.MenuSub>
+									{/each}
-                            </Collapsible.Content>
+								</Sidebar.MenuSub>
-                        </Sidebar.MenuItem>
+							</Collapsible.Content>
-                    {/snippet}
+						</Sidebar.MenuItem>
-                </Collapsible.Root>
+					{/snippet}
-            {:else}
+				</Collapsible.Root>
-                <Sidebar.MenuItem>
+			{:else}
-                    <Sidebar.MenuButton isActive={isActive} tooltipContent={item.title} class="h-10">
+				<Sidebar.MenuItem>
-                        {#snippet child({ props })}
+					<Sidebar.MenuButton {isActive} tooltipContent={item.title} class="h-10">
-                            <a href={url} {...props}>
+						{#snippet child({ props })}
-                                {#if item.icon}
+							<!-- item.path() calls resolve(); the rule cannot trace the variable. -->
-                                    <item.icon class="scale-125" />
+							<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-                                {/if}
+							<a href={url} {...props}>
-                                <span class="text-md pl-2">{item.title}</span>
+								{#if item.icon}
-                            </a>
+									<item.icon class="scale-125" />
-                        {/snippet}
+								{/if}
-                    </Sidebar.MenuButton>
+								<span class="text-md pl-2">{item.title}</span>
-                </Sidebar.MenuItem>
+							</a>
-            {/if}
+						{/snippet}
-        {/each}
+					</Sidebar.MenuButton>
-    </Sidebar.Menu>
+				</Sidebar.MenuItem>
+			{/if}
+		{/each}
+	</Sidebar.Menu>
 </Sidebar.Group>

frontend/src/lib/components/layout/nav-user.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import * as Avatar from '$lib/components/ui/avatar/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
@@ -31,13 +32,16 @@
 						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 					>
 						<Avatar.Root class="size-8 rounded-lg">
-							<Avatar.Fallback class="rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+							<Avatar.Fallback
+								class="rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+							>
 								{initials}
 							</Avatar.Fallback>
 						</Avatar.Root>
 						<div class="grid flex-1 text-left text-sm leading-tight">
 							<span class="truncate font-semibold">{handle}</span>
-							<span class="truncate font-mono text-[11px] text-muted-foreground">{user?.email}</span>
+							<span class="truncate font-mono text-[11px] text-muted-foreground">{user?.email}</span
+							>
 						</div>
 						<ChevronsUpDownIcon class="ml-auto size-4" />
 					</Sidebar.MenuButton>
@@ -53,13 +57,16 @@
 				<DropdownMenu.Label class="p-0 font-normal">
 					<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 						<Avatar.Root class="size-8 rounded-lg">
-							<Avatar.Fallback class="rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+							<Avatar.Fallback
+								class="rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+							>
 								{initials}
 							</Avatar.Fallback>
 						</Avatar.Root>
 						<div class="grid flex-1 text-left text-sm leading-tight">
 							<span class="truncate font-semibold">{handle}</span>
-							<span class="truncate font-mono text-[11px] text-muted-foreground">{user?.email}</span>
+							<span class="truncate font-mono text-[11px] text-muted-foreground">{user?.email}</span
+							>
 						</div>
 					</div>
 				</DropdownMenu.Label>
@@ -67,11 +74,11 @@
 				<DropdownMenu.Separator />
 
 				<DropdownMenu.Group>
-					<DropdownMenu.Item onSelect={() => goto('/settings/account')}>
+					<DropdownMenu.Item onSelect={() => goto(resolve('/settings/account'))}>
 						<SettingsIcon class="size-4" />
 						Settings
 					</DropdownMenu.Item>
-					<DropdownMenu.Item onSelect={() => goto('/settings/appearance')}>
+					<DropdownMenu.Item onSelect={() => goto(resolve('/settings/appearance'))}>
 						<PaletteIcon class="size-4" />
 						Appearance
 					</DropdownMenu.Item>
@@ -82,7 +89,7 @@
 				<DropdownMenu.Item
 					onSelect={async () => {
 						await logout();
-						await goto('/login');
+						await goto(resolve('/login'));
 					}}
 				>
 					<LogOutIcon class="size-4" />

frontend/src/lib/components/layout/search-form.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import * as Command from '$lib/components/ui/command/index';
 	import * as Kbd from '$lib/components/ui/kbd/index.js';
 	import * as InputGroup from '$lib/components/ui/input-group/index.js';
@@ -97,7 +98,7 @@
 						<Command.Item
 							value={String(book.id)}
 							onSelect={() => {
-								goto(`/book/${book.id}`);
+								goto(resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) }));
 								open = false;
 							}}
 							class="cursor-pointer"
@@ -115,7 +116,9 @@
 											by
 											{#each book.authors as author}
 												<a
-													href="/library/{libraryState.activeLibrary!.id}/view?authors={author.id}"
+													href="{resolve('/(root)/(library)/library/[libraryId]/view', {
+														libraryId: String(libraryState.activeLibrary!.id)
+													})}?authors={author.id}"
 													class="cs-list hover:underline">{author.name}</a
 												> &thinsp;
 											{/each}

frontend/src/lib/components/reader/epub-reader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { onMount, untrack } from 'svelte';
 
 	import {
@@ -25,14 +26,14 @@
 	import ReaderToc from './reader-toc.svelte';
 
 	let {
-		bookUrl,
+		fileUrl,
 		bookId,
 		filename,
 		title = '',
 		initialProgress = 0,
 		initialEpubLoc = null
 	}: {
-		bookUrl: string;
+		fileUrl: string;
 		bookId: string | number;
 		filename: string;
 		title?: string;
@@ -78,7 +79,7 @@
 		file = undefined;
 
 		try {
-			const response = await fetch(bookUrl);
+			const response = await fetch(fileUrl);
 			if (!response.ok) throw new Error(`The server returned ${response.status} for this file.`);
 
 			file = new File([await response.blob()], filename, { type: 'application/epub+zip' });
@@ -135,7 +136,7 @@
 			</Tooltip.Provider>
 
 			<a
-				href="/book/{bookId}"
+				href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(bookId) })}
 				class="min-w-0 flex-1 truncate font-serif text-sm hover:underline"
 				{title}
 			>
@@ -178,7 +179,10 @@
 							<RotateCcw class="size-4" />
 							Try again
 						</Button>
-						<a href="/book/{bookId}" class={buttonVariants({ variant: 'outline' })}>
+						<a
+							href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(bookId) })}
+							class={buttonVariants({ variant: 'outline' })}
+						>
 							Back to book
 						</a>
 					</div>

frontend/src/lib/components/view/book-rows.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import BookCover from './book-cover.svelte';
 	import BookActionsMenu from './book-actions-menu.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip/index';
@@ -120,7 +121,7 @@
 				? 'cursor-pointer'
 				: ''}"
 		>
-			<a href="/book/{book.id}" class="shrink-0">
+			<a href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })} class="shrink-0">
 				<BookCover {book} height={110} />
 			</a>
 
@@ -128,7 +129,7 @@
 				<div class="flex items-start gap-2">
 					<div class="min-w-0 flex-1">
 						<a
-							href="/book/{book.id}"
+							href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
 							class="line-clamp-2 font-serif text-sm leading-snug hover:underline"
 						>
 							{book.title}
@@ -166,7 +167,9 @@
 					{#each book.tags.slice(0, TAG_LIMIT) as tag (tag.id)}
 						<a
 							data-row-control
-							href="/library/{libraryState.activeLibrary?.id}/view?tags={tag.id}"
+							href="{resolve('/(root)/(library)/library/[libraryId]/view', {
+								libraryId: String(libraryState.activeLibrary?.id ?? '')
+							})}?tags={tag.id}"
 							class={badgeVariants({ variant: 'secondary' })}>{tag.name}</a
 						>
 					{/each}

frontend/src/lib/components/view/book-table.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import * as Table from '$lib/components/ui/table/index';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
 	import * as Tooltip from '$lib/components/ui/tooltip/index';
@@ -52,7 +53,9 @@
 
 	const visible = $derived(columns.filter((c) => c.on));
 
-	const allSelected = $derived(books.length > 0 && books.every((b) => selectionState.isSelected(b.id)));
+	const allSelected = $derived(
+		books.length > 0 && books.every((b) => selectionState.isSelected(b.id))
+	);
 
 	/** What a record is lacking — the reason this view exists. */
 	function missing(book: Book) {
@@ -208,19 +211,26 @@
 						/>
 					</Table.Cell>
 					<Table.Cell>
-						<a href="/book/{book.id}"><BookCover {book} height={36} /></a>
+						<a href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
+							><BookCover {book} height={36} /></a
+						>
 					</Table.Cell>
 
 					{#each visible as column (column.key)}
 						{#if column.key === 'title'}
 							<Table.Cell class="max-w-[280px] truncate font-serif">
-								<a href="/book/{book.id}" class="hover:underline">{book.title}</a>
+								<a
+									href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
+									class="hover:underline">{book.title}</a
+								>
 							</Table.Cell>
 						{:else if column.key === 'authors'}
 							<Table.Cell class="max-w-[180px] truncate">
 								{#each book.authors as author (author.id)}
 									<a
-										href="/library/{libraryState.activeLibrary?.id}/view?authors={author.id}"
+										href="{resolve('/(root)/(library)/library/[libraryId]/view', {
+											libraryId: String(libraryState.activeLibrary?.id ?? '')
+										})}?authors={author.id}"
 										class="cs-list hover:underline">{author.name}</a
 									> &thinsp;
 								{/each}
@@ -248,7 +258,7 @@
 								{formatFileSize(totalSize(book))}
 							</Table.Cell>
 						{:else if column.key === 'added'}
-							<Table.Cell class="font-mono text-xs tabular-nums text-muted-foreground">
+							<Table.Cell class="font-mono text-xs text-muted-foreground tabular-nums">
 								{addedOn(book)}
 							</Table.Cell>
 						{:else if column.key === 'progress'}
@@ -263,7 +273,7 @@
 												style="width: {Math.round(book.progress.percentage * 100)}%;"
 											></span>
 										</span>
-										<span class="font-mono text-xs tabular-nums text-muted-foreground">
+										<span class="font-mono text-xs text-muted-foreground tabular-nums">
 											{Math.round(book.progress.percentage * 100)}%
 										</span>
 									</span>

frontend/src/lib/components/view/book-thumbnail.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import BookImage from './book-image.svelte';
 	import { Progress } from '$lib/components/ui/progress/index';
 	import { getLibraryState } from '$lib/state/library.svelte';
 	import { getBookSelectionState } from '$lib/state/bookSelection.svelte';
 	import type { Book } from '$lib/schema';
 
-	let { book, class: className = '', ...rest }: { book: Book, class?: string} = $props();
+	let { book, class: className = '', ...rest }: { book: Book; class?: string } = $props();
 
 	const selectionState = getBookSelectionState();
 	const libraryState = getLibraryState();
@@ -24,7 +25,7 @@
 <div class="flex w-full flex-shrink-0 flex-col gap-1 {className}">
 	<!-- Book Cover -->
 	<a
-		href="/book/{book.id}"
+		href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
 		class="group relative aspect-9/12 w-full overflow-hidden rounded-sm shadow-lg drop-shadow-lg transition-all duration-200 {selected
 			? 'ring-2 ring-star'
 			: ''}"
@@ -51,7 +52,9 @@
 	</a>
 
 	<!-- Book Title -->
-	<a href="/book/{book.id}" class="text-base-content mt-1 line-clamp-2 w-full font-serif text-sm hover:underline"
+	<a
+		href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(book.id) })}
+		class="text-base-content mt-1 line-clamp-2 w-full font-serif text-sm hover:underline"
 		>{book.title}</a
 	>
 
@@ -59,7 +62,9 @@
 	<p class="line-clamp-1 w-full text-xs text-muted-foreground">
 		{#each book.authors as author}
 			<a
-				href="/library/{libraryState.activeLibrary?.id}/view?authors={author.id}"
+				href="{resolve('/(root)/(library)/library/[libraryId]/view', {
+					libraryId: String(libraryState.activeLibrary?.id ?? '')
+				})}?authors={author.id}"
 				class="cs-list hover:underline">{author.name}</a
 			> &thinsp;
 		{/each}

frontend/src/lib/state/bookCollection.svelte.ts

@@ -99,6 +99,9 @@ export class BookCollectionState {
 
 		const url = new URL(page.url);
 		url.searchParams.set('view', next);
+		// Not a route to resolve — this is the current URL with one query param
+		// changed, so it is already fully qualified.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
 		replaceState(url, page.state);
 	}
 
@@ -137,7 +140,8 @@ export class BookCollectionState {
 		url.searchParams.set('orderBy', this.orderBy);
 		url.searchParams.set('sortOrder', this.sortOrder);
 
-		// pushState(url.toString(), {})
+		// Same as setView: the current URL with sort params rewritten, not a route.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
 		goto(url.toString());
 
 		this.loadNewBooks();
@@ -285,9 +289,7 @@ export class BookCollectionState {
 
 		return wanted.every(([key, values]) => {
 			const current = this.filters[key] ?? [];
-			return (
+			return current.length === values.length && values.every((value) => current.includes(value));
-				current.length === values.length && values.every((value) => current.includes(value))
-			);
 		});
 	}
 

frontend/src/lib/state/library.svelte.ts

@@ -1,3 +1,4 @@
+import { resolve } from '$app/paths';
 import { browser } from '$app/environment';
 import { goto, invalidate } from '$app/navigation';
 import { page } from '$app/state';
@@ -31,7 +32,9 @@ export class LibraryState {
 		this.activeLibrary = this.libraries.find((lib) => lib.id === libraryId) || this.libraries[0];
 		if (browser) {
 			localStorage.setItem('previousLibraryId', this.activeLibrary.id.toString());
-			await goto(`/library/${libraryId}/view`, { invalidate: ['app:libraries'] });
+			await goto(resolve('/(root)/(library)/library/[libraryId]/view', { libraryId: String(libraryId) }), {
+				invalidate: ['app:libraries']
+			});
 		}
 	}
 

frontend/src/routes/(root)/(library)/book/[bookId]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { Badge, badgeVariants } from '$lib/components/ui/badge/index.js';
 	import { CollapsibleText } from '$lib/components/ui/collapsible-text/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
@@ -17,12 +18,7 @@
 		PlusIcon,
 		Trash2
 	} from '@lucide/svelte';
-	import {
+	import { describeIdentifier, formatFileSize, getFileType, sortIdentifiers } from '$lib/utils.js';
-		describeIdentifier,
-		formatFileSize,
-		getFileType,
-		sortIdentifiers
-	} from '$lib/utils.js';
 	import { getBookOperationsState } from '$lib/state/bookOperations.svelte.js';
 	import { getBookshelfState } from '$lib/state/bookshelf.svelte.js';
 	import { getLibraryState } from '$lib/state/library.svelte.js';
@@ -65,12 +61,24 @@
 				: 'Read'
 	);
 
+	// window.open is outside the lint rule's reach, but the paths need resolving
+	// just the same — they would break under a non-empty base path.
 	function openBookInReader(file: BookFile) {
+		const params = { bookId: String(book.id), fileId: String(file.id) };
+
 		if (getFileType(file.filename) === 'EPUB')
-			window.open(`/book/${book.id}/read/epub/${file.id}`, '_blank', 'noopener,noreferrer');
+			window.open(
+				resolve('/(root)/(library)/book/[bookId]/read/epub/[fileId]', params),
+				'_blank',
+				'noopener,noreferrer'
+			);
 
 		if (getFileType(file.filename) === 'PDF')
-			window.open(`/book/${book.id}/read/pdf/${file.id}`, '_blank', 'noopener,noreferrer');
+			window.open(
+				resolve('/(root)/(library)/book/[bookId]/read/pdf/[fileId]', params),
+				'_blank',
+				'noopener,noreferrer'
+			);
 	}
 
 	// On the band, the accent is the ground — invert the buttons against it.
@@ -101,7 +109,7 @@
 				</h1>
 
 				{#if book.subtitle}
-					<p class="mt-1 font-serif text-lg italic text-primary-foreground/75">{book.subtitle}</p>
+					<p class="mt-1 font-serif text-lg text-primary-foreground/75 italic">{book.subtitle}</p>
 				{/if}
 
 				{#if book.series}
@@ -115,7 +123,9 @@
 						By
 						{#each book.authors as author (author.id)}
 							<a
-								href="/library/{libraryState.activeLibrary!.id}/view?authors={author.id}"
+								href="{resolve('/(root)/(library)/library/[libraryId]/view', {
+									libraryId: String(libraryState.activeLibrary!.id)
+								})}?authors={author.id}"
 								class="cs-list hover:underline">{author.name}</a
 							> &thinsp;
 						{/each}
@@ -169,7 +179,11 @@
 							</DropdownMenu.Content>
 						</DropdownMenu.Root>
 					{:else if book.files.length === 1}
-						<button type="button" class={bandPrimary} onclick={() => openBookInReader(book.files[0])}>
+						<button
+							type="button"
+							class={bandPrimary}
+							onclick={() => openBookInReader(book.files[0])}
+						>
 							<BookOpenText class="size-4" />
 							{readLabel}
 						</button>
@@ -184,7 +198,6 @@
 							Download
 						</button>
 					{/if}
-
 				</div>
 			</div>
 		</div>
@@ -200,272 +213,303 @@
 		description lines up with the cover's left edge.
 	-->
 	<div class="px-6 md:px-10">
-	<!--
+		<!--
 		grid-rows matters here. The rail spans both rows, and with two auto rows the
 		browser splits any surplus rail height evenly between them — so a one-line
 		description got stretched to half the rail's height, leaving a large gap
 		above the files card. Sizing row 1 to its content and letting row 2 take the
 		free space sends the slack to the bottom instead, where it is invisible.
 	-->
-	<div
+		<div
-		class="mx-auto grid w-full max-w-5xl gap-8 pt-28 pb-10 md:grid-cols-[minmax(0,1fr)_260px] md:grid-rows-[auto_1fr] md:items-start"
+			class="mx-auto grid w-full max-w-5xl gap-8 pt-28 pb-10 md:grid-cols-[minmax(0,1fr)_260px] md:grid-rows-[auto_1fr] md:items-start"
-	>
+		>
-		<!-- Description -->
+			<!-- Description -->
-		<section class="min-w-0 md:col-start-1 md:row-start-1">
+			<section class="min-w-0 md:col-start-1 md:row-start-1">
-			{#if book.description}
+				{#if book.description}
-				<CollapsibleText text={book.description} maxLength={500} />
+					<CollapsibleText text={book.description} maxLength={500} />
-			{:else}
+				{:else}
-				<p class="text-sm text-muted-foreground">No description for this book yet.</p>
+					<p class="text-sm text-muted-foreground">No description for this book yet.</p>
-			{/if}
+				{/if}
-		</section>
+			</section>
 
-		<!-- Details rail -->
+			<!-- Details rail -->
-		<aside class="flex flex-col gap-6 md:col-start-2 md:row-span-2 md:row-start-1">
+			<aside class="flex flex-col gap-6 md:col-start-2 md:row-span-2 md:row-start-1">
-			<div>
+				<div>
-				<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
+					<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
-					Details
+						Details
-				</h2>
+					</h2>
-				<!-- items-baseline: the 10px mono label and the 14px value sit on a
+					<!-- items-baseline: the 10px mono label and the 14px value sit on a
 				     shared text baseline, so the pair reads as one line -->
-				<dl
+					<dl
-					class="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-4 gap-y-2 rounded-lg border bg-card p-4 text-sm"
+						class="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-4 gap-y-2 rounded-lg border bg-card p-4 text-sm"
-				>
+					>
-					{#if book.publisher}
+						{#if book.publisher}
-						<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
+							<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
-							Publisher
+								Publisher
-						</dt>
+							</dt>
-						<dd class="m-0">{book.publisher.name}</dd>
+							<dd class="m-0">{book.publisher.name}</dd>
-					{/if}
+						{/if}
-					{#if book.published_date}
+						{#if book.published_date}
-						<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
+							<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
-							Published
+								Published
-						</dt>
+							</dt>
-						<dd class="m-0 font-mono tabular-nums">{book.published_date}</dd>
+							<dd class="m-0 font-mono tabular-nums">{book.published_date}</dd>
-					{/if}
+						{/if}
-					{#if book.pages}
+						{#if book.pages}
-						<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
+							<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
-							Pages
+								Pages
-						</dt>
+							</dt>
-						<dd class="m-0 font-mono tabular-nums">{book.pages}</dd>
+							<dd class="m-0 font-mono tabular-nums">{book.pages}</dd>
-					{/if}
+						{/if}
-					{#if book.language}
+						{#if book.language}
-						<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
+							<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
-							Language
+								Language
-						</dt>
+							</dt>
-						<dd class="m-0">{book.language}</dd>
+							<dd class="m-0">{book.language}</dd>
-					{/if}
+						{/if}
-					{#if book.edition}
+						{#if book.edition}
-						<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
+							<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
-							Edition
+								Edition
-						</dt>
+							</dt>
-						<dd class="m-0 font-mono tabular-nums">{book.edition}</dd>
+							<dd class="m-0 font-mono tabular-nums">{book.edition}</dd>
-					{/if}
+						{/if}
-					{#each sortIdentifiers(book.identifiers) as [name, value] (name)}
+						{#each sortIdentifiers(book.identifiers) as [name, value] (name)}
-						{@const id = describeIdentifier(name, value)}
+							{@const id = describeIdentifier(name, value)}
-						<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
+							<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
-							{id.label}
+								{id.label}
-						</dt>
+							</dt>
-						<dd class="m-0 font-mono break-all tabular-nums">
+							<dd class="m-0 font-mono break-all tabular-nums">
-							{#if id.href}
+								{#if id.href}
+									<!-- Always an absolute URL off-site: openlibrary, doi.org or amazon. -->
+									<a
+										href={id.href}
+										target="_blank"
+										rel="external noopener noreferrer"
+										class="hover:text-primary hover:underline">{value}</a
+									>
+								{:else}
+									{value}
+								{/if}
+							</dd>
+						{/each}
+					</dl>
+				</div>
+
+				{#if book.tags.length > 0}
+					<div>
+						<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
+							Tags
+						</h2>
+						<div class="flex flex-wrap gap-1.5">
+							{#each book.tags as tag (tag.id)}
+								<!-- Was /tag/{id}, a route that has never existed — these badges 404'd.
+							     Filter the library view, as the tag links in the list views do. -->
 								<a
-									href={id.href}
+									href="{resolve('/(root)/(library)/library/[libraryId]/view', {
-									target="_blank"
+										libraryId: String(libraryState.activeLibrary!.id)
-									rel="noopener noreferrer"
+									})}?tags={tag.id}"
-									class="hover:text-primary hover:underline">{value}</a
+									class={badgeVariants({ variant: 'default' })}>{tag.name}</a
 								>
-							{:else}
+							{/each}
-								{value}
-							{/if}
-						</dd>
-					{/each}
-				</dl>
-			</div>
-
-			{#if book.tags.length > 0}
-				<div>
-					<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
-						Tags
-					</h2>
-					<div class="flex flex-wrap gap-1.5">
-						{#each book.tags as tag (tag.id)}
-							<a href="/tag/{tag.id}" class={badgeVariants({ variant: 'default' })}>{tag.name}</a>
-						{/each}
-					</div>
-				</div>
-			{/if}
-
-			{#if book.lists.length > 0}
-				<div>
-					<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
-						Shelves
-					</h2>
-					<div class="flex flex-wrap gap-1.5">
-						{#each book.lists as shelf (shelf.id)}
-							<a
-								href="/library/{libraryState.activeLibrary!.id}/view?shelves={shelf.id}"
-								class={badgeVariants({ variant: 'outline' })}>{shelf.title}</a
-							>
-						{/each}
-					</div>
-				</div>
-			{/if}
-
-			<div>
-				<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
-					Manage
-				</h2>
-				<div class="flex flex-wrap gap-2">
-					<!-- Mark as finished -->
-					<Tooltip.Provider>
-						<Tooltip.Root ignoreNonKeyboardFocus>
-							<Tooltip.Trigger
-								class="{buttonVariants({ variant: 'outline', size: 'icon' })} {book.progress
-									?.completed
-									? 'text-success'
-									: ''}"
-								onclick={async () => {
-									if (book.progress?.completed) await bookOps.markBooksAsIncomplete([book.id]);
-									else await bookOps.markBooksAsComplete([book.id]);
-								}}
-							>
-								<BookOpenCheck />
-							</Tooltip.Trigger>
-							<Tooltip.Content side="bottom">
-								<p>{book.progress?.completed ? 'Mark as not finished' : 'Mark as finished'}</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Tooltip.Provider>
-
-					<!-- Add to shelf -->
-					<Tooltip.Provider>
-						<Tooltip.Root ignoreNonKeyboardFocus>
-							<Tooltip.Trigger>
-								{#snippet child({ props })}
-									<DropdownMenu.Root>
-										<DropdownMenu.Trigger
-											{...props}
-											class={buttonVariants({ variant: 'outline', size: 'icon' })}
-										>
-											<Album />
-										</DropdownMenu.Trigger>
-										<DropdownMenu.Content>
-											<DropdownMenu.Group>
-												<DropdownMenu.GroupHeading>Shelves</DropdownMenu.GroupHeading>
-												{#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
-													<DropdownMenu.CheckboxItem
-														checked={book.lists.findIndex((sh) => sh.id === shelf.id) !== -1}
-														onclick={async () => {
-															if (book.lists.find((sh) => sh.id === shelf.id)) {
-																await bookshelfState.removeBooksFromShelf(shelf.id, [book.id]);
-																book.lists = book.lists.filter((sh) => sh.id !== shelf.id);
-															} else {
-																await bookshelfState.addBooksToShelf(shelf.id, [book.id]);
-																book.lists.push(shelf);
-															}
-														}}
-													>
-														{shelf.title}
-													</DropdownMenu.CheckboxItem>
-												{/each}
-											</DropdownMenu.Group>
-											<DropdownMenu.Separator />
-											<DropdownMenu.Item
-												onclick={() => (createShelfDialogOpen = true)}
-												class="text-muted-foreground"
-											>
-												<PlusIcon class="size-4" />
-												New Shelf
-											</DropdownMenu.Item>
-										</DropdownMenu.Content>
-									</DropdownMenu.Root>
-								{/snippet}
-							</Tooltip.Trigger>
-							<Tooltip.Content side="bottom">
-								<p>Add to shelf</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Tooltip.Provider>
-
-					<!-- Edit -->
-					<Tooltip.Provider>
-						<Tooltip.Root ignoreNonKeyboardFocus>
-							<Tooltip.Trigger
-								onclick={() => {
-									bookOps.bookToEdit = book;
-									bookOps.editDialogOpen = true;
-								}}
-								class={buttonVariants({ variant: 'outline', size: 'icon' })}
-							>
-								<Pencil />
-							</Tooltip.Trigger>
-							<Tooltip.Content side="bottom">
-								<p>Edit</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Tooltip.Provider>
-
-					<!-- Delete -->
-					<Tooltip.Provider>
-						<Tooltip.Root ignoreNonKeyboardFocus>
-							<Tooltip.Trigger
-								class={buttonVariants({ variant: 'outline', size: 'icon' })}
-								onclick={() => {
-									bookOps.deleteDialogTitle = `Delete book?`;
-									bookOps.deleteFn = async (deleteFiles: boolean) => {
-										await bookOps.deleteBooks([book.id], deleteFiles, false);
-										libraryState.activeLibrary!.total!--;
-										bookshelfState.deletedBooks([book]);
-										await history.back();
-									};
-									bookOps.deleteDialogOpen = true;
-								}}
-							>
-								<Trash2 />
-							</Tooltip.Trigger>
-							<Tooltip.Content side="bottom">
-								<p>Delete</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Tooltip.Provider>
-				</div>
-			</div>
-		</aside>
-
-		<!-- Library files -->
-		<section class="min-w-0 md:col-start-1 md:row-start-2">
-			<Accordion.Root type="single" class="w-full rounded-lg border bg-card px-4">
-				<Accordion.Item value="files">
-					<Accordion.Trigger>
-						<div class="flex items-center gap-3">
-							Library files
-							<Badge>{book.files.length}</Badge>
 						</div>
-					</Accordion.Trigger>
+					</div>
-					<Accordion.Content>
+				{/if}
-						<Table.Root>
+
-							<Table.Header>
+				{#if book.lists.length > 0}
-								<Table.Row>
+					<div>
-									<Table.Head class="w-[300px]">Filename</Table.Head>
+						<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
-									<Table.Head>Size</Table.Head>
+							Shelves
-									<Table.Head>File type</Table.Head>
+						</h2>
-									<Table.Head class="text-right">Actions</Table.Head>
+						<div class="flex flex-wrap gap-1.5">
-								</Table.Row>
+							{#each book.lists as shelf (shelf.id)}
-							</Table.Header>
+								<a
-							<Table.Body>
+									href="{resolve('/(root)/(library)/library/[libraryId]/view', {
-								{#each book.files as file (file.id)}
+										libraryId: String(libraryState.activeLibrary!.id)
+									})}?shelves={shelf.id}"
+									class={badgeVariants({ variant: 'outline' })}>{shelf.title}</a
+								>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<div>
+					<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
+						Manage
+					</h2>
+					<div class="flex flex-wrap gap-2">
+						<!-- Mark as finished -->
+						<Tooltip.Provider>
+							<Tooltip.Root ignoreNonKeyboardFocus>
+								<Tooltip.Trigger
+									class="{buttonVariants({ variant: 'outline', size: 'icon' })} {book.progress
+										?.completed
+										? 'text-success'
+										: ''}"
+									onclick={async () => {
+										if (book.progress?.completed) await bookOps.markBooksAsIncomplete([book.id]);
+										else await bookOps.markBooksAsComplete([book.id]);
+									}}
+								>
+									<BookOpenCheck />
+								</Tooltip.Trigger>
+								<Tooltip.Content side="bottom">
+									<p>{book.progress?.completed ? 'Mark as not finished' : 'Mark as finished'}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+
+						<!-- Add to shelf -->
+						<Tooltip.Provider>
+							<Tooltip.Root ignoreNonKeyboardFocus>
+								<Tooltip.Trigger>
+									{#snippet child({ props })}
+										<DropdownMenu.Root>
+											<DropdownMenu.Trigger
+												{...props}
+												class={buttonVariants({ variant: 'outline', size: 'icon' })}
+											>
+												<Album />
+											</DropdownMenu.Trigger>
+											<DropdownMenu.Content>
+												<DropdownMenu.Group>
+													<DropdownMenu.GroupHeading>Shelves</DropdownMenu.GroupHeading>
+													{#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
+														<DropdownMenu.CheckboxItem
+															checked={book.lists.findIndex((sh) => sh.id === shelf.id) !== -1}
+															onclick={async () => {
+																if (book.lists.find((sh) => sh.id === shelf.id)) {
+																	await bookshelfState.removeBooksFromShelf(shelf.id, [book.id]);
+																	book.lists = book.lists.filter((sh) => sh.id !== shelf.id);
+																} else {
+																	await bookshelfState.addBooksToShelf(shelf.id, [book.id]);
+																	book.lists.push(shelf);
+																}
+															}}
+														>
+															{shelf.title}
+														</DropdownMenu.CheckboxItem>
+													{/each}
+												</DropdownMenu.Group>
+												<DropdownMenu.Separator />
+												<DropdownMenu.Item
+													onclick={() => (createShelfDialogOpen = true)}
+													class="text-muted-foreground"
+												>
+													<PlusIcon class="size-4" />
+													New Shelf
+												</DropdownMenu.Item>
+											</DropdownMenu.Content>
+										</DropdownMenu.Root>
+									{/snippet}
+								</Tooltip.Trigger>
+								<Tooltip.Content side="bottom">
+									<p>Add to shelf</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+
+						<!-- Edit -->
+						<Tooltip.Provider>
+							<Tooltip.Root ignoreNonKeyboardFocus>
+								<Tooltip.Trigger
+									onclick={() => {
+										bookOps.bookToEdit = book;
+										bookOps.editDialogOpen = true;
+									}}
+									class={buttonVariants({ variant: 'outline', size: 'icon' })}
+								>
+									<Pencil />
+								</Tooltip.Trigger>
+								<Tooltip.Content side="bottom">
+									<p>Edit</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+
+						<!-- Delete -->
+						<Tooltip.Provider>
+							<Tooltip.Root ignoreNonKeyboardFocus>
+								<Tooltip.Trigger
+									class={buttonVariants({ variant: 'outline', size: 'icon' })}
+									onclick={() => {
+										bookOps.deleteDialogTitle = `Delete book?`;
+										bookOps.deleteFn = async (deleteFiles: boolean) => {
+											await bookOps.deleteBooks([book.id], deleteFiles, false);
+											libraryState.activeLibrary!.total!--;
+											bookshelfState.deletedBooks([book]);
+											await history.back();
+										};
+										bookOps.deleteDialogOpen = true;
+									}}
+								>
+									<Trash2 />
+								</Tooltip.Trigger>
+								<Tooltip.Content side="bottom">
+									<p>Delete</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+					</div>
+				</div>
+			</aside>
+
+			<!-- Library files -->
+			<section class="min-w-0 md:col-start-1 md:row-start-2">
+				<Accordion.Root type="single" class="w-full rounded-lg border bg-card px-4">
+					<Accordion.Item value="files">
+						<Accordion.Trigger>
+							<div class="flex items-center gap-3">
+								Library files
+								<Badge>{book.files.length}</Badge>
+							</div>
+						</Accordion.Trigger>
+						<Accordion.Content>
+							<Table.Root>
+								<Table.Header>
 									<Table.Row>
-										<Table.Cell class="max-w-[300px] min-w-0 overflow-hidden">
+										<Table.Head class="w-[300px]">Filename</Table.Head>
-											<div class="font-mono text-xs break-words whitespace-normal">
+										<Table.Head>Size</Table.Head>
-												{file.filename}
+										<Table.Head>File type</Table.Head>
-											</div>
+										<Table.Head class="text-right">Actions</Table.Head>
-										</Table.Cell>
+									</Table.Row>
-										<Table.Cell class="font-mono text-xs tabular-nums">
+								</Table.Header>
-											{formatFileSize(file.size)}
+								<Table.Body>
-										</Table.Cell>
+									{#each book.files as file (file.id)}
-										<Table.Cell><span class="font-mono text-xs">{getFileType(file.filename)}</span></Table.Cell>
+										<Table.Row>
-										<Table.Cell class="text-right">
+											<Table.Cell class="max-w-[300px] min-w-0 overflow-hidden">
-											<div class="flex justify-end gap-1">
+												<div class="font-mono text-xs break-words whitespace-normal">
-												{#if getFileType(file.filename) === 'EPUB' || getFileType(file.filename) === 'PDF'}
+													{file.filename}
+												</div>
+											</Table.Cell>
+											<Table.Cell class="font-mono text-xs tabular-nums">
+												{formatFileSize(file.size)}
+											</Table.Cell>
+											<Table.Cell
+												><span class="font-mono text-xs">{getFileType(file.filename)}</span
+												></Table.Cell
+											>
+											<Table.Cell class="text-right">
+												<div class="flex justify-end gap-1">
+													{#if getFileType(file.filename) === 'EPUB' || getFileType(file.filename) === 'PDF'}
+														<Tooltip.Provider>
+															<Tooltip.Root ignoreNonKeyboardFocus>
+																<Tooltip.Trigger
+																	class="{buttonVariants({
+																		variant: 'default',
+																		size: 'icon'
+																	})} scale-90"
+																	onclick={() => openBookInReader(file)}
+																>
+																	<BookOpenText />
+																</Tooltip.Trigger>
+																<Tooltip.Content side="bottom">
+																	<p>Read</p>
+																</Tooltip.Content>
+															</Tooltip.Root>
+														</Tooltip.Provider>
+													{/if}
+
 													<Tooltip.Provider>
 														<Tooltip.Root ignoreNonKeyboardFocus>
 															<Tooltip.Trigger
@@ -473,64 +517,46 @@
 																	variant: 'default',
 																	size: 'icon'
 																})} scale-90"
-																onclick={() => openBookInReader(file)}
+																onclick={async () => {
+																	await bookOps.downloadBookFile(book.id, file.id, file.filename);
+																}}
 															>
-																<BookOpenText />
+																<Download />
 															</Tooltip.Trigger>
 															<Tooltip.Content side="bottom">
-																<p>Read</p>
+																<p>Download</p>
 															</Tooltip.Content>
 														</Tooltip.Root>
 													</Tooltip.Provider>
-												{/if}
 
-												<Tooltip.Provider>
+													<Tooltip.Provider>
-													<Tooltip.Root ignoreNonKeyboardFocus>
+														<Tooltip.Root ignoreNonKeyboardFocus>
-														<Tooltip.Trigger
+															<Tooltip.Trigger
-															class="{buttonVariants({
+																onclick={() => {
-																variant: 'default',
+																	fileToDelete = file.id;
-																size: 'icon'
+																	fileDeleteDialogOpen = true;
-															})} scale-90"
+																}}
-															onclick={async () => {
+																class="{buttonVariants({
-																await bookOps.downloadBookFile(book.id, file.id, file.filename);
+																	variant: 'destructive',
-															}}
+																	size: 'icon'
-														>
+																})} scale-90"
-															<Download />
+															>
-														</Tooltip.Trigger>
+																<Trash2 />
-														<Tooltip.Content side="bottom">
+															</Tooltip.Trigger>
-															<p>Download</p>
+															<Tooltip.Content side="bottom">Delete file</Tooltip.Content>
-														</Tooltip.Content>
+														</Tooltip.Root>
-													</Tooltip.Root>
+													</Tooltip.Provider>
-												</Tooltip.Provider>
+												</div>
-
+											</Table.Cell>
-												<Tooltip.Provider>
+										</Table.Row>
-													<Tooltip.Root ignoreNonKeyboardFocus>
+									{/each}
-														<Tooltip.Trigger
+								</Table.Body>
-															onclick={() => {
+							</Table.Root>
-																fileToDelete = file.id;
+						</Accordion.Content>
-																fileDeleteDialogOpen = true;
+					</Accordion.Item>
-															}}
+				</Accordion.Root>
-															class="{buttonVariants({
+			</section>
-																variant: 'destructive',
+		</div>
-																size: 'icon'
-															})} scale-90"
-														>
-															<Trash2 />
-														</Tooltip.Trigger>
-														<Tooltip.Content side="bottom">Delete file</Tooltip.Content>
-													</Tooltip.Root>
-												</Tooltip.Provider>
-											</div>
-										</Table.Cell>
-									</Table.Row>
-								{/each}
-							</Table.Body>
-						</Table.Root>
-					</Accordion.Content>
-				</Accordion.Item>
-			</Accordion.Root>
-		</section>
-	</div>
 	</div>
 </div>
 

frontend/src/routes/(root)/(library)/book/[bookId]/read/epub/[fileId]/+page.svelte

@@ -8,11 +8,11 @@
 	const bookId = page.params.bookId!;
 
 	// Fetched by the browser through the proxy, which attaches the auth header
-	const bookUrl = `/api/books/download/${bookId}/${fileId}`;
+	const fileUrl = `/api/books/download/${bookId}/${fileId}`;
 </script>
 
 <EpubReader
-	{bookUrl}
+	{fileUrl}
 	{bookId}
 	title={data.title}
 	filename={data.filename}

frontend/src/routes/(root)/(library)/book/[bookId]/read/pdf/[fileId]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
 	import { Spinner } from '$lib/components/ui/spinner/index';
@@ -55,7 +56,7 @@
 	<!-- Same chrome as the EPUB reader, so leaving works the same way in both -->
 	<header class="flex h-12 shrink-0 items-center gap-2 border-b px-3">
 		<a
-			href="/book/{bookId}"
+			href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(bookId) })}
 			class="min-w-0 flex-1 truncate font-serif text-sm hover:underline"
 			title={data?.title}
 		>
@@ -76,7 +77,10 @@
 							<RotateCcw class="size-4" />
 							Try again
 						</Button>
-						<a href="/book/{bookId}" class={buttonVariants({ variant: 'outline' })}>
+						<a
+							href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(bookId) })}
+							class={buttonVariants({ variant: 'outline' })}
+						>
 							Back to book
 						</a>
 					</div>

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', routeId: '/(root)/settings/account' },
-			title: 'Account',
+		{ title: 'Appearance', routeId: '/(root)/settings/appearance' },
-			url: '/settings/account'
+		{ title: 'Libraries', routeId: '/(root)/settings/libraries' },
-		},
+		{ title: 'Devices', routeId: '/(root)/settings/devices' }
-		{
+	] as const;
-			title: 'Appearance',
-			url: '/settings/appearance'
-		},
-		{
-			title: 'Libraries',
-			url: '/settings/libraries'
-		},
-		{
-			title: 'Devices',
-			url: '/settings/devices'
-		}
-	];
 </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}
+					href={resolve(item.routeId)}
-					class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page.url.pathname.endsWith(item.url)
+					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'}"
 				>

frontend/src/routes/(root)/settings/account/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import { logout } from '$lib/api';
 	import { Button } from '$lib/components/ui/button/index.js';
@@ -12,7 +13,7 @@
 	<Button
 		onclick={async () => {
 			await logout();
-			goto('/login');
+			goto(resolve('/login'));
 		}}
 		variant="outline"
 		class="w-32"

frontend/src/routes/(root)/settings/libraries/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import * as Table from '$lib/components/ui/table/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { getLibraryState } from '$lib/state/library.svelte';
@@ -36,7 +37,10 @@
 							>{library.name[0]}</Table.Cell
 						>
 						<Table.Cell class="font-medium">
-							<a href={`/library/${library.id}`} class="hover:underline">{library.name}</a>
+							<a
+								href={resolve('/(root)/(library)/library/[libraryId]', { libraryId: String(library.id) })}
+								class="hover:underline">{library.name}</a
+							>
 						</Table.Cell>
 						<Table.Cell class="w-16 text-center">
 							<EllipsisVertical class="scale-75" />

frontend/src/routes/login/+layout@.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import '../../app.css';
 	import favicon from '$lib/assets/favicon.svg';
 	import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';
@@ -10,12 +11,11 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-
 <div class="flex h-screen min-h-screen flex-col">
 	<!-- Header -->
 	<div class="flex items-center gap-4 pt-4 pl-6">
 		<p class="text-3xl">📚</p>
-		<a href="/" class="text-2xl font-semibold">chitai</a>
+		<a href={resolve('/')} class="text-2xl font-semibold">chitai</a>
 
 		<ThemeToggle class="mr-4 ml-auto" />
 	</div>