From 26f549c34044f37e075a3ae9dce76d9ddf6f1fae Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 8 Oct 2025 20:14:12 +0000
Subject: [PATCH] Add drag-and-drop functionality to reorder selected media in
 posts

Integrates @dnd-kit for drag-and-drop reordering of media items within the new post creation interface, enabling carousel slide order customization.

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/WzkpF6q
---
 client/src/pages/new-post.tsx | 225 +++++++++++++++++++++++++++-------
 1 file changed, 182 insertions(+), 43 deletions(-)

diff --git a/client/src/pages/new-post.tsx b/client/src/pages/new-post.tsx
index 92969f2..b165cdf 100644
--- a/client/src/pages/new-post.tsx
+++ b/client/src/pages/new-post.tsx
@@ -1,8 +1,25 @@
 import { useState, useCallback, useRef } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useLocation } from "wouter";
-import { Send, Sparkles, Image as ImageIcon, Calendar, Upload, Camera } from "lucide-react";
+import { Send, Sparkles, Image as ImageIcon, Calendar, Upload, Camera, GripVertical } from "lucide-react";
 import { useDropzone } from "react-dropzone";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Button } from "@/components/ui/button";
@@ -16,6 +33,69 @@ import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import type { SocialPage, Media } from "@shared/schema";
 
+function SortableMediaItem({ 
+  media, 
+  index, 
+  isSelected, 
+  onToggle 
+}: { 
+  media: Media; 
+  index: number; 
+  isSelected: boolean; 
+  onToggle: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id: media.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all ${
+        isSelected
+          ? 'border-primary ring-2 ring-primary'
+          : 'border-transparent hover:border-muted-foreground'
+      }`}
+    >
+      <button
+        onClick={onToggle}
+        className="w-full h-full"
+        data-testid={`button-select-media-${media.id}`}
+      >
+        <img 
+          src={media.originalUrl} 
+          alt={media.fileName}
+          className="w-full h-full object-cover"
+        />
+      </button>
+      {isSelected && (
+        <>
+          <div className="absolute top-1 right-1 w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">
+            {index + 1}
+          </div>
+          <div 
+            {...attributes}
+            {...listeners}
+            className="absolute top-1 left-1 w-8 h-8 bg-black/50 rounded-full flex items-center justify-center cursor-move hover:bg-black/70 transition-colors"
+          >
+            <GripVertical className="w-4 h-4 text-white" />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
 export default function NewPost() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [, navigate] = useLocation();
@@ -208,6 +288,25 @@ export default function NewPost() {
     }
   };
 
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setSelectedMedia((items) => {
+        const oldIndex = items.indexOf(active.id as string);
+        const newIndex = items.indexOf(over.id as string);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  };
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {sidebarOpen && (
@@ -309,50 +408,90 @@ export default function NewPost() {
                         </div>
                       </div>
                     ) : (
-                      <div className="grid grid-cols-3 gap-2">
-                        {mediaList.map((media) => {
-                          const isSelected = selectedMedia.includes(media.id);
-                          const selectionIndex = selectedMedia.indexOf(media.id);
-                          
-                          return (
-                            <button
-                              key={media.id}
-                              onClick={() => {
-                                if (isSelected) {
-                                  // Remove from selection
-                                  setSelectedMedia(prev => prev.filter(id => id !== media.id));
-                                } else if (selectedMedia.length < 10) {
-                                  // Add to selection (max 10)
-                                  setSelectedMedia(prev => [...prev, media.id]);
-                                } else {
-                                  toast({
-                                    title: "Limite atteinte",
-                                    description: "Maximum 10 photos par publication",
-                                    variant: "destructive",
-                                  });
-                                }
-                              }}
-                              className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all ${
-                                isSelected
-                                  ? 'border-primary ring-2 ring-primary'
-                                  : 'border-transparent hover:border-muted-foreground'
-                              }`}
-                              data-testid={`button-select-media-${media.id}`}
+                      <>
+                        {selectedMedia.length > 0 && (
+                          <div className="mb-4">
+                            <div className="text-sm font-medium text-muted-foreground mb-2">
+                              Photos sélectionnées ({selectedMedia.length}/10)
+                            </div>
+                            <DndContext 
+                              sensors={sensors}
+                              collisionDetection={closestCenter}
+                              onDragEnd={handleDragEnd}
                             >
-                              <img 
-                                src={media.originalUrl} 
-                                alt={media.fileName}
-                                className="w-full h-full object-cover"
-                              />
-                              {isSelected && (
-                                <div className="absolute top-1 right-1 w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold">
-                                  {selectionIndex + 1}
+                              <SortableContext 
+                                items={selectedMedia}
+                                strategy={rectSortingStrategy}
+                              >
+                                <div className="grid grid-cols-3 gap-2 p-3 bg-accent/20 rounded-lg border border-accent">
+                                  {selectedMedia.map((mediaId, index) => {
+                                    const media = mediaList.find(m => m.id === mediaId);
+                                    if (!media) return null;
+                                    
+                                    return (
+                                      <SortableMediaItem
+                                        key={media.id}
+                                        media={media}
+                                        index={index}
+                                        isSelected={true}
+                                        onToggle={() => {
+                                          setSelectedMedia(prev => prev.filter(id => id !== media.id));
+                                        }}
+                                      />
+                                    );
+                                  })}
                                 </div>
-                              )}
-                            </button>
-                          );
-                        })}
-                      </div>
+                              </SortableContext>
+                            </DndContext>
+                          </div>
+                        )}
+                        <div className="text-sm font-medium text-muted-foreground mb-2">
+                          Toutes les photos
+                        </div>
+                        <div className="grid grid-cols-3 gap-2">
+                          {mediaList.map((media) => {
+                            const isSelected = selectedMedia.includes(media.id);
+                            
+                            return (
+                              <button
+                                key={media.id}
+                                onClick={() => {
+                                  if (isSelected) {
+                                    // Remove from selection
+                                    setSelectedMedia(prev => prev.filter(id => id !== media.id));
+                                  } else if (selectedMedia.length < 10) {
+                                    // Add to selection (max 10)
+                                    setSelectedMedia(prev => [...prev, media.id]);
+                                  } else {
+                                    toast({
+                                      title: "Limite atteinte",
+                                      description: "Maximum 10 photos par publication",
+                                      variant: "destructive",
+                                    });
+                                  }
+                                }}
+                                className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all ${
+                                  isSelected
+                                    ? 'border-primary ring-2 ring-primary opacity-50'
+                                    : 'border-transparent hover:border-muted-foreground'
+                                }`}
+                                data-testid={`button-select-media-${media.id}`}
+                              >
+                                <img 
+                                  src={media.originalUrl} 
+                                  alt={media.fileName}
+                                  className="w-full h-full object-cover"
+                                />
+                                {isSelected && (
+                                  <div className="absolute inset-0 bg-primary/10 flex items-center justify-center">
+                                    <div className="text-xs font-semibold text-primary">Sélectionnée</div>
+                                  </div>
+                                )}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </>
                     )}
                   </div>
                 </CardContent>