From fa9e765e372779b45d337a8c7d6bc1a37969f219 Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Mon, 7 Jul 2025 17:20:34 +0530
Subject: [PATCH] refactor(KanbanGroup, TaskCard): enhance drag-and-drop
 indicators and task rendering

- Added visual drop indicators before and after task cards in the KanbanGroup component to improve user experience during drag-and-drop operations.
- Removed the isDropIndicator prop from TaskCard as the drop indicator logic is now handled within the KanbanGroup, simplifying the TaskCard component.
- Updated drag-and-drop event handling in TaskCard to better manage task positioning during drag operations, enhancing overall functionality.
---
 .../KanbanGroup.tsx                           | 32 +++++++++++++------
 .../EnhancedKanbanBoardNativeDnD/TaskCard.tsx | 27 ++++++----------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
index d5e814ba..0e3e8a6d 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
@@ -517,17 +517,29 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     )}
 
                     {group.tasks.map((task, idx) => (
-                        <TaskCard
-                            key={task.id}
-                            task={task}
-                            onTaskDragStart={onTaskDragStart}
-                            onTaskDragOver={onTaskDragOver}
-                            onTaskDrop={onTaskDrop}
-                            groupId={group.id}
-                            isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
-                            idx={idx}
-                        />
+                        <React.Fragment key={task.id}>
+                            {/* Drop indicator before this card */}
+                            {hoveredGroupId === group.id && hoveredTaskIdx === idx && (
+                                <div className="drop-preview-indicator" style={{height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '4px 0'}}>
+                                    <div className="drop-line" style={{width: '90%', height: 4, background: '#1976d2', borderRadius: 2, boxShadow: '0 0 4px #1976d2'}} />
+                                </div>
+                            )}
+                            <TaskCard
+                                task={task}
+                                onTaskDragStart={onTaskDragStart}
+                                onTaskDragOver={onTaskDragOver}
+                                onTaskDrop={onTaskDrop}
+                                groupId={group.id}
+                                idx={idx}
+                            />
+                        </React.Fragment>
                     ))}
+                    {/* Drop indicator at the end of the group */}
+                    {hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
+                        <div className="drop-preview-indicator" style={{height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '4px 0'}}>
+                            <div className="drop-line" style={{width: '90%', height: 4, background: '#1976d2', borderRadius: 2, boxShadow: '0 0 4px #1976d2'}} />
+                        </div>
+                    )}
 
                     {/* Create card at bottom */}
                     {showNewCardBottom && (
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index e6b855fb..0a503ba2 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -28,7 +28,6 @@ interface TaskCardProps {
     onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
     onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
     groupId: string;
-    isDropIndicator: boolean;
     idx: number;
 }
 
@@ -46,7 +45,6 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
     onTaskDragOver,
     onTaskDrop,
     groupId,
-    isDropIndicator,
     idx
 }) => {
     const { socket } = useSocket();
@@ -198,29 +196,22 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         while (week.length < 7) week.push(null);
         weeks.push(week);
     }
+    const [isDown, setIsDown] = useState(false);
 
     return (
         <>
-            {isDropIndicator && (
-                <div
-                    
-                    onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
-                    onDragOver={e => onTaskDragOver(e, groupId, idx)}
-                    onDrop={e => onTaskDrop(e, groupId, idx)}
-                >
-                    <div className="w-full h-full bg-red-500"style={{
-                        height: 80,
-                        background: themeMode === 'dark' ? '#2a2a2a' : '#E2EAF4',
-                        borderRadius: 6,
-                        border: `5px`
-                    }}></div>
-                </div>
-            )}
             <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
                 <div
                     draggable
                     onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
-                    onDragOver={e => onTaskDragOver(e, groupId, idx)}
+                    onDragOver={e => {
+                        e.preventDefault();
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        const offsetY = e.clientY - rect.top;
+                        const isDown = offsetY > rect.height / 2;
+                        setIsDown(isDown);
+                        onTaskDragOver(e, groupId, isDown ? idx + 1 : idx);
+                    }}
                     onDrop={e => onTaskDrop(e, groupId, idx)}
 
                     onClick={e => handleCardClick(e, task.id!)}