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/lib/components/AvatarCropModal.svelte

@@ -13,9 +13,10 @@
 
 	let imgEl: HTMLImageElement;
 	let cropper: Cropper | null = null;
-	const objectUrl = URL.createObjectURL(file);
+	let objectUrl = $state('');
 
 	onMount(() => {
+		objectUrl = URL.createObjectURL(file);
 		cropper = new Cropper(imgEl, {
 			aspectRatio: 1,
 			viewMode: 1,

ui/src/lib/components/CommentsSection.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+	interface BookComment {
+		id: string;
+		slug: string;
+		user_id: string;
+		username: string;
+		body: string;
+		upvotes: number;
+		downvotes: number;
+		created: string;
+	}
+
+	let {
+		slug,
+		isLoggedIn = false
+	}: {
+		slug: string;
+		isLoggedIn?: boolean;
+	} = $props();
+
+	// ── State ─────────────────────────────────────────────────────────────────
+	let comments = $state<BookComment[]>([]);
+	let myVotes = $state<Record<string, 'up' | 'down'>>({});
+	let loading = $state(true);
+	let loadError = $state('');
+
+	let newBody = $state('');
+	let posting = $state(false);
+	let postError = $state('');
+
+	// Per-comment vote inflight set (prevents double-clicks)
+	let votingIds = $state(new Set<string>());
+
+	// ── Load comments on mount ────────────────────────────────────────────────
+	async function loadComments() {
+		loading = true;
+		loadError = '';
+		try {
+			const res = await fetch(`/api/comments/${encodeURIComponent(slug)}`);
+			if (!res.ok) throw new Error(`${res.status}`);
+			const data = await res.json();
+			comments = data.comments ?? [];
+			myVotes = data.myVotes ?? {};
+		} catch (e) {
+			loadError = 'Failed to load comments.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Run once on component mount via $effect
+	$effect(() => {
+		loadComments();
+	});
+
+	// ── Post comment ──────────────────────────────────────────────────────────
+	async function postComment() {
+		const text = newBody.trim();
+		if (!text || posting) return;
+		if (text.length > 2000) {
+			postError = 'Comment is too long (max 2000 characters).';
+			return;
+		}
+		posting = true;
+		postError = '';
+		try {
+			const res = await fetch(`/api/comments/${encodeURIComponent(slug)}`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ body: text })
+			});
+			if (res.status === 401) {
+				postError = 'You must be logged in to comment.';
+				return;
+			}
+			if (!res.ok) {
+				const err = await res.json().catch(() => ({}));
+				postError = err.message ?? 'Failed to post comment.';
+				return;
+			}
+			const created: BookComment = await res.json();
+			comments = [created, ...comments];
+			newBody = '';
+		} catch {
+			postError = 'Failed to post comment.';
+		} finally {
+			posting = false;
+		}
+	}
+
+	// ── Vote ──────────────────────────────────────────────────────────────────
+	async function vote(commentId: string, v: 'up' | 'down') {
+		if (votingIds.has(commentId)) return;
+		votingIds = new Set([...votingIds, commentId]);
+		try {
+			const res = await fetch(`/api/comments/${commentId}/vote`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ vote: v })
+			});
+			if (!res.ok) return;
+			const updated: BookComment = await res.json();
+			// Update comment in list
+			comments = comments.map((c) => (c.id === commentId ? updated : c));
+			// Update myVotes: toggle off if same, else set new vote
+			const prev = myVotes[commentId];
+			if (prev === v) {
+				const next = { ...myVotes };
+				delete next[commentId];
+				myVotes = next;
+			} else {
+				myVotes = { ...myVotes, [commentId]: v };
+			}
+		} finally {
+			const next = new Set(votingIds);
+			next.delete(commentId);
+			votingIds = next;
+		}
+	}
+
+	// ── Helpers ───────────────────────────────────────────────────────────────
+	function formatDate(iso: string): string {
+		try {
+			return new Date(iso).toLocaleDateString(undefined, {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric'
+			});
+		} catch {
+			return iso;
+		}
+	}
+
+	const charCount = $derived(newBody.length);
+	const charOver = $derived(charCount > 2000);
+</script>
+
+<div class="mt-10">
+	<h2 class="text-base font-semibold text-zinc-200 mb-4">
+		Comments
+		{#if !loading && comments.length > 0}
+			<span class="text-zinc-500 font-normal text-sm ml-1">({comments.length})</span>
+		{/if}
+	</h2>
+
+	<!-- Post form -->
+	<div class="mb-6">
+		{#if isLoggedIn}
+			<div class="flex flex-col gap-2">
+				<textarea
+					bind:value={newBody}
+					placeholder="Write a comment…"
+					rows="3"
+					class="w-full px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm placeholder-zinc-500 resize-none focus:outline-none focus:border-amber-400 transition-colors"
+				></textarea>
+				<div class="flex items-center justify-between gap-3">
+					<span class="text-xs {charOver ? 'text-red-400' : 'text-zinc-600'} tabular-nums">
+						{charCount}/2000
+					</span>
+					<div class="flex items-center gap-3">
+						{#if postError}
+							<span class="text-xs text-red-400">{postError}</span>
+						{/if}
+						<button
+							onclick={postComment}
+							disabled={posting || !newBody.trim() || charOver}
+							class="px-4 py-1.5 rounded-lg text-sm font-medium transition-colors
+								{posting || !newBody.trim() || charOver
+									? 'bg-zinc-700 text-zinc-500 cursor-not-allowed'
+									: 'bg-amber-400 text-zinc-900 hover:bg-amber-300'}"
+						>
+							{posting ? 'Posting…' : 'Post'}
+						</button>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<p class="text-sm text-zinc-500">
+				<a href="/auth/login" class="text-amber-400 hover:text-amber-300 transition-colors">Log in</a>
+				to leave a comment.
+			</p>
+		{/if}
+	</div>
+
+	<!-- Comment list -->
+	{#if loading}
+		<div class="flex flex-col gap-3">
+			{#each Array(3) as _}
+				<div class="rounded-lg bg-zinc-800/50 p-4 animate-pulse">
+					<div class="h-3 w-24 bg-zinc-700 rounded mb-3"></div>
+					<div class="h-3 w-full bg-zinc-700/60 rounded mb-2"></div>
+					<div class="h-3 w-3/4 bg-zinc-700/60 rounded"></div>
+				</div>
+			{/each}
+		</div>
+	{:else if loadError}
+		<p class="text-sm text-red-400">{loadError}</p>
+	{:else if comments.length === 0}
+		<p class="text-sm text-zinc-500">No comments yet. Be the first!</p>
+	{:else}
+		<div class="flex flex-col gap-3">
+			{#each comments as comment (comment.id)}
+				{@const myVote = myVotes[comment.id]}
+				{@const voting = votingIds.has(comment.id)}
+				<div class="rounded-lg bg-zinc-800/50 border border-zinc-700/50 px-4 py-3 flex flex-col gap-2">
+					<!-- Header: username + date -->
+					<div class="flex items-center gap-2 flex-wrap">
+						<span class="text-sm font-medium text-zinc-200">{comment.username || 'Anonymous'}</span>
+						<span class="text-zinc-600 text-xs">&middot;</span>
+						<span class="text-xs text-zinc-500">{formatDate(comment.created)}</span>
+					</div>
+
+					<!-- Body -->
+					<p class="text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
+
+					<!-- Vote row -->
+					<div class="flex items-center gap-3 pt-1">
+						<!-- Upvote -->
+						<button
+							onclick={() => vote(comment.id, 'up')}
+							disabled={voting}
+							title="Upvote"
+							class="flex items-center gap-1 text-xs transition-colors disabled:opacity-50
+								{myVote === 'up'
+									? 'text-amber-400'
+									: 'text-zinc-500 hover:text-zinc-300'}"
+						>
+							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
+							</svg>
+							<span class="tabular-nums">{comment.upvotes ?? 0}</span>
+						</button>
+
+						<!-- Downvote -->
+						<button
+							onclick={() => vote(comment.id, 'down')}
+							disabled={voting}
+							title="Downvote"
+							class="flex items-center gap-1 text-xs transition-colors disabled:opacity-50
+								{myVote === 'down'
+									? 'text-red-400'
+									: 'text-zinc-500 hover:text-zinc-300'}"
+						>
+							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
+							</svg>
+							<span class="tabular-nums">{comment.downvotes ?? 0}</span>
+						</button>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>