Redesign project detail page with header tabs and overview

- Replace sidebar layout with top header: project icon, name, Discussion (purple) and Invite buttons
- Add metadata bar: role, creation date, status badge, progress bar
- Tab navigation: Aperçu, Tâches, Fichiers, Discussion, Événements, Roadmap (bientôt)
- Overview tab: project description card, tasks preview (5 items), files sidebar, project info card
- Other tabs delegate to existing section components (TabloTasksSection, TabloFilesSection, etc.)
- Move /tablos/:tabloId route inside Layout wrapper so it gets the sidebar and TopBar
- Purple #804EEC accent throughout, full dark mode support

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

apps/main/src/lib/routes.tsx

@@ -34,14 +34,14 @@ export const routes: RouteObject[] = [
     path: "/",
     element: <ProtectedRoute fallback="/login" />,
     children: [
-      {
-        path: "tablos/:tabloId",
-        element: <TabloDetailsPage />,
-      },
       {
         path: "",
         element: <Layout />,
         children: [
+          {
+            path: "tablos/:tabloId",
+            element: <TabloDetailsPage />,
+          },
           {
             index: true,
             element: <TabloPage />,

apps/main/src/pages/tablo-details.tsx

@@ -1,201 +1,318 @@
-import { toast } from "@xtablo/shared";
-import { UserTablo } from "@xtablo/shared/types/tablos.types";
-import { Button } from "@xtablo/ui/components/button";
+import { cn, toast } from "@xtablo/shared";
+import type { UserTablo } from "@xtablo/shared/types/tablos.types";
+import type { KanbanTask } from "@xtablo/shared-types";
+import { LoadingSpinner } from "@ui/components/LoadingSpinner";
 import {
-  ArrowLeft,
-  // BookOpen, // Notes feature temporarily hidden
-  Calendar,
-  FileText,
-  LayoutDashboard,
-  ListChecks,
-  MessageSquare,
+  CalendarIcon,
+  CircleCheckIcon,
+  EllipsisVerticalIcon,
+  FileTextIcon,
+  FolderIcon,
+  KanbanIcon,
+  LayoutDashboardIcon,
+  MapIcon,
+  MessageCircleIcon,
+  PlusIcon,
+  UserPlusIcon,
 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { match } from "ts-pattern";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { TabloDiscussionSection } from "../components/TabloDiscussionSection";
 import { TabloEventsSection } from "../components/TabloEventsSection";
 import { TabloFilesSection } from "../components/TabloFilesSection";
-// import { TabloNotesSection } from "../components/TabloNotesSection"; // Notes feature temporarily hidden
-import { TabloOverviewSection } from "../components/TabloOverviewSection";
 import { TabloTasksSection } from "../components/TabloTasksSection";
+import { useAllTasks } from "../hooks/tasks";
+import { useTabloFileNames } from "../hooks/tablo_data";
 import { useTablosList } from "../hooks/tablos";
 
-type TabSection =
-  | "overview"
-  | "files"
-  | "discussion"
-  // | "notes" // Notes feature temporarily hidden
-  | "events"
-  | "tasks";
+// ─── Status helpers ───────────────────────────────────────────────────────────
+
+function getStatusConfig(status: string) {
+  switch (status) {
+    case "in_progress":
+      return { label: "En cours", badgeClass: "bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-400 dark:border-yellow-800", progress: 50 };
+    case "done":
+      return { label: "Terminé", badgeClass: "bg-green-50 text-green-600 border border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-800", progress: 100 };
+    default:
+      return { label: "À faire", badgeClass: "bg-blue-50 text-blue-600 border border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-800", progress: 0 };
+  }
+}
+
+// ─── Tabs ─────────────────────────────────────────────────────────────────────
+
+type TabSection = "overview" | "board" | "list" | "roadmap" | "calendar" | "files" | "discussion" | "events" | "tasks";
+
+const TABS: { id: TabSection; label: string; icon: React.ElementType; disabled?: boolean }[] = [
+  { id: "overview", label: "Aperçu", icon: LayoutDashboardIcon },
+  { id: "tasks", label: "Tâches", icon: KanbanIcon },
+  { id: "files", label: "Fichiers", icon: FolderIcon },
+  { id: "discussion", label: "Discussion", icon: MessageCircleIcon },
+  { id: "events", label: "Événements", icon: CalendarIcon },
+  { id: "roadmap", label: "Roadmap", icon: MapIcon, disabled: true },
+];
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
 
 export const TabloDetailsPage = () => {
   const { tabloId } = useParams<{ tabloId: string }>();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { data: tablos, isLoading } = useTablosList();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const sectionParam = searchParams.get("section");
-  // Notes feature temporarily hidden - redirect to overview if notes is selected
+  const sectionParam = searchParams.get("section") as TabSection | null;
   const activeSection: TabSection =
-    sectionParam &&
-    sectionParam !== "notes" &&
-    ["overview", "files", "discussion", "events", "tasks"].includes(sectionParam)
-      ? (sectionParam as TabSection)
+    sectionParam && TABS.some((t) => t.id === sectionParam && !t.disabled)
+      ? sectionParam
       : "overview";
 
   const [tablo, setTablo] = useState<UserTablo | null>(null);
 
   useEffect(() => {
     if (tablos && tabloId) {
-      const foundTablo = tablos.find((t) => t.id === tabloId);
-      if (foundTablo) {
-        setTablo(foundTablo);
+      const found = tablos.find((t) => t.id === tabloId);
+      if (found) {
+        setTablo(found);
       } else {
-        // Tablo not found, redirect back
         toast.add(
-          {
-            title: "Tablo introuvable",
-            description: "Le tablo demandé n'existe pas ou vous n'y avez pas accès",
-            type: "error",
-          },
+          { title: "Projet introuvable", description: "Le projet demandé n'existe pas ou vous n'y avez pas accès", type: "error" },
           { timeout: 5000 }
         );
-        navigate("/tablo");
+        navigate("/tablos");
       }
     }
   }, [tablos, tabloId, navigate]);
 
+  // Tasks for this tablo (used in overview)
+  const { data: allTasks = [] } = useAllTasks();
+  const tabloTasks = (allTasks as KanbanTask[]).filter((t) => t.tablo_id === tabloId);
+
+  // Files for this tablo (used in overview)
+  const { data: filesData } = useTabloFileNames(tabloId ?? "");
+  const fileNames = (filesData?.fileNames ?? []).filter((f) => !f.startsWith("."));
+
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-screen">
+      <div className="flex items-center justify-center h-64">
         <LoadingSpinner />
       </div>
     );
   }
 
-  if (!tablo) {
-    return null;
-  }
+  if (!tablo) return null;
 
+  const { label: statusLabel, badgeClass, progress } = getStatusConfig(tablo.status);
   const isAdmin = tablo.is_admin;
 
-  const navigationItems: Array<{
-    id: TabSection;
-    label: string;
-    icon: React.ReactNode;
-  }> = [
-    {
-      id: "overview",
-      label: "Vue d'ensemble",
-      icon: <LayoutDashboard className="w-5 h-5" />,
-    },
-    {
-      id: "tasks",
-      label: "Tâches",
-      icon: <ListChecks className="w-5 h-5" />,
-    },
-    {
-      id: "files",
-      label: "Fichiers",
-      icon: <FileText className="w-5 h-5" />,
-    },
-    {
-      id: "discussion",
-      label: "Discussion",
-      icon: <MessageSquare className="w-5 h-5" />,
-    },
-    // Notes feature temporarily hidden
-    // {
-    //   id: "notes",
-    //   label: "Notes",
-    //   icon: <BookOpen className="w-5 h-5" />,
-    // },
-    {
-      id: "events",
-      label: "Événements",
-      icon: <Calendar className="w-5 h-5" />,
-    },
-  ];
-
   return (
-    <div className="flex h-screen bg-background">
-      {/* Left Sidebar Navigation */}
-      <aside className="w-64 border-r border-border bg-card flex flex-col">
-        {/* Header with back button */}
-        <div className="p-4 border-b border-border">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigate("/tablo")}
-            className="mb-4 w-full justify-start"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Retour aux tablos
-          </Button>
-
-          {/* Tablo preview */}
-          <div className="flex items-center space-x-3">
-            {tablo.image ? (
-              <img
-                src={tablo.image}
-                alt={tablo.name}
-                className="w-12 h-12 rounded-lg object-cover"
-              />
-            ) : (
-              <div
-                className={`w-12 h-12 rounded-lg ${
-                  tablo.color || "bg-blue-500"
-                } flex items-center justify-center`}
-              >
-                <span className="text-white font-bold text-sm">
-                  {tablo.name.charAt(0).toUpperCase()}
-                </span>
-              </div>
-            )}
-            <div className="flex-1 min-w-0">
-              <h2 className="text-lg font-bold text-foreground truncate">{tablo.name}</h2>
-              <p className="text-xs text-muted-foreground">
-                {isAdmin ? "Administrateur" : "Invité"}
-              </p>
+    <div>
+      {/* ── Header ──────────────────────────────────────────────────────── */}
+      <div className="px-4 pt-10">
+        <div className="flex flex-col md:flex-row items-start justify-between mb-6 border-b border-[#F2F4F7] dark:border-gray-700 pb-5 gap-5 md:gap-0">
+          <div className="flex items-center gap-4">
+            <div
+              className={cn(
+                "w-12 h-12 rounded-lg flex items-center justify-center shrink-0 overflow-hidden text-white font-bold text-xl",
+                !tablo.image && (tablo.color || "bg-gray-400")
+              )}
+            >
+              {tablo.image ? (
+                <img src={tablo.image} alt={tablo.name} className="w-full h-full object-cover" />
+              ) : (
+                tablo.name.charAt(0).toUpperCase()
+              )}
             </div>
+            <h1 className="text-xl md:text-3xl font-bold text-foreground">{tablo.name}</h1>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              to={`/chat/${tabloId}`}
+              className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white font-medium py-2 px-4 rounded-lg flex items-center gap-2 transition-colors"
+            >
+              <MessageCircleIcon className="w-5 h-5" />
+              Discussion
+            </Link>
+            <button
+              type="button"
+              className="border border-border hover:bg-accent text-foreground font-medium py-2 px-4 rounded-lg flex items-center gap-2 transition-colors"
+            >
+              <UserPlusIcon className="w-5 h-5" />
+              Inviter
+            </button>
           </div>
         </div>
 
-        {/* Navigation items */}
-        <nav className="flex-1 p-4 space-y-1">
-          {navigationItems.map((item) => (
-            <button
-              key={item.id}
-              onClick={() => setSearchParams({ section: item.id })}
-              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
-                activeSection === item.id
-                  ? "bg-primary text-primary-foreground"
-                  : "text-foreground hover:bg-muted"
-              }`}
-            >
-              {item.icon}
-              <span className="font-medium">{item.label}</span>
-            </button>
-          ))}
-        </nav>
-      </aside>
-
-      {/* Main Content Area */}
-      <main className="flex-1 overflow-auto">
-        <div className="max-w-7xl mx-auto p-6 h-full">
-          {match(activeSection)
-            .with("overview", () => <TabloOverviewSection tablo={tablo} isAdmin={isAdmin} />)
-            .with("files", () => <TabloFilesSection tablo={tablo} isAdmin={isAdmin} />)
-            .with("discussion", () => <TabloDiscussionSection tablo={tablo} isAdmin={isAdmin} />)
-            // Notes feature temporarily hidden
-            // .with("notes", () => <TabloNotesSection tablo={tablo} isAdmin={isAdmin} />)
-            .with("events", () => <TabloEventsSection tablo={tablo} isAdmin={isAdmin} />)
-            .with("tasks", () => <TabloTasksSection tablo={tablo} isAdmin={isAdmin} />)
-            .exhaustive()}
+        {/* ── Metadata bar ──────────────────────────────────────────────── */}
+        <div className="flex flex-wrap items-center gap-6 text-sm border-b border-[#F2F4F7] dark:border-gray-700 pb-4 mb-4">
+          <div className="flex items-center gap-2 md:border-r border-[#D0D5DD] dark:border-gray-600 pr-4">
+            <span className="text-muted-foreground">Rôle :</span>
+            <span className="text-foreground font-medium">{isAdmin ? "Admin" : "Invité"}</span>
+          </div>
+          <div className="flex items-center gap-2 md:border-r border-[#D0D5DD] dark:border-gray-600 pr-4">
+            <span className="text-muted-foreground">Créé le :</span>
+            <span className="text-foreground">
+              {new Intl.DateTimeFormat("fr-FR", { year: "numeric", month: "short", day: "2-digit" }).format(new Date(tablo.created_at))}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 md:border-r border-[#D0D5DD] dark:border-gray-600 pr-4">
+            <span className="text-muted-foreground">Statut :</span>
+            <span className={cn("px-3 py-1 rounded-full text-xs font-medium", badgeClass)}>{statusLabel}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground">Progression :</span>
+            <div className="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div className="h-full bg-green-500 rounded-full" style={{ width: `${progress}%` }} />
+            </div>
+            <span className="text-foreground font-medium">{progress}%</span>
+          </div>
         </div>
-      </main>
+      </div>
+
+      {/* ── Tab navigation ──────────────────────────────────────────────── */}
+      <div className="w-full bg-white dark:bg-background sticky top-0 z-40">
+        <div className="px-4 py-2">
+          <div className="flex flex-wrap items-center gap-6 mb-4 border-b border-[#F2F4F7] dark:border-gray-700">
+            {TABS.map((tab) => {
+              const isActive = activeSection === tab.id;
+              return (
+                <button
+                  key={tab.id}
+                  type="button"
+                  disabled={tab.disabled}
+                  onClick={() => !tab.disabled && setSearchParams({ section: tab.id })}
+                  className={cn(
+                    "flex items-center gap-2 pb-3 px-1 text-sm font-semibold transition-colors border-b-2",
+                    isActive
+                      ? "text-[#804EEC] border-[#804EEC]"
+                      : "text-[#667085] border-transparent hover:text-gray-900 dark:hover:text-gray-100",
+                    tab.disabled && "opacity-40 cursor-not-allowed"
+                  )}
+                >
+                  <tab.icon className="w-4 h-4" />
+                  <span>{tab.label}</span>
+                  {tab.disabled && (
+                    <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 leading-none">
+                      Bientôt
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Tab content ─────────────────────────────────────────────────── */}
+      <div className="px-4 sm:px-6 pt-6 pb-8">
+        {activeSection === "overview" && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Left column */}
+            <div className="lg:col-span-2 space-y-6">
+              {/* Description */}
+              <div className="bg-white dark:bg-card rounded-xl border border-border p-6 sm:p-8 shadow-sm">
+                <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-4">Description du projet</h2>
+                <p className="text-muted-foreground leading-relaxed text-sm sm:text-base">
+                  Ce projet regroupe les tâches, fichiers et événements associés. Utilisez les onglets ci-dessus pour naviguer entre les différentes sections.
+                </p>
+              </div>
+
+              {/* Tasks */}
+              <div className="bg-white dark:bg-card rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700 gap-3">
+                  <h2 className="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-gray-100">Mes tâches</h2>
+                  <button
+                    type="button"
+                    onClick={() => setSearchParams({ section: "tasks" })}
+                    className="flex items-center justify-center gap-2 px-3 sm:px-4 py-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 w-full sm:w-auto"
+                  >
+                    <PlusIcon className="w-4 h-4" />
+                    <span className="text-sm">Ajouter</span>
+                  </button>
+                </div>
+                <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                  {tabloTasks.length === 0 ? (
+                    <div className="p-6 text-center text-muted-foreground text-sm">Aucune tâche</div>
+                  ) : (
+                    tabloTasks.slice(0, 5).map((task) => (
+                      <div
+                        key={task.id}
+                        className="flex items-center gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
+                        onClick={() => setSearchParams({ section: "tasks" })}
+                      >
+                        {task.status === "done" ? (
+                          <CircleCheckIcon className="w-5 h-5 text-green-500 shrink-0" />
+                        ) : (
+                          <div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 shrink-0" />
+                        )}
+                        <p className={cn("text-sm font-medium truncate", task.status === "done" ? "line-through text-gray-400" : "text-gray-900 dark:text-gray-100")}>
+                          {task.title}
+                        </p>
+                      </div>
+                    ))
+                  )}
+                  {tabloTasks.length > 5 && (
+                    <button
+                      type="button"
+                      onClick={() => setSearchParams({ section: "tasks" })}
+                      className="w-full p-3 text-sm text-[#804EEC] hover:underline text-center"
+                    >
+                      Voir les {tabloTasks.length - 5} tâches restantes
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Right column */}
+            <div className="space-y-6">
+              {/* Files */}
+              <div className="bg-white dark:bg-card rounded-xl border border-border p-5 sm:p-6 shadow-sm">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg font-bold text-foreground">Fichiers</h3>
+                  <button type="button" onClick={() => setSearchParams({ section: "files" })} className="text-sm text-[#804EEC] hover:underline">
+                    Voir tout
+                  </button>
+                </div>
+                <div className="space-y-3">
+                  {fileNames.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">Aucun fichier</p>
+                  ) : (
+                    fileNames.slice(0, 5).map((fileName) => (
+                      <div key={fileName} className="flex items-start gap-3 p-3 hover:bg-accent dark:hover:bg-gray-800 rounded-lg transition-colors">
+                        <div className="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center shrink-0">
+                          <FileTextIcon className="w-4 h-4 text-red-500" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="font-medium text-foreground text-sm truncate">{fileName}</p>
+                        </div>
+                        <button type="button" className="text-muted-foreground hover:text-foreground p-1 shrink-0">
+                          <EllipsisVerticalIcon className="w-4 h-4" />
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+
+              {/* Info */}
+              <div className="bg-white dark:bg-card rounded-xl border border-border p-5 sm:p-6 shadow-sm">
+                <h3 className="text-lg font-bold text-foreground mb-4">Informations</h3>
+                <dl className="space-y-3 text-sm">
+                  <div className="flex justify-between"><dt className="text-muted-foreground">Tâches</dt><dd className="font-medium text-foreground">{tabloTasks.length}</dd></div>
+                  <div className="flex justify-between"><dt className="text-muted-foreground">Fichiers</dt><dd className="font-medium text-foreground">{fileNames.length}</dd></div>
+                  <div className="flex justify-between"><dt className="text-muted-foreground">Statut</dt><dd className={cn("px-2 py-0.5 rounded-full text-xs font-medium", badgeClass)}>{statusLabel}</dd></div>
+                  <div className="flex justify-between"><dt className="text-muted-foreground">Rôle</dt><dd className="font-medium text-foreground">{isAdmin ? "Admin" : "Invité"}</dd></div>
+                </dl>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeSection === "tasks" && <TabloTasksSection tablo={tablo} isAdmin={isAdmin} />}
+        {activeSection === "files" && <TabloFilesSection tablo={tablo} isAdmin={isAdmin} />}
+        {activeSection === "discussion" && <TabloDiscussionSection tablo={tablo} isAdmin={isAdmin} />}
+        {activeSection === "events" && <TabloEventsSection tablo={tablo} isAdmin={isAdmin} />}
+      </div>
     </div>
   );
 };