From 8b552465f2cc2d34741cdd60727c0a11fb4352e6 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 23 Feb 2026 16:02:27 +0100
Subject: [PATCH] Wire overview buttons to real actions and disable Invite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "Ajouter" task button: opens TaskModal with tablo pre-selected (purple solid button)
- "Discussion" link: already wired to /chat/:tabloId
- "Inviter" button: disabled with "Bientôt" badge and muted styling
- Add TaskModal component render at the bottom of the page

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/pages/tablo-details.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/main/src/pages/tablo-details.tsx b/apps/main/src/pages/tablo-details.tsx
index 68e6a25..d7a2a37 100644
--- a/apps/main/src/pages/tablo-details.tsx
+++ b/apps/main/src/pages/tablo-details.tsx
@@ -25,6 +25,7 @@ import {
   useParams,
   useSearchParams,
 } from "react-router-dom";
+import { TaskModal } from "../components/kanban/TaskModal";
 import { TabloDiscussionSection } from "../components/TabloDiscussionSection";
 import { TabloEventsSection } from "../components/TabloEventsSection";
 import { TabloFilesSection } from "../components/TabloFilesSection";
@@ -98,6 +99,8 @@ export const TabloDetailsPage = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: tablos, isLoading } = useTablosList();
 
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+
   const sectionParam = searchParams.get("section") as TabSection | null;
   const activeSection: TabSection =
     sectionParam && TABS.some((t) => t.id === sectionParam && !t.disabled)
@@ -195,10 +198,14 @@ export const TabloDetailsPage = () => {
             </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"
+              disabled
+              className="border border-border text-muted-foreground font-medium py-2 px-4 rounded-lg flex items-center gap-2 opacity-60 cursor-not-allowed"
             >
               <UserPlusIcon className="w-5 h-5" />
               Inviter
+              <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>
@@ -307,8 +314,8 @@ export const TabloDetailsPage = () => {
                   </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"
+                    onClick={() => setIsTaskModalOpen(true)}
+                    className="flex items-center justify-center gap-2 px-3 sm:px-4 py-2 bg-[#804EEC] hover:bg-[#6f3fd4] text-white rounded-xl w-full sm:w-auto transition-colors"
                   >
                     <PlusIcon className="w-4 h-4" />
                     <span className="text-sm">Ajouter</span>
@@ -462,6 +469,14 @@ export const TabloDetailsPage = () => {
           <EtapesSection etapes={etapes} tabloTasks={tabloTasks} tabloId={tabloId ?? ""} />
         )}
       </div>
+
+      {/* Task Create Modal */}
+      <TaskModal
+        tabloId={tabloId}
+        isOpen={isTaskModalOpen}
+        onClose={() => setIsTaskModalOpen(false)}
+        initialStatus="todo"
+      />
     </div>
   );
 };