feat: integrate task creation functionality in HomePageClient and Kanban components

- Added task creation modal in HomePageClient with state management for visibility.
- Implemented `handleCreateTask` function to handle task submissions.
- Updated Kanban components to accept `onCreateTask` prop for task creation, ensuring consistent task management across the application.
- Removed unused task creation UI elements from Kanban components to streamline the interface.

components/HomePageClient.tsx

@@ -5,7 +5,10 @@ import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
 import { Header } from '@/components/ui/Header';
 import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
 import { Task, Tag, TaskStats } from '@/lib/types';
+import { CreateTaskData } from '@/clients/tasks-client';
 import { userPreferencesService } from '@/services/user-preferences';
+import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
+import { Button } from '@/components/ui/Button';
 
 interface HomePageClientProps {
   initialTasks: Task[];
@@ -14,9 +17,10 @@ interface HomePageClientProps {
 }
 
 function HomePageContent() {
-  const { stats, syncing } = useTasksContext();
+  const { stats, syncing, createTask } = useTasksContext();
   const [showFilters, setShowFilters] = useState(true);
   const [showObjectives, setShowObjectives] = useState(true);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   // Charger les préférences depuis le service
   useEffect(() => {
@@ -38,6 +42,12 @@ function HomePageContent() {
     userPreferencesService.updateViewPreferences({ showObjectives: newValue });
   };
 
+  // Handler pour la création de tâche depuis la barre de contrôles
+  const handleCreateTask = async (data: CreateTaskData) => {
+    await createTask(data);
+    setIsCreateModalOpen(false);
+  };
+
   return (
     <div className="min-h-screen bg-[var(--background)]">
       <Header 
@@ -50,40 +60,51 @@ function HomePageContent() {
       {/* Barre de contrôles de visibilité */}
       <div className="bg-[var(--card)]/30 border-b border-[var(--border)]/30">
         <div className="container mx-auto px-6 py-2">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center justify-between w-full">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-4">
-              <button
+              <div className="flex items-center gap-2">
-                onClick={handleToggleFilters}
+                <button
-                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
+                  onClick={handleToggleFilters}
-                  showFilters 
+                  className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
-                    ? 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30' 
+                    showFilters 
-                    : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50'
+                      ? 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30' 
-                }`}
+                      : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50'
-              >
+                  }`}
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                </svg>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
-                Filtres
+                  </svg>
-              </button>
+                  Filtres
+                </button>
+                
+                <button
+                  onClick={handleToggleObjectives}
+                  className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
+                    showObjectives 
+                      ? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30' 
+                      : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50'
+                  }`}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+                  </svg>
+                  Objectifs
+                </button>
+              </div>
               
-              <button
-                onClick={handleToggleObjectives}
-                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
-                  showObjectives 
-                    ? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30' 
-                    : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50'
-                }`}
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-                </svg>
-                Objectifs
-              </button>
             </div>
 
-            <div className="text-xs text-[var(--muted-foreground)] font-mono">
+            {/* Bouton d'ajout de tâche */}
-              Affichage des composants
+            <Button
-            </div>
+              variant="primary"
+              onClick={() => setIsCreateModalOpen(true)}
+              className="flex items-center gap-2"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Nouvelle tâche
+            </Button>
           </div>
         </div>
       </div>
@@ -94,6 +115,14 @@ function HomePageContent() {
           showObjectives={showObjectives}
         />
       </main>
+
+      {/* Modal de création de tâche */}
+      <CreateTaskForm
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSubmit={handleCreateTask}
+        loading={false}
+      />
     </div>
   );
 }

components/kanban/Board.tsx

@@ -2,8 +2,6 @@
 
 import { Task, TaskStatus } from '@/lib/types';
 import { KanbanColumn } from './Column';
-import { Button } from '@/components/ui/Button';
-import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useMemo, useState } from 'react';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
@@ -21,18 +19,16 @@ import { TaskCard } from './TaskCard';
 
 interface KanbanBoardProps {
   tasks: Task[];
-  onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
+  onCreateTask?: (data: CreateTaskData) => Promise<void>;
   onDeleteTask?: (taskId: string) => Promise<void>;
   onEditTask?: (task: Task) => void;
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
   onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
-  loading?: boolean;
   compactView?: boolean;
   visibleStatuses?: TaskStatus[];
 }
 
