@itsmrtr/bunkoshelf 1.12.0 → 1.13.0

package/dist/src/app/api/reader/books/[slug]/annotations/route.ts

@@ -2,12 +2,14 @@ import { NextResponse } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { createBookAnnotation, deleteBookAnnotation, listBookAnnotations, updateBookAnnotationNote } from "@/lib/db/books/reading";
+import { canAccessBookVolume } from "@/lib/clubs/access";
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
   const user = await verifySession();
   if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   const volume = await findBookVolumeBySlug((await params).slug);
   if (!volume) return NextResponse.json({ error: "Book not found" }, { status: 404 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   return NextResponse.json(await listBookAnnotations(user.id, volume.id));
 }
 
@@ -17,6 +19,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ slu
   const volume = await findBookVolumeBySlug((await params).slug);
   const body = await request.json() as { cfiRange?: string; excerpt?: string; note?: string; color?: string };
   if (!volume || !body.cfiRange) return NextResponse.json({ error: "Invalid annotation" }, { status: 400 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   return NextResponse.json(await createBookAnnotation(user.id, volume.id, {
     cfiRange: body.cfiRange, excerpt: body.excerpt ?? null, note: body.note ?? null,
     color: ["lilah", "yellow", "green", "blue", "pink"].includes(body.color ?? "") ? body.color! : "lilah",

package/dist/src/app/api/reader/books/[slug]/bookmarks/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { createBookBookmark, deleteBookBookmark, listBookBookmarks } from "@/lib/db/books/reading";
+import { canAccessBookVolume } from "@/lib/clubs/access";
 
 async function getVolume(slug: string) { return findBookVolumeBySlug(slug); }
 
@@ -10,6 +11,7 @@ export async function GET(_request: Request, { params }: { params: Promise<{ slu
   if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   const volume = await getVolume((await params).slug);
   if (!volume) return NextResponse.json({ error: "Book not found" }, { status: 404 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   return NextResponse.json(await listBookBookmarks(user.id, volume.id));
 }
 
@@ -19,6 +21,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ slu
   const volume = await getVolume((await params).slug);
   const body = await request.json() as { cfi?: string; label?: string; chapterLabel?: string };
   if (!volume || !body.cfi) return NextResponse.json({ error: "Invalid bookmark" }, { status: 400 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   return NextResponse.json(await createBookBookmark(user.id, volume.id, { cfi: body.cfi, label: body.label ?? null, chapterLabel: body.chapterLabel ?? null }));
 }
 

package/dist/src/app/api/reader/books/[slug]/file/route.ts

@@ -1,14 +1,16 @@
 import { NextResponse } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
-import { findBookFileBySlug } from "@/lib/db/books/library";
+import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { readBookFile } from "@/lib/books/storage";
+import { canAccessBookVolume } from "@/lib/clubs/access";
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
   const user = await verifySession();
   if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   const { slug } = await params;
-  const volume = await findBookFileBySlug(slug);
+  const volume = await findBookVolumeBySlug(slug);
   if (!volume) return NextResponse.json({ error: "Book not found" }, { status: 404 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   const file = await readBookFile(volume.fullPath);
   return new NextResponse(new Uint8Array(file), {
     headers: {

package/dist/src/app/api/reader/books/[slug]/progress/route.ts

@@ -2,12 +2,15 @@ import { NextResponse } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { findBookProgress, upsertBookProgress } from "@/lib/db/books/reading";
+import { canAccessBookVolume } from "@/lib/clubs/access";
+import { recordClubProgressActivities } from "@/lib/db/clubs";
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
   const user = await verifySession();
   if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   const volume = await findBookVolumeBySlug((await params).slug);
   if (!volume) return NextResponse.json({ error: "Book not found" }, { status: 404 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   return NextResponse.json(await findBookProgress(user.id, volume.id));
 }
 
@@ -16,6 +19,7 @@ export async function PUT(request: Request, { params }: { params: Promise<{ slug
   if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   const volume = await findBookVolumeBySlug((await params).slug);
   if (!volume) return NextResponse.json({ error: "Book not found" }, { status: 404 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   const body = await request.json() as Record<string, unknown>;
   const progression = typeof body.progression === "number" ? Math.min(1, Math.max(0, body.progression)) : undefined;
   const readingDate = typeof body.readingDate === "string" && /^\d{4}-\d{2}-\d{2}$/.test(body.readingDate)
@@ -34,5 +38,6 @@ export async function PUT(request: Request, { params }: { params: Promise<{ slug
     lastReadAt: hasReadingLocation || isRead === true ? new Date() : undefined,
     readingDate,
   });
+  await recordClubProgressActivities(user.id, "BOOK_SERIES", volume.series.id);
   return NextResponse.json(result);
 }

package/dist/src/app/api/reader/books/[slug]/state/route.ts

@@ -6,6 +6,7 @@ import {
   listBookAnnotations,
   listBookBookmarks,
 } from "@/lib/db/books/reading";
+import { canAccessBookVolume } from "@/lib/clubs/access";
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
   const user = await verifySession();
@@ -13,6 +14,7 @@ export async function GET(_request: Request, { params }: { params: Promise<{ slu
 
   const volume = await findBookVolumeBySlug((await params).slug);
   if (!volume) return NextResponse.json({ error: "Book not found" }, { status: 404 });
+  if (!(await canAccessBookVolume(user, volume.id))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
 
   const [progress, bookmarks, annotations] = await Promise.all([
     findBookProgress(user.id, volume.id),

package/dist/src/components/clubs/ClubDashboard.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { addClubCandidate, addClubMilestone, archiveClub, completeClubCycle, confirmClubCandidates, createClubCycle, createClubInvite, deleteClub, removeClubCandidate, removeClubMember, reviewClubMember, selectClubWork, voteForClubCandidate } from "@/actions/clubs";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
+import type { ClubCycle, ClubMember, ReadingClub, ClubSourceType } from "@/lib/db/clubs";
+import type { Dictionary } from "@/lib/types";
+
+type Work = { id: string; title: string; section: string; type: ClubSourceType; is_oneshot: boolean };
+type Candidate = { id: string; source_type: ClubSourceType; source_id: string; title: string | null; section: string | null; is_oneshot: boolean; votes: string };
+type Milestone = { id: string; position: number; label: string; target_date: string };
+
+export default function ClubDashboard({ club, cycles, members, activities, activeCandidates, milestones, works, readingVolumes, isManager, lang, intl }: { club: ReadingClub; cycles: ClubCycle[]; members: ClubMember[]; activities: Array<{ id: string; type: string; created_at: Date; username: string; name: string | null; label: string | null }>; activeCandidates: Candidate[]; milestones: Milestone[]; works: Work[]; readingVolumes: Array<{ slug: string; title: string; kind: string; manga_style: string | null }>; isManager: boolean; lang: string; intl: Dictionary }) {
+  const router = useRouter();
+  const { confirm } = useAlertDialog()!;
+  const [invite, setInvite] = useState("");
+  const [message, setMessage] = useState("");
+  const [candidateValues, setCandidateValues] = useState<string[]>([""]);
+  const labels = intl.clubs as Record<string, string>;
+  const bookLabels = intl.books as Record<string, string>;
+  const libraryLabels = intl.libraries as Record<string, string>;
+  const mangaLabels = intl.manga as Record<string, string>;
+  const sidebarLabels = intl.sidebar as Record<string, string>;
+  const active = cycles.find((cycle) => cycle.status === "READING");
+  const draft = cycles.find((cycle) => cycle.status === "DRAFT");
+  const voting = cycles.find((cycle) => cycle.status === "VOTING");
+  const refresh = () => router.refresh();
+  const makeInvite = async () => { const result = await createClubInvite(club.slug); if (!result.success) return setMessage(result.error); if (result.token) setInvite(`${window.location.origin}/${lang}/clubs/join/${result.token}`); };
+  const submitCycle = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const form = event.currentTarget; const data = new FormData(form); const result = await createClubCycle(club.slug, { title: String(data.get("title")), voteClosesAt: String(data.get("voteClosesAt") || "") }); if (!result.success) setMessage(result.error); else { form.reset(); refresh(); } };
+  const submitMilestone = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); if (!active) return; const form = event.currentTarget; const data = new FormData(form); const result = await addClubMilestone(club.slug, active.id, { label: String(data.get("label")), position: Number(data.get("position")), targetDate: String(data.get("targetDate")) }); if (!result.success) setMessage(result.error); else { form.reset(); refresh(); } };
+  const selectWork = async (cycle: ClubCycle, value: string) => { const [sourceType, sourceId] = value.split(":") as [ClubSourceType, string]; const result = cycle.status === "VOTING" ? await addClubCandidate(club.slug, cycle.id, sourceType, sourceId) : await selectClubWork(club.slug, cycle.id, sourceType, sourceId); if (!result.success) setMessage(result.error); else refresh(); };
+  const memberStatus = (status: ClubMember["status"]) => labels[status.toLowerCase()];
+  useEffect(() => setCandidateValues([""]), [draft?.id]);
+  const titleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1);
+  const workSectionLabel = (type: ClubSourceType, section: string | null) => type === "BOOK_SERIES" ? bookLabels.book : section === "comic" ? sidebarLabels.comic.replace(/s$/, "") : libraryLabels.manga;
+  const workConditionLabel = (type: ClubSourceType, section: string | null, isOneshot: boolean) => isOneshot ? type === "BOOK_SERIES" ? mangaLabels.othersOneshot : section === "comic" ? mangaLabels.comicOneshot : mangaLabels.oneshot : mangaLabels.series.replace(/:$/, "");
+  const workLabel = (work: Pick<Work, "title" | "type" | "section" | "is_oneshot">) => `${work.title} · ${titleCase(workSectionLabel(work.type, work.section))} · ${titleCase(workConditionLabel(work.type, work.section, work.is_oneshot))}`;
+  const candidateLabel = (candidate: Candidate) => `${candidate.title ?? "—"} · ${titleCase(workSectionLabel(candidate.source_type, candidate.section))} · ${titleCase(workConditionLabel(candidate.source_type, candidate.section, candidate.is_oneshot))}`;
+  const confirmCandidateRemoval = async (candidateId: string) => { if (!voting || !await confirm({ title: labels.removeCandidateTitle, description: labels.removeCandidateDescription, confirmLabel: labels.removeCandidate, destructive: true })) return; const result = await removeClubCandidate(club.slug, voting.id, candidateId); if (!result.success) setMessage(result.error); else refresh(); };
+  const confirmMemberRemoval = async (memberId: string) => { if (!await confirm({ title: labels.removeMemberTitle, description: labels.removeMemberDescription, confirmLabel: labels.removeMember, destructive: true })) return; const result = await removeClubMember(club.slug, memberId); if (!result.success) setMessage(result.error); else refresh(); };
+  const confirmArchive = async () => { if (!await confirm({ title: labels.archiveTitle, description: labels.archiveDescription, confirmLabel: labels.archive, destructive: true })) return; const result = await archiveClub(club.slug); if (!result.success) setMessage(result.error); else refresh(); };
+  const confirmClubDeletion = async () => { if (!await confirm({ title: labels.deleteClubTitle, description: labels.deleteClubDescription, confirmLabel: labels.deleteClub, destructive: true, irreversible: true })) return; const result = await deleteClub(club.slug); if (!result.success) return setMessage(result.error); router.push(`/${lang}/clubs`); router.refresh(); };
+  return <div className="p-4 space-y-6">
+    <header className="flex justify-between gap-4 items-start"><div><p className="text-sm uppercase text-sand">{labels.clubLabel}</p><h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{club.name}</h1>{club.description && <p className="mt-2">{club.description}</p>}</div><div className="flex items-center gap-3">{club.status === "ARCHIVED" && <span className="bg-neutral-700 rounded-md px-3 py-1 text-xs uppercase">{labels.archived}</span>}{isManager && club.status === "ARCHIVED" && <button onClick={confirmClubDeletion} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.deleteClub}</button>}</div></header>
+    {message && <p className="text-danger-alt">{message}</p>}
+    {active && <section className="bg-blackamber p-4 rounded-lg"><p className="text-xs uppercase text-sand">{labels.readingNow}</p><h2 className="mt-2">{active.workTitle ?? active.title}</h2><p className="mt-2">{labels.readingPace}</p><div className="mt-5 space-y-3">{milestones.map((milestone) => <div key={milestone.id} className="flex items-center gap-3"><div className="h-2 flex-1 rounded bg-onix"><div className="h-full rounded bg-lilah" style={{ width: `${milestone.position}%` }} /></div><span className="w-14 text-right">{milestone.position}%</span><span>{milestone.label} · {milestone.target_date}</span></div>)}</div><div className="mt-5 flex flex-wrap gap-2">{readingVolumes.map((volume) => <Link key={volume.slug} href={`/${lang}/clubs/${club.slug}/read/${volume.kind}/${volume.slug}`} className="font-bold px-5 py-2 rounded-lg leading-none uppercase text-sand bg-onix border border-onix hover:text-onix hover:bg-pearl hover:border-pearl transition-all duration-300">{labels.read} {volume.title}</Link>)}</div>{isManager && <button onClick={async () => { const result = await completeClubCycle(club.slug, active.id); if (!result.success) setMessage(result.error); else refresh(); }} className="mt-5 text-xs uppercase hover:underline cursor-pointer">{labels.finishCycle}</button>}</section>}
+    {voting && <section className="bg-blackamber p-4 rounded-lg">
+      <p className="text-xs uppercase text-sand">{labels.voting}</p>
+      <h2 className="mt-2">{voting.title}</h2>
+      <p>{labels.closes}: {voting.voteClosesAt ? new Date(voting.voteClosesAt).toLocaleDateString(lang) : labels.noDate}</p>
+      <div className="mt-4 grid gap-2">
+        {activeCandidates.map((candidate) => (
+          <div key={candidate.id} className="bg-onix rounded-lg px-4 py-3 flex items-center justify-between gap-3">
+            <button onClick={async () => { const result = await voteForClubCandidate(club.slug, voting.id, candidate.id); if (!result.success) setMessage(result.error); else refresh(); }} className="text-left hover:text-pearl cursor-pointer">
+              {candidateLabel(candidate)} <span className="text-sand">· {candidate.votes} {labels.votes}</span>
+            </button>
+            {isManager && <div className="flex items-center gap-4"><button onClick={async () => { const result = await selectClubWork(club.slug, voting.id, candidate.source_type, candidate.source_id); if (!result.success) setMessage(result.error); else refresh(); }} className="text-xs uppercase hover:underline cursor-pointer">{labels.choose}</button><button onClick={() => void confirmCandidateRemoval(candidate.id)} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.removeCandidate}</button></div>}
+          </div>
+        ))}
+      </div>
+    </section>}
+    <section className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+      <div className="min-w-0 min-h-44 bg-blackamber p-4 rounded-lg"><h2>{labels.participants}</h2><div className="mt-4 space-y-3">{members.map((member) => <div key={member.id} className="flex gap-3 items-center"><div className="flex-1"><p>{member.name ?? member.username}</p><div className="mt-1 flex items-center gap-3"><p className="text-xs uppercase text-sand">{memberStatus(member.status)}</p>{isManager && member.status === "APPROVED" && member.userId !== club.ownerId && <button onClick={() => void confirmMemberRemoval(member.id)} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.remove}</button>}</div>{member.status === "APPROVED" && <div className="h-2 bg-onix rounded mt-1"><div className="h-full bg-lilah rounded" style={{ width: `${Math.round((member.progress ?? 0) * 100)}%` }} /></div>}</div><span>{member.status === "APPROVED" ? `${Math.round((member.progress ?? 0) * 100)}%` : ""}</span>{isManager && member.status === "PENDING" && <div className="flex gap-2"><button onClick={async () => { await reviewClubMember(club.slug, member.id, "APPROVED"); refresh(); }} className="text-xs uppercase hover:underline cursor-pointer">{labels.accept}</button><button onClick={async () => { await reviewClubMember(club.slug, member.id, "REJECTED"); refresh(); }} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.reject}</button></div>}</div>)}</div></div>
+      <div className="min-w-0 min-h-44 bg-blackamber p-4 rounded-lg"><h2>{labels.activity}</h2><div className="mt-4 space-y-3">{activities.map((activity) => <p key={activity.id}><span className="font-bold">{activity.name ?? activity.username}</span> {activity.type === "COMPLETED" ? labels.completedReading : `${labels.reachedMilestone} ${activity.label ?? ""}`}.</p>)}{!activities.length && <p>{labels.noActivity}</p>}</div></div>
+    </section>
+    {isManager && club.status === "ACTIVE" && <section className="bg-blackamber p-4 rounded-lg space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3"><h2>{labels.manage}</h2><button onClick={makeInvite} className="font-bold px-4 py-2 rounded-lg leading-none uppercase text-sand bg-onix border border-onix hover:text-onix hover:bg-pearl hover:border-pearl transition-all duration-300 cursor-pointer">{labels.createInvite}</button></div>
+      {invite && <input readOnly value={invite} className="h-14 text-lg text-sand bg-onix border border-neutral-700 rounded-lg w-full px-5" />}
+      <form onSubmit={submitCycle} className="grid gap-4 xl:grid-cols-2 xl:items-end"><input name="title" required placeholder={labels.nextCycle} className="h-14 text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 transition-all duration-300" /><div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-end"><label className="grid gap-2 text-sm uppercase">{labels.voteDeadlineOptional}<input name="voteClosesAt" type="date" className="h-14 text-lg text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 [color-scheme:dark] transition-all duration-300" /></label><button className="h-14 font-bold px-5 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer">{labels.createCycle}</button></div></form>
+      {draft && <div className="space-y-3 pt-2"><p>{draft.title}</p>{candidateValues.map((value, index) => <div key={index} className="flex items-center gap-3"><select value={value} onChange={(event) => setCandidateValues((values) => values.map((candidate, candidateIndex) => candidateIndex === index ? event.target.value : candidate))} className="h-14 flex-1 text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 transition-all duration-300"><option value="">{labels.chooseWork}</option>{works.map((work) => <option key={`${work.type}:${work.id}`} value={`${work.type}:${work.id}`}>{workLabel(work)}</option>)}</select>{candidateValues.length > 1 && <button onClick={() => setCandidateValues((values) => values.filter((_, candidateIndex) => candidateIndex !== index))} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.removeCandidate}</button>}</div>)}<div className="flex flex-wrap items-center gap-3"><button onClick={() => setCandidateValues((values) => [...values, ""])} className="font-bold px-4 py-2 rounded-lg leading-none uppercase text-sand bg-onix border border-onix hover:text-onix hover:bg-pearl hover:border-pearl transition-all duration-300 cursor-pointer">{labels.addCandidate}</button><button onClick={async () => { const uniqueValues = new Set(candidateValues); if (candidateValues.some((value) => !value) || uniqueValues.size !== candidateValues.length) return setMessage(labels.chooseDifferentWorks); if (candidateValues.length > 1 && (!draft.voteClosesAt || new Date(draft.voteClosesAt) <= new Date())) return setMessage(labels.voteDeadlineRequired); const candidates = candidateValues.map((value) => { const [sourceType, sourceId] = value.split(":") as [ClubSourceType, string]; return { sourceType, sourceId }; }); const result = await confirmClubCandidates(club.slug, draft.id, candidates); if (!result.success) setMessage(result.error); else refresh(); }} className="font-bold px-4 py-2 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer">{candidateValues.length === 1 ? labels.confirmReading : labels.startVote}</button></div></div>}
+      {voting && <div className="pt-2"><select defaultValue="" onChange={(event) => { if (event.target.value) void selectWork(voting, event.target.value); }} className="h-14 text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 transition-all duration-300"><option value="">{labels.addCandidate}</option>{works.map((work) => <option key={`${work.type}:${work.id}`} value={`${work.type}:${work.id}`}>{workLabel(work)}</option>)}</select></div>}
+      <div className="flex flex-wrap items-center gap-4"><button onClick={() => void confirmArchive()} className="w-fit text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.archive}</button><button onClick={() => void confirmClubDeletion()} className="w-fit text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.deleteClub}</button></div>
+    </section>}
+    <section className="bg-blackamber p-4 rounded-lg"><h2>{labels.milestones}</h2>{active ? <form onSubmit={submitMilestone} className="mt-4 grid gap-3"><input name="label" required placeholder={labels.milestoneLabel} className="h-14 text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 transition-all duration-300" /><div className="grid gap-3 md:grid-cols-[10rem_minmax(12rem,1fr)_auto] md:items-end"><input name="position" type="number" min="1" max="100" required placeholder={labels.milestonePosition} className="h-14 text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 transition-all duration-300" /><input name="targetDate" type="date" required className="h-14 text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 [color-scheme:dark] transition-all duration-300" /><button className="h-14 font-bold px-5 rounded-lg leading-none uppercase text-sand bg-onix border border-onix hover:text-onix hover:bg-pearl hover:border-pearl transition-all duration-300 cursor-pointer">{labels.addMilestone}</button></div></form> : <p className="mt-4">{labels.selectWorkForMilestones}</p>}</section>
+  </div>;
+}

package/dist/src/components/clubs/ClubInvite.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { joinClubAsGuest, joinClubWithSession } from "@/actions/clubs";
+import type { Dictionary } from "@/lib/types";
+
+export default function ClubInvite({ token, clubName, lang, signedIn, intl }: { token: string; clubName: string; lang: string; signedIn: boolean; intl: Dictionary }) {
+  const router = useRouter();
+  const [error, setError] = useState("");
+  const labels = intl.clubs as Record<string, string>;
+  const joinMember = async () => { const result = await joinClubWithSession(token); if (!result.success) setError(result.error); else router.push(`/${lang}/clubs/${result.slug}`); };
+  const joinGuest = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.currentTarget); const result = await joinClubAsGuest({ token, username: String(data.get("username")), password: String(data.get("password")) }); if (!result.success) setError(result.error); else router.push(`/${lang}/clubs/${result.slug}`); };
+  return <div className="p-4"><div className="bg-blackamber p-4 rounded-lg max-w-xl space-y-4"><p className="text-xs uppercase text-sand">{labels.inviteLabel}</p><h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{clubName}</h1><p>{labels.invitePending}</p>{error && <p className="text-danger-alt">{error}</p>}{signedIn ? <button onClick={joinMember} className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer">{labels.requestJoin}</button> : <form onSubmit={joinGuest} className="grid gap-4"><p className="font-bold">{labels.joinGuest}</p><input name="username" pattern="[A-Za-z0-9_-]{3,32}" required placeholder={labels.username} className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300" /><input name="password" type="password" minLength={8} required placeholder={labels.password} className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300" /><button className="w-fit font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer">{labels.createGuest}</button></form>}</div></div>;
+}

package/dist/src/components/clubs/ClubList.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { createClub } from "@/actions/clubs";
+import type { ReadingClub } from "@/lib/db/clubs";
+import type { Dictionary } from "@/lib/types";
+
+export default function ClubList({ clubs, lang, canCreate, intl }: { clubs: ReadingClub[]; lang: string; canCreate: boolean; intl: Dictionary }) {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState("");
+  const labels = intl.clubs as Record<string, string>;
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const result = await createClub({ name, description });
+    if (!result.success) return setError(result.error);
+    router.push(`/${lang}/clubs/${result.slug}`);
+    router.refresh();
+  };
+  return <div className="p-4 space-y-8">
+    <header><h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{labels.title}</h1><p className="mt-2">{labels.intro}</p></header>
+    {canCreate && <form onSubmit={submit} className="bg-blackamber p-4 rounded-lg grid gap-4">
+      <h2>{labels.createTitle}</h2>
+      <input value={name} onChange={(event) => setName(event.target.value)} placeholder={labels.clubName} className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300" required />
+      <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder={labels.description} className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300" />
+      {error && <p className="text-danger-alt">{error}</p>}
+      <button className="w-fit font-bold px-8 py-4 rounded-lg leading-none uppercase text-onix bg-sand border border-sand hover:text-sand hover:bg-onix hover:border-onix transition-all duration-300 cursor-pointer">{labels.create}</button>
+    </form>}
+    <section className="grid sm:grid-cols-2 gap-4">
+      {clubs.map((club) => <Link key={club.id} href={`/${lang}/clubs/${club.slug}`} className="bg-blackamber p-4 rounded-lg hover:bg-onix transition-all duration-300">
+        <p className="text-xs uppercase text-sand">{club.status === "ACTIVE" ? labels.active : labels.archived}</p><h2 className="mt-2">{club.name}</h2>{club.description && <p className="mt-2">{club.description}</p>}
+      </Link>)}
+      {!clubs.length && <p>{labels.empty}</p>}
+    </section>
+  </div>;
+}

package/dist/src/components/clubs/ClubReader.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import MangaReader from "@/components/reader/MangaReader";
+import EpubReader from "@/components/reader/EpubReader";
+import type { Dictionary } from "@/lib/types";
+
+export default function ClubReader({ kind, volume, intl }: { kind: "manga" | "books"; volume: { id: string; slug: string; title: string; mangaStyle?: string | null; layout?: "reflowable" | "pre-paginated" }; intl: Dictionary }) {
+  const router = useRouter();
+  if (kind === "books") return <EpubReader isOpen onClose={() => router.back()} slug={volume.slug} title={volume.title} layout={volume.layout ?? "reflowable"} intl={intl} />;
+  return <MangaReader isOpen onClose={() => router.back()} slug={volume.slug} intl={intl} isYoureiMode={false} readingDirection={volume.mangaStyle === "YesLTR" || volume.mangaStyle === "No" ? "ltr" : "rtl"} volumeId={volume.id} communityRating={null} initialPersonalRating={null} mangaTitle={volume.title} />;
+}

package/dist/src/components/library/books/BookVolumeContent.tsx

@@ -54,10 +54,10 @@ export default function BookVolumeContent({ volume, lang, intl, readingEntries,
         </div>
         <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">
           <h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{volume.metadata.title}</h1>
-          {volume.metadata.subtitle && <p className="py-2 italic">{volume.metadata.subtitle}</p>}
+          {volume.metadata.subtitle && <p className="py-2 text-2xl not-italic">{volume.metadata.subtitle}</p>}
           {!volume.series.isOneshot && (
             <div className="py-2">
-              <Link href={`/${lang}/${libraryRoot}/${volume.series.slug}`} className="italic hover:underline">
+              <Link href={`/${lang}/${libraryRoot}/${volume.series.slug}`} className="text-2xl not-italic hover:underline">
                 {seriesLabel} {volume.series.title}
               </Link>
             </div>

package/dist/src/components/library/books/BookVolumeRating.tsx

@@ -60,8 +60,8 @@ export default function BookVolumeRating({ volumeId, initialPersonalRating, intl
 
   if (!hasRating && !isOpen) {
     return (
-      <button type="button" onClick={open} className="mt-4 flex cursor-pointer items-center gap-1.5 text-sm text-neutral-500 transition-colors hover:text-neutral-300">
-        <StarIcon size={14} />
+      <button type="button" onClick={open} className="mt-4 flex cursor-pointer items-center gap-1.5 text-xl uppercase text-neutral-500 transition-colors hover:text-neutral-300">
+        <StarIcon size={20} />
         <span>{books.rate}</span>
       </button>
     );

package/dist/src/components/library/manga/VolumeRating.tsx

@@ -75,9 +75,9 @@ export default function VolumeRating({
     return (
       <button
         onClick={openPanel}
-        className="mt-4 flex items-center gap-1.5 text-sm text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
+        className="mt-4 flex items-center gap-1.5 text-xl uppercase text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
       >
-        <StarIcon size={14} />
+        <StarIcon size={20} />
         <span>Valorar</span>
       </button>
     );

package/dist/src/components/library/manga/VolumesContent.tsx

@@ -109,7 +109,7 @@ export default function VolumesContent({
             <div className="py-2">
               <Link
                 href={`/${lang}/${section}/${seriesSlug}`}
-                className="italic hover:underline"
+                className="text-2xl not-italic hover:underline"
               >
                 {seriesLabel} {(meta.series as string) || seriesTitle}
               </Link>

package/dist/src/components/reader/EpubReader.tsx

@@ -9,7 +9,6 @@ import {
   MenuIcon,
   Minimize2Icon,
   SearchIcon,
-  Settings2Icon,
   Trash2Icon,
 } from "lucide-react";
 import type { Dictionary } from "@/lib/types";
@@ -97,9 +96,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
   const reader = intl.epubReader as Record<string, string>;
   const viewerRef = useRef<HTMLDivElement>(null);
   const tocPanelRef = useRef<HTMLElement>(null);
-  const settingsPanelRef = useRef<HTMLDivElement>(null);
   const tocToggleRef = useRef<HTMLButtonElement>(null);
-  const settingsToggleRef = useRef<HTMLButtonElement>(null);
   const bookRef = useRef<any>(null);
   const renditionRef = useRef<any>(null);
   const annotationsRef = useRef<ReaderState["annotations"]>([]);
@@ -125,7 +122,6 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
   const [margin, setMargin] = useState(24);
   const [columnWidth, setColumnWidth] = useState(720);
   const [preferencesLoaded, setPreferencesLoaded] = useState(false);
-  const [showSettings, setShowSettings] = useState(false);
   const [showToc, setShowToc] = useState(false);
   const [coverVisible, setCoverVisible] = useState(false);
   const [bookmarkCfis, setBookmarkCfis] = useState<string[]>([]);
@@ -137,7 +133,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
   const [noteDraft, setNoteDraft] = useState("");
   const [noteEditorOpen, setNoteEditorOpen] = useState(false);
   const [annotationNoteEditorOpen, setAnnotationNoteEditorOpen] = useState(false);
-  const [tocTab, setTocTab] = useState<"contents" | "bookmarks" | "annotations">("contents");
+  const [tocTab, setTocTab] = useState<"contents" | "bookmarks" | "annotations" | "settings">("contents");
   const [search, setSearch] = useState("");
   const [matches, setMatches] = useState<Array<{ label: string; cfi: string }>>([]);
 
@@ -158,7 +154,6 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
   }, [isOpen]);
 
   const closePanels = useCallback(() => {
-    setShowSettings(false);
     setShowToc(false);
   }, []);
 
@@ -509,7 +504,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
     if (target?.closest("input, textarea, select, [contenteditable='true']")) return;
     if (event.key === "Escape") {
       event.preventDefault();
-      if (showSettings || showToc) closePanels();
+      if (showToc) closePanels();
       else closeReader();
       return;
     }
@@ -521,7 +516,7 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
       event.preventDefault();
       navigateNext();
     }
-  }, [closePanels, closeReader, isOpen, navigateNext, navigatePrevious, showSettings, showToc]);
+  }, [closePanels, closeReader, isOpen, navigateNext, navigatePrevious, showToc]);
 
   useEffect(() => {
     readerKeyHandlerRef.current = handleReaderKey;
@@ -533,20 +528,18 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
   }, [handleReaderKey]);
 
   useEffect(() => {
-    if (!isOpen || (!showSettings && !showToc)) return;
+    if (!isOpen || !showToc) return;
     const closeOnOutsidePointer = (event: PointerEvent) => {
       const target = event.target as Node;
       if (
-        settingsPanelRef.current?.contains(target)
-        || tocPanelRef.current?.contains(target)
-        || settingsToggleRef.current?.contains(target)
+        tocPanelRef.current?.contains(target)
         || tocToggleRef.current?.contains(target)
       ) return;
       closePanels();
     };
     document.addEventListener("pointerdown", closeOnOutsidePointer);
     return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
-  }, [closePanels, isOpen, showSettings, showToc]);
+  }, [closePanels, isOpen, showToc]);
 
   const openToc = async (href: string) => {
     coverVisibleRef.current = false;
@@ -681,18 +674,12 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
     setMatches(results.slice(0, 50));
   };
 
-  const togglePanel = (panel: "toc" | "settings") => {
+  const toggleToc = () => {
     setSelectionMenu(null);
     setAnnotationMenu(null);
     setNoteEditorOpen(false);
     setAnnotationNoteEditorOpen(false);
-    if (panel === "toc") {
-      setShowToc((visible) => !visible);
-      setShowSettings(false);
-    } else {
-      setShowSettings((visible) => !visible);
-      setShowToc(false);
-    }
+    setShowToc((visible) => !visible);
   };
 
   if (!isOpen) return null;
@@ -700,26 +687,13 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
 
   return (
     <div className="fixed inset-0 z-50 overflow-hidden text-sand" style={{ background: themeStyles[theme].background }}>
-      {showSettings && (
-        <div ref={settingsPanelRef} className="absolute bottom-[calc(3.5rem+max(0.75rem,env(safe-area-inset-bottom)))] right-3 z-40 max-h-[calc(100dvh-5.5rem-max(0.75rem,env(safe-area-inset-bottom)))] w-[min(24rem,calc(100vw-1.5rem))] overflow-y-auto rounded-lg bg-blackamber p-5 shadow-xl md:bottom-14 md:max-h-[calc(100dvh-4.5rem)]">
-          <div className="grid gap-4 text-base">
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.theme}<select value={theme} onChange={(event) => setTheme(event.target.value as ReaderTheme)} className="cursor-pointer rounded bg-onix px-3 py-2 text-base"><option value="light">{reader.light}</option><option value="sepia">{reader.sepia}</option><option value="dark">{reader.dark}</option></select></label>
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.flow}<select value={flow} onChange={(event) => setFlow(event.target.value as ReaderFlow)} className="cursor-pointer rounded bg-onix px-3 py-2 text-base"><option value="paginated">{reader.paginated}</option><option value="scrolled-continuous">{reader.scrolled}</option></select></label>
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.font}<select value={fontFamily} onChange={(event) => setFontFamily(event.target.value as "serif" | "sans")} className="cursor-pointer rounded bg-onix px-3 py-2 text-base"><option value="serif">{reader.serif}</option><option value="sans">{reader.sans}</option></select></label>
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.fontSize}<input className="w-full cursor-pointer accent-lilah" type="range" min="80" max="160" value={fontSize} onChange={(event) => setFontSize(Number(event.target.value))} /></label>
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.lineHeight}<input className="w-full cursor-pointer accent-lilah" type="range" min="1.2" max="2.4" step="0.1" value={lineHeight} onChange={(event) => setLineHeight(Number(event.target.value))} /></label>
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.margin}<input className="w-full cursor-pointer accent-lilah" type="range" min="0" max="80" value={margin} onChange={(event) => setMargin(Number(event.target.value))} /></label>
-            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.column}<input className="w-full cursor-pointer accent-lilah" type="range" min="320" max="1200" value={columnWidth} onChange={(event) => setColumnWidth(Number(event.target.value))} /></label>
-          </div>
-        </div>
-      )}
-
       {showToc && (
-        <aside ref={tocPanelRef} className="absolute bottom-[calc(3.5rem+max(0.75rem,env(safe-area-inset-bottom)))] left-0 top-0 z-40 w-[min(24rem,calc(100vw-1.5rem))] overflow-y-auto bg-blackamber p-5 shadow-xl md:bottom-14">
-          <div className="mb-4 flex gap-2 border-b border-white/15">
+        <aside ref={tocPanelRef} className="absolute bottom-[calc(3.5rem+max(0.75rem,env(safe-area-inset-bottom)))] left-0 top-0 z-40 w-full overflow-y-auto bg-blackamber p-5 shadow-xl md:bottom-14 md:w-96">
+          <div className="mb-4 flex flex-wrap gap-2 border-b border-white/15">
             <button onClick={() => setTocTab("contents")} className={`cursor-pointer px-2 pb-2 text-base ${tocTab === "contents" ? "border-b-2 border-lilah text-lilah" : "text-sand"}`}>{reader.contents}</button>
             <button onClick={() => setTocTab("bookmarks")} className={`cursor-pointer px-2 pb-2 text-base ${tocTab === "bookmarks" ? "border-b-2 border-lilah text-lilah" : "text-sand"}`}>{reader.bookmarks} {bookmarks.length > 0 ? `(${bookmarks.length})` : ""}</button>
             <button onClick={() => setTocTab("annotations")} className={`cursor-pointer px-2 pb-2 text-base ${tocTab === "annotations" ? "border-b-2 border-lilah text-lilah" : "text-sand"}`}>{reader.annotations} {annotations.length > 0 ? `(${annotations.length})` : ""}</button>
+            {layout === "reflowable" && <button onClick={() => setTocTab("settings")} className={`cursor-pointer px-2 pb-2 text-base ${tocTab === "settings" ? "border-b-2 border-lilah text-lilah" : "text-sand"}`}>{reader.settings}</button>}
           </div>
           {tocTab === "contents" ? <>
             <div className="mb-4 flex gap-2"><input value={search} onChange={(event) => setSearch(event.target.value)} onKeyDown={(event) => event.key === "Enter" && runSearch()} placeholder={reader.searchPlaceholder} className="min-w-0 flex-1 rounded bg-onix px-3 py-2 text-base" /><button onClick={runSearch} aria-label={reader.searchPlaceholder} className="cursor-pointer rounded bg-lilah p-2 text-onix"><SearchIcon size={20} /></button></div>
@@ -727,8 +701,16 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
             {toc.map((entry) => <button key={entry.href} onClick={() => openToc(entry.href)} className="block w-full cursor-pointer py-2 text-left text-base hover:text-lilah">{entry.label}</button>)}
           </> : tocTab === "bookmarks" ? <div className="space-y-1">
             {bookmarks.length === 0 ? <p className="py-2 text-base text-neutral-400">{reader.noBookmarks}</p> : bookmarks.map((bookmark) => <div key={bookmark.id} className="flex items-center gap-2 rounded hover:bg-onix"><button onClick={() => openToc(bookmark.cfi)} className="min-w-0 flex-1 cursor-pointer px-2 py-3 text-left text-base hover:text-lilah"><span className="block truncate">{bookmark.chapterLabel || bookmark.label || reader.markedPage}</span><span className="mt-1 block text-sm text-neutral-400">{reader.goToLocation}</span></button><button onClick={() => removeBookmark(bookmark)} title={reader.removeBookmark} aria-label={reader.removeBookmark} className="cursor-pointer p-3 text-neutral-400 hover:text-lilah"><Trash2Icon size={18} /></button></div>)}
-          </div> : <div className="space-y-2">
+          </div> : tocTab === "annotations" ? <div className="space-y-2">
             {annotations.length === 0 ? <p className="py-2 text-base text-neutral-400">{reader.noAnnotations}</p> : annotations.map((annotation) => <div key={annotation.id} className="rounded bg-onix/60 p-3"><button onClick={() => openToc(annotation.cfiRange)} className="block w-full cursor-pointer text-left hover:text-lilah"><span className="block text-base leading-relaxed">{annotation.excerpt || reader.highlightedText}</span><span className="mt-2 block text-sm text-lilah">{reader.goToLocation}</span></button>{annotation.note && <p className="mt-3 border-t border-white/10 pt-3 text-base text-sand"><span className="mr-2 text-sm uppercase text-neutral-400">{reader.note}</span>{annotation.note}</p>}<button onClick={() => removeAnnotation(annotation)} className="mt-3 flex cursor-pointer items-center gap-2 text-sm text-neutral-400 hover:text-lilah"><Trash2Icon size={16} />{reader.deleteHighlight}</button></div>)}
+          </div> : <div className="grid gap-4 text-base">
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.theme}<select value={theme} onChange={(event) => setTheme(event.target.value as ReaderTheme)} className="cursor-pointer rounded bg-onix px-3 py-2 text-base"><option value="light">{reader.light}</option><option value="sepia">{reader.sepia}</option><option value="dark">{reader.dark}</option></select></label>
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.flow}<select value={flow} onChange={(event) => setFlow(event.target.value as ReaderFlow)} className="cursor-pointer rounded bg-onix px-3 py-2 text-base"><option value="paginated">{reader.paginated}</option><option value="scrolled-continuous">{reader.scrolled}</option></select></label>
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.font}<select value={fontFamily} onChange={(event) => setFontFamily(event.target.value as "serif" | "sans")} className="cursor-pointer rounded bg-onix px-3 py-2 text-base"><option value="serif">{reader.serif}</option><option value="sans">{reader.sans}</option></select></label>
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.fontSize}<input className="w-full cursor-pointer accent-lilah" type="range" min="80" max="160" value={fontSize} onChange={(event) => setFontSize(Number(event.target.value))} /></label>
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.lineHeight}<input className="w-full cursor-pointer accent-lilah" type="range" min="1.2" max="2.4" step="0.1" value={lineHeight} onChange={(event) => setLineHeight(Number(event.target.value))} /></label>
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.margin}<input className="w-full cursor-pointer accent-lilah" type="range" min="0" max="80" value={margin} onChange={(event) => setMargin(Number(event.target.value))} /></label>
+            <label className="grid grid-cols-[7rem_1fr] items-center gap-3">{reader.column}<input className="w-full cursor-pointer accent-lilah" type="range" min="320" max="1200" value={columnWidth} onChange={(event) => setColumnWidth(Number(event.target.value))} /></label>
           </div>}
         </aside>
       )}
@@ -773,9 +755,8 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
         <div className="flex h-14 items-center justify-between px-2">
           <div className="flex items-center gap-1">
             <button onClick={closeReader} title={reader.close} aria-label={reader.close} className="cursor-pointer p-2"><Minimize2Icon size={24} /></button>
-            {layout === "reflowable" && <button ref={settingsToggleRef} onClick={() => togglePanel("settings")} title={reader.settings} aria-label={reader.settings} className="cursor-pointer p-2"><Settings2Icon size={24} /></button>}
             <button onClick={toggleBookmark} title={isBookmarked ? reader.removeBookmark : reader.addBookmark} aria-label={isBookmarked ? reader.removeBookmark : reader.addBookmark} className="cursor-pointer p-2"><BookmarkIcon size={24} className={isBookmarked ? "fill-lilah text-lilah" : ""} /></button>
-            <button ref={tocToggleRef} onClick={() => togglePanel("toc")} title={reader.contents} aria-label={reader.contents} className="cursor-pointer p-2"><MenuIcon size={24} /></button>
+            <button ref={tocToggleRef} onClick={toggleToc} title={reader.contents} aria-label={reader.contents} className="cursor-pointer p-2"><MenuIcon size={24} /></button>
           </div>
           <div className="flex items-center gap-1">
             <button onClick={navigatePrevious} title={reader.previous} aria-label={reader.previous} className="cursor-pointer p-2"><ChevronLeftIcon size={24} /></button>

package/dist/src/lib/clubs/access.ts

@@ -0,0 +1,24 @@
+import { queryOne } from "@/lib/db/query";
+import type { Session } from "@/lib/types";
+
+export async function canAccessLibraryVolume(user: Session, volumeId: string): Promise<boolean> {
+  if (user.role !== "GUEST") return true;
+  const row = await queryOne<{ id: string }>(`
+    SELECT c.id FROM reading_club_cycles c
+    INNER JOIN reading_club_members m ON m.club_id=c.club_id AND m.user_id=$1 AND m.status='APPROVED'
+    INNER JOIN reading_clubs club ON club.id=c.club_id AND club.status='ACTIVE'
+    INNER JOIN library_volumes v ON v.series_id=c.selected_id
+    WHERE c.status='READING' AND c.selected_type='LIBRARY_SERIES' AND v.id=$2 LIMIT 1`, [user.id, volumeId]);
+  return !!row;
+}
+
+export async function canAccessBookVolume(user: Session, volumeId: string): Promise<boolean> {
+  if (user.role !== "GUEST") return true;
+  const row = await queryOne<{ id: string }>(`
+    SELECT c.id FROM reading_club_cycles c
+    INNER JOIN reading_club_members m ON m.club_id=c.club_id AND m.user_id=$1 AND m.status='APPROVED'
+    INNER JOIN reading_clubs club ON club.id=c.club_id AND club.status='ACTIVE'
+    INNER JOIN book_volumes v ON v.series_id=c.selected_id
+    WHERE c.status='READING' AND c.selected_type='BOOK_SERIES' AND v.id=$2 LIMIT 1`, [user.id, volumeId]);
+  return !!row;
+}

package/dist/src/lib/db/books/library.ts

@@ -30,6 +30,19 @@ export interface BookVolume {
   metadata: EpubMetadata & { id: string };
 }
 
+export interface BookSearchEntry {
+  id: string;
+  slug: string;
+  title: string;
+  seriesId: string;
+  seriesSlug: string;
+  seriesTitle: string;
+  seriesIsOneshot: boolean;
+  librarySection: BookLibrarySection;
+  writer: string;
+  subjects: string;
+}
+
 interface BookRow {
   volume_id: string;
   volume_slug: string;
@@ -410,6 +423,33 @@ export async function listBookSeries(): Promise<Array<BookSeries & { volumeCount
     GROUP BY bs.id ORDER BY bs.sort_title`);
 }
 
+export async function listBookSearchEntries(): Promise<BookSearchEntry[]> {
+  return query<BookSearchEntry>(`
+    SELECT bv.id, bv.slug, bm.title,
+      bs.id AS "seriesId", bs.slug AS "seriesSlug", bs.title AS "seriesTitle",
+      bs.is_oneshot AS "seriesIsOneshot", bs.library_section AS "librarySection",
+      COALESCE(
+        STRING_AGG(DISTINCT BTRIM(bp.name), ', ') FILTER (
+          WHERE bp.kind = 'creator'
+            AND (bp.role IS NULL OR LOWER(bp.role) = 'aut')
+            AND BTRIM(bp.name) <> ''
+        ),
+        ''
+      ) AS writer,
+      COALESCE(
+        STRING_AGG(DISTINCT BTRIM(bsub.name), ', ') FILTER (WHERE BTRIM(bsub.name) <> ''),
+        ''
+      ) AS subjects
+    FROM book_volumes bv
+    INNER JOIN book_series bs ON bs.id = bv.series_id
+    INNER JOIN book_metadata bm ON bm.volume_id = bv.id
+    LEFT JOIN book_people bp ON bp.metadata_id = bm.id
+    LEFT JOIN book_subjects bsub ON bsub.metadata_id = bm.id
+    GROUP BY bv.id, bv.slug, bv.number, bv.sort_title, bm.title, bs.id, bs.slug, bs.title, bs.is_oneshot, bs.library_section, bs.sort_title
+    ORDER BY bs.sort_title, bv.number NULLS LAST, bv.sort_title
+  `);
+}
+
 export async function findBookSeriesBySlug(slug: string): Promise<BookSeries | null> {
   return queryOne<BookSeries>(`
     SELECT id, slug, title, path, is_oneshot AS "isOneshot", status,