From 4532403c95ad49e356bcfe3fda23a27302431c2e Mon Sep 17 00:00:00 2001
From: Valentin ROBIN <valentin_rbn@Valentins-MacBook-Pro-2.local>
Date: Tue, 25 Aug 2026 17:46:19 +0200
Subject: [PATCH] Rend les photos du Mur de la Honte cliquables pour les
 agrandir
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute une visionneuse plein écran (mur du jour, sa propre note, et l'historique complet côté Archontes). Corrige au passage un bug introduit avec l'ouverture du Mur aux Archontes (V14) : leur propre note du jour ne se rafraîchissait jamais après le chargement initial, le refetch la filtrait encore par rôle.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/mur/mur-view.tsx | 94 ++++++++++++++++++++++++++++------------
 1 file changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/app/mur/mur-view.tsx b/src/app/mur/mur-view.tsx
index 786123f..65c2992 100644
--- a/src/app/mur/mur-view.tsx
+++ b/src/app/mur/mur-view.tsx
@@ -105,26 +105,31 @@ function NoteCard({
   reactionCounts,
   myReactions,
   onToggleReaction,
+  onImageClick,
 }: {
   note: WallNoteRow;
   reactionCounts: Record<string, number>;
   myReactions: Set<string>;
   onToggleReaction: (emoji: string) => void;
+  onImageClick: (url: string) => void;
 }) {
+  const imageUrl = note.image_url;
+
   return (
     <div
       className="marble-surface flex min-h-[7rem] flex-col justify-between gap-2 rounded-lg border border-gold/30 p-3 shadow-md"
       style={{ transform: `rotate(${rotationFor(note.id)}deg)` }}
     >
       <div className="flex flex-col gap-2">
-        {note.image_url && (
-          <Image
-            src={note.image_url}
-            alt=""
-            width={300}
-            height={200}
-            className="max-h-32 w-full rounded-md object-cover"
-          />
+        {imageUrl && (
+          <button
+            type="button"
+            onClick={() => onImageClick(imageUrl)}
+            className="cursor-zoom-in"
+            aria-label="Agrandir l'image"
+          >
+            <Image src={imageUrl} alt="" width={300} height={200} className="max-h-32 w-full rounded-md object-cover" />
+          </button>
         )}
         <p className="text-sm text-text-marble">{note.text}</p>
       </div>
@@ -165,18 +170,20 @@ export function MurView({
   const [posting, setPosting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [historyDateFilter, setHistoryDateFilter] = useState("all");
+  const [zoomedImage, setZoomedImage] = useState<string | null>(null);
 
   const refetch = useCallback(async () => {
     const supabase = createClient();
     const [{ data: todayNotes }, { data: myNotes }, { data: hist }, { data: counts }, { data: mine }] =
       await Promise.all([
         supabase.rpc("wall_notes_today"),
-        isJudge
-          ? Promise.resolve({ data: null })
-          : supabase
-              .from("wall_notes")
-              .select("id, text, image_url, created_at")
-              .order("created_at", { ascending: false }),
+        // Depuis V14, les Archontes peuvent aussi publier — plus de
+        // filtre par rôle ici non plus (sinon leur note du jour ne se
+        // mettait jamais à jour après le chargement initial).
+        supabase
+          .from("wall_notes")
+          .select("id, text, image_url, created_at")
+          .order("created_at", { ascending: false }),
         isJudge
           ? supabase
               .from("wall_notes")
@@ -360,6 +367,7 @@ export function MurView({
                 reactionCounts={reactionCounts[note.id] ?? {}}
                 myReactions={myReactions[note.id] ?? new Set()}
                 onToggleReaction={(emoji) => handleToggleReaction(note.id, emoji)}
+                onImageClick={setZoomedImage}
               />
             ))}
           </div>
@@ -371,13 +379,20 @@ export function MurView({
           <div>
             <p className="text-sm text-olive">Ta note d&apos;aujourd&apos;hui est publiée.</p>
             {myNoteToday.image_url && (
-              <Image
-                src={myNoteToday.image_url}
-                alt=""
-                width={300}
-                height={200}
-                className="mt-2 max-h-40 w-full rounded-md object-cover"
-              />
+              <button
+                type="button"
+                onClick={() => setZoomedImage(myNoteToday.image_url)}
+                className="cursor-zoom-in"
+                aria-label="Agrandir l'image"
+              >
+                <Image
+                  src={myNoteToday.image_url}
+                  alt=""
+                  width={300}
+                  height={200}
+                  className="mt-2 max-h-40 w-full rounded-md object-cover"
+                />
+              </button>
             )}
             <p className="mt-2 rounded-md border border-gold/20 bg-white/40 px-3 py-2 text-sm text-text-marble">
               {myNoteToday.text}
@@ -482,13 +497,20 @@ export function MurView({
                     </p>
                     <p className="text-text-marble">{note.text}</p>
                     {note.image_url && (
-                      <Image
-                        src={note.image_url}
-                        alt=""
-                        width={200}
-                        height={150}
-                        className="mt-1 max-h-32 rounded-md object-cover"
-                      />
+                      <button
+                        type="button"
+                        onClick={() => setZoomedImage(note.image_url)}
+                        className="cursor-zoom-in"
+                        aria-label="Agrandir l'image"
+                      >
+                        <Image
+                          src={note.image_url}
+                          alt=""
+                          width={200}
+                          height={150}
+                          className="mt-1 max-h-32 rounded-md object-cover"
+                        />
+                      </button>
                     )}
                   </div>
                 </li>
@@ -497,6 +519,22 @@ export function MurView({
           )}
         </div>
       )}
+
+      {zoomedImage && (
+        <div className="fixed inset-0 z-40 flex items-center justify-center bg-ink/90 p-4 backdrop-blur-sm">
+          <button
+            type="button"
+            onClick={() => setZoomedImage(null)}
+            className="absolute top-4 right-4 rounded-full bg-ink-2/80 p-2 text-marble transition hover:bg-ink-2"
+            aria-label="Fermer"
+          >
+            <IconClose className="h-5 w-5" />
+          </button>
+          <div className="relative h-[80vh] w-full max-w-2xl">
+            <Image src={zoomedImage} alt="" fill sizes="100vw" className="object-contain" />
+          </div>
+        </div>
+      )}
     </div>
   );
 }