feat: user profiles, subscriptions, and subscription feed

- PocketBase: new user_subscriptions collection (follower_id, followee_id)
- pocketbase.ts: subscribe/unsubscribe/getFollowingIds/getPublicProfile/
  getUserPublicLibrary/getUserCurrentlyReading/getSubscriptionFeed helpers
- GET /api/users/[username] — public profile with subscription state
- POST/DELETE /api/users/[username]/subscribe — follow/unfollow
- /users/[username] — public profile page: avatar, stats, follow button,
  currently reading grid, full library grid
- CommentsSection: usernames are now links to /users/[username]
- Home page: 'From People You Follow' section powered by subscription feed

ui/src/routes/+page.server.ts

@@ -3,7 +3,8 @@ import {
 	listBooks,
 	recentlyAddedBooks,
 	allProgress,
-	getHomeStats
+	getHomeStats,
+	getSubscriptionFeed
 } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 import type { Book, Progress } from '$lib/server/pocketbase';
@@ -38,9 +39,18 @@ export const load: PageServerLoad = async ({ locals }) => {
 	const inProgressSlugs = new Set(continueReading.map((c) => c.book.slug));
 	const recentlyUpdated = recentBooks.filter((b) => !inProgressSlugs.has(b.slug)).slice(0, 6);
 
+	// Subscription feed — only when logged in
+	const subscriptionFeed = locals.user
+		? await getSubscriptionFeed(locals.user.id, 12).catch((e) => {
+				log.error('home', 'failed to load subscription feed', { err: String(e) });
+				return [] as Awaited<ReturnType<typeof getSubscriptionFeed>>;
+			})
+		: [];
+
 	return {
 		continueReading,
 		recentlyUpdated,
+		subscriptionFeed,
 		stats: {
 			...stats,
 			booksInProgress: continueReading.length

ui/src/routes/+page.svelte

@@ -147,3 +147,56 @@
 		</a>
 	</div>
 {/if}
+
+<!-- From Subscriptions -->
+{#if data.subscriptionFeed.length > 0}
+	<section class="mb-10">
+		<div class="flex items-baseline justify-between mb-3">
+			<h2 class="text-lg font-bold text-zinc-100">From People You Follow</h2>
+		</div>
+		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+			{#each data.subscriptionFeed as { book, readerUsername }}
+				{@const genres = parseGenres(book.genres)}
+				<a
+					href="/books/{book.slug}"
+					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+				>
+					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden">
+						{#if book.cover}
+							<img
+								src={book.cover}
+								alt={book.title}
+								class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+								loading="lazy"
+							/>
+						{:else}
+							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+								</svg>
+							</div>
+						{/if}
+					</div>
+					<div class="p-2 flex flex-col gap-1">
+						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+						{#if book.author}
+							<p class="text-xs text-zinc-400 truncate">{book.author}</p>
+						{/if}
+						<!-- Reader attribution -->
+						<p class="text-xs text-zinc-600 truncate mt-0.5">
+							via <span class="text-amber-500/70">{readerUsername}</span>
+						</p>
+						{#if genres.length > 0}
+							<div class="flex flex-wrap gap-1 mt-auto pt-1">
+								{#each genres.slice(0, 1) as genre}
+									<span class="text-xs px-1 py-0.5 rounded bg-zinc-900 text-zinc-500">{genre}</span>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</a>
+			{/each}
+		</div>
+	</section>
+{/if}

ui/src/routes/api/users/[username]/+server.ts

@@ -0,0 +1,46 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getPublicProfile, getSubscription } from '$lib/server/pocketbase';
+import { presignAvatarUrl } from '$lib/server/minio';
+import { log } from '$lib/server/logger';
+
+/**
+ * GET /api/users/[username]
+ * Returns public profile info + whether the current user is subscribed.
+ */
+export const GET: RequestHandler = async ({ params, locals }) => {
+	const { username } = params;
+
+	try {
+		const profile = await getPublicProfile(username);
+		if (!profile) error(404, `User "${username}" not found`);
+
+		// Resolve avatar presigned URL if set
+		let avatarUrl: string | null = null;
+		if (profile.avatar_url) {
+			avatarUrl = await presignAvatarUrl(profile.id).catch(() => null);
+		}
+
+		// Is the current logged-in user subscribed?
+		let isSubscribed = false;
+		if (locals.user && locals.user.id !== profile.id) {
+			const sub = await getSubscription(locals.user.id, profile.id).catch(() => null);
+			isSubscribed = !!sub;
+		}
+
+		return json({
+			id: profile.id,
+			username: profile.username,
+			avatarUrl,
+			created: profile.created,
+			followerCount: profile.followerCount,
+			followingCount: profile.followingCount,
+			isSubscribed,
+			isSelf: locals.user?.id === profile.id
+		});
+	} catch (e) {
+		if ((e as { status?: number }).status === 404) throw e;
+		log.error('api/users', 'failed to load profile', { username, err: String(e) });
+		error(500, 'Failed to load profile');
+	}
+};

ui/src/routes/api/users/[username]/subscribe/+server.ts

@@ -0,0 +1,48 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import {
+	getUserByUsername,
+	subscribe,
+	unsubscribe,
+	getSubscription
+} from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';
+
+/**
+ * POST /api/users/[username]/subscribe  — subscribe to a user
+ * DELETE /api/users/[username]/subscribe — unsubscribe
+ * Requires authentication.
+ */
+export const POST: RequestHandler = async ({ params, locals }) => {
+	if (!locals.user) error(401, 'Login required');
+
+	const { username } = params;
+	const target = await getUserByUsername(username).catch(() => null);
+	if (!target) error(404, `User "${username}" not found`);
+	if (locals.user.id === target.id) error(400, 'Cannot subscribe to yourself');
+
+	try {
+		await subscribe(locals.user.id, target.id);
+		const sub = await getSubscription(locals.user.id, target.id);
+		return json({ subscribed: true, subId: sub?.id ?? null });
+	} catch (e) {
+		log.error('api/users/subscribe', 'subscribe failed', { username, err: String(e) });
+		error(500, 'Failed to subscribe');
+	}
+};
+
+export const DELETE: RequestHandler = async ({ params, locals }) => {
+	if (!locals.user) error(401, 'Login required');
+
+	const { username } = params;
+	const target = await getUserByUsername(username).catch(() => null);
+	if (!target) error(404, `User "${username}" not found`);
+
+	try {
+		await unsubscribe(locals.user.id, target.id);
+		return json({ subscribed: false });
+	} catch (e) {
+		log.error('api/users/subscribe', 'unsubscribe failed', { username, err: String(e) });
+		error(500, 'Failed to unsubscribe');
+	}
+};

ui/src/routes/users/[username]/+page.server.ts

@@ -0,0 +1,59 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import {
+	getPublicProfile,
+	getSubscription,
+	getUserPublicLibrary,
+	getUserCurrentlyReading
+} from '$lib/server/pocketbase';
+import { presignAvatarUrl } from '$lib/server/minio';
+import { log } from '$lib/server/logger';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	const { username } = params;
+
+	const profile = await getPublicProfile(username).catch(() => null);
+	if (!profile) error(404, `User "${username}" not found`);
+
+	// Resolve avatar
+	let avatarUrl: string | null = null;
+	if (profile.avatar_url) {
+		avatarUrl = await presignAvatarUrl(profile.id).catch(() => null);
+	}
+
+	// Subscription state for the logged-in visitor
+	let isSubscribed = false;
+	const isSelf = locals.user?.id === profile.id;
+	if (locals.user && !isSelf) {
+		const sub = await getSubscription(locals.user.id, profile.id).catch(() => null);
+		isSubscribed = !!sub;
+	}
+
+	// Load public library + currently reading in parallel
+	const [library, currentlyReading] = await Promise.all([
+		getUserPublicLibrary(profile.id).catch((e) => {
+			log.error('users/profile', 'getUserPublicLibrary failed', { username, err: String(e) });
+			return [] as Awaited<ReturnType<typeof getUserPublicLibrary>>;
+		}),
+		getUserCurrentlyReading(profile.id).catch((e) => {
+			log.error('users/profile', 'getUserCurrentlyReading failed', { username, err: String(e) });
+			return [] as Awaited<ReturnType<typeof getUserCurrentlyReading>>;
+		})
+	]);
+
+	return {
+		profile: {
+			id: profile.id,
+			username: profile.username,
+			created: profile.created,
+			followerCount: profile.followerCount,
+			followingCount: profile.followingCount
+		},
+		avatarUrl,
+		isSubscribed,
+		isSelf,
+		isLoggedIn: !!locals.user,
+		library,
+		currentlyReading
+	};
+};

ui/src/routes/users/[username]/+page.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// ── Subscribe / unsubscribe ──────────────────────────────────────────────────
+	let subscribed = $state(data.isSubscribed);
+	let followerCount = $state(data.profile.followerCount);
+	let subLoading = $state(false);
+
+	async function toggleSubscribe() {
+		if (subLoading) return;
+		subLoading = true;
+		try {
+			const method = subscribed ? 'DELETE' : 'POST';
+			const res = await fetch(`/api/users/${data.profile.username}/subscribe`, { method });
+			if (res.ok) {
+				subscribed = !subscribed;
+				followerCount += subscribed ? 1 : -1;
+			}
+		} finally {
+			subLoading = false;
+		}
+	}
+
+	// ── Helpers ──────────────────────────────────────────────────────────────────
+	function initials(username: string): string {
+		return username.slice(0, 2).toUpperCase();
+	}
+
+	function joinDate(iso: string): string {
+		try {
+			return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'long' });
+		} catch {
+			return '';
+		}
+	}
+
+	function parseGenres(genres: string[] | string | null | undefined): string[] {
+		if (!genres) return [];
+		if (Array.isArray(genres)) return genres;
+		try {
+			const parsed = JSON.parse(genres);
+			return Array.isArray(parsed) ? parsed : [];
+		} catch {
+			return [];
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{data.profile.username} — libnovel</title>
+</svelte:head>
+
+<!-- ── Header ────────────────────────────────────────────────────────────── -->
+<div class="flex items-start gap-5 mb-8">
+	<!-- Avatar -->
+	<div class="flex-shrink-0">
+		{#if data.avatarUrl}
+			<img
+				src={data.avatarUrl}
+				alt={data.profile.username}
+				class="w-20 h-20 rounded-full object-cover ring-2 ring-zinc-700"
+			/>
+		{:else}
+			<div class="w-20 h-20 rounded-full bg-zinc-700 flex items-center justify-center text-2xl font-bold text-zinc-300 ring-2 ring-zinc-600">
+				{initials(data.profile.username)}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Info -->
+	<div class="flex-1 min-w-0">
+		<h1 class="text-xl font-bold text-zinc-100 mb-0.5">{data.profile.username}</h1>
+		<p class="text-xs text-zinc-500 mb-3">Joined {joinDate(data.profile.created)}</p>
+
+		<!-- Stats row -->
+		<div class="flex gap-5 text-sm mb-4">
+			<span>
+				<span class="font-semibold text-zinc-100">{followerCount}</span>
+				<span class="text-zinc-500 ml-1">followers</span>
+			</span>
+			<span>
+				<span class="font-semibold text-zinc-100">{data.profile.followingCount}</span>
+				<span class="text-zinc-500 ml-1">following</span>
+			</span>
+		</div>
+
+		<!-- Subscribe button — only shown to logged-in visitors viewing someone else's profile -->
+		{#if data.isLoggedIn && !data.isSelf}
+			<button
+				onclick={toggleSubscribe}
+				disabled={subLoading}
+				class="px-4 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50
+					{subscribed
+						? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600 border border-zinc-600'
+						: 'bg-amber-400 text-zinc-900 hover:bg-amber-300'}"
+			>
+				{#if subLoading}
+					…
+				{:else if subscribed}
+					Following
+				{:else}
+					Follow
+				{/if}
+			</button>
+		{:else if !data.isLoggedIn}
+			<a
+				href="/login"
+				class="inline-block px-4 py-1.5 rounded-lg text-sm font-medium bg-amber-400 text-zinc-900 hover:bg-amber-300 transition-colors"
+			>
+				Follow
+			</a>
+		{/if}
+	</div>
+</div>
+
+<!-- ── Currently Reading ─────────────────────────────────────────────────── -->
+{#if data.currentlyReading.length > 0}
+	<section class="mb-10">
+		<h2 class="text-base font-semibold text-zinc-200 mb-3">Currently Reading</h2>
+		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+			{#each data.currentlyReading as { book, chapter }}
+				<a
+					href="/books/{book.slug}"
+					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+				>
+					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden relative">
+						{#if book.cover}
+							<img
+								src={book.cover}
+								alt={book.title}
+								class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+								loading="lazy"
+							/>
+						{:else}
+							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+								<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+								</svg>
+							</div>
+						{/if}
+						<span class="absolute bottom-1.5 right-1.5 text-xs bg-amber-400 text-zinc-900 font-bold px-1.5 py-0.5 rounded">
+							ch.{chapter}
+						</span>
+					</div>
+					<div class="p-2">
+						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title}</h3>
+						{#if book.author}
+							<p class="text-xs text-zinc-500 truncate mt-0.5">{book.author}</p>
+						{/if}
+					</div>
+				</a>
+			{/each}
+		</div>
+	</section>
+{/if}
+
+<!-- ── Library ───────────────────────────────────────────────────────────── -->
+{#if data.library.length > 0}
+	<section class="mb-10">
+		<h2 class="text-base font-semibold text-zinc-200 mb-3">
+			Library
+			<span class="text-zinc-500 font-normal text-sm ml-1">({data.library.length})</span>
+		</h2>
+		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+			{#each data.library as { book, chapter, saved }}
+				{@const genres = parseGenres(book.genres)}
+				<a
+					href="/books/{book.slug}"
+					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+				>
+					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden relative">
+						{#if book.cover}
+							<img
+								src={book.cover}
+								alt={book.title}
+								class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+								loading="lazy"
+							/>
+						{:else}
+							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+								<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+								</svg>
+							</div>
+						{/if}
+						{#if chapter}
+							<span class="absolute bottom-1.5 right-1.5 text-xs bg-zinc-900/80 text-zinc-300 font-medium px-1.5 py-0.5 rounded">
+								ch.{chapter}
+							</span>
+						{/if}
+						{#if saved && !chapter}
+							<span class="absolute top-1.5 right-1.5">
+								<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+									<path d="M5 3a2 2 0 00-2 2v16l9-4 9 4V5a2 2 0 00-2-2H5z"/>
+								</svg>
+							</span>
+						{/if}
+					</div>
+					<div class="p-2">
+						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title}</h3>
+						{#if book.author}
+							<p class="text-xs text-zinc-500 truncate mt-0.5">{book.author}</p>
+						{/if}
+						{#if genres.length > 0}
+							<p class="text-xs text-zinc-600 truncate mt-0.5">{genres[0]}</p>
+						{/if}
+					</div>
+				</a>
+			{/each}
+		</div>
+	</section>
+{/if}
+
+<!-- ── Empty state ───────────────────────────────────────────────────────── -->
+{#if data.library.length === 0 && data.currentlyReading.length === 0}
+	<div class="py-16 text-center text-zinc-500">
+		<svg class="w-10 h-10 mx-auto mb-3 text-zinc-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+		</svg>
+		<p class="text-sm">No books in library yet.</p>
+	</div>
+{/if}