@itsmrtr/bunkoshelf 1.14.1 → 1.15.0

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

@@ -3,17 +3,18 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { addClubCandidate, addClubMilestone, archiveClub, completeClubCycle, confirmClubCandidates, createClubCycle, 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 Button from "@/components/ui/Button";
+import type { ClubCandidate, 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, inviteToken, 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; inviteToken: string | null; lang: string; intl: Dictionary }) {
+export default function ClubDashboard({ club, cycles, members, activities, activeCandidates, milestones, works, readingVolumes, isManager, inviteToken, 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: ClubCandidate[]; milestones: Milestone[]; works: Work[]; readingVolumes: Array<{ slug: string; title: string; kind: string; manga_style: string | null }>; isManager: boolean; inviteToken: string | null; lang: string; intl: Dictionary }) {
   const router = useRouter();
   const { confirm } = useAlertDialog()!;
   const [inviteCopied, setInviteCopied] = useState(false);
@@ -41,7 +42,12 @@ export default function ClubDashboard({ club, cycles, members, activities, activ
   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 candidateLabel = (candidate: ClubCandidate) => `${candidate.title ?? "—"} · ${titleCase(workSectionLabel(candidate.source_type, candidate.section))} · ${titleCase(workConditionLabel(candidate.source_type, candidate.section, candidate.is_oneshot))}`;
+  const workValue = (work: Pick<Work, "type" | "id">) => `${work.type}:${work.id}`;
+  const readingWorkValues = new Set(cycles.filter((cycle) => cycle.status === "READING" && cycle.selectedType && cycle.selectedId).map((cycle) => `${cycle.selectedType}:${cycle.selectedId}`));
+  const draftWorks = (index: number) => works.filter((work) => !readingWorkValues.has(workValue(work)) && !candidateValues.some((value, candidateIndex) => candidateIndex !== index && value === workValue(work)));
+  const votingWorks = works.filter((work) => !readingWorkValues.has(workValue(work)) && !activeCandidates.some((candidate) => `${candidate.source_type}:${candidate.source_id}` === workValue(work)));
+  const voteForCandidate = async (candidate: ClubCandidate) => { if (!voting) return; const result = await voteForClubCandidate(club.slug, voting.id, candidate.id); if (!result.success) setMessage(result.error); else refresh(); };
   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(); };
@@ -49,34 +55,45 @@ export default function ClubDashboard({ club, cycles, members, activities, activ
   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>}
+    {active && <section className="rounded-lg bg-blackamber p-4">
+      <div className="flex gap-4">
+        <div className="relative aspect-[2/3] w-24 shrink-0 overflow-hidden rounded-md bg-onix">
+          <Image src={active.workCover || "/placeholder.svg?=v1"} alt={`Cover for ${active.workTitle ?? active.title}`} fill sizes="96px" className="object-cover" />
+        </div>
+        <div className="min-w-0"><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>
+      </div>
+      <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 variant="accent" onClick={async () => { const result = await completeClubCycle(club.slug, active.id); if (!result.success) setMessage(result.error); else refresh(); }} className="mt-5 px-4 py-2 text-xs">{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 key={candidate.id} role="button" tabIndex={0} aria-label={`${labels.voting}: ${candidate.title ?? "—"}`} onClick={() => void voteForCandidate(candidate)} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); void voteForCandidate(candidate); } }} className="flex cursor-pointer items-center justify-between gap-3 rounded-lg bg-onix px-4 py-3 transition-colors hover:bg-neutral-700">
+            <div className="flex min-w-0 items-center gap-3">
+              <div className="relative aspect-[2/3] w-12 shrink-0 overflow-hidden rounded bg-blackamber"><Image src={candidate.cover || "/placeholder.svg?=v1"} alt={`Cover for ${candidate.title ?? ""}`} fill sizes="48px" className="object-cover" /></div>
+              <p className="min-w-0 text-left">{candidateLabel(candidate)} <span className="text-sand">· {candidate.votes} {labels.votes}</span></p>
+            </div>
+            {isManager && <div onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()} className="flex shrink-0 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.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="cursor-pointer rounded-lg border border-danger-alt px-3 py-2 text-xs font-bold uppercase leading-none text-danger-alt transition-all duration-300 hover:bg-danger-alt hover:text-pearl">{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 variant="accent" onClick={async () => { await reviewClubMember(club.slug, member.id, "APPROVED"); refresh(); }} className="px-3 py-2 text-xs">{labels.accept}</Button><button onClick={async () => { await reviewClubMember(club.slug, member.id, "REJECTED"); refresh(); }} className="cursor-pointer rounded-lg border border-danger-alt px-3 py-2 text-xs font-bold uppercase leading-none text-danger-alt transition-all duration-300 hover:bg-danger-alt hover:text-pearl">{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">
       <h2>{labels.manage}</h2>
       {invite && <button type="button" onClick={() => void copyInvite()} title={inviteCopied ? labels.inviteCopied : labels.copyInvite} aria-label={inviteCopied ? labels.inviteCopied : labels.copyInvite} className="flex h-14 w-full cursor-pointer items-center gap-3 rounded-lg border border-neutral-700 bg-onix px-5 text-left text-lg text-sand transition-colors duration-300 hover:border-pearl"><span className="min-w-0 flex-1 truncate">{invite}</span>{inviteCopied ? <CheckIcon size={20} className="shrink-0 text-lilah" /> : <CopyIcon size={20} className="shrink-0" />}</button>}
-      <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>}
+      <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 variant="lightAlt" className="h-14 px-5">{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>{draftWorks(index).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 variant="dark" onClick={() => setCandidateValues((values) => [...values, ""])} className="px-4 py-2">{labels.addCandidate}</Button><Button variant="lightAlt" 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="px-4 py-2">{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>{votingWorks.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>
+    <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 variant="dark" className="h-14 px-5">{labels.addMilestone}</Button></div></form> : <p className="mt-4">{labels.selectWorkForMilestones}</p>}</section>
   </div>;
 }

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

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { joinClubAsGuest, joinClubWithSession } from "@/actions/clubs";
+import Button from "@/components/ui/Button";
 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 }) {
@@ -11,5 +12,5 @@ export default function ClubInvite({ token, clubName, lang, signedIn, intl }: {
   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>;
+  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 variant="lightAlt" onClick={joinMember} className="px-8 py-4">{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 variant="lightAlt" className="w-fit px-8 py-4">{labels.createGuest}</Button></form>}</div></div>;
 }

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

@@ -1,44 +1,97 @@
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
+import { UsersRoundIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { createClub } from "@/actions/clubs";
+import { createClub, requestToJoinClub } from "@/actions/clubs";
+import Button from "@/components/ui/Button";
+import Modal from "@/components/ui/Modal";
 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 }) {
+export default function ClubList({ clubs, lang, canCreate, isAdmin, intl }: { clubs: ReadingClub[]; lang: string; canCreate: boolean; isAdmin: boolean; intl: Dictionary }) {
   const router = useRouter();
   const pathname = usePathname();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   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>;
+
   useEffect(() => {
     setName("");
     setDescription("");
     setError("");
+    setMessage("");
+    setIsCreateDialogOpen(false);
   }, [pathname]);
+
   const submit = async (event: React.FormEvent) => {
     event.preventDefault();
     const result = await createClub({ name, description });
     if (!result.success) return setError(result.error);
+    setIsCreateDialogOpen(false);
     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>)}
+
+  const requestJoin = async (slug: string) => {
+    const result = await requestToJoinClub(slug);
+    if (!result.success) return setMessage(result.error);
+    setMessage(labels.invitePending);
+    router.refresh();
+  };
+
+  const titleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1);
+  const workSectionLabel = (club: ReadingClub) => club.workSourceType === "BOOK_SERIES" ? bookLabels.book : club.workSection === "comic" ? sidebarLabels.comic.replace(/s$/, "") : libraryLabels.manga;
+  const workConditionLabel = (club: ReadingClub) => club.workIsOneshot ? club.workSourceType === "BOOK_SERIES" ? mangaLabels.othersOneshot : club.workSection === "comic" ? mangaLabels.comicOneshot : mangaLabels.oneshot : mangaLabels.series.replace(/:$/, "");
+
+  return <div className="space-y-8 p-4">
+    <header className="flex items-start justify-between gap-4"><div><h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{labels.title}</h1><p className="mt-2">{labels.intro}</p></div>{canCreate && <Button variant="light" onClick={() => setIsCreateDialogOpen(true)} className="shrink-0 px-5 py-3">{labels.create}</Button>}</header>
+    {message && <p className="text-danger-alt">{message}</p>}
+    <Modal isOpen={isCreateDialogOpen} onClose={() => setIsCreateDialogOpen(false)}>
+      <div className="max-w-7xl mx-auto p-2">
+        <h2 className="mb-4">{labels.createTitle}</h2>
+        <form onSubmit={submit} className="space-y-4">
+          <input value={name} onChange={(event) => setName(event.target.value)} placeholder={labels.clubName} className="w-full rounded-lg border border-onix bg-pearl px-5 py-3" required autoFocus />
+          <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder={labels.description} className="w-full rounded-lg border border-onix bg-pearl px-5 py-3" />
+          {error && <p className="text-danger-alt">{error}</p>}
+          <Button variant="lightAlt" className="px-8 py-4">{labels.create}</Button>
+        </form>
+      </div>
+    </Modal>
+    <section className="grid gap-4 sm:grid-cols-2">
+      {clubs.map((club) => {
+        const canAccess = isAdmin || club.membershipStatus === "APPROVED";
+        const isPending = club.membershipStatus === "PENDING";
+        const content = (
+          <>
+            <div className="relative aspect-[2/3] w-20 shrink-0 overflow-hidden rounded-md bg-onix">
+              <Image src={club.workCover || "/placeholder.svg?=v1"} alt={`Cover for ${club.workTitle ?? club.name}`} fill sizes="80px" className="object-cover" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs uppercase text-sand">{club.status === "ACTIVE" ? labels.active : labels.archived}</p>
+              <h2 className="mt-2 truncate">{club.name}</h2>
+              {club.workTitle && (
+                <div className="mt-1 min-w-0 text-sm text-sand">
+                  <p className="truncate">{club.workTitle} <span>· {titleCase(workSectionLabel(club))} · {titleCase(workConditionLabel(club))}</span></p>
+                  {club.workVotes !== null && <p className="mt-1">{club.workVotes} {labels.votes}</p>}
+                </div>
+              )}
+              {club.description && <p className="mt-2 line-clamp-2">{club.description}</p>}
+              <p className="mt-3 flex items-center gap-2 text-sm text-sand"><UsersRoundIcon size={16} />{club.participantCount} {labels.participants}</p>
+            </div>
+          </>
+        );
+        return <article key={club.id} className="rounded-lg bg-blackamber p-4">{canAccess ? <Link href={`/${lang}/clubs/${club.slug}`} className="flex gap-4 transition-all duration-300 hover:text-lilah">{content}</Link> : <div className="flex gap-4">{content}</div>}{!canAccess && club.status === "ACTIVE" && <div className="mt-4">{isPending ? <p className="text-sm text-sand">{labels.invitePending}</p> : <Button variant="lightAlt" onClick={() => void requestJoin(club.slug)} className="px-4 py-2 text-sm">{labels.requestJoin}</Button>}</div>}</article>;
+      })}
       {!clubs.length && <p>{labels.empty}</p>}
     </section>
   </div>;

package/dist/src/components/home/manga/RowNewVolsCarousel.tsx

@@ -117,6 +117,7 @@ export default function RowNewVolsCarousel({ entries, lang, intl }: RowNewVolsCa
               progressRatio={entry.progressRatio ?? null}
               intl={intl}
               isDragging={isDragging}
+              coverAspectRatio="uniform"
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
             />
           </div>

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { getBookIdentifierScheme, getBookIdentifierValue } from "@/lib/books/metadata";
-import type { BookVolume } from "@/lib/db/books/library";
+import { classifyBookSubjects, type BookVolume } from "@/lib/db/books/library";
 import type { Dictionary, Locale } from "@/lib/types";
 
 function MetadataField({ label, children }: { label: string; children: ReactNode }) {
@@ -13,7 +13,7 @@ function MetadataField({ label, children }: { label: string; children: ReactNode
   );
 }
 
-export default function BookMetadataPanel({
+export default async function BookMetadataPanel({
   volume,
   lang,
   intl,
@@ -27,6 +27,8 @@ export default function BookMetadataPanel({
   const authors = metadata.people.filter((person) => person.kind === "creator" && (!person.role || person.role.toLowerCase() === "aut"));
   const contributors = metadata.people.filter((person) => !authors.includes(person));
   const isbnIdentifiers = metadata.identifiers.filter((identifier) => getBookIdentifierScheme(identifier.value, identifier.scheme) === "ISBN");
+  const subjectFilters = await classifyBookSubjects(metadata.subjects.map((subject) => subject.name));
+  const subjectFilterByName = new Map(subjectFilters.map((subject) => [subject.subject.toLowerCase(), subject]));
   const roleLabels: Record<string, string> = {
     aut: books.author,
     bkp: books.digitalProduction,
@@ -77,7 +79,12 @@ export default function BookMetadataPanel({
         <div className="mt-8 flex max-w-3xl flex-row items-baseline">
           <p className="w-1/3 text-sm uppercase md:w-1/5">{books.subjects}</p>
           <div className="flex w-2/3 flex-wrap gap-2 md:w-4/5">
-            {metadata.subjects.map((subject) => <span key={subject.name} className="rounded-md bg-neutral-700 px-2 py-1 text-xs uppercase">{subject.name}</span>)}
+            {metadata.subjects.map((subject) => {
+              const filter = subjectFilterByName.get(subject.name.trim().toLowerCase());
+              const query = filter?.type ?? "tag";
+              const name = filter?.name ?? subject.name;
+              return <Link key={subject.name} href={{ pathname: `/${lang}/books/volumes`, query: { [query]: name } }} className="rounded-md bg-neutral-700 px-2 py-1 text-xs uppercase transition-all duration-300 hover:bg-lilah">{subject.name}</Link>;
+            })}
           </div>
         </div>
       )}

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

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import clsx from "clsx";
 import { BookCheckIcon, CheckIcon, HeartIcon, HeartOffIcon } from "lucide-react";
 import EpubReader from "@/components/reader/EpubReader";
+import Button from "@/components/ui/Button";
 import { updateBookReadState } from "@/actions/books-reading";
 import type { Dictionary } from "@/lib/types";
 
@@ -78,38 +79,37 @@ export default function BookReaderButton({ slug, title, layout, intl }: BookRead
 
   return <>
     <div className="flex flex-row mt-4 gap-2">
-      <button
+      <Button
         onClick={() => setOpen(true)}
         aria-label={books.read}
-        className="flex items-center gap-2 px-4 py-3 2xl:px-5 2xl:py-4 rounded-lg leading-none border border-lilah bg-lilah text-pearl hover:bg-pearl hover:text-onix hover:border-pearl transition-all duration-300 cursor-pointer"
+        variant="accent"
+        className="gap-2 px-4 py-3 2xl:px-5 2xl:py-4"
       >
         <BookCheckIcon size={20} />
         <span className="font-bold uppercase">{books.read}</span>
-      </button>
-      <button
+      </Button>
+      <Button
         onClick={() => void toggleRead()}
         disabled={isLoading}
-        className={clsx(
-          "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-          isRead ? "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl" : "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl",
-        )}
+        variant={isRead ? "lightAlt" : "dark"}
+        size="icon"
+        className="size-11 2xl:size-13"
         title={isRead ? books.markUnread : books.markRead}
         aria-label={isRead ? books.markUnread : books.markRead}
       >
         <CheckIcon size={20} />
-      </button>
-      <button
+      </Button>
+      <Button
         onClick={() => void updateProgress({ isFavorite: !favorite })}
         disabled={isLoading}
-        className={clsx(
-          "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
-          favorite ? "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl" : "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl",
-        )}
+        variant={favorite ? "lightAlt" : "dark"}
+        size="icon"
+        className="size-11 2xl:size-13"
         title={favorite ? books.removeFavorite : books.addFavorite}
         aria-label={favorite ? books.removeFavorite : books.addFavorite}
       >
         {favorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
-      </button>
+      </Button>
     </div>
     <EpubReader isOpen={open} onClose={() => setOpen(false)} slug={slug} title={title} layout={layout} intl={intl} />
   </>;

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

@@ -3,6 +3,7 @@
 import { useEffect, useState, type FormEvent } from "react";
 import { PenLineIcon } from "lucide-react";
 import Modal from "@/components/ui/Modal";
+import Button from "@/components/ui/Button";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
 import {
   createBookReadingEntry,
@@ -90,13 +91,14 @@ export default function BookReadingEntryForm({
         </div>
 
         <div className="flex gap-3">
-          <button
+          <Button
             type="submit"
             disabled={isLoading}
-            className="cursor-pointer rounded-lg border border-sand bg-sand px-8 py-4 font-bold leading-none uppercase text-onix transition-all duration-300 hover:border-onix hover:bg-onix hover:text-sand disabled:opacity-50"
+            variant="lightAlt"
+            className="px-8 py-4 disabled:opacity-50"
           >
             {books.save}
-          </button>
+          </Button>
 
           {isEdit && (
             <button

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

@@ -2,9 +2,9 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import clsx from "clsx";
 import { HeartIcon, HeartOffIcon } from "lucide-react";
 import { toggleBookSeriesFavorite } from "@/actions/books-favorites";
+import Button from "@/components/ui/Button";
 import type { Dictionary } from "@/lib/types";
 
 interface BookSeriesFavoriteButtonProps {
@@ -35,17 +35,16 @@ export default function BookSeriesFavoriteButton({ seriesId, initialFavorite, in
   const label = isFavorite ? books.removeFavorite : books.addFavorite;
 
   return (
-    <button
+    <Button
       onClick={toggleFavorite}
       disabled={isLoading}
       title={label}
       aria-label={label}
-      className={clsx(
-        "cursor-pointer rounded-lg border p-3 leading-none transition-all duration-300 2xl:p-4",
-        isFavorite ? "border-sand bg-sand text-onix hover:border-pearl hover:bg-pearl" : "border-blackamber bg-blackamber text-sand hover:border-pearl hover:bg-pearl hover:text-onix",
-      )}
+      variant={isFavorite ? "lightAlt" : "dark"}
+      size="icon"
+      className="size-11 2xl:size-13"
     >
       {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
-    </button>
+    </Button>
   );
 }

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
+import Button from "@/components/ui/Button";
 import {
   CircleCheckBig,
   CircleFadingArrowUpIcon,
@@ -76,18 +77,20 @@ export default function BookSeriesStatusSelect({ seriesId, intl }: BookSeriesSta
 
   return (
     <div className="relative" ref={selectRef}>
-      <button
+      <Button
         type="button"
         onClick={() => setIsOpen((open) => !open)}
         disabled={isLoading}
         title={currentOption?.label ?? books.selectStatus}
-        className="group cursor-pointer rounded-lg border border-blackamber bg-blackamber p-3 leading-none text-sand transition-all duration-300 hover:border-pearl hover:bg-pearl hover:text-onix 2xl:p-4"
+        variant="dark"
+        size="icon"
+        className="group size-11 2xl:size-13"
       >
         <CurrentIcon
           size={20}
           className={clsx(COLORS[currentStatus ?? ""] ?? "text-sand", "transition-colors", currentStatus === "FINISHED" && "group-hover:text-onix")}
         />
-      </button>
+      </Button>
       {isOpen && (
         <div className="absolute left-0 top-full z-10 mt-2 min-w-[180px] overflow-hidden rounded-lg bg-blackamber shadow-lg">
           {options.map((option) => {

package/dist/src/components/library/books/grid/SeriesIndex.tsx

@@ -2,6 +2,7 @@ import MangaCard from "@/components/ui/MangaCard";
 import { verifySession } from "@/lib/auth/verifySession";
 import { getBookCoverUrl } from "@/lib/books/cover";
 import { listBookProgressByIds, listBookVolumes } from "@/lib/db/books/library";
+import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import { LibraryBigIcon } from "lucide-react";
 import type { Dictionary, Locale } from "@/lib/types";
 
@@ -9,17 +10,23 @@ export default async function SeriesIndex({
   lang,
   intl,
   authorFilter,
+  genreFilter,
+  tagFilter,
   includeOneshots = false,
 }: {
   lang: Locale;
   intl: Dictionary;
   authorFilter?: string;
+  genreFilter?: string;
+  tagFilter?: string;
   includeOneshots?: boolean;
 }) {
   const labels = intl.books as Record<string, string>;
   const user = await verifySession();
-  const authorNames = authorFilter?.trim() ? [authorFilter.trim()] : undefined;
-  const books = await listBookVolumes({ authorNames });
+  const authorNames = authorFilter?.trim() ? authorFilter.split(",").map((author) => author.trim()).filter(Boolean) : undefined;
+  const genreNames = genreFilter?.trim() ? genreFilter.split(",").map((genre) => genre.trim()).filter(Boolean) : undefined;
+  const tagNames = tagFilter?.trim() ? tagFilter.split(",").map((tag) => tag.trim()).filter(Boolean) : undefined;
+  const books = await listBookVolumes({ authorNames, genreNames, tagNames });
   const visibleBooks = includeOneshots
     ? books
     : books.filter((book) => !book.series.isOneshot);
@@ -37,18 +44,19 @@ export default async function SeriesIndex({
     current.volumeIds.push(book.id);
     map.set(book.series.id, current);
     return map;
-  }, new Map<string, { id: string; slug: string; title: string; isOneshot: boolean; cover: string | null; firstSlug: string; volumeIds: string[] }>()).values());
+  }, new Map<string, { id: string; slug: string; title: string; isOneshot: boolean; status: string; cover: string | null; firstSlug: string; volumeIds: string[] }>()).values());
 
   return <>
     <div className="mb-4 flex items-center">
-      <h2 className="flex items-center text-base md:text-lg"><LibraryBigIcon size={28} className="mr-2" />{intl.libraries.series as string}</h2>
+      <h2 className="mr-4 flex items-center text-base md:text-lg"><LibraryBigIcon size={28} className="mr-2" />{intl.libraries.series as string}</h2>
+      <FiltersDrawer intl={intl} library="books" />
     </div>
     <section className="grid grid-cols-2 gap-4 md:grid-cols-5 2xl:grid-cols-7">
       {series.map((item) => {
         const progressRatio = item.volumeIds.length
           ? item.volumeIds.filter((id) => progressById[id]?.isRead).length / item.volumeIds.length
           : 0;
-        return <MangaCard key={item.id} title={item.title} href={item.isOneshot ? `/${lang}/books/volume/${item.firstSlug}` : `/${lang}/books/${item.slug}`} isSeries={!item.isOneshot} isOneshot={item.isOneshot} onGoing={false} onPause={false} volumeCount={item.isOneshot ? null : item.volumeIds.length} countLabel={labels.books} cover={item.cover} progressRatio={progressRatio} intl={intl} isDragging={false} seriesSlug={item.slug} className="font-roboto font-bold leading-5 text-base 2xl:text-lg" />;
+        return <MangaCard key={item.id} title={item.title} href={item.isOneshot ? `/${lang}/books/volume/${item.firstSlug}` : `/${lang}/books/${item.slug}`} isSeries={!item.isOneshot} isOneshot={item.isOneshot} onGoing={!item.isOneshot && item.status === "ONGOING"} onPause={false} volumeCount={item.isOneshot ? null : item.volumeIds.length} countLabel={labels.books} cover={item.cover} progressRatio={progressRatio} intl={intl} isDragging={false} seriesSlug={item.slug} className="font-roboto font-bold leading-5 text-base 2xl:text-lg" />;
       })}
     </section>
   </>;

package/dist/src/components/library/books/grid/SeriesIndexFav.tsx

@@ -31,7 +31,7 @@ export default async function SeriesIndexFav({ lang, intl, page = 1 }: { lang: L
         const href = series.isOneshot && firstVolume
           ? `/${lang}/books/volume/${firstVolume.slug}`
           : `/${lang}/books/${series.slug}`;
-        return <MangaCard key={series.id} title={series.title} href={href} isSeries={!series.isOneshot} isOneshot={series.isOneshot} onGoing={false} onPause={false} volumeCount={series.isOneshot ? null : series.volumes.length} countLabel={books.books} cover={firstVolume ? getBookCoverUrl(firstVolume.slug, firstVolume.metadata.coverPath) : null} progressRatio={progressRatio} isDragging={false} seriesSlug={series.slug} intl={intl} className="font-roboto text-base font-bold leading-5 2xl:text-lg" />;
+        return <MangaCard key={series.id} title={series.title} href={href} isSeries={!series.isOneshot} isOneshot={series.isOneshot} onGoing={!series.isOneshot && series.status === "ONGOING"} onPause={false} volumeCount={series.isOneshot ? null : series.volumes.length} countLabel={books.books} cover={firstVolume ? getBookCoverUrl(firstVolume.slug, firstVolume.metadata.coverPath) : null} progressRatio={progressRatio} isDragging={false} seriesSlug={series.slug} intl={intl} className="font-roboto text-base font-bold leading-5 2xl:text-lg" />;
       })}
     </div>
     {favorites.total > LIBRARY_PAGE_SIZE && <div className="mt-8"><Pagination currentPage={page} totalPages={favorites.totalPages} intl={intl} /></div>}

package/dist/src/components/library/books/grid/VolumesIndex.tsx

@@ -2,12 +2,28 @@ import { BookCopyIcon } from "lucide-react";
 import { listBookVolumes } from "@/lib/db/books/library";
 import { listBookProgressByIds } from "@/lib/db/books/library";
 import { verifySession } from "@/lib/auth/verifySession";
+import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import type { Dictionary, Locale } from "@/lib/types";
 import BookGrid from "../BookGrid";
 
-export default async function VolumesIndex({ lang, intl }: { lang: Locale; intl: Dictionary }) {
+export default async function VolumesIndex({
+  lang,
+  intl,
+  authorFilter,
+  genreFilter,
+  tagFilter,
+}: {
+  lang: Locale;
+  intl: Dictionary;
+  authorFilter?: string;
+  genreFilter?: string;
+  tagFilter?: string;
+}) {
   const user = await verifySession();
-  const books = await listBookVolumes();
+  const authorNames = authorFilter?.trim() ? authorFilter.split(",").map((author) => author.trim()).filter(Boolean) : undefined;
+  const genreNames = genreFilter?.trim() ? genreFilter.split(",").map((genre) => genre.trim()).filter(Boolean) : undefined;
+  const tagNames = tagFilter?.trim() ? tagFilter.split(",").map((tag) => tag.trim()).filter(Boolean) : undefined;
+  const books = await listBookVolumes({ authorNames, genreNames, tagNames });
   const progressById = user ? await listBookProgressByIds(user.id, books.map((book) => book.id)) : {};
-  return <><div className="mb-4 flex items-center"><h2 className="flex items-center text-base md:text-lg"><BookCopyIcon size={28} className="mr-2" />{intl.libraries.books as string}</h2></div><BookGrid books={books} lang={lang} intl={intl} progressById={progressById} /></>;
+  return <><div className="mb-4 flex items-center"><h2 className="mr-4 flex items-center text-base md:text-lg"><BookCopyIcon size={28} className="mr-2" />{intl.libraries.books as string}</h2><FiltersDrawer intl={intl} library="books" /></div><BookGrid books={books} lang={lang} intl={intl} progressById={progressById} /></>;
 }