@itsmrtr/bunkoshelf 1.14.1 → 1.16.0

package/dist/src/app/api/admin/scan-manga/status/route.ts

@@ -1,4 +1,4 @@
-import { NextResponse } from "next/server";
+import { NextResponse, connection } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import fs from "fs/promises";
 import path from "path";
@@ -6,6 +6,7 @@ import path from "path";
 const STATUS_PATH = path.join(process.cwd(), "tmp", "scan-status.json");
 
 export async function GET() {
+  await connection();
   try {
     const user = await verifySession();
     if (!user) {

package/dist/src/app/api/admin/upload/library/chunk/route.ts

@@ -17,8 +17,8 @@ import { indexBook } from "@/lib/books/indexer";
 
 export const maxDuration = 300;
 
-const LIBRARY_PATH = path.resolve(process.cwd(), "../library");
-const TEMP_PATH = path.resolve(process.cwd(), "../temp");
+const LIBRARY_PATH = path.join(/*turbopackIgnore: true*/ process.cwd(), "../library");
+const TEMP_PATH = path.join(/*turbopackIgnore: true*/ process.cwd(), "../temp");
 const LIB_PROVIDER = process.env.LIB_PROVIDER || "local";
 
 function generateChecksum(): string {

package/dist/src/app/api/library/books/cover/[...slug]/route.ts

@@ -2,8 +2,10 @@ import { NextResponse } from "next/server";
 import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { getEpubEntry } from "@/lib/books/epubParser";
 import { readBookFile } from "@/lib/books/storage";
+import { verifySession } from "@/lib/auth/verifySession";
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string[] }> }) {
+  if (!(await verifySession())) return NextResponse.json({ error: "Cover not found" }, { status: 404 });
   const { slug: parts } = await params;
   const slug = parts[0];
   if (!slug) return NextResponse.json({ error: "Missing book" }, { status: 400 });

package/dist/src/app/api/library/download/[slug]/route.ts

@@ -2,7 +2,7 @@ import { NextResponse, connection } from "next/server";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { verifySession } from "@/lib/auth/verifySession";
-import { findVolumeBySlugBasic } from "@/lib/db/ingestion";
+import { findVolumeBySlug } from "@/lib/db/library";
 import r2Client, { R2_BUCKET } from "@/lib/r2";
 
 const LIB_PROVIDER = process.env.LIB_PROVIDER || "local";
@@ -38,7 +38,7 @@ export async function GET(
       return NextResponse.json({ error: "Missing volume slug" }, { status: 400 });
     }
 
-    const volume = await findVolumeBySlugBasic(slug);
+    const volume = await findVolumeBySlug({ slug });
     if (!volume) {
       return NextResponse.json({ error: "Volume not found" }, { status: 404 });
     }

package/dist/src/app/api/library/download/series/[slug]/route.ts

@@ -2,10 +2,7 @@ import { NextResponse, connection } from "next/server";
 import { Readable } from "node:stream";
 import { GetObjectCommand, HeadObjectCommand } from "@aws-sdk/client-s3";
 import { verifySession } from "@/lib/auth/verifySession";
-import {
-  findSeriesBySlugBasic,
-  listVolumesBySeriesId,
-} from "@/lib/db/ingestion";
+import { findSeriesBySlug } from "@/lib/db/library";
 import r2Client, { R2_BUCKET } from "@/lib/r2";
 import { createZipStream } from "@/lib/zipStream";
 
@@ -48,12 +45,12 @@ export async function GET(
       return NextResponse.json({ error: "Missing series slug" }, { status: 400 });
     }
 
-    const series = await findSeriesBySlugBasic(slug);
+    const series = await findSeriesBySlug({ slug });
     if (!series) {
       return NextResponse.json({ error: "Series not found" }, { status: 404 });
     }
 
-    const volumes = await listVolumesBySeriesId(series.id);
+    const volumes = series.volumes;
     if (volumes.length === 0) {
       return NextResponse.json({ error: "Series has no volumes" }, { status: 404 });
     }

package/dist/src/app/api/library/manga/cover/[...slug]/route.ts

@@ -3,7 +3,8 @@ import fs from "fs/promises";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
 import r2Client, { R2_BUCKET } from "@/lib/r2";
 import type { NextRequest } from "next/server";
-import { findVolumeBySlugBasic } from "@/lib/db/ingestion";
+import { findVolumeBySlug } from "@/lib/db/library";
+import { verifySession } from "@/lib/auth/verifySession";
 
 const LIB_PROVIDER = process.env.LIB_PROVIDER || "local";
 
@@ -11,6 +12,7 @@ export async function GET(
   _req: NextRequest,
   context: { params: Promise<{ slug: string[] }> }
 ) {
+  if (!(await verifySession())) return servePlaceholder();
   const params = await context.params;
   const segments = params?.slug;
 
@@ -20,14 +22,14 @@ export async function GET(
 
   const volumeSlug = segments[0];
 
-  const volume = await findVolumeBySlugBasic(volumeSlug);
+  const volume = await findVolumeBySlug({ slug: volumeSlug });
 
-  if (!volume || !volume.coverImage || !volume.seriesPath) {
+  if (!volume || !volume.coverImage || !volume.series.path) {
     return servePlaceholder();
   }
   try {
     if (LIB_PROVIDER === "cloud") {
-      const seriesPath = volume.seriesPath.replace(/^\//, "");
+      const seriesPath = volume.series.path.replace(/^\//, "");
       const coverKey = `${seriesPath}/${volume.coverImage}`;
 
       const command = new GetObjectCommand({
@@ -46,7 +48,7 @@ export async function GET(
         },
       });
     } else {
-      const coverPath = path.join(volume.seriesPath, volume.coverImage);
+      const coverPath = path.join(volume.series.path, volume.coverImage);
 
       await fs.access(coverPath);
       const file = await fs.readFile(coverPath);

package/dist/src/app/api/reader/temp-image/route.ts

@@ -1,4 +1,4 @@
-import { NextResponse } from "next/server";
+import { NextResponse, connection } from "next/server";
 import type { NextRequest } from "next/server";
 import { verifySession } from "@/lib/auth/verifySession";
 import fs from "fs/promises";
@@ -13,6 +13,7 @@ const CONTENT_TYPE_MAP: Record<string, string> = {
 };
 
 export async function GET(req: NextRequest) {
+  await connection();
   try {
     const user = await verifySession();
     if (!user) {

package/dist/src/components/AlertDialogProvider.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
+import Button from "@/components/ui/Button";
 
 type DialogMode = "alert" | "confirm";
 
@@ -164,24 +165,26 @@ function AlertDialog({
         </div>
         <div className="grid gap-3">
           {isConfirmation && (
-            <button
+            <Button
               type="button"
               onClick={() => onClose(false)}
-              className="w-full rounded-lg border border-onix px-4 py-3 text-sm font-bold uppercase transition-colors hover:bg-sand"
+              variant="light"
+              className="w-full px-4 py-3 text-sm"
             >
               {request.cancelLabel || labels.cancel}
-            </button>
+            </Button>
           )}
-          <button
+          <Button
             ref={confirmButtonRef}
             type="button"
             onClick={() => onClose(true)}
+            variant={request.destructive ? "dark" : "dark"}
             className={request.destructive
-              ? "w-full rounded-lg border border-danger-alt bg-danger-alt px-4 py-3 text-sm font-bold uppercase text-pearl transition-colors hover:border-black hover:bg-black"
-              : "w-full rounded-lg border border-onix bg-onix px-4 py-3 text-sm font-bold uppercase text-pearl transition-colors hover:border-black hover:bg-black"}
+              ? "w-full border-danger-alt bg-danger-alt px-4 py-3 text-sm text-pearl hover:border-black hover:bg-black hover:text-pearl"
+              : "w-full px-4 py-3 text-sm"}
           >
             {isConfirmation ? request.confirmLabel || labels.confirm : labels.close}
-          </button>
+          </Button>
         </div>
       </section>
     </div>

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,13 @@ 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 chooseCandidate = async (candidate: ClubCandidate) => { if (!voting) return; const result = await selectClubWork(club.slug, voting.id, candidate.source_type, candidate.source_id); if (!result.success) setMessage(result.error === "Voting must be closed before choosing a work" ? labels.votingMustClose : 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,18 +56,29 @@ 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={() => void chooseCandidate(candidate)} 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>
@@ -72,11 +90,11 @@ export default function ClubDashboard({ club, cycles, members, activities, activ
     {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,7 @@ 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>;
+  if (signedIn) 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>}<Button variant="lightAlt" onClick={joinMember} className="px-8 py-4">{labels.requestJoin}</Button></div></div>;
+
+  return <div className="mx-auto mt-8 w-full max-w-sm px-4"><p className="text-xs uppercase text-sand">{labels.inviteLabel}</p><h1 className="mt-2 text-2xl leading-11 md:text-3xl md:leading-14">{clubName}</h1><p className="mt-4">{labels.invitePending}</p>{error && <p className="mt-4 text-danger-alt">{error}</p>}<form onSubmit={joinGuest} className="mt-6 w-full"><p className="mb-4 font-bold">{labels.joinGuest}</p><div className="mb-4"><input name="username" minLength={3} required autoComplete="username" placeholder={labels.username} className="w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand" /></div><div className="mb-4"><input name="password" type="password" minLength={8} required autoComplete="new-password" placeholder={labels.password} className="w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand" /></div><Button variant="dark" className="px-8 py-4">{labels.createGuest}</Button></form></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