From 470f3bfafdadee4e84065563f747426f2d506b9f Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 16 Sep 2025 08:44:14 +0200
Subject: [PATCH] style: update SwimlanesBase and TaskCard for improved layout
 and interaction - Changed the class names in SwimlanesBase to enhance hover
 effects and spacing. - Adjusted QuickAddTask visibility and styling for
 better user experience. - Increased font size and opacity in TaskCard for
 improved readability. - Minor spacing adjustments in SwimlanesBase to
 maintain visual consistency.

---
 components/kanban/SwimlanesBase.tsx | 46 ++++++++++++++++-------------
 components/kanban/TaskCard.tsx      |  4 +--
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/components/kanban/SwimlanesBase.tsx b/components/kanban/SwimlanesBase.tsx
index d0fba48..5193034 100644
--- a/components/kanban/SwimlanesBase.tsx
+++ b/components/kanban/SwimlanesBase.tsx
@@ -55,9 +55,9 @@ function DroppableColumn({
   });
 
   return (
-    <div ref={setNodeRef} className="min-h-[100px] space-y-2">
+    <div ref={setNodeRef} className="min-h-[100px] relative group/column">
       <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
-        <div className="space-y-1">
+        <div className="space-y-3">
           {tasks.map(task => (
             <TaskCard
               key={task.id}
@@ -71,28 +71,32 @@ function DroppableColumn({
         </div>
       </SortableContext>
       
-      {/* QuickAdd pour cette colonne */}
+      {/* QuickAdd pour cette colonne - hors du flux, apparaît au hover */}
       {onCreateTask && (
-        <div className="mt-2">
+        <>
           {showQuickAdd ? (
-            <QuickAddTask
-              status={status}
-              onSubmit={onCreateTask}
-              onCancel={onToggleQuickAdd || (() => {})}
-              swimlaneContext={swimlaneContext}
-            />
+            <div className="mt-2">
+              <QuickAddTask
+                status={status}
+                onSubmit={onCreateTask}
+                onCancel={onToggleQuickAdd || (() => {})}
+                swimlaneContext={swimlaneContext}
+              />
+            </div>
           ) : (
-            <button
-              onClick={onToggleQuickAdd}
-              className="w-full p-2 flex justify-center transition-colors"
-              title="Ajouter une tâche"
-            >
-              <div className="w-5 h-5 rounded-full bg-[var(--card)] hover:bg-[var(--card-hover)] flex items-center justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all text-sm">
-                +
-              </div>
-            </button>
+            <div className="h-0 flex justify-center opacity-0 group-hover/column:opacity-100 transition-opacity duration-200 pointer-events-none group-hover/column:pointer-events-auto">
+              <button
+                onClick={onToggleQuickAdd}
+                className="py-1 px-2 transition-colors"
+                title="Ajouter une tâche"
+              >
+                <div className="w-5 h-5 rounded-full bg-[var(--card)] hover:bg-[var(--card-hover)] flex items-center justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all text-sm shadow-lg border border-[var(--border)]/30">
+                  +
+                </div>
+              </button>
+            </div>
           )}
-        </div>
+        </>
       )}
     </div>
   );
@@ -230,7 +234,7 @@ export function SwimlanesBase({
 
         {/* Swimlanes */}
         <div className="flex-1 overflow-y-auto px-6">
-          <div className="space-y-4">
+          <div className="space-y-3 pb-2">
             {swimlanes.map(swimlane => {
               const isCollapsed = collapsedSwimlanes.has(swimlane.key);
               
diff --git a/components/kanban/TaskCard.tsx b/components/kanban/TaskCard.tsx
index 8a58318..8b3843b 100644
--- a/components/kanban/TaskCard.tsx
+++ b/components/kanban/TaskCard.tsx
@@ -124,7 +124,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
               {displayEmojis.slice(0, 1).map((emoji, index) => (
                 <span 
                   key={index} 
-                  className="text-sm opacity-80 font-emoji"
+                  className="text-base opacity-90 font-emoji"
                   style={{ 
                     fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
                     fontVariantEmoji: 'normal'
@@ -148,7 +148,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
             />
           ) : (
             <h4 
-              className="font-mono text-xs font-medium text-[var(--foreground)] leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-[var(--primary)] transition-colors"
+              className="font-mono text-sm font-medium text-[var(--foreground)] leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-[var(--primary)] transition-colors"
               onClick={handleTitleClick}
               title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
             >