From 4193d8e914d25377f3b86f783033d771ccb6e614 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Sat, 27 Jun 2026 10:01:54 +0200
Subject: [PATCH] Annuaire: afficher la photo de vitrine (fallback logo)

- getActiveMembersWithCategory renvoie coverUrl + logoUrl
- Carte annuaire affiche l'image de vitrine (coverUrl) ; si absente,
  bascule sur le logo (logoUrl) ; sinon placeholder raye

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/annuaire/AnnuaireClient.tsx | 21 +++++++++++++++------
 src/lib/queries.ts                  |  2 ++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/app/annuaire/AnnuaireClient.tsx b/src/app/annuaire/AnnuaireClient.tsx
index 6a28c9b..edc14c0 100644
--- a/src/app/annuaire/AnnuaireClient.tsx
+++ b/src/app/annuaire/AnnuaireClient.tsx
@@ -9,6 +9,8 @@ export type DirectoryMember = {
   description: string | null;
   city: string | null;
   address: string | null;
+  coverUrl: string | null;
+  logoUrl: string | null;
   categoryLabel: string | null;
   accent: string | null;
   hasPromo: boolean;
@@ -187,7 +189,9 @@ export function AnnuaireClient({
       {/* grid / empty */}
       {list.length > 0 ? (
         <div className="grid grid-3" style={{ gap: 20 }}>
-          {list.map((m, i) => (
+          {list.map((m, i) => {
+            const image = m.coverUrl || m.logoUrl;
+            return (
             <Link
               key={m.id}
               href={`/adherents/${m.id}`}
@@ -198,15 +202,19 @@ export function AnnuaireClient({
                 style={{
                   position: "relative",
                   height: 150,
-                  background: i % 2 === 0 ? STRIPE_WARM : STRIPE_COOL,
+                  background: image
+                    ? `center/cover no-repeat url(${image})`
+                    : i % 2 === 0 ? STRIPE_WARM : STRIPE_COOL,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
                 }}
               >
-                <span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>
-                  photo vitrine
-                </span>
+                {!image && (
+                  <span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>
+                    photo vitrine
+                  </span>
+                )}
                 {m.categoryLabel && (
                   <span style={{ position: "absolute", top: 12, left: 12, background: m.accent ?? "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}>
                     {m.categoryLabel}
@@ -231,7 +239,8 @@ export function AnnuaireClient({
                 </div>
               </div>
             </Link>
-          ))}
+            );
+          })}
         </div>
       ) : (
         <div style={{ background: "#fff", border: "1px dashed #d8cdb4", borderRadius: 18, padding: 54, textAlign: "center" }}>
diff --git a/src/lib/queries.ts b/src/lib/queries.ts
index cacc722..9dcc7f4 100644
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -10,6 +10,8 @@ export async function getActiveMembersWithCategory() {
       description: members.description,
       city: members.city,
       address: members.address,
+      coverUrl: members.coverUrl,
+      logoUrl: members.logoUrl,
       categoryLabel: categories.label,
       accent: categories.accent,
     })