@itsmrtr/bunkoshelf 1.18.4 → 1.19.0

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

@@ -7,6 +7,7 @@ import Image from "next/image";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   addClubCandidate,
+  inviteClubMember,
   addClubMilestone,
   archiveClub,
   completeClubCycle,
@@ -21,10 +22,13 @@ import {
 } from "@/actions/clubs";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
 import Button from "@/components/ui/Button";
+import { useResourceMutation } from "@/lib/client/resourceState";
 import type {
   ClubCandidate,
   ClubCycle,
+  ClubMilestoneTargetKind,
   ClubMember,
+  ClubUser,
   ReadingClub,
   ClubSourceType,
 } from "@/lib/db/clubs";
@@ -39,11 +43,17 @@ type Work = {
 };
 type Milestone = {
   id: string;
-  position: number;
-  label: string;
+  target_kind: ClubMilestoneTargetKind;
+  target_value: number;
   target_date: string;
+  reached_count: number;
+  participant_count: number;
 };
 
+function displayName(name: string | null, lastname: string | null, username: string) {
+  return [name, lastname].filter(Boolean).join(" ") || username;
+}
+
 export default function ClubDashboard({
   club,
   cycles,
@@ -53,7 +63,9 @@ export default function ClubDashboard({
   milestones,
   works,
   readingVolumes,
+  users,
   isManager,
+  isOwner,
   inviteToken,
   lang,
   intl,
@@ -67,7 +79,8 @@ export default function ClubDashboard({
     created_at: Date;
     username: string;
     name: string | null;
-    label: string | null;
+    lastname: string | null;
+    milestone_number: number | null;
   }>;
   activeCandidates: ClubCandidate[];
   milestones: Milestone[];
@@ -78,18 +91,25 @@ export default function ClubDashboard({
     kind: string;
     manga_style: string | null;
   }>;
+  users: ClubUser[];
   isManager: boolean;
+  isOwner: boolean;
   inviteToken: string | null;
   lang: string;
   intl: Dictionary;
 }) {
   const router = useRouter();
+  const mutateResource = useResourceMutation();
   const { confirm } = useAlertDialog()!;
   const [inviteCopied, setInviteCopied] = useState(false);
   const [origin, setOrigin] = useState("");
   const [message, setMessage] = useState("");
   const [candidateValues, setCandidateValues] = useState<string[]>([""]);
   const labels = intl.clubs as Record<string, string>;
+  const errorMessage = (value: string) =>
+    value === "Voting must be closed before choosing a work"
+      ? labels.votingMustClose
+      : labels[value] ?? value;
   const bookLabels = intl.books as Record<string, string>;
   const libraryLabels = intl.libraries as Record<string, string>;
   const mangaLabels = intl.manga as Record<string, string>;
@@ -100,7 +120,23 @@ export default function ClubDashboard({
   const invite = inviteToken
     ? `${origin}/${lang}/clubs/join/${inviteToken}`
     : "";
-  const refresh = () => router.refresh();
+  const mutateClub = <T extends { success: boolean }>(
+    mutate: () => Promise<T>,
+    refresh = true,
+  ) =>
+    mutateResource({
+      resource: "club",
+      id: club.id,
+      patch: {},
+      mutate,
+      isSuccess: (result) => result.success,
+      refresh,
+    });
+  const availableUsers = users.filter(
+    (user) => !members.some(
+      (member) => member.userId === user.id && ["APPROVED", "PENDING"].includes(member.status),
+    ),
+  );
   const copyInvite = async () => {
     try {
       await navigator.clipboard.writeText(
@@ -116,40 +152,38 @@ export default function ClubDashboard({
     event.preventDefault();
     const form = event.currentTarget;
     const data = new FormData(form);
-    const result = await createClubCycle(club.slug, {
+    const result = await mutateClub(() => createClubCycle(club.slug, {
       title: String(data.get("title")),
       voteClosesAt: String(data.get("voteClosesAt") || ""),
-    });
-    if (!result.success) setMessage(result.error);
-    else {
-      form.reset();
-      refresh();
-    }
+    }));
+    if (!result.success) setMessage(errorMessage(result.error));
+    else form.reset();
+  };
+  const submitMember = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const userId = String(new FormData(event.currentTarget).get("userId") ?? "");
+    const result = await mutateClub(() => inviteClubMember(club.slug, userId, lang));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const submitMilestone = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!active) return;
     const form = event.currentTarget;
     const data = new FormData(form);
-    const result = await addClubMilestone(club.slug, active.id, {
-      label: String(data.get("label")),
-      position: Number(data.get("position")),
+    const result = await mutateClub(() => addClubMilestone(club.slug, active.id, {
+      targetValue: Number(data.get("targetValue")),
       targetDate: String(data.get("targetDate")),
-    });
-    if (!result.success) setMessage(result.error);
-    else {
-      form.reset();
-      refresh();
-    }
+    }));
+    if (!result.success) setMessage(errorMessage(result.error));
+    else form.reset();
   };
   const selectWork = async (cycle: ClubCycle, value: string) => {
     const [sourceType, sourceId] = value.split(":") as [ClubSourceType, string];
-    const result =
+    const result = await mutateClub(() =>
       cycle.status === "VOTING"
-        ? await addClubCandidate(club.slug, cycle.id, sourceType, sourceId)
-        : await selectClubWork(club.slug, cycle.id, sourceType, sourceId);
-    if (!result.success) setMessage(result.error);
-    else refresh();
+        ? addClubCandidate(club.slug, cycle.id, sourceType, sourceId)
+        : selectClubWork(club.slug, cycle.id, sourceType, sourceId));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const memberStatus = (status: ClubMember["status"]) =>
     labels[status.toLowerCase()];
@@ -183,6 +217,19 @@ export default function ClubDashboard({
     `${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 milestoneTargetKind: ClubMilestoneTargetKind | null = active
+    ? !active.workIsOneshot
+      ? "VOLUME"
+      : active.selectedType === "BOOK_SERIES"
+        ? "PROGRESSION"
+        : "PAGE"
+    : null;
+  const milestoneTargetLabel = (milestone: Milestone) =>
+    milestone.target_kind === "PAGE"
+      ? `${labels.page} ${milestone.target_value}`
+      : milestone.target_kind === "PROGRESSION"
+        ? `${milestone.target_value}%`
+        : `${labels.volume} ${milestone.target_value}`;
   const readingWorkValues = new Set(
     cycles
       .filter(
@@ -210,29 +257,22 @@ export default function ClubDashboard({
   );
   const voteForCandidate = async (candidate: ClubCandidate) => {
     if (!voting) return;
-    const result = await voteForClubCandidate(
+    const result = await mutateClub(() => voteForClubCandidate(
       club.slug,
       voting.id,
       candidate.id,
-    );
-    if (!result.success) setMessage(result.error);
-    else refresh();
+    ));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const chooseCandidate = async (candidate: ClubCandidate) => {
     if (!voting) return;
-    const result = await selectClubWork(
+    const result = await mutateClub(() => 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();
+    ));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const confirmCandidateRemoval = async (candidateId: string) => {
     if (
@@ -245,9 +285,8 @@ export default function ClubDashboard({
       }))
     )
       return;
-    const result = await removeClubCandidate(club.slug, voting.id, candidateId);
-    if (!result.success) setMessage(result.error);
-    else refresh();
+    const result = await mutateClub(() => removeClubCandidate(club.slug, voting.id, candidateId));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const confirmMemberRemoval = async (memberId: string) => {
     if (
@@ -259,9 +298,8 @@ export default function ClubDashboard({
       }))
     )
       return;
-    const result = await removeClubMember(club.slug, memberId);
-    if (!result.success) setMessage(result.error);
-    else refresh();
+    const result = await mutateClub(() => removeClubMember(club.slug, memberId));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const confirmArchive = async () => {
     if (
@@ -273,9 +311,8 @@ export default function ClubDashboard({
       }))
     )
       return;
-    const result = await archiveClub(club.slug);
-    if (!result.success) setMessage(result.error);
-    else refresh();
+    const result = await mutateClub(() => archiveClub(club.slug));
+    if (!result.success) setMessage(errorMessage(result.error));
   };
   const confirmClubDeletion = async () => {
     if (
@@ -288,8 +325,8 @@ export default function ClubDashboard({
       }))
     )
       return;
-    const result = await deleteClub(club.slug);
-    if (!result.success) return setMessage(result.error);
+    const result = await mutateClub(() => deleteClub(club.slug), false);
+    if (!result.success) return setMessage(errorMessage(result.error));
     router.push(`/${lang}/clubs`);
     router.refresh();
   };
@@ -339,45 +376,50 @@ export default function ClubDashboard({
             </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}%` }}
-                  />
+            {milestones.map((milestone, index) => {
+              const progress = milestone.participant_count
+                ? Math.round((milestone.reached_count / milestone.participant_count) * 100)
+                : 0;
+              const clubReached = milestone.reached_count > milestone.participant_count / 2;
+              return (
+                <div key={milestone.id} className="rounded-md bg-onix px-4 py-3">
+                  <div className="flex items-baseline justify-between gap-3">
+                    <p>{labels.milestone} {index + 1}: {milestoneTargetLabel(milestone)}</p>
+                    <span className="shrink-0 text-sm text-sand">{milestone.reached_count}/{milestone.participant_count}</span>
+                  </div>
+                  <div className="mt-2 h-2 overflow-hidden rounded bg-blackamber">
+                    <div className="h-full rounded bg-lilah" style={{ width: `${progress}%` }} />
+                  </div>
+                  <p className="mt-2 text-sm text-sand">
+                    {labels.targetDate}: {milestone.target_date}{clubReached ? ` · ${labels.clubMilestoneReached}` : ""}
+                  </p>
                 </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"
+                className="font-bold px-5 py-2 rounded-lg leading-none uppercase text-pearl bg-lilah border border-lilah hover:text-onix hover:bg-pearl hover:border-pearl transition-all duration-300"
               >
                 {labels.read} {volume.title}
               </Link>
             ))}
+            {isManager && (
+              <Button
+                variant="dark"
+                onClick={async () => {
+                  const result = await mutateClub(() => completeClubCycle(club.slug, active.id));
+                  if (!result.success) setMessage(errorMessage(result.error));
+                }}
+                className="border-onix bg-onix px-5 py-2 text-sand hover:border-pearl hover:bg-pearl hover:text-onix"
+              >
+                {labels.finishCycle}
+              </Button>
+            )}
           </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 && (
@@ -455,7 +497,7 @@ export default function ClubDashboard({
             {members.map((member) => (
               <div key={member.id} className="flex gap-3 items-center">
                 <div className="flex-1">
-                  <p>{member.name ?? member.username}</p>
+                  <p>{displayName(member.name, member.lastname, member.username)}</p>
                   <div className="mt-1 flex items-center gap-3">
                     <p className="text-xs uppercase text-sand">
                       {memberStatus(member.status)}
@@ -491,12 +533,12 @@ export default function ClubDashboard({
                   <div className="flex gap-2">
                     <button
                       onClick={async () => {
-                        await reviewClubMember(
+                        const result = await mutateClub(() => reviewClubMember(
                           club.slug,
                           member.id,
                           "APPROVED",
-                        );
-                        refresh();
+                        ));
+                        if (!result.success) setMessage(errorMessage(result.error));
                       }}
                       className="text-xs uppercase hover:underline cursor-pointer"
                     >
@@ -504,12 +546,12 @@ export default function ClubDashboard({
                     </button>
                     <button
                       onClick={async () => {
-                        await reviewClubMember(
+                        const result = await mutateClub(() => reviewClubMember(
                           club.slug,
                           member.id,
                           "REJECTED",
-                        );
-                        refresh();
+                        ));
+                        if (!result.success) setMessage(errorMessage(result.error));
                       }}
                       className="text-xs uppercase text-danger-alt hover:underline cursor-pointer"
                     >
@@ -527,11 +569,11 @@ export default function ClubDashboard({
             {activities.map((activity) => (
               <p key={activity.id}>
                 <span className="font-bold">
-                  {activity.name ?? activity.username}
+                  {displayName(activity.name, activity.lastname, activity.username)}
                 </span>{" "}
                 {activity.type === "COMPLETED"
                   ? labels.completedReading
-                  : `${labels.reachedMilestone} ${activity.label ?? ""}`}
+                  : `${labels.reachedMilestone} ${activity.milestone_number ?? ""}`}
                 .
               </p>
             ))}
@@ -560,6 +602,17 @@ export default function ClubDashboard({
               )}
             </button>
           )}
+          {availableUsers.length > 0 && (
+            <form onSubmit={submitMember} className="grid gap-4 xl:grid-cols-[1fr_auto] xl:items-end">
+              <select name="userId" aria-label={labels.selectUser} defaultValue="" required className="h-14 rounded-lg border border-neutral-700 bg-onix px-5 text-sand">
+                <option value="" disabled>{labels.selectUser}</option>
+                {availableUsers.map((user) => (
+                  <option key={user.id} value={user.id}>{`${displayName(user.name, user.lastname, user.username)} (@${user.username})`} · {user.role}</option>
+                ))}
+              </select>
+              <Button variant="lightAlt" className="px-8 py-4">{labels.inviteUser}</Button>
+            </form>
+          )}
           <form
             onSubmit={submitCycle}
             className="grid gap-4 xl:grid-cols-2 xl:items-end"
@@ -660,13 +713,12 @@ export default function ClubDashboard({
                       ];
                       return { sourceType, sourceId };
                     });
-                    const result = await confirmClubCandidates(
+                    const result = await mutateClub(() => confirmClubCandidates(
                       club.slug,
                       draft.id,
                       candidates,
-                    );
-                    if (!result.success) setMessage(result.error);
-                    else refresh();
+                    ));
+                    if (!result.success) setMessage(errorMessage(result.error));
                   }}
                   className="px-4 py-2"
                 >
@@ -715,26 +767,22 @@ export default function ClubDashboard({
           </div>
         </section>
       )}
-      <section className="bg-blackamber p-4 rounded-lg">
-        <h2>{labels.milestones}</h2>
-        {active ? (
+      {isOwner && (
+        <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}
+              name="targetValue"
+              type="number"
+              min="1"
+              max={milestoneTargetKind === "PROGRESSION" ? 100 : undefined}
+              step={milestoneTargetKind === "PROGRESSION" ? "0.01" : "1"}
+              placeholder={milestoneTargetKind === "PAGE" ? labels.page : milestoneTargetKind === "PROGRESSION" ? labels.percentage : labels.volume}
               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"
-              />
+            <div className="grid gap-3 md:grid-cols-[minmax(12rem,1fr)_auto] md:items-end">
               <input
                 name="targetDate"
                 type="date"
@@ -746,10 +794,11 @@ export default function ClubDashboard({
               </Button>
             </div>
           </form>
-        ) : (
-          <p className="mt-4">{labels.selectWorkForMilestones}</p>
-        )}
-      </section>
+          ) : (
+            <p className="mt-4">{labels.selectWorkForMilestones}</p>
+          )}
+        </section>
+      )}
     </div>
   );
 }

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

@@ -4,15 +4,63 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { joinClubAsGuest, joinClubWithSession } from "@/actions/clubs";
 import Button from "@/components/ui/Button";
+import { useResourceMutation } from "@/lib/client/resourceState";
 import type { Dictionary } from "@/lib/types";
 
 export default function ClubInvite({ token, clubName, lang, signedIn, intl }: { token: string; clubName: string; lang: string; signedIn: boolean; intl: Dictionary }) {
   const router = useRouter();
+  const mutateResource = useResourceMutation();
   const [error, setError] = useState("");
   const labels = intl.clubs as Record<string, string>;
-  const joinMember = async () => { const result = await joinClubWithSession(token); if (!result.success) setError(result.error); else router.push(`/${lang}/clubs/${result.slug}`); };
-  const joinGuest = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.currentTarget); const result = await joinClubAsGuest({ token, username: String(data.get("username")), password: String(data.get("password")) }); if (!result.success) setError(result.error); else router.push(`/${lang}/clubs/${result.slug}`); };
+  const errorMessage = (value: string) => labels[value] ?? value;
+  const mutateClub = <T extends { success: boolean }>(mutate: () => Promise<T>) => mutateResource({ resource: "club", id: token, patch: {}, mutate, isSuccess: (result) => result.success, refresh: false });
+  const joinMember = async () => { const result = await mutateClub(() => joinClubWithSession(token)); if (!result.success) setError(errorMessage(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 mutateClub(() => joinClubAsGuest({ token, name: String(data.get("name")), lastname: String(data.get("lastname")), password: String(data.get("password")) })); if (!result.success) setError(errorMessage(result.error)); else router.push(`/${lang}/clubs/${result.slug}`); };
   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>;
+  return (
+    <div className="mx-auto mt-8 w-full max-w-4xl px-4 md:mt-16">
+      <div className="grid gap-8 md:grid-cols-2 md:gap-16">
+        <div className="max-w-md">
+          <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>}
+        </div>
+        <form onSubmit={joinGuest} className="w-full md:pt-2">
+          <p className="mb-4 font-bold">{labels.joinGuest}</p>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <input
+              name="name"
+              required
+              autoComplete="given-name"
+              placeholder={labels.name}
+              className="w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand"
+            />
+            <input
+              name="lastname"
+              required
+              autoComplete="family-name"
+              placeholder={labels.lastname}
+              className="w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand"
+            />
+          </div>
+          <input
+            name="password"
+            type="password"
+            minLength={8}
+            required
+            autoComplete="new-password"
+            placeholder={labels.password}
+            className="mt-4 w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand"
+          />
+          <Button variant="dark" className="mt-4 w-full px-8 py-4">
+            {labels.createGuest}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
 }

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

@@ -5,14 +5,16 @@ import Link from "next/link";
 import { UsersRoundIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { createClub, requestToJoinClub } from "@/actions/clubs";
+import { acceptClubInvitation, createClub, requestToJoinClub } from "@/actions/clubs";
 import Button from "@/components/ui/Button";
 import Modal from "@/components/ui/Modal";
+import { useResourceMutation } from "@/lib/client/resourceState";
 import type { ReadingClub } from "@/lib/db/clubs";
 import type { Dictionary } from "@/lib/types";
 
 export default function ClubList({ clubs, lang, canCreate, isAdmin, intl }: { clubs: ReadingClub[]; lang: string; canCreate: boolean; isAdmin: boolean; intl: Dictionary }) {
   const router = useRouter();
+  const mutateResource = useResourceMutation();
   const pathname = usePathname();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -20,10 +22,15 @@ export default function ClubList({ clubs, lang, canCreate, isAdmin, intl }: { cl
   const [message, setMessage] = useState("");
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const labels = intl.clubs as Record<string, string>;
+  const errorMessage = (value: string) => labels[value] ?? value;
   const bookLabels = intl.books as Record<string, string>;
   const libraryLabels = intl.libraries as Record<string, string>;
   const mangaLabels = intl.manga as Record<string, string>;
   const sidebarLabels = intl.sidebar as Record<string, string>;
+  const mutateClub = <T extends { success: boolean }>(
+    mutate: () => Promise<T>,
+    refresh = true,
+  ) => mutateResource({ resource: "club", id: "list", patch: {}, mutate, isSuccess: (result) => result.success, refresh });
 
   useEffect(() => {
     setName("");
@@ -35,18 +42,21 @@ export default function ClubList({ clubs, lang, canCreate, isAdmin, intl }: { cl
 
   const submit = async (event: React.FormEvent) => {
     event.preventDefault();
-    const result = await createClub({ name, description });
-    if (!result.success) return setError(result.error);
+    const result = await mutateClub(() => createClub({ name, description }), false);
+    if (!result.success) return setError(errorMessage(result.error));
     setIsCreateDialogOpen(false);
     router.push(`/${lang}/clubs/${result.slug}`);
-    router.refresh();
   };
 
   const requestJoin = async (slug: string) => {
-    const result = await requestToJoinClub(slug);
-    if (!result.success) return setMessage(result.error);
+    const result = await mutateClub(() => requestToJoinClub(slug));
+    if (!result.success) return setMessage(errorMessage(result.error));
     setMessage(labels.invitePending);
-    router.refresh();
+  };
+
+  const acceptInvitation = async (slug: string) => {
+    const result = await mutateClub(() => acceptClubInvitation(slug));
+    if (!result.success) return setMessage(errorMessage(result.error));
   };
 
   const titleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1);
@@ -69,11 +79,12 @@ export default function ClubList({ clubs, lang, canCreate, isAdmin, intl }: { cl
     </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 isPendingInvitation = club.membershipStatus === "PENDING" && club.isInvited;
+        const isPendingRequest = club.membershipStatus === "PENDING" && !club.isInvited;
+        const canAccess = club.membershipStatus === "APPROVED" || (isAdmin && !isPendingInvitation);
         const content = (
           <>
-            <div className="relative aspect-[2/3] w-20 shrink-0 overflow-hidden rounded-md bg-onix">
+            <div className="relative h-32 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">
@@ -90,7 +101,7 @@ export default function ClubList({ clubs, lang, canCreate, isAdmin, intl }: { cl
             </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>;
+        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">{isPendingInvitation ? <Button variant="lightAlt" onClick={() => void acceptInvitation(club.slug)} className="px-4 py-2 text-sm">{labels.acceptInvitation}</Button> : isPendingRequest ? <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>