feat(ui): add audio player component, presign API route, and reading progress tracking

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -1,7 +1,22 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import AudioPlayer from '$lib/components/AudioPlayer.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
+
+	// Record reading progress when the chapter is opened
+	onMount(async () => {
+		try {
+			await fetch('/api/progress', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slug: data.book.slug, chapter: data.chapter.number })
+			});
+		} catch {
+			// Non-critical — silently ignore
+		}
+	});
 </script>
 
 <svelte:head>
@@ -41,7 +56,7 @@
 </div>
 
 <!-- Chapter heading -->
-<div class="mb-8">
+<div class="mb-6">
 	<p class="text-zinc-500 text-sm mb-1">Chapter {data.chapter.number}</p>
 	<h1 class="text-xl font-bold text-zinc-100">
 		{data.chapter.title || `Chapter ${data.chapter.number}`}
@@ -51,13 +66,16 @@
 	{/if}
 </div>
 
+<!-- Audio player -->
+<AudioPlayer slug={data.book.slug} chapter={data.chapter.number} />
+
 <!-- Chapter content -->
 {#if !data.html}
 	<div class="text-zinc-500 text-center py-16">
 		<p>Chapter content not available.</p>
 	</div>
 {:else}
-	<div class="prose-chapter">
+	<div class="prose-chapter mt-8">
 		{@html data.html}
 	</div>
 {/if}