[FA-misc] Switches to using DTOs, updates frontend with details and reader page, updates novel import to be an upsert

fictionarchive-web-astro/src/lib/components/ChapterNavigation.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import List from '@lucide/svelte/icons/list';
+
+	interface Props {
+		novelId: string;
+		prevChapterOrder: number | null | undefined;
+		nextChapterOrder: number | null | undefined;
+		showKeyboardHints?: boolean;
+	}
+
+	let { novelId, prevChapterOrder, nextChapterOrder, showKeyboardHints = true }: Props = $props();
+
+	const hasPrev = $derived(prevChapterOrder != null);
+	const hasNext = $derived(nextChapterOrder != null);
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="flex items-center justify-between gap-4">
+		<Button
+			variant="outline"
+			href={hasPrev ? `/novels/${novelId}/chapters/${prevChapterOrder}` : undefined}
+			disabled={!hasPrev}
+			class="gap-2"
+		>
+			<ChevronLeft class="h-4 w-4" />
+			<span class="hidden sm:inline">Previous</span>
+		</Button>
+
+		<Button variant="outline" href="/novels/{novelId}" class="gap-2">
+			<List class="h-4 w-4" />
+			<span class="hidden sm:inline">Contents</span>
+		</Button>
+
+		<Button
+			variant="outline"
+			href={hasNext ? `/novels/${novelId}/chapters/${nextChapterOrder}` : undefined}
+			disabled={!hasNext}
+			class="gap-2"
+		>
+			<span class="hidden sm:inline">Next</span>
+			<ChevronRight class="h-4 w-4" />
+		</Button>
+	</div>
+
+	{#if showKeyboardHints}
+		<p class="text-muted-foreground hidden text-center text-xs md:block">
+			Use <kbd class="bg-muted rounded px-1 py-0.5 text-xs">←</kbd> and
+			<kbd class="bg-muted rounded px-1 py-0.5 text-xs">→</kbd> arrow keys to navigate
+		</p>
+	{/if}
+</div>