From d89de20df257a41ed6f2932a24f955c65f544bf4 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Fri, 13 Feb 2026 10:56:35 +0100
Subject: [PATCH] feat: polish mobile hub design and navigation

---
 client/src/pages/mobile/dashboard.tsx | 121 +++++++++++++++-----------
 task.md                               |   5 ++
 2 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/client/src/pages/mobile/dashboard.tsx b/client/src/pages/mobile/dashboard.tsx
index c276662..be85bc0 100644
--- a/client/src/pages/mobile/dashboard.tsx
+++ b/client/src/pages/mobile/dashboard.tsx
@@ -1,6 +1,5 @@
 import TopBar from "@/components/topbar";
 import OngoingReels from "@/components/ongoing-reels";
-import { useState } from "react";
 import { Link, useLocation } from "wouter";
 import {
   PlusCircle,
@@ -12,81 +11,105 @@ import {
   Clock,
   Settings,
   Users,
-  Bot,
-  Database,
-  ChevronRight
+  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 [, 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" },
+    { 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", href: "/image-editor" },
+    { icon: Wand2, label: "Éditeur d'images", href: "/image-editor" },
     { icon: Clock, label: "Historique", href: "/history" },
-    { icon: Users, label: "Pages", href: "/pages" },
+    { icon: Users, label: "Pages connectées", 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">
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => { }} hideMenuButton={true} />
 
         <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 />
 
           {/* 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>
+          <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>
 
           {/* 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" />
+          <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>
-                      <span className="flex-1 font-medium text-sm">{item.label}</span>
-                      <ChevronRight className="w-4 h-4 text-muted-foreground" />
-                    </div>
-                  </Link>
-                );
-              })}
-            </div>
-          </div>
+                    </Link>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </main>
     </div>
diff --git a/task.md b/task.md
index 01f4e8f..d8a52e9 100644
--- a/task.md
+++ b/task.md
@@ -171,6 +171,11 @@ Ajout d'une fonctionnalité complète de création de Reels Facebook permettant
   - [x] Create Secondary Menu List
   - [x] Remove `StatsCards` and `RecentPublications` from main view
 
+### Phase 18: Mobile Hub Polish ✨
+
+- [x] **Entry Point**: Verify no forced redirects to `/new`.
+- [x] **Hub Design**: Refactor `DashboardMobile` with `Card` components and consistent styling.
+
 ### Phase 13: Activation Agent BMad ✅
 
 - [x] Activer l'agent `bmad-master.md`