feat: enhance Kanban components with new UI elements

- Added `ColumnHeader`, `EmptyState`, and `DropZone` components to improve the Kanban UI structure and user experience.
- Refactored `KanbanColumn` to utilize the new components, enhancing readability and maintainability.
- Updated `Card` component to support flexible props for shadow, border, and background, allowing for better customization across the application.
- Adjusted `SwimlanesBase` to incorporate the new `ColumnHeader` for consistent column representation.

src/components/kanban/SwimlanesBase.tsx

@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { useUserPreferences } from '@/contexts/UserPreferencesContext';
 import { useDragAndDrop } from '@/hooks/useDragAndDrop';
 import { getAllStatuses, getTechStyle } from '@/lib/status-config';
+import { Card, CardHeader, ColumnHeader, DropZone } from '@/components/ui';
 import {
   DndContext,
   DragEndEvent,
@@ -49,7 +50,7 @@ function DroppableColumn({
   });
 
   return (
-    <div ref={setNodeRef} className="min-h-[100px] relative group/column">
+    <DropZone ref={setNodeRef} className="min-h-[100px] relative group/column">
       <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
         <div className="space-y-3">
           {tasks.map(task => (
@@ -90,7 +91,7 @@ function DroppableColumn({
           )}
         </>
       )}
-    </div>
+    </DropZone>
   );
 }
 
@@ -197,11 +198,18 @@ export function SwimlanesBase({
           {statusesToShow.map(status => {
             const statusConfig = allStatuses.find(s => s.key === status);
             const techStyle = statusConfig ? getTechStyle(statusConfig.color) : null;
+            const tasksInStatus = tasks.filter(task => task.status === status);
+            
             return (
               <div key={status} className="text-center">
-                <h3 className={`text-sm font-mono font-bold uppercase tracking-wider ${techStyle?.accent || 'text-[var(--foreground)]'}`}>
-                  {statusConfig?.icon} {statusConfig?.label}
-                </h3>
+                <ColumnHeader
+                  title={statusConfig?.label || status}
+                  icon={statusConfig?.icon}
+                  count={tasksInStatus.length}
+                  color={techStyle?.accent.replace('text-', '')}
+                  accentColor={techStyle?.accent}
+                  className="justify-center gap-4"
+                />
               </div>
             );
           })}
@@ -214,12 +222,12 @@ export function SwimlanesBase({
               const isCollapsed = collapsedSwimlanes.has(swimlane.key);
               
               return (
-                <div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card-column)]">
+                <Card key={swimlane.key} background="column" className="overflow-hidden">
                   {/* Header de la swimlane */}
-                  <div className="flex items-center p-2 border-b border-[var(--border)]/50">
+                  <CardHeader padding="sm" separator={false}>
                     <button
                       onClick={() => toggleSwimlane(swimlane.key)}
-                      className="flex items-center gap-2 hover:bg-[var(--card-hover)] rounded p-1 -m-1 transition-colors"
+                      className="flex items-center gap-2 hover:bg-[var(--card-hover)] rounded p-1 -m-1 transition-colors w-full"
                     >
                       <svg 
                         className={`w-4 h-4 text-[var(--muted-foreground)] transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
@@ -240,7 +248,7 @@ export function SwimlanesBase({
                         {swimlane.label} ({swimlane.tasks.length})
                       </span>
                     </button>
-                  </div>
+                  </CardHeader>
 
                   {/* Contenu de la swimlane */}
                   {!isCollapsed && (
@@ -272,7 +280,7 @@ export function SwimlanesBase({
                       })}
                     </div>
                   )}
-                </div>
+                </Card>
               );
             })}
           </div>