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/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>
   );
 }