From 2f18c08b55139f64966e73ac441ef0adf060501d Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Mon, 15 Sep 2025 10:33:49 +0200
Subject: [PATCH] feat: reintroduce ColumnVisibilityToggle in KanbanFilters -
 Moved `ColumnVisibilityToggle` from `Board` and `SwimlanesBase` to
 `KanbanFilters` for better accessibility. - Updated `KanbanFilters` to manage
 column visibility, enhancing user control over displayed statuses. - Cleaned
 up unused imports and adjusted layout for improved UI consistency.

---
 components/kanban/Board.tsx         |  9 ---------
 components/kanban/KanbanFilters.tsx | 13 +++++++++++++
 components/kanban/SwimlanesBase.tsx | 11 +----------
 components/kanban/TaskCard.tsx      | 15 ++++++++++++---
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/components/kanban/Board.tsx b/components/kanban/Board.tsx
index d759ac2..a366a89 100644
--- a/components/kanban/Board.tsx
+++ b/components/kanban/Board.tsx
@@ -7,7 +7,6 @@ import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useMemo, useState } from 'react';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
-import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
 import { getAllStatuses } from '@/lib/status-config';
 import {
   DndContext,
@@ -129,14 +128,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
           )}
         </div>
 
-        {/* Toggle de visibilité des colonnes */}
-        <div className="px-6 pb-4">
-          <ColumnVisibilityToggle
-            hiddenStatuses={hiddenStatuses}
-            onToggleStatus={toggleStatusVisibility}
-            tasks={tasks}
-          />
-        </div>
 
         {/* Board tech dark */}
         <div className="flex-1 flex gap-6 overflow-x-auto p-6">
diff --git a/components/kanban/KanbanFilters.tsx b/components/kanban/KanbanFilters.tsx
index 1d86c70..4d56b9e 100644
--- a/components/kanban/KanbanFilters.tsx
+++ b/components/kanban/KanbanFilters.tsx
@@ -8,6 +8,8 @@ import { Input } from '@/components/ui/Input';
 import { useTasksContext } from '@/contexts/TasksContext';
 import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
 import { SORT_OPTIONS } from '@/lib/sort-config';
+import { useColumnVisibility } from '@/hooks/useColumnVisibility';
+import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
 
 export interface KanbanFilters {
   search?: string;
@@ -28,6 +30,7 @@ interface KanbanFiltersProps {
 
 export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
   const { tags: availableTags, regularTasks } = useTasksContext();
+  const { hiddenStatuses, toggleStatusVisibility } = useColumnVisibility();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isSortExpanded, setIsSortExpanded] = useState(false);
   const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);
@@ -385,6 +388,16 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
               )}
             </div>
 
+            {/* Visibilité des colonnes */}
+            <div className="col-span-full border-t border-slate-700/50 pt-6 mt-4">
+              <ColumnVisibilityToggle
+                hiddenStatuses={hiddenStatuses}
+                onToggleStatus={toggleStatusVisibility}
+                tasks={regularTasks}
+                className="text-xs"
+              />
+            </div>
+
             {/* Résumé des filtres actifs */}
             {activeFiltersCount > 0 && (
               <div className="bg-slate-800/30 rounded-lg p-3 border border-slate-700/50">
diff --git a/components/kanban/SwimlanesBase.tsx b/components/kanban/SwimlanesBase.tsx
index dd5ebe3..3304cb0 100644
--- a/components/kanban/SwimlanesBase.tsx
+++ b/components/kanban/SwimlanesBase.tsx
@@ -4,7 +4,6 @@ import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
 import { useState } from 'react';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
-import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
 import { getAllStatuses } from '@/lib/status-config';
 import {
   DndContext,
@@ -158,18 +157,10 @@ export function SwimlanesBase({
           </h2>
         </div>
 
-        {/* Headers des colonnes avec boutons toggle */}
-        <div className="flex items-center justify-between px-6 pb-4">
-          <ColumnVisibilityToggle
-            hiddenStatuses={hiddenStatuses}
-            onToggleStatus={toggleStatusVisibility}
-            tasks={tasks}
-          />
-        </div>
 
         {/* Headers des colonnes visibles */}
         <div 
-          className={`grid gap-4 px-6 pb-4 ml-8`}
+          className={`grid gap-4 px-6 py-4 ml-8`}
           style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
         >
           {visibleStatuses.map(status => {
diff --git a/components/kanban/TaskCard.tsx b/components/kanban/TaskCard.tsx
index e724363..614d3a5 100644
--- a/components/kanban/TaskCard.tsx
+++ b/components/kanban/TaskCard.tsx
@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/Badge';
 import { TagDisplay } from '@/components/ui/TagDisplay';
 import { useTasksContext } from '@/contexts/TasksContext';
 import { useDraggable } from '@dnd-kit/core';
-import { getPriorityConfig } from '@/lib/status-config';
+import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
 
 interface TaskCardProps {
   task: Task;
@@ -167,7 +167,10 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
             )}
             
             {/* Indicateur de priorité compact */}
-            <div className={`w-1.5 h-1.5 rounded-full bg-${getPriorityConfig(task.priority).color}-400`} />
+            <div 
+              className="w-1.5 h-1.5 rounded-full" 
+              style={{ backgroundColor: getPriorityColorHex(getPriorityConfig(task.priority).color) }}
+            />
           </div>
         </div>
       </Card>
@@ -248,7 +251,13 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
           )}
           
           {/* Indicateur de priorité tech */}
-          <div className={`w-2 h-2 rounded-full animate-pulse bg-${getPriorityConfig(task.priority).color}-400 shadow-${getPriorityConfig(task.priority).color}-400/50 shadow-sm`} />
+          <div 
+            className="w-2 h-2 rounded-full animate-pulse shadow-sm"
+            style={{ 
+              backgroundColor: getPriorityColorHex(getPriorityConfig(task.priority).color),
+              boxShadow: `0 0 4px ${getPriorityColorHex(getPriorityConfig(task.priority).color)}50`
+            }}
+          />
         </div>
       </div>