feat(task-management): enhance TaskGroupHeader and TaskListV2 for improved task display and reordering

- Updated TaskGroupHeader to display task count alongside group name for better clarity.
- Refactored task reordering logic in TaskListV2 to streamline drag-and-drop functionality across groups.
- Added TypeScript definitions for Heroicons to improve type safety and component usage.
- Adjusted styling in TaskGroupHeader for a more consistent visual presentation.

worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx

@@ -56,7 +56,6 @@ import { useParams } from 'react-router-dom';
 import ImprovedTaskFilters from '@/components/task-management/improved-task-filters';
 import OptimizedBulkActionBar from '@/components/task-management/optimized-bulk-action-bar';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
-import { Bars3Icon } from '@heroicons/react/24/outline';
 import { HolderOutlined } from '@ant-design/icons';
 import { COLUMN_KEYS } from '@/features/tasks/tasks.slice';
 
@@ -302,22 +301,13 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
         targetGroupId: targetGroup.id,
       }));
 
-      // If we need to insert at a specific position (not at the end)
-      if (insertIndex < targetGroup.taskIds.length) {
-        const newTaskIds = [...targetGroup.taskIds];
-        // Remove the task if it was already added at the end
-        const taskIndex = newTaskIds.indexOf(activeId as string);
-        if (taskIndex > -1) {
-          newTaskIds.splice(taskIndex, 1);
-        }
-        // Insert at the correct position
-        newTaskIds.splice(insertIndex, 0, activeId as string);
-        
-        dispatch(reorderTasksInGroup({
-          taskIds: newTaskIds,
-          groupId: targetGroup.id,
-        }));
-      }
+      // Reorder task within target group at drop position
+      dispatch(reorderTasksInGroup({
+        sourceTaskId: activeId as string,
+        destinationTaskId: over.id as string,
+        sourceGroupId: activeGroup.id,
+        destinationGroupId: targetGroup.id,
+      }));
     } else {
       // Reordering within the same group
       console.log('Reordering task within same group:', {
@@ -328,15 +318,12 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
       });
 
       if (activeIndex !== insertIndex) {
-        const newTaskIds = [...activeGroup.taskIds];
-        // Remove task from old position
-        newTaskIds.splice(activeIndex, 1);
-        // Insert at new position
-        newTaskIds.splice(insertIndex, 0, activeId as string);
-        
+        // Reorder task within same group at drop position
         dispatch(reorderTasksInGroup({
-          taskIds: newTaskIds,
-          groupId: activeGroup.id,
+          sourceTaskId: activeId as string,
+          destinationTaskId: over.id as string,
+          sourceGroupId: activeGroup.id,
+          destinationGroupId: activeGroup.id,
         }));
       }
     }
@@ -474,7 +461,7 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
     const isGroupEmpty = group.count === 0;
     
     return (
-      <div>
+      <div className={groupIndex > 0 ? 'mt-2' : ''}>
         <TaskGroupHeader
           group={{
             id: group.id,