-export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false, compactView = false, visibleStatuses }: KanbanBoardProps) {
+export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, compactView = false, visibleStatuses }: KanbanBoardProps) {
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   
   // Gestion de la visibilité des colonnes (utilise les props si disponibles)
@@ -72,11 +68,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
     allColumns.filter(column => visibleStatuses.includes(column.id)) :
     getVisibleStatuses(allColumns);
 
-  const handleCreateTask = async (data: CreateTaskData) => {
-    if (onCreateTask) {
-      await onCreateTask(data);
-    }
-  };
 
   // Gestion du début du drag
   const handleDragStart = (event: DragStartEvent) => {
@@ -111,25 +102,8 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
       onDragEnd={handleDragEnd}
     >
       <div className="h-full flex flex-col bg-[var(--background)]">
-        {/* Header avec bouton nouvelle tâche */}
+        {/* Espacement supérieur */}
-        <div className="flex justify-between items-center p-6 pb-0">
+        <div className="pt-4"></div>
-          <div className="flex items-center gap-3">
-            <div className="w-2 h-2 bg-[var(--primary)] rounded-full animate-pulse"></div>
-            <h2 className="text-lg font-mono font-bold text-[var(--foreground)] uppercase tracking-wider">
-              Kanban Board
-            </h2>
-          </div>
-          
-          {onCreateTask && (
-            <Button
-              variant="primary"
-              onClick={() => setIsCreateModalOpen(true)}
-              disabled={loading}
-            >
-              + Nouvelle tâche
-            </Button>
-          )}
-        </div>
 
 
         {/* Board tech dark */}
@@ -139,7 +113,7 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
               key={column.id}
               id={column.id}
               tasks={column.tasks}
-              onCreateTask={onCreateTask ? handleCreateTask : undefined}
+              onCreateTask={onCreateTask}
               onDeleteTask={onDeleteTask}
               onEditTask={onEditTask}
               onUpdateTitle={onUpdateTitle}
@@ -148,15 +122,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
           ))}
         </div>
 
-        {/* Modal de création */}
-        {onCreateTask && (
-          <CreateTaskForm
-            isOpen={isCreateModalOpen}
-            onClose={() => setIsCreateModalOpen(false)}
-            onSubmit={handleCreateTask}
-            loading={loading}
-          />
-        )}
       </div>
 
       {/* Overlay pour le drag & drop */}

components/kanban/BoardContainer.tsx

@@ -9,7 +9,7 @@ import { KanbanFilters } from './KanbanFilters';
 import { EditTaskForm } from '@/components/forms/EditTaskForm';
 import { useTasksContext } from '@/contexts/TasksContext';
 import { Task, TaskStatus } from '@/lib/types';
-import { UpdateTaskData } from '@/clients/tasks-client';
+import { UpdateTaskData, CreateTaskData } from '@/clients/tasks-client';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
 import { getAllStatuses } from '@/lib/status-config';
 
