From c4f68bb00c807a254759b97fc1cd0e70f46e1479 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 14 Sep 2025 21:53:42 +0200
Subject: [PATCH] feat: add swimlanes view toggle to Kanban board - Introduced
 `swimlanesByTags` filter in `KanbanFilters` to toggle between swimlanes and
 standard Kanban view. - Updated `BoardContainer` to conditionally render
 `SwimlanesBoard` or `KanbanBoard` based on the selected filter. - Enhanced UI
 with a button to switch views, improving task organization and user
 experience.

---
 components/kanban/BoardContainer.tsx |  32 ++++--
 components/kanban/KanbanFilters.tsx  |  30 ++++++
 components/kanban/SwimlanesBoard.tsx | 156 +++++++++++++++++++++++++++
 3 files changed, 208 insertions(+), 10 deletions(-)
 create mode 100644 components/kanban/SwimlanesBoard.tsx

diff --git a/components/kanban/BoardContainer.tsx b/components/kanban/BoardContainer.tsx
index 8b45c47..f4c9463 100644
--- a/components/kanban/BoardContainer.tsx
+++ b/components/kanban/BoardContainer.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { KanbanBoard } from './Board';
+import { SwimlanesBoard } from './SwimlanesBoard';
 import { KanbanFilters } from './KanbanFilters';
 import { EditTaskForm } from '@/components/forms/EditTaskForm';
 import { useTasksContext } from '@/contexts/TasksContext';
@@ -53,16 +54,27 @@ export function KanbanBoardContainer() {
         onFiltersChange={setKanbanFilters}
       />
       
-      <KanbanBoard 
-        tasks={filteredTasks}
-        onCreateTask={createTask}
-        onDeleteTask={deleteTask}
-        onEditTask={handleEditTask}
-        onUpdateTitle={handleUpdateTitle}
-        onUpdateStatus={handleUpdateStatus}
-        loading={loading}
-        compactView={kanbanFilters.compactView}
-      />
+      {kanbanFilters.swimlanesByTags ? (
+        <SwimlanesBoard 
+          tasks={filteredTasks}
+          onDeleteTask={deleteTask}
+          onEditTask={handleEditTask}
+          onUpdateTitle={handleUpdateTitle}
+          onUpdateStatus={handleUpdateStatus}
+          compactView={kanbanFilters.compactView}
+        />
+      ) : (
+        <KanbanBoard 
+          tasks={filteredTasks}
+          onCreateTask={createTask}
+          onDeleteTask={deleteTask}
+          onEditTask={handleEditTask}
+          onUpdateTitle={handleUpdateTitle}
+          onUpdateStatus={handleUpdateStatus}
+          loading={loading}
+          compactView={kanbanFilters.compactView}
+        />
+      )}
       
       <EditTaskForm
         isOpen={!!editingTask}
diff --git a/components/kanban/KanbanFilters.tsx b/components/kanban/KanbanFilters.tsx
index 6309719..24ea8d4 100644
--- a/components/kanban/KanbanFilters.tsx
+++ b/components/kanban/KanbanFilters.tsx
@@ -12,6 +12,7 @@ export interface KanbanFilters {
   priorities?: TaskPriority[];
   showCompleted?: boolean;
   compactView?: boolean;
+  swimlanesByTags?: boolean;
 }
 
 interface KanbanFiltersProps {
@@ -58,6 +59,13 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
     });
   };
 
+  const handleSwimlanesToggle = () => {
+    onFiltersChange({ 
+      ...filters, 
+      swimlanesByTags: !filters.swimlanesByTags
+    });
+  };
+
   const handleClearFilters = () => {
     onFiltersChange({});
   };
@@ -86,6 +94,28 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
             />
           </div>
 
+          {/* Bouton swimlanes par tags */}
+          <Button
+            variant={filters.swimlanesByTags ? "primary" : "ghost"}
+            onClick={handleSwimlanesToggle}
+            className="flex items-center gap-2"
+            title={filters.swimlanesByTags ? "Vue normale" : "Lignes par tags"}
+          >
+            <svg 
+              className="w-4 h-4" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              {filters.swimlanesByTags ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+              )}
+            </svg>
+            {filters.swimlanesByTags ? 'Normal' : 'Swimlanes'}
+          </Button>
+
           {/* Bouton vue compacte */}
           <Button
             variant={filters.compactView ? "primary" : "ghost"}
