feat: add clsx and tailwind-merge dependencies, enhance Kanban components

- Added `clsx` and `tailwind-merge` to `package.json` and `package-lock.json` for improved class management and utility merging.
- Updated `Column` and `TaskCard` components to utilize new UI components (`Card`, `Badge`) for a more cohesive design.
- Refactored styles in `Header` and Kanban components to align with the new design system.
- Marked several tasks as completed in `TODO.md` reflecting progress on UI enhancements.

components/kanban/Column.tsx

@@ -1,5 +1,7 @@
 import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
 
 interface KanbanColumnProps {
   id: TaskStatus;
@@ -47,43 +49,45 @@ export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
     cancelled: '✕'
   };
 
+  const badgeVariant = color === 'green' ? 'success' : color === 'blue' ? 'primary' : color === 'red' ? 'danger' : 'default';
+
   return (
     <div className="flex-shrink-0 w-80 h-full">
-      {/* Header tech avec glow */}
-      <div className={`bg-slate-900 ${style.border} border rounded-t-lg p-4 ${style.glow} shadow-lg`}>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className={`w-2 h-2 rounded-full ${style.accent.replace('text-', 'bg-')} animate-pulse`}></div>
-            <h3 className={`font-mono text-sm font-bold ${style.accent} uppercase tracking-wider`}>
-              {title}
-            </h3>
-          </div>
-          <span className={`${style.badge} px-3 py-1 rounded-full text-xs font-mono font-bold`}>
-            {String(tasks.length).padStart(2, '0')}
-          </span>
-        </div>
-      </div>
-
-      {/* Zone de contenu tech */}
-      <div className={`bg-slate-900/80 backdrop-blur-sm ${style.border} border-t-0 border rounded-b-lg p-4 h-[calc(100vh-220px)] overflow-y-auto ${style.glow} shadow-lg`}>
-        <div className="space-y-3">
-          {tasks.length === 0 ? (
-            <div className="text-center py-20">
-              <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
-                <span className={`text-2xl ${style.accent} opacity-50`}>{techIcons[id]}</span>
-              </div>
-              <p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
-              <div className="mt-2 flex justify-center">
-                <div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
-              </div>
+      <Card variant="elevated" className="h-full flex flex-col">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className={`w-2 h-2 rounded-full ${style.accent.replace('text-', 'bg-')} animate-pulse`}></div>
+              <h3 className={`font-mono text-sm font-bold ${style.accent} uppercase tracking-wider`}>
+                {title}
+              </h3>
             </div>
-          ) : (
-            tasks.map((task) => (
-              <TaskCard key={task.id} task={task} />
-            ))
-          )}
-        </div>
-      </div>
+            <Badge variant={badgeVariant} size="sm">
+              {String(tasks.length).padStart(2, '0')}
+            </Badge>
+          </div>
+        </CardHeader>
+
+        <CardContent className="flex-1 p-4 h-[calc(100vh-220px)] overflow-y-auto">
+          <div className="space-y-3">
+            {tasks.length === 0 ? (
+              <div className="text-center py-20">
+                <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
+                  <span className={`text-2xl ${style.accent} opacity-50`}>{techIcons[id]}</span>
+                </div>
+                <p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
+                <div className="mt-2 flex justify-center">
+                  <div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
+                </div>
+              </div>
+            ) : (
+              tasks.map((task) => (
+                <TaskCard key={task.id} task={task} />
+              ))
+            )}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }

components/kanban/TaskCard.tsx

@@ -1,6 +1,8 @@
 import { Task } from '@/lib/types';
 import { formatDistanceToNow } from 'date-fns';
 import { fr } from 'date-fns/locale';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
 
 interface TaskCardProps {
   task: Task;
@@ -12,22 +14,9 @@ export function TaskCard({ task }: TaskCardProps) {
   const emojis = task.title.match(emojiRegex) || [];
   const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim();
 
-  // Couleur de priorité
-  const priorityColors = {
-    low: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
-    medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
-    high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
-    urgent: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-  };
-
-  // Couleur de source
-  const sourceColors = {
-    reminders: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
-    jira: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
-  };
 
   return (
-    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-lg p-3 hover:bg-slate-800/80 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group">
+    <Card className="p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group">
       {/* Header tech avec titre et status */}
       <div className="flex items-start gap-2 mb-2">
         {emojis.length > 0 && (
@@ -59,21 +48,23 @@ export function TaskCard({ task }: TaskCardProps) {
         </p>
       )}
 
-      {/* Tags tech style */}
+      {/* Tags avec composant Badge */}
       {task.tags && task.tags.length > 0 && (
         <div className="flex flex-wrap gap-1 mb-3">
           {task.tags.slice(0, 3).map((tag, index) => (
-            <span 
+            <Badge 
               key={index}
-              className="px-2 py-1 rounded text-xs font-mono font-bold bg-cyan-950/50 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-950/80 transition-colors"
+              variant="primary"
+              size="sm"
+              className="hover:bg-cyan-950/80 transition-colors"
             >
               {tag}
-            </span>
+            </Badge>
           ))}
           {task.tags.length > 3 && (
-            <span className="px-2 py-1 rounded text-xs font-mono text-slate-500 border border-slate-600">
+            <Badge variant="outline" size="sm">
               +{task.tags.length - 3}
-            </span>
+            </Badge>
           )}
         </div>
       )}
@@ -98,6 +89,6 @@ export function TaskCard({ task }: TaskCardProps) {
           )}
         </div>
       </div>
-    </div>
+    </Card>
   );
 }