feat: simplify mobile dashboard & implement reel queue system

client/src/components/ongoing-reels.tsx

@@ -5,7 +5,8 @@ import { Clapperboard, Loader2, CheckCircle2, XCircle } from "lucide-react";
 import type { Post } from "@shared/schema";
 
 /** Labels for each progress stage */
-function getStageLabel(progress: number): string {
+function getStageLabel(progress: number, status?: string): string {
+    if (status === 'pending') return "En attente de traitement...";
     if (progress <= 5) return "Démarrage du traitement…";
     if (progress <= 15) return "Traitement vidéo (FFmpeg)…";
     if (progress <= 65) return "Encodage en cours…";

client/src/components/topbar.tsx

@@ -1,28 +1,46 @@
-import { Menu, Search } from "lucide-react";
+import { Menu, Search, ChevronLeft } from "lucide-react";
 import { Input } from "@/components/ui/input";
+import { useLocation, Link } from "wouter";
+import { Button } from "@/components/ui/button";
 
 interface TopBarProps {
-  onMenuClick: () => void;
+  onMenuClick?: () => void;
+  hideMenuButton?: boolean;
 }
 
-export default function TopBar({ onMenuClick }: TopBarProps) {
+export default function TopBar({ onMenuClick, hideMenuButton = false }: TopBarProps) {
+  const [location] = useLocation();
+  const showBackButton = location !== "/";
+
   return (
     <header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
       <div className="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
         <div className="flex items-center gap-3 sm:gap-6 flex-1">
-          <button 
-            className="lg:hidden text-foreground hover:text-primary transition-all hover:scale-110 active:scale-95 p-2 hover:bg-primary/10 rounded-xl"
-            onClick={onMenuClick}
-            data-testid="button-menu"
-            aria-label="Toggle menu"
-          >
-            <Menu className="w-6 h-6" />
-          </button>
+          <div className="lg:hidden flex items-center gap-2">
+            {showBackButton ? (
+              <Link href="/">
+                <Button variant="ghost" size="icon" className="text-foreground hover:text-primary transition-all">
+                  <ChevronLeft className="w-6 h-6" />
+                </Button>
+              </Link>
+            ) : (
+              !hideMenuButton && (
+                <button
+                  className="text-foreground hover:text-primary transition-all hover:scale-110 active:scale-95 p-2 hover:bg-primary/10 rounded-xl"
+                  onClick={onMenuClick}
+                  data-testid="button-menu"
+                  aria-label="Toggle menu"
+                >
+                  <Menu className="w-6 h-6" />
+                </button>
+              )
+            )}
+          </div>
           <div className="flex-1 max-w-md hidden md:block">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-              <Input 
-                placeholder="Rechercher des publications, pages, médias..." 
+              <Input
+                placeholder="Rechercher des publications, pages, médias..."
                 className="pl-10 bg-muted/30 border-muted focus:border-primary/50 rounded-xl"
               />
             </div>

client/src/pages/mobile/dashboard.tsx

@@ -1,42 +1,92 @@
-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,
+  Bot,
+  Database,
+  ChevronRight
+} from "lucide-react";
 
 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" },
+    { icon: Video, label: "Nv. Reel", href: "/reel", color: "text-purple-500", bg: "bg-purple-500/10", border: "border-purple-500/20" },
+    { icon: Calendar, label: "Calendrier", href: "/calendar", color: "text-amber-500", bg: "bg-amber-500/10", border: "border-amber-500/20" },
+    { icon: BarChart3, label: "Analytics", href: "/analytics", color: "text-emerald-500", bg: "bg-emerald-500/10", border: "border-emerald-500/20" },
+  ];
+
+  const secondaryMenu = [
+    { icon: Images, label: "Médiathèque", href: "/media" },
+    { icon: Wand2, label: "Éditeur", href: "/image-editor" },
+    { icon: Clock, label: "Historique", href: "/history" },
+    { icon: Users, label: "Pages", href: "/pages" },
+    { icon: Settings, label: "Paramètres", href: "/settings" },
+  ];
+
+  // Admin items could be added here if needed, or integrated into secondaryMenu
 
   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)} />
-
-        {/* MOBILE: Reduced padding, single column layout with better spacing */}
-        <div className="p-4 space-y-6">
-          <StatsCards />
+        <TopBar onMenuClick={() => { }} hideMenuButton={true} />
 
+        <div className="p-4 space-y-6 pb-20">
+          {/* 1. Status Section */}
           <OngoingReels compact />
 
-          <RecentPublications />
+          {/* 2. Main Action Grid */}
+          <div>
+            <h2 className="text-sm font-semibold text-muted-foreground mb-3 px-1">Actions Rapides</h2>
+            <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
+                      ${item.bg} ${item.border}
+                    `}>
+                      <Icon className={`w-8 h-8 mb-2 ${item.color}`} />
+                      <span className="font-medium text-sm">{item.label}</span>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
 
-          <ManagedPages />
+          {/* 3. Secondary Menu List */}
+          <div>
+            <h2 className="text-sm font-semibold text-muted-foreground mb-3 px-1">Menu</h2>
+            <div className="bg-card rounded-xl border border-border/50 shadow-sm 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-3 p-4 hover:bg-muted/50 transition-colors cursor-pointer">
+                      <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>
+          </div>
         </div>
       </main>
     </div>