@@ -67,6 +67,11 @@ export function KanbanBoardContainer({
   // Obtenir le nom du tag épinglé pour l'affichage
   const pinnedTagName = tags.find(tag => tag.isPinned)?.name;
 
+  // Wrapper pour adapter le type de createTask
+  const handleCreateTask = async (data: CreateTaskData): Promise<void> => {
+    await createTask(data);
+  };
+
   return (
     <>
       {/* Barre de filtres - conditionnelle */}
@@ -95,7 +100,7 @@ export function KanbanBoardContainer({
         kanbanFilters.swimlanesMode === 'priority' ? (
           <PrioritySwimlanesBoard 
             tasks={filteredTasks}
-            onCreateTask={createTask}
+            onCreateTask={handleCreateTask}
             onDeleteTask={deleteTask}
             onEditTask={handleEditTask}
             onUpdateTitle={handleUpdateTitle}
@@ -107,7 +112,7 @@ export function KanbanBoardContainer({
         ) : (
           <SwimlanesBoard 
             tasks={filteredTasks}
-            onCreateTask={createTask}
+            onCreateTask={handleCreateTask}
             onDeleteTask={deleteTask}
             onEditTask={handleEditTask}
             onUpdateTitle={handleUpdateTitle}
@@ -120,12 +125,11 @@ export function KanbanBoardContainer({
       ) : (
         <KanbanBoard 
           tasks={filteredTasks}
-          onCreateTask={createTask}
+          onCreateTask={handleCreateTask}
           onDeleteTask={deleteTask}
           onEditTask={handleEditTask}
           onUpdateTitle={handleUpdateTitle}
           onUpdateStatus={handleUpdateStatus}
-          loading={loading}
           compactView={kanbanFilters.compactView}
           visibleStatuses={visibleStatuses}
         />

components/kanban/PrioritySwimlanesBoard.tsx

@@ -8,7 +8,7 @@ import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
 
 interface PrioritySwimlanesoardProps {
   tasks: Task[];
-  onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
+  onCreateTask?: (data: CreateTaskData) => Promise<void>;
   onDeleteTask?: (taskId: string) => Promise<void>;
   onEditTask?: (task: Task) => void;
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
@@ -64,7 +64,6 @@ export function PrioritySwimlanesBoard({
   return (
     <SwimlanesBase
       tasks={tasks}
-      title="Swimlanes par Priorité"
       swimlanes={swimlanesData}
       onCreateTask={onCreateTask}
       onDeleteTask={onDeleteTask}
@@ -73,7 +72,6 @@ export function PrioritySwimlanesBoard({
       onUpdateStatus={onUpdateStatus}
       compactView={compactView}
       visibleStatuses={visibleStatuses}
-      loading={loading}
     />
   );
 }

components/kanban/SwimlanesBase.tsx

@@ -3,8 +3,6 @@
 import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
 import { QuickAddTask } from './QuickAddTask';
-import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
-import { Button } from '@/components/ui/Button';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useState } from 'react';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
@@ -115,21 +113,18 @@ export interface SwimlaneData {
 
 interface SwimlanesBaseProps {
   tasks: Task[];
-  title: string;
   swimlanes: SwimlaneData[];
-  onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
+  onCreateTask?: (data: CreateTaskData) => Promise<void>;
   onDeleteTask?: (taskId: string) => Promise<void>;
   onEditTask?: (task: Task) => void;
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
   onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
   compactView?: boolean;
   visibleStatuses?: TaskStatus[];
-  loading?: boolean;
 }
 
 export function SwimlanesBase({ 
   tasks, 
-  title,
   swimlanes,
   onCreateTask,
   onDeleteTask, 
@@ -137,12 +132,10 @@ export function SwimlanesBase({
   onUpdateTitle, 
   onUpdateStatus, 
   compactView = false,
-  visibleStatuses,
+  visibleStatuses
-  loading = false
 }: SwimlanesBaseProps) {
   const [activeTask, setActiveTask] = useState<Task | null>(null);
   const [collapsedSwimlanes, setCollapsedSwimlanes] = useState<Set<string>>(new Set());
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [showQuickAdd, setShowQuickAdd] = useState<{ [key: string]: boolean }>({});
   
   // Gestion de la visibilité des colonnes
@@ -194,12 +187,6 @@ export function SwimlanesBase({
   };
 
   // Handlers pour la création de tâches
-  const handleCreateTask = async (data: CreateTaskData) => {
-    if (onCreateTask) {
-      await onCreateTask(data);
-      setIsCreateModalOpen(false);
-    }
-  };
 
   const handleQuickAdd = async (data: CreateTaskData, columnId: string) => {
     if (onCreateTask) {
@@ -220,24 +207,8 @@ export function SwimlanesBase({
       onDragEnd={handleDragEnd}
     >
       <div className="flex flex-col h-full bg-[var(--background)]">
-        {/* Header */}
+        {/* Espacement supérieur */}
-        <div className="flex-shrink-0 px-6 py-4 border-b border-[var(--border)]/50">
+        <div className="flex-shrink-0 py-2"></div>
-          <div className="flex items-center justify-between">
-            <h2 className="text-lg font-mono font-bold text-[var(--foreground)] uppercase tracking-wider">
-              {title}
-            </h2>
-            
-            {onCreateTask && (
-              <Button
-                variant="primary"
-                onClick={() => setIsCreateModalOpen(true)}
-                disabled={loading}
-              >
-                + Nouvelle tâche
-              </Button>
-            )}
-          </div>
-        </div>
 
 
         {/* Headers des colonnes visibles */}
@@ -341,15 +312,6 @@ export function SwimlanesBase({
         )}
       </DragOverlay>
 
-      {/* Modal de création complète */}
-      {onCreateTask && (
-        <CreateTaskForm
-          isOpen={isCreateModalOpen}
-          onClose={() => setIsCreateModalOpen(false)}
-          onSubmit={handleCreateTask}
-          loading={loading}
-        />
-      )}
     </DndContext>
   );
 }

components/kanban/SwimlanesBoard.tsx

@@ -8,7 +8,7 @@ import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
 
 interface SwimlanesboardProps {
   tasks: Task[];
-  onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
+  onCreateTask?: (data: CreateTaskData) => Promise<void>;
   onDeleteTask?: (taskId: string) => Promise<void>;
   onEditTask?: (task: Task) => void;
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
@@ -84,7 +84,6 @@ export function SwimlanesBoard({
   return (
     <SwimlanesBase
       tasks={tasks}
-      title="Swimlanes par Tag"
       swimlanes={swimlanesData}
       onCreateTask={onCreateTask}
       onDeleteTask={onDeleteTask}
@@ -93,7 +92,6 @@ export function SwimlanesBoard({
       onUpdateStatus={onUpdateStatus}
       compactView={compactView}
       visibleStatuses={visibleStatuses}
-      loading={loading}
     />
   );
 }