diff --git a/components/kanban/SwimlanesBoard.tsx b/components/kanban/SwimlanesBoard.tsx
new file mode 100644
index 0000000..b150ca8
--- /dev/null
+++ b/components/kanban/SwimlanesBoard.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { Task, TaskStatus } from '@/lib/types';
+import { TaskCard } from './TaskCard';
+import { useMemo } from 'react';
+import { useTasksContext } from '@/contexts/TasksContext';
+
+interface SwimlanesboardProps {
+  tasks: Task[];
+  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;
+}
+
+export function SwimlanesBoard({ 
+  tasks, 
+  onDeleteTask, 
+  onEditTask, 
+  onUpdateTitle, 
+  onUpdateStatus, 
+  compactView = false 
+}: SwimlanesboardProps) {
+  const { tags: availableTags } = useTasksContext();
+
+  const statuses: { id: TaskStatus; title: string; color: string }[] = [
+    { id: 'todo', title: 'À faire', color: 'gray' },
+    { id: 'in_progress', title: 'En cours', color: 'blue' },
+    { id: 'done', title: 'Terminé', color: 'green' },
+    { id: 'cancelled', title: 'Annulé', color: 'red' }
+  ];
+
+  // Grouper les tâches par tags
+  const tasksByTag = useMemo(() => {
+    const grouped: { [tagName: string]: Task[] } = {};
+    
+    // Ajouter une catégorie pour les tâches sans tags
+    grouped['Sans tag'] = [];
+    
+    tasks.forEach(task => {
+      if (!task.tags || task.tags.length === 0) {
+        grouped['Sans tag'].push(task);
+      } else {
+        task.tags.forEach(tagName => {
+          if (!grouped[tagName]) {
+            grouped[tagName] = [];
+          }
+          grouped[tagName].push(task);
+        });
+      }
+    });
+    
+    return grouped;
+  }, [tasks]);
+
+  // Obtenir la couleur d'un tag
+  const getTagColor = (tagName: string) => {
+    if (tagName === 'Sans tag') return '#64748b'; // slate-500
+    const tag = availableTags.find(t => t.name === tagName);
+    return tag?.color || '#64748b';
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-slate-950">
+      {/* Header */}
+      <div className="flex items-center gap-3 p-6 pb-4">
+        <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+        <h2 className="text-lg font-mono font-bold text-slate-100 uppercase tracking-wider">
+          Kanban Swimlanes
+        </h2>
+      </div>
+
+      {/* Headers des colonnes */}
+      <div className="grid grid-cols-5 gap-4 px-6 pb-4">
+        <div className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
+          Tags
+        </div>
+        {statuses.map(status => (
+          <div key={status.id} className="text-center">
+            <div className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
+              {status.title}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Swimlanes */}
+      <div className="flex-1 overflow-y-auto px-6">
+        <div className="space-y-4">
+          {Object.entries(tasksByTag)
+            .sort(([a], [b]) => {
+              // Mettre "Sans tag" à la fin
+              if (a === 'Sans tag') return 1;
+              if (b === 'Sans tag') return -1;
+              return a.localeCompare(b);
+            })
+            .map(([tagName, tagTasks]) => (
+            <div key={tagName} className="border border-slate-700/50 rounded-lg bg-slate-900/30">
+              {/* Header de la swimlane */}
+              <div className="grid grid-cols-5 gap-4 p-4 border-b border-slate-700/50">
+                <div className="flex items-center gap-2">
+                  <div 
+                    className="w-3 h-3 rounded-full"
+                    style={{ backgroundColor: getTagColor(tagName) }}
+                  />
+                  <span className="text-sm font-mono font-medium text-slate-200">
+                    {tagName}
+                  </span>
+                  <span className="text-xs text-slate-400 bg-slate-700/50 px-2 py-1 rounded-full">
+                    {tagTasks.length}
+                  </span>
+                </div>
+                
+                {/* Compteurs par statut */}
+                {statuses.map(status => {
+                  const count = tagTasks.filter(task => task.status === status.id).length;
+                  return (
+                    <div key={status.id} className="text-center">
+                      <span className="text-xs text-slate-400 bg-slate-700/50 px-2 py-1 rounded-full">
+                        {count}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Contenu de la swimlane */}
+              <div className="grid grid-cols-5 gap-4 p-4">
+                <div></div> {/* Colonne vide pour le nom du tag */}
+                
+                {statuses.map(status => {
+                  const statusTasks = tagTasks.filter(task => task.status === status.id);
+                  return (
+                    <div key={status.id} className="space-y-2 min-h-[100px]">
+                      {statusTasks.map(task => (
+                        <TaskCard
+                          key={task.id}
+                          task={task}
+                          onDelete={onDeleteTask}
+                          onEdit={onEditTask}
+                          onUpdateTitle={onUpdateTitle}
+                          compactView={compactView}
+                        />
+                      ))}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}