From a4686ab588eed96220421097fc22f80c76c91774 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 11 Oct 2025 11:03:56 +0000
Subject: [PATCH] Add zoom functionality to view original images in the media
 library

Adds a zoom icon to each image in the media library, opening a modal to display the original image. Also includes a state variable and dialog component for the zoom functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/RUoRc2A
---
 client/src/components/media-upload.tsx | 58 ++++++++++++++++++++------
 client/src/pages/image-editor.tsx      |  2 +-
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/client/src/components/media-upload.tsx b/client/src/components/media-upload.tsx
index 8a8d3c7..78e818e 100644
--- a/client/src/components/media-upload.tsx
+++ b/client/src/components/media-upload.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { CloudUpload, Image as ImageIcon, Video, X, Upload, Loader2 } from "lucide-react";
+import { CloudUpload, Image as ImageIcon, Video, X, Upload, Loader2, ZoomIn } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { SiFacebook, SiInstagram } from "react-icons/si";
 
@@ -12,6 +12,7 @@ export default function MediaUpload() {
   const { toast } = useToast();
   const [selectedFile, setSelectedFile] = useState<any>(null);
   const [visibleCount, setVisibleCount] = useState(5);
+  const [zoomImage, setZoomImage] = useState<string | null>(null);
   const loadMoreRef = useRef<HTMLDivElement>(null);
 
   const { data: mediaList } = useQuery({
@@ -167,18 +168,32 @@ export default function MediaUpload() {
                           className="w-full h-full object-cover"
                         />
                       )}
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          deleteMutation.mutate(media.id);
-                        }}
-                        className="absolute top-2 right-2 w-8 h-8 bg-black/70 hover:bg-destructive rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                        data-testid={`button-delete-${media.id}`}
-                      >
-                        <X className="w-4 h-4 text-white" />
-                      </button>
+                      <div className="absolute top-2 right-2 flex gap-2">
+                        {media.type === "image" && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setZoomImage(media.originalUrl);
+                            }}
+                            className="w-8 h-8 bg-black/70 hover:bg-primary rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                            data-testid={`button-zoom-${media.id}`}
+                          >
+                            <ZoomIn className="w-4 h-4 text-white" />
+                          </button>
+                        )}
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            deleteMutation.mutate(media.id);
+                          }}
+                          className="w-8 h-8 bg-black/70 hover:bg-destructive rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                          data-testid={`button-delete-${media.id}`}
+                        >
+                          <X className="w-4 h-4 text-white" />
+                        </button>
+                      </div>
                     </div>
-                  ))}
+                  ) as any)}
                 </div>
                 
                 {/* Élément sentinelle pour le scroll infini */}
@@ -264,6 +279,25 @@ export default function MediaUpload() {
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* Modal pour voir l'image originale en plein écran */}
+      <Dialog open={!!zoomImage} onOpenChange={() => setZoomImage(null)}>
+        <DialogContent className="max-w-7xl w-[95vw] h-[95vh] p-0 bg-black/95">
+          <div className="relative w-full h-full flex items-center justify-center">
+            <img
+              src={zoomImage || ""}
+              alt="Image originale"
+              className="max-w-full max-h-full object-contain"
+            />
+            <button
+              onClick={() => setZoomImage(null)}
+              className="absolute top-4 right-4 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm"
+            >
+              <X className="w-5 h-5 text-white" />
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx
index f86b7d7..9862398 100644
--- a/client/src/pages/image-editor.tsx
+++ b/client/src/pages/image-editor.tsx
@@ -573,7 +573,7 @@ export default function ImageEditor() {
                           value={[priceBadge.size]}
                           onValueChange={(value) => setPriceBadge({ ...priceBadge, size: value[0] })}
                           min={12}
-                          max={40}
+                          max={70}
                           step={1}
                           data-testid="slider-price-size"
                         />