feat: book commenting system with upvote/downvote + fix profile SSR crash

- Add book_comments and comment_votes PocketBase collections (pb-init.sh + pocketbase.go EnsureCollections)
- Web: CommentsSection.svelte with post form, vote buttons, lazy-loaded per-book
- API routes: GET/POST /api/comments/[slug], POST /api/comments/[id]/vote
- iOS: BookComment + CommentsResponse models, fetchComments/postComment/voteComment in APIClient, CommentsView + CommentsViewModel wired into BookDetailView
- Fix profile page SSR crash (ERR_MODULE_NOT_FOUND cropperjs): lazy-load AvatarCropModal via dynamic import guarded by browser, move URL.createObjectURL into onMount

ui/src/routes/api/comments/[id]/vote/+server.ts

@@ -0,0 +1,33 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { voteComment } from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';
+
+/**
+ * POST /api/comments/[id]/vote
+ * Body: { vote: 'up' | 'down' }
+ * Casts, changes, or toggles off a vote on a comment.
+ * Works for both authenticated and anonymous users (session-scoped).
+ * Returns the updated comment.
+ */
+export const POST: RequestHandler = async ({ params, request, locals }) => {
+	const { id } = params;
+	let body: { vote?: string };
+	try {
+		body = await request.json();
+	} catch {
+		error(400, 'Invalid JSON body');
+	}
+
+	if (body.vote !== 'up' && body.vote !== 'down') {
+		error(400, 'vote must be "up" or "down"');
+	}
+
+	try {
+		const updated = await voteComment(id, body.vote, locals.sessionId, locals.user?.id);
+		return json(updated);
+	} catch (e) {
+		log.error('api/comments/[id]/vote', 'voteComment failed', { id, err: String(e) });
+		error(500, 'Failed to record vote');
+	}
+};

ui/src/routes/api/comments/[slug]/+server.ts

@@ -0,0 +1,54 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { listComments, createComment, getMyVotes } from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';
+
+/**
+ * GET /api/comments/[slug]
+ * Returns comments for a book + the current visitor's votes.
+ * Response: { comments: BookComment[], myVotes: Record<string, 'up'|'down'> }
+ */
+export const GET: RequestHandler = async ({ params, locals }) => {
+	const { slug } = params;
+	try {
+		const comments = await listComments(slug);
+		const myVotes = await getMyVotes(
+			comments.map((c) => c.id),
+			locals.sessionId,
+			locals.user?.id
+		);
+		return json({ comments, myVotes });
+	} catch (e) {
+		log.error('api/comments/[slug]', 'listComments failed', { slug, err: String(e) });
+		error(500, 'Failed to load comments');
+	}
+};
+
+/**
+ * POST /api/comments/[slug]
+ * Body: { body: string }
+ * Creates a new comment. Requires authentication.
+ */
+export const POST: RequestHandler = async ({ params, request, locals }) => {
+	if (!locals.user) error(401, 'Login required to comment');
+
+	const { slug } = params;
+	let body: { body?: string };
+	try {
+		body = await request.json();
+	} catch {
+		error(400, 'Invalid JSON body');
+	}
+
+	const text = (body.body ?? '').trim();
+	if (!text) error(400, 'Comment body is required');
+	if (text.length > 2000) error(400, 'Comment is too long (max 2000 characters)');
+
+	try {
+		const comment = await createComment(slug, text, locals.user.id, locals.user.username);
+		return json(comment, { status: 201 });
+	} catch (e) {
+		log.error('api/comments/[slug]', 'createComment failed', { slug, err: String(e) });
+		error(500, 'Failed to post comment');
+	}
+};

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

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { invalidateAll } from '$app/navigation';
 	import type { PageData } from './$types';
+	import CommentsSection from '$lib/components/CommentsSection.svelte';
 
 	let { data }: { data: PageData } = $props();
 
@@ -525,3 +526,6 @@
 		</div>
 	{/if}
 </div>
+
+<!-- ══════════════════════════════════════════════════ Comments ══ -->
+<CommentsSection slug={data.book.slug} isLoggedIn={true} />

ui/src/routes/profile/+page.svelte

@@ -3,7 +3,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import type { PageData, ActionData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
-	import AvatarCropModal from '$lib/components/AvatarCropModal.svelte';
+	import { browser } from '$app/environment';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -213,12 +213,14 @@
 	<title>Profile — libnovel</title>
 </svelte:head>
 
-{#if cropFile}
-	<AvatarCropModal
-		file={cropFile}
-		onconfirm={handleCropConfirm}
-		oncancel={handleCropCancel}
-	/>
+{#if cropFile && browser}
+	{#await import('$lib/components/AvatarCropModal.svelte') then { default: AvatarCropModal }}
+		<AvatarCropModal
+			file={cropFile}
+			onconfirm={handleCropConfirm}
+			oncancel={handleCropCancel}
+		/>
+	{/await}
 {/if}
 
 <!-- Hidden logout form used when user ends their own session -->