Merge pull request #45 from R0m1k3/dev

Dev

.replit

@@ -26,10 +26,6 @@ externalPort = 3002
 localPort = 35385
 externalPort = 6800
 
-[[ports]]
-localPort = 36725
-externalPort = 8000
-
 [[ports]]
 localPort = 37431
 externalPort = 5000
@@ -50,6 +46,10 @@ externalPort = 6000
 localPort = 43245
 externalPort = 3001
 
+[[ports]]
+localPort = 45149
+externalPort = 8000
+
 [[ports]]
 localPort = 46681
 externalPort = 5173

client/src/components/media-upload.tsx

@@ -1,9 +1,10 @@
 import { useState, useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 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 } from "lucide-react";
+import { CloudUpload, Image as ImageIcon, Video, X, Upload, Loader2 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { SiFacebook, SiInstagram } from "react-icons/si";
 
@@ -170,40 +171,18 @@ export default function MediaUpload() {
             <div className="space-y-5">
               <div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
                 <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
                     <SiFacebook className="text-[#1877F2] text-lg" />
-                    <span className="text-sm font-semibold text-foreground">Facebook Feed</span>
-                  </div>
-                  <span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1200×630</span>
-                </div>
-                <div className="aspect-[1.91/1] bg-muted/30 rounded-lg overflow-hidden border border-border/50">
-                  {selectedFile?.facebookFeedUrl ? (
-                    <img
-                      src={selectedFile.facebookFeedUrl}
-                      alt="Facebook preview"
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <div className="w-full h-full flex items-center justify-center">
-                      <ImageIcon className="w-12 h-12 text-muted-foreground opacity-50" />
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-2">
                     <SiInstagram className="text-[#E4405F] text-lg" />
-                    <span className="text-sm font-semibold text-foreground">Instagram Feed</span>
+                    <span className="text-sm font-semibold text-foreground">Feed</span>
                   </div>
                   <span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1080×1080</span>
                 </div>
-                <div className="aspect-square bg-muted/30 rounded-lg overflow-hidden border border-border/50">
-                  {selectedFile?.instagramFeedUrl ? (
+                <div className="aspect-square bg-muted/30 rounded-lg overflow-hidden border border-border/50" style={{ width: '250px' }}>
+                  {selectedFile?.facebookFeedUrl || selectedFile?.instagramFeedUrl ? (
                     <img
-                      src={selectedFile.instagramFeedUrl}
-                      alt="Instagram feed preview"
+                      src={selectedFile.facebookFeedUrl || selectedFile.instagramFeedUrl}
+                      alt="Feed preview"
                       className="w-full h-full object-cover"
                     />
                   ) : (
@@ -216,17 +195,18 @@ export default function MediaUpload() {
 
               <div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
                 <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
+                    <SiFacebook className="text-[#1877F2] text-lg" />
                     <SiInstagram className="text-[#E4405F] text-lg" />
-                    <span className="text-sm font-semibold text-foreground">Instagram Story</span>
+                    <span className="text-sm font-semibold text-foreground">Story</span>
                   </div>
                   <span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1080×1920</span>
                 </div>
-                <div className="aspect-[9/16] bg-muted/30 rounded-lg overflow-hidden max-w-[220px] border border-border/50">
+                <div className="aspect-[9/16] bg-muted/30 rounded-lg overflow-hidden border border-border/50" style={{ width: '200px' }}>
                   {selectedFile?.instagramStoryUrl ? (
                     <img
                       src={selectedFile.instagramStoryUrl}
-                      alt="Instagram story preview"
+                      alt="Story preview"
                       className="w-full h-full object-cover"
                     />
                   ) : (
@@ -240,6 +220,24 @@ export default function MediaUpload() {
           </div>
         </div>
       </div>
+
+      <Dialog open={uploadMutation.isPending}>
+        <DialogContent className="sm:max-w-md [&>button]:hidden">
+          <div className="flex flex-col items-center justify-center py-8">
+            <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
+              <Loader2 className="w-10 h-10 text-primary animate-spin" />
+            </div>
+            <h3 className="text-xl font-semibold text-foreground mb-2">
+              Upload en cours...
+            </h3>
+            <p className="text-sm text-muted-foreground text-center">
+              Votre image est en cours de téléchargement et de traitement.
+              <br />
+              Veuillez patienter.
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }