Merge branch 'main' of https://github.com/R0m1k3/Socialflow

client/src/pages/mobile/audio-admin.tsx

@@ -0,0 +1,2 @@
+import AudioAdmin from "../audio-admin";
+export default AudioAdmin;

client/src/pages/mobile/dashboard.tsx

@@ -1,42 +1,115 @@
-import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
-import StatsCards from "@/components/stats-cards";
 import OngoingReels from "@/components/ongoing-reels";
-import RecentPublications from "@/components/recent-publications";
-import ManagedPages from "@/components/managed-pages";
-import { useState } from "react";
+import { Link, useLocation } from "wouter";
+import {
+  PlusCircle,
+  Video,
+  Calendar,
+  BarChart3,
+  Images,
+  Wand2,
+  Clock,
+  Settings,
+  Users,
+  ChevronRight,
+  Sparkles
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 
 export default function DashboardMobile() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [, setLocation] = useLocation();
+
+  const mainActions = [
+    { icon: PlusCircle, label: "Nv. Post", href: "/new", color: "text-blue-500", bg: "bg-blue-500/10", border: "border-blue-500/20", description: "Créer une publication" },
+    { icon: Video, label: "Nv. Reel", href: "/reel", color: "text-purple-500", bg: "bg-purple-500/10", border: "border-purple-500/20", description: "Générer une vidéo IA" },
+    { icon: Calendar, label: "Calendrier", href: "/calendar", color: "text-amber-500", bg: "bg-amber-500/10", border: "border-amber-500/20", description: "Voir le planning" },
+    { icon: BarChart3, label: "Analytics", href: "/analytics", color: "text-emerald-500", bg: "bg-emerald-500/10", border: "border-emerald-500/20", description: "Statistiques" },
+  ];
+
+  const secondaryMenu = [
+    { icon: Images, label: "Médiathèque", href: "/media" },
+    { icon: Wand2, label: "Éditeur d'images", href: "/image-editor" },
+    { icon: Clock, label: "Historique", href: "/history" },
+    { icon: Users, label: "Pages connectées", href: "/pages" },
+    { icon: Settings, label: "Paramètres", href: "/settings" },
+  ];
 
   return (
     <div className="flex h-screen overflow-hidden bg-background">
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 bg-black/50 z-40"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      <div className={`
-        fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
-        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
-      `}>
-        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
-      </div>
-
       <main className="flex-1 overflow-y-auto">
-        <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+        <TopBar onMenuClick={() => { }} hideMenuButton={true} />
 
-        {/* MOBILE: Reduced padding, single column layout with better spacing */}
-        <div className="p-4 space-y-6">
-          <StatsCards />
+        <div className="p-4 space-y-6 pb-20">
 
+          {/* Header Section */}
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+              <Sparkles className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Social Flow
+              </h1>
+              <p className="text-xs text-muted-foreground">Tableau de bord</p>
+            </div>
+          </div>
+
+          {/* 1. Status Section */}
           <OngoingReels compact />
 
-          <RecentPublications />
+          {/* 2. Main Action Grid */}
+          <Card className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
+            <CardHeader className="p-4 pb-2">
+              <CardTitle className="text-base font-semibold">Actions Rapides</CardTitle>
+            </CardHeader>
+            <CardContent className="p-4">
+              <div className="grid grid-cols-2 gap-3">
+                {mainActions.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <Link key={item.href} href={item.href}>
+                      <div className={`
+                        flex flex-col items-center justify-center p-4 rounded-xl border cursor-pointer transition-all active:scale-95 hover:opacity-80
+                        ${item.bg} ${item.border}
+                      `}>
+                        <div className={`p-2 rounded-full bg-background/80 shadow-sm mb-2`}>
+                          <Icon className={`w-6 h-6 ${item.color}`} />
+                        </div>
+                        <span className="font-semibold text-sm text-foreground">{item.label}</span>
+                        <span className="text-[10px] text-muted-foreground mt-1 text-center">{item.description}</span>
+                      </div>
+                    </Link>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
 
-          <ManagedPages />
+          {/* 3. Secondary Menu List */}
+          <Card className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
+            <CardHeader className="p-4 pb-2">
+              <CardTitle className="text-base font-semibold">Menu</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="divide-y divide-border/50">
+                {secondaryMenu.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <Link key={item.href} href={item.href}>
+                      <div className="flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors cursor-pointer active:bg-muted">
+                        <div className="p-2 rounded-lg bg-muted text-foreground">
+                          <Icon className="w-5 h-5" />
+                        </div>
+                        <span className="flex-1 font-medium text-sm">{item.label}</span>
+                        <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                      </div>
+                    </Link>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </main>
     </div>

client/src/pages/mobile/new-reel.tsx

@@ -62,7 +62,6 @@ export default function MobileNewReel() {
 
     // État audio preview
     const [isPlaying, setIsPlaying] = useState<string | null>(null);
-    const [musicOffset, setMusicOffset] = useState(0);
     const [stabilize, setStabilize] = useState(true); // Activé par défaut pour les Reels
 
 
@@ -75,27 +74,24 @@ export default function MobileNewReel() {
     });
 
     const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12);
-    const [loadedTracks, setLoadedTracks] = useState<MusicTrack[]>([]);
 
-    const { data: musicData, isLoading: musicLoading, refetch: refetchMusic } = useQuery<{ tracks: MusicTrack[] }>({
-        queryKey: ['/api/music/search', selectedVideo?.id, musicOffset],
-        queryFn: async () => {
-            const minDuration = 10;
-            const maxDuration = 120;
-            const response = await fetch(
-                `/api/music/search?minDuration=${minDuration}&maxDuration=${maxDuration}&limit=10&offset=${musicOffset}`
-            );
-            const data = await response.json();
-            setLoadedTracks(data.tracks || []);
-            return data;
-        },
-        enabled: currentStep === 'music' && !!selectedVideo,
+    // --- Added for Internal Audio Tracks ---
+    const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
+        queryKey: ['/api/audio-tracks'],
     });
 
-    const handleLoadNewMusic = () => {
-        setMusicOffset(prev => prev + 10);
-        refetchMusic();
-    };
+    const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
+        id: `internal_${t.id}`,
+        title: t.title,
+        artist: t.fileName || t.title,
+        albumName: "Bibliothèque Interne",
+        duration: t.duration || 0,
+        previewUrl: t.url,
+        downloadUrl: t.url,
+        imageUrl: "",
+        license: "Internal"
+    }));
+    // --- End Internal Tracks ---
 
     const uploadMutation = useMutation({
         mutationFn: async (file: File) => {
@@ -269,7 +265,7 @@ export default function MobileNewReel() {
                             ) : (
                                 <div className="grid grid-cols-2 gap-3 mt-4">
                                     {videoList.map((media) => (
-                                        <div key={media.id} onClick={() => setSelectedVideoId(media.id) || setSelectedVideo(media)} className={`relative aspect-[9/16] bg-black rounded-lg overflow-hidden border-2 transition-all ${selectedVideoId === media.id ? 'border-primary' : 'border-transparent'}`}>
+                                        <div key={media.id} onClick={() => { setSelectedVideoId(media.id); setSelectedVideo(media); }} className={`relative aspect-[9/16] bg-black rounded-lg overflow-hidden border-2 transition-all ${selectedVideoId === media.id ? 'border-primary' : 'border-transparent'}`}>
                                             <video src={media.originalUrl} className="w-full h-full object-cover" muted />
                                         </div>
                                     ))}
@@ -314,18 +310,32 @@ export default function MobileNewReel() {
                         )}
 
                         <div className="space-y-2">
-                            {musicData?.tracks?.map((track) => (
-                                <div key={track.id} onClick={() => setSelectedTrack(track)} className={`flex items-center gap-3 p-3 rounded-xl border ${selectedTrack?.id === track.id ? 'border-primary bg-primary/5' : 'border-border bg-card'}`}>
-                                    <Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
-                                        {isPlaying === track.id ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
-                                    </Button>
-                                    <div className="flex-1 min-w-0">
-                                        <p className="font-medium truncate">{track.title}</p>
-                                        <p className="text-xs text-muted-foreground truncate">{track.artist}</p>
-                                    </div>
-                                    {selectedTrack?.id === track.id && <Check className="h-5 w-5 text-primary" />}
+                            {internalTracksLoading ? (
+                                <div className="flex items-center justify-center py-8">
+                                    <Loader2 className="w-8 h-8 animate-spin text-primary" />
                                 </div>
-                            ))}
+                            ) : internalTracks.length === 0 ? (
+                                <div className="text-center py-10 border-2 border-dashed border-border rounded-xl">
+                                    <Music className="w-12 h-12 mx-auto text-muted-foreground mb-4 opacity-40" />
+                                    <p className="text-muted-foreground font-medium">Aucune musique disponible</p>
+                                    <p className="text-sm text-muted-foreground mt-1">Un administrateur peut ajouter des MP3 via la Bibliothèque Audio.</p>
+                                </div>
+                            ) : (
+                                internalTracks.map((track) => (
+                                    <div key={track.id} onClick={() => setSelectedTrack(track)} className={`flex items-center gap-3 p-3 rounded-xl border ${selectedTrack?.id === track.id ? 'border-primary bg-primary/5' : 'border-border bg-card'}`}>
+                                        <Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
+                                            {isPlaying === track.id ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
+                                        </Button>
+                                        <div className="flex-1 min-w-0">
+                                            <p className="font-medium truncate">{track.title}</p>
+                                            <p className="text-xs text-muted-foreground truncate">
+                                                {Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
+                                            </p>
+                                        </div>
+                                        {selectedTrack?.id === track.id && <Check className="h-5 w-5 text-primary" />}
+                                    </div>
+                                ))
+                            )}
                         </div>
 
                         {selectedTrack && (