From 58aaa5269c50014fb89e795af19ffb636544946b Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 9 Oct 2025 12:30:34 +0000
Subject: [PATCH] Update media library display for better image presentation

Modify the media upload component to display images in a grid layout, allowing for multiple images side-by-side and improving the visual presentation of the media library.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/lEm79pj
---
 client/src/components/media-upload.tsx | 43 ++++++++++----------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/client/src/components/media-upload.tsx b/client/src/components/media-upload.tsx
index 7ce35bb..8a8d3c7 100644
--- a/client/src/components/media-upload.tsx
+++ b/client/src/components/media-upload.tsx
@@ -147,17 +147,19 @@ export default function MediaUpload() {
                 </span>
               </h4>
 
-              <div className="space-y-3 max-h-[500px] overflow-y-auto">
-                {(mediaList as any[])?.slice(0, visibleCount).map((media: any) => (
-                  <div
-                    key={media.id}
-                    onClick={() => setSelectedFile(media)}
-                    className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
-                    data-testid={`media-item-${media.id}`}
-                  >
-                    <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0 overflow-hidden">
+              <div className="max-h-[500px] overflow-y-auto">
+                <div className="grid grid-cols-3 gap-3">
+                  {(mediaList as any[])?.slice(0, visibleCount).map((media: any) => (
+                    <div
+                      key={media.id}
+                      onClick={() => setSelectedFile(media)}
+                      className="relative aspect-square rounded-lg overflow-hidden border-2 border-border/50 cursor-pointer hover:border-primary hover:shadow-lg transition-all group"
+                      data-testid={`media-item-${media.id}`}
+                    >
                       {media.type === "video" ? (
-                        <Video className="w-7 h-7 text-secondary" />
+                        <div className="w-full h-full bg-muted/30 flex items-center justify-center">
+                          <Video className="w-12 h-12 text-secondary" />
+                        </div>
                       ) : (
                         <img 
                           src={media.originalUrl} 
@@ -165,34 +167,23 @@ export default function MediaUpload() {
                           className="w-full h-full object-cover"
                         />
                       )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-semibold text-foreground truncate">{media.fileName}</p>
-                      <p className="text-xs text-muted-foreground font-medium mt-1">
-                        {(media.fileSize / 1024 / 1024).toFixed(1)} MB
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
-                        Prêt
-                      </span>
                       <button
                         onClick={(e) => {
                           e.stopPropagation();
                           deleteMutation.mutate(media.id);
                         }}
-                        className="text-muted-foreground hover:text-destructive transition-all p-1 rounded-lg hover:bg-destructive/10"
+                        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-5 h-5" />
+                        <X className="w-4 h-4 text-white" />
                       </button>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
                 
                 {/* Élément sentinelle pour le scroll infini */}
                 {mediaList && visibleCount < (mediaList as any[]).length && (
-                  <div ref={loadMoreRef} className="flex justify-center py-4">
+                  <div ref={loadMoreRef} className="flex justify-center py-4 mt-3">
                     <Loader2 className="w-5 h-5 text-primary animate-spin" />
                   </div>
                 )}