Demandes & messages : boutons d'action selon l'état de la ligne

Une demande approuvée gardait ses boutons « Approuver & créer » et
« Rejeter », un message lu son « Marquer lu », un message archivé son
« Archiver » : rien n'indiquait que l'action avait déjà été faite.

Chaque ligne ne propose plus que les transitions qui ont du sens :
- demande nouvelle → Approuver & créer / Rejeter
- demande rejetée  → Rouvrir
- demande approuvée → aucun bouton (le compte existe)
- message nouveau  → Marquer lu / Archiver
- message lu       → Archiver
- message archivé  → Désarchiver

Le masquage du bouton d'approbation vit dans `ApproveRequestForm` et non
dans la page : après l'approbation, `router.refresh()` repasse la demande
en « approuvée », et un test côté serveur démonterait le bloc
d'identifiants à usage unique avant qu'il ait été lu.

Deux gardes côté serveur couvrent l'onglet resté ouvert sur l'ancien
état : `approveMembershipRequest` refuse une demande déjà traitée, et
`setRequestStatus` ne touche plus une demande approuvée.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MrfrukBXnHtMwq5iT7DwAM

src/app/backend/actions.ts

@@ -4,7 +4,7 @@ import { randomInt } from "node:crypto";
 import { revalidatePath } from "next/cache";
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
-import { and, eq, sql } from "drizzle-orm";
+import { and, eq, ne, sql } from "drizzle-orm";
 import bcrypt from "bcryptjs";
 import { signOut } from "@/auth";
 import { getSession } from "@/lib/session";
@@ -1133,6 +1133,17 @@ export async function approveMembershipRequest(
   const [req] = await db.select().from(membershipRequests).where(eq(membershipRequests.id, id));
   if (!req) throw new Error("Demande introuvable.");
 
+  // Le bouton disparaît dès qu'une demande est traitée, mais un onglet resté
+  // ouvert peut encore poster : on refuse ici plutôt que de créer un doublon.
+  if (req.status !== "new") {
+    return {
+      error:
+        req.status === "approved"
+          ? "Cette demande a déjà été approuvée."
+          : "Cette demande a été rejetée : rouvrez-la avant de l'approuver.",
+    };
+  }
+
   const email = (req.email ?? "").trim().toLowerCase();
   if (!email) {
     return {
@@ -1178,10 +1189,12 @@ export async function setRequestStatus(formData: FormData) {
   const id = Number(formData.get("id"));
   const status = String(formData.get("status") ?? "");
   if (!id || !["new", "approved", "rejected"].includes(status)) return;
+  // Une demande approuvée a créé un compte : elle ne se rejoue pas depuis un
+  // onglet resté ouvert sur l'ancien état.
   await db
     .update(membershipRequests)
     .set({ status: status as "new" | "approved" | "rejected" })
-    .where(eq(membershipRequests.id, id));
+    .where(and(eq(membershipRequests.id, id), ne(membershipRequests.status, "approved")));
   revalidatePath("/backend/demandes");
   revalidatePath("/backend");
 }

src/app/backend/demandes/ApproveRequestForm.tsx

@@ -10,8 +10,19 @@ import { approveMembershipRequest, type CreatedMemberAccount } from "../actions"
  * Approuve une demande et affiche une seule fois les identifiants du compte
  * créé. On reste sur la page : une redirection ferait perdre le mot de passe,
  * qui n'est conservé nulle part.
+ *
+ * Le bouton ne s'affiche que pour une demande encore à traiter, mais c'est ce
+ * composant — et non la page — qui en décide : après l'approbation,
+ * `router.refresh()` renvoie la demande en « approuvée », et un masquage côté
+ * serveur démonterait le bloc d'identifiants avant qu'il ait été lu.
  */
-export function ApproveRequestForm({ requestId }: { requestId: number }) {
+export function ApproveRequestForm({
+  requestId,
+  status,
+}: {
+  requestId: number;
+  status: string;
+}) {
   const [created, setCreated] = useState<CreatedMemberAccount | null>(null);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -28,6 +39,8 @@ export function ApproveRequestForm({ requestId }: { requestId: number }) {
     );
   }
 
+  if (status !== "new") return null;
+
   return (
     <form
       action={async (fd) => {

src/app/backend/demandes/page.tsx

@@ -72,13 +72,25 @@ export default async function DemandesPage() {
                 </div>
               </div>
               <StatusPill map={REQ_STATUS} status={r.status} />
+              {/* Une demande traitée ne garde que la sortie qui a du sens :
+                  « Rejeter » disparaît une fois l'adhérent créé, et un rejet
+                  reste réversible tant qu'aucun compte n'existe. */}
               <div style={{ display: "flex", gap: 8 }}>
-                <ApproveRequestForm requestId={r.id} />
-                <form action={setRequestStatus}>
-                  <input type="hidden" name="id" value={r.id} />
-                  <input type="hidden" name="status" value="rejected" />
-                  <ActionBtn color="#d8472b">Rejeter</ActionBtn>
-                </form>
+                <ApproveRequestForm requestId={r.id} status={r.status} />
+                {r.status === "new" && (
+                  <form action={setRequestStatus}>
+                    <input type="hidden" name="id" value={r.id} />
+                    <input type="hidden" name="status" value="rejected" />
+                    <ActionBtn color="#d8472b">Rejeter</ActionBtn>
+                  </form>
+                )}
+                {r.status === "rejected" && (
+                  <form action={setRequestStatus}>
+                    <input type="hidden" name="id" value={r.id} />
+                    <input type="hidden" name="status" value="new" />
+                    <ActionBtn color="#6c6150">Rouvrir</ActionBtn>
+                  </form>
+                )}
               </div>
             </div>
             {r.message && (
@@ -109,17 +121,30 @@ export default async function DemandesPage() {
                 </div>
               </div>
               <StatusPill map={MSG_STATUS} status={m.status} />
+              {/* Chaque bouton fait avancer le message d'un cran : on ne
+                  propose plus « Marquer lu » sur un message déjà lu ni
+                  « Archiver » sur un message archivé. */}
               <div style={{ display: "flex", gap: 8 }}>
-                <form action={setContactStatus}>
-                  <input type="hidden" name="id" value={m.id} />
-                  <input type="hidden" name="status" value="read" />
-                  <ActionBtn color="#2C6FB3">Marquer lu</ActionBtn>
-                </form>
-                <form action={setContactStatus}>
-                  <input type="hidden" name="id" value={m.id} />
-                  <input type="hidden" name="status" value="archived" />
-                  <ActionBtn color="#a99c82">Archiver</ActionBtn>
-                </form>
+                {m.status === "new" && (
+                  <form action={setContactStatus}>
+                    <input type="hidden" name="id" value={m.id} />
+                    <input type="hidden" name="status" value="read" />
+                    <ActionBtn color="#2C6FB3">Marquer lu</ActionBtn>
+                  </form>
+                )}
+                {m.status !== "archived" ? (
+                  <form action={setContactStatus}>
+                    <input type="hidden" name="id" value={m.id} />
+                    <input type="hidden" name="status" value="archived" />
+                    <ActionBtn color="#a99c82">Archiver</ActionBtn>
+                  </form>
+                ) : (
+                  <form action={setContactStatus}>
+                    <input type="hidden" name="id" value={m.id} />
+                    <input type="hidden" name="status" value="read" />
+                    <ActionBtn color="#6c6150">Désarchiver</ActionBtn>
+                  </form>
+                )}
               </div>
             </div>
             <p style={{ margin: "10px 0 0", fontSize: 13.5, color: "#5a5040", whiteSpace: "pre-wrap" }}>{m.message}</p>

src/components/MemberCard.tsx

@@ -21,11 +21,32 @@ const STRIPE_WARM =
 const STRIPE_COOL =
   "repeating-linear-gradient(45deg,#eef0ec,#eef0ec 12px,#e2e8e6 12px,#e2e8e6 24px)";
 
+/**
+ * Hauteurs figées des deux blocs de texte : une description longue ne doit pas
+ * étirer la carte (donc toute la rangée de la grille). Titre et description
+ * sont tronqués en fin de ligne et occupent toujours la même place, ce qui
+ * aligne les cartes entre elles quel que soit le texte saisi par l'adhérent.
+ */
+const TITLE_LINE = 1.25;
+const TITLE_LINES = 2;
+const DESC_FONT = 13;
+const DESC_LINE = 1.5;
+const DESC_LINES = 4;
+
+const clampLines = (lines: number) =>
+  ({
+    display: "-webkit-box",
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: "vertical" as const,
+    overflow: "hidden",
+  }) as const;
+
 /**
  * Carte d'un adhérent dans une grille (annuaire, page métier). Composant sans
  * état : il se rend aussi bien côté serveur que dans le filtre client.
  */
 export function MemberCard({ m, index = 0 }: { m: MemberCardData; index?: number }) {
+  const location = [m.address, m.city].filter(Boolean).join(" · ");
   return (
     <Link
       href={memberPath(m)}
@@ -50,15 +71,21 @@ export function MemberCard({ m, index = 0 }: { m: MemberCardData; index?: number
         )}
       </VitrineImage>
       <div style={{ padding: "16px 18px 18px", display: "flex", flexDirection: "column", flex: 1 }}>
-        <h3 className="font-display" style={{ fontWeight: 700, fontSize: 18, margin: 0, color: "#26201a" }}>
+        <h3
+          className="font-display"
+          style={{ fontWeight: 700, fontSize: 18, lineHeight: TITLE_LINE, margin: 0, color: "#26201a", minHeight: 18 * TITLE_LINE * TITLE_LINES, ...clampLines(TITLE_LINES) }}
+        >
           {m.name}
         </h3>
-        <p style={{ margin: "6px 0 12px", fontSize: 13, color: "#8c8068", lineHeight: 1.5, flex: 1 }}>
+        <p
+          style={{ margin: "6px 0 12px", fontSize: DESC_FONT, color: "#8c8068", lineHeight: DESC_LINE, height: DESC_FONT * DESC_LINE * DESC_LINES, ...clampLines(DESC_LINES) }}
+        >
           {m.description}
         </p>
+        <div style={{ flex: 1 }} />
         <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "#6c6150", borderTop: "1px solid #f0e8d6", paddingTop: 11 }}>
-          <span style={{ width: 7, height: 7, borderRadius: "50%", background: m.accent ?? "#E0A63C" }} />
-          {[m.address, m.city].filter(Boolean).join(" · ")}
+          <span style={{ width: 7, height: 7, borderRadius: "50%", background: m.accent ?? "#E0A63C", flex: "0 0 auto" }} />
+          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{location}</span>
         </div>
       </div>
     </Link>