Merge pull request #235 from Worklenz/fix/task-drag-and-drop-improvement

feat(task-management): enhance task management UI with subtask functi…

worklenz-frontend/public/locales/alb/task-list-table.json

@@ -36,7 +36,7 @@
   "selectText": "Zgjidh",
   "labelsSelectorInputTip": "Shtyp Enter për të krijuar!",
 
-  "addTaskText": "+ Shto Detyrë",
+  "addTaskText": "Shto Detyrë",
   "addSubTaskText": "+ Shto Nën-Detyrë",
   "addTaskInputPlaceholder": "Shkruaj detyrën dhe shtyp Enter",
 

worklenz-frontend/public/locales/de/task-list-table.json

@@ -36,7 +36,7 @@
   "selectText": "Auswählen",
   "labelsSelectorInputTip": "Enter drücken zum Erstellen!",
 
-  "addTaskText": "+ Aufgabe hinzufügen",
+  "addTaskText": "Aufgabe hinzufügen",
   "addSubTaskText": "+ Unteraufgabe hinzufügen",
   "addTaskInputPlaceholder": "Aufgabe eingeben und Enter drücken",
 

worklenz-frontend/public/locales/en/task-drawer/task-drawer-info-tab.json

@@ -24,7 +24,7 @@
   },
   "subTasks": {
     "title": "Sub Tasks",
-    "add-sub-task": "+ Add Sub Task",
+    "add-sub-task": "Add Sub Task",
     "refresh-sub-tasks": "Refresh Sub Tasks"
   }
 }

worklenz-frontend/public/locales/en/task-drawer/task-drawer.json

@@ -43,7 +43,7 @@
     },
     "subTasks": {
       "title": "Sub Tasks",
-      "addSubTask": "+ Add Sub Task",
+      "addSubTask": "Add Sub Task",
       "addSubTaskInputPlaceholder": "Type your task and hit enter",
       "refreshSubTasks": "Refresh Sub Tasks",
       "edit": "Edit",

worklenz-frontend/public/locales/en/task-list-table.json

@@ -36,8 +36,8 @@
   "selectText": "Select",
   "labelsSelectorInputTip": "Hit enter to create!",
 
-  "addTaskText": "+ Add Task",
+  "addTaskText": "Add Task",
-  "addSubTaskText": "+ Add Sub Task",
+  "addSubTaskText": "Add Sub Task",
   "addTaskInputPlaceholder": "Type your task and hit enter",
 
   "openButton": "Open",

worklenz-frontend/public/locales/es/task-list-table.json

@@ -36,8 +36,8 @@
   "selectText": "Seleccionar",
   "labelsSelectorInputTip": "¡Presiona enter para crear!",
 
-  "addTaskText": "+ Agregar tarea",
+  "addTaskText": "Agregar tarea",
-  "addSubTaskText": "+ Agregar subtarea",
+  "addSubTaskText": "Agregar subtarea",
   "addTaskInputPlaceholder": "Escribe tu tarea y presiona enter",
 
   "openButton": "Abrir",

worklenz-frontend/public/locales/pt/task-list-table.json

@@ -36,7 +36,7 @@
   "selectText": "Selecionar",
   "labelsSelectorInputTip": "Pressione enter para criar!",
 
-  "addTaskText": "+ Adicionar Tarefa",
+  "addTaskText": "Adicionar Tarefa",
   "addSubTaskText": "+ Adicionar Subtarefa",
   "addTaskInputPlaceholder": "Digite sua tarefa e pressione enter",
 

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

@@ -0,0 +1,139 @@
+import React from 'react';
+
+interface SubtaskLoadingSkeletonProps {
+  visibleColumns: Array<{
+    id: string;
+    width: string;
+    isSticky?: boolean;
+  }>;
+}
+
+const SubtaskLoadingSkeleton: React.FC<SubtaskLoadingSkeletonProps> = ({ visibleColumns }) => {
+  const renderColumn = (columnId: string, width: string) => {
+    const baseStyle = { width };
+
+    switch (columnId) {
+      case 'dragHandle':
+        return <div style={baseStyle} />;
+      case 'checkbox':
+        return <div style={baseStyle} />;
+      case 'taskKey':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-12 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'title':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            {/* Subtask indentation */}
+            <div className="w-8" />
+            <div className="w-8" />
+            <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'status':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'assignees':
+        return (
+          <div style={baseStyle} className="flex items-center gap-1">
+            <div className="h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" />
+            <div className="h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" />
+          </div>
+        );
+      case 'priority':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-6 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'dueDate':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'progress':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-2 w-16 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" />
+          </div>
+        );
+      case 'labels':
+        return (
+          <div style={baseStyle} className="flex items-center gap-1">
+            <div className="h-5 w-12 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+            <div className="h-5 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'phase':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'timeTracking':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-12 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'estimation':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'startDate':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'completedDate':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'createdDate':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'lastUpdated':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      case 'reporter':
+        return (
+          <div style={baseStyle} className="flex items-center">
+            <div className="h-4 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
+      default:
+        return <div style={baseStyle} />;
+    }
+  };
+
+  return (
+    <div className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
+      <div className="flex items-center min-w-max px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+        {visibleColumns.map((column) => (
+          <div key={column.id}>
+            {renderColumn(column.id, column.width)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SubtaskLoadingSkeleton; 

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

@@ -47,7 +47,7 @@ import {
   selectRange,
   clearSelection,
 } from '@/features/task-management/selection.slice';
-import TaskRow from './TaskRow';
+import TaskRowWithSubtasks from './TaskRowWithSubtasks';
 import TaskGroupHeader from './TaskGroupHeader';
 import { Task, TaskGroup } from '@/types/task-management.types';
 import { RootState } from '@/app/store';
@@ -64,7 +64,7 @@ const BASE_COLUMNS = [
   { id: 'dragHandle', label: '', width: '32px', isSticky: true, key: 'dragHandle' },
   { id: 'checkbox', label: '', width: '40px', isSticky: true, key: 'checkbox' },
   { id: 'taskKey', label: 'Key', width: '100px', key: COLUMN_KEYS.KEY },
-  { id: 'title', label: 'Title', width: '300px', isSticky: true, key: COLUMN_KEYS.NAME },
+  { id: 'title', label: 'Title', width: '470px', isSticky: true, key: COLUMN_KEYS.NAME },
   { id: 'status', label: 'Status', width: '120px', key: COLUMN_KEYS.STATUS },
   { id: 'assignees', label: 'Assignees', width: '150px', key: COLUMN_KEYS.ASSIGNEES },
   { id: 'priority', label: 'Priority', width: '120px', key: COLUMN_KEYS.PRIORITY },
@@ -91,11 +91,7 @@ type ColumnStyle = {
   flexShrink?: number;
 };
 
-interface TaskListV2Props {
+const TaskListV2: React.FC = () => {
-  projectId: string;
-}
-
-const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
   const dispatch = useAppDispatch();
   const { projectId: urlProjectId } = useParams();
 
@@ -159,34 +155,38 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
   }, [dispatch, urlProjectId]);
 
   // Handlers
-  const handleTaskSelect = useCallback((taskId: string, event: React.MouseEvent) => {
+  const handleTaskSelect = useCallback(
+    (taskId: string, event: React.MouseEvent) => {
       if (event.ctrlKey || event.metaKey) {
         dispatch(toggleTaskSelection(taskId));
       } else if (event.shiftKey && lastSelectedTaskId) {
         const taskIds = allTasks.map(t => t.id); // Use allTasks here
         const startIdx = taskIds.indexOf(lastSelectedTaskId);
         const endIdx = taskIds.indexOf(taskId);
-      const rangeIds = taskIds.slice(
+        const rangeIds = taskIds.slice(Math.min(startIdx, endIdx), Math.max(startIdx, endIdx) + 1);
-        Math.min(startIdx, endIdx),
-        Math.max(startIdx, endIdx) + 1
-      );
         dispatch(selectRange(rangeIds));
       } else {
         dispatch(clearSelection());
         dispatch(selectTask(taskId));
       }
-  }, [dispatch, lastSelectedTaskId, allTasks]);
+    },
+    [dispatch, lastSelectedTaskId, allTasks]
+  );
 
-  const handleGroupCollapse = useCallback((groupId: string) => {
+  const handleGroupCollapse = useCallback(
+    (groupId: string) => {
       dispatch(toggleGroupCollapsed(groupId)); // Dispatch Redux action to toggle collapsed state
-  }, [dispatch]);
+    },
+    [dispatch]
+  );
 
   // Drag and drop handlers
   const handleDragStart = useCallback((event: DragStartEvent) => {
     setActiveId(event.active.id as string);
   }, []);
 
-  const handleDragOver = useCallback((event: DragOverEvent) => {
+  const handleDragOver = useCallback(
+    (event: DragOverEvent) => {
       const { active, over } = event;
 
       if (!over) return;
@@ -220,9 +220,12 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
           toGroup: targetGroup.id,
         });
       }
-  }, [allTasks, groups]);
+    },
+    [allTasks, groups]
+  );
 
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
       const { active, over } = event;
       setActiveId(null);
 
@@ -295,19 +298,23 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
         });
 
         // Move task to the target group
-      dispatch(moveTaskBetweenGroups({
+        dispatch(
+          moveTaskBetweenGroups({
             taskId: activeId as string,
             sourceGroupId: activeGroup.id,
             targetGroupId: targetGroup.id,
-      }));
+          })
+        );
 
         // Reorder task within target group at drop position
-      dispatch(reorderTasksInGroup({
+        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:', {
@@ -319,16 +326,19 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
 
         if (activeIndex !== insertIndex) {
           // Reorder task within same group at drop position
-        dispatch(reorderTasksInGroup({
+          dispatch(
+            reorderTasksInGroup({
               sourceTaskId: activeId as string,
               destinationTaskId: over.id as string,
               sourceGroupId: activeGroup.id,
               destinationGroupId: activeGroup.id,
-        }));
+            })
+          );
         }
       }
-
+    },
-  }, [allTasks, groups]);
+    [allTasks, groups]
+  );
 
   // Bulk action handlers
   const handleClearSelection = useCallback(() => {
@@ -428,17 +438,20 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
   }, [virtuosoGroups]);
 
   // Memoize column headers to prevent unnecessary re-renders
-  const columnHeaders = useMemo(() => (
+  const columnHeaders = useMemo(
+    () => (
       <div className="flex items-center px-4 py-2" style={{ minWidth: 'max-content' }}>
-      {visibleColumns.map((column) => {
+        {visibleColumns.map(column => {
           const columnStyle: ColumnStyle = {
             width: column.width,
             flexShrink: 0, // Prevent columns from shrinking
             // Add specific styling for labels column with auto width
-          ...(column.id === 'labels' && column.width === 'auto' ? {
+            ...(column.id === 'labels' && column.width === 'auto'
+              ? {
                   minWidth: '200px', // Ensure minimum width for labels
                   flexGrow: 1, // Allow it to grow
-          } : {}),
+                }
+              : {}),
           };
 
           return (
@@ -458,10 +471,13 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
           );
         })}
       </div>
-  ), [visibleColumns]);
+    ),
+    [visibleColumns]
+  );
 
   // Render functions
-  const renderGroup = useCallback((groupIndex: number) => {
+  const renderGroup = useCallback(
+    (groupIndex: number) => {
       const group = virtuosoGroups[groupIndex];
       const isGroupEmpty = group.count === 0;
 
@@ -485,19 +501,24 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
           )}
         </div>
       );
-  }, [virtuosoGroups, collapsedGroups, handleGroupCollapse]);
+    },
+    [virtuosoGroups, collapsedGroups, handleGroupCollapse]
+  );
 
-  const renderTask = useCallback((taskIndex: number) => {
+  const renderTask = useCallback(
+    (taskIndex: number) => {
       const task = virtuosoItems[taskIndex]; // Get task from the flattened virtuosoItems
-    if (!task) return null; // Should not happen if logic is correct
+      if (!task || !urlProjectId) return null; // Should not happen if logic is correct
       return (
-      <TaskRow
+        <TaskRowWithSubtasks
           taskId={task.id}
-        projectId={projectId}
+          projectId={urlProjectId}
           visibleColumns={visibleColumns}
         />
       );
-  }, [virtuosoItems, visibleColumns]);
+    },
+    [virtuosoItems, visibleColumns]
+  );
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
@@ -527,7 +548,10 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
             {/* Task List - Scrollable content */}
             <div className="flex-1">
               <SortableContext
-                items={virtuosoItems.map(task => task.id).filter((id): id is string => id !== undefined)}
+                items={virtuosoItems
+                  .filter(task => !task.parent_task_id)
+                  .map(task => task.id)
+                  .filter((id): id is string => id !== undefined)}
                 strategy={verticalListSortingStrategy}
               >
                 <GroupedVirtuoso
@@ -536,12 +560,11 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
                   groupContent={renderGroup}
                   itemContent={renderTask}
                   components={{
-                    List: React.forwardRef<HTMLDivElement, { style?: React.CSSProperties; children?: React.ReactNode }>(({ style, children }, ref) => (
+                    List: React.forwardRef<
-                      <div
+                      HTMLDivElement,
-                        ref={ref}
+                      { style?: React.CSSProperties; children?: React.ReactNode }
-                        style={style || {}}
+                    >(({ style, children }, ref) => (
-                        className="virtuoso-list-container"
+                      <div ref={ref} style={style || {}} className="virtuoso-list-container">
-                      >
                         {children}
                       </div>
                     )),
@@ -576,11 +599,11 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
         </DragOverlay>
 
         {/* Bulk Action Bar */}
-        {selectedTaskIds.length > 0 && (
+        {selectedTaskIds.length > 0 && urlProjectId && (
           <OptimizedBulkActionBar
             selectedTaskIds={selectedTaskIds}
             totalSelected={selectedTaskIds.length}
-            projectId={projectId}
+            projectId={urlProjectId}
             onClearSelection={handleClearSelection}
             onBulkStatusChange={handleBulkStatusChange}
             onBulkPriorityChange={handleBulkPriorityChange}

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

@@ -1,7 +1,7 @@
 import React, { memo, useMemo, useCallback, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { CheckCircleOutlined, HolderOutlined, CloseOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, HolderOutlined, CloseOutlined, DownOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons';
 import { Checkbox, DatePicker } from 'antd';
 import { dayjs, taskManagementAntdConfig } from '@/shared/antd-imports';
 import { Task } from '@/types/task-management.types';
@@ -15,8 +15,9 @@ import TaskStatusDropdown from '@/components/task-management/task-status-dropdow
 import TaskPriorityDropdown from '@/components/task-management/task-priority-dropdown';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { selectTaskById } from '@/features/task-management/task-management.slice';
+import { selectTaskById, toggleTaskExpansion, fetchSubTasks } from '@/features/task-management/task-management.slice';
 import { selectIsTaskSelected, toggleTaskSelection } from '@/features/task-management/selection.slice';
+import { setSelectedTaskId, setShowTaskDrawer } from '@/features/task-drawer/task-drawer.slice';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
 import { useTranslation } from 'react-i18next';
@@ -33,6 +34,7 @@ interface TaskRowProps {
     width: string;
     isSticky?: boolean;
   }>;
+  isSubtask?: boolean;
 }
 
 interface TaskLabelsCellProps {
@@ -89,7 +91,7 @@ const formatDate = (dateString: string): string => {
   }
 };
 
-const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumns }) => {
+const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumns, isSubtask = false }) => {
   const dispatch = useAppDispatch();
   const task = useAppSelector(state => selectTaskById(state, taskId));
   const isSelected = useAppSelector(state => selectIsTaskSelected(state, taskId));
@@ -103,13 +105,14 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
     return null; // Don't render if task is not found in store
   }
 
-  // Drag and drop functionality
+  // Drag and drop functionality - only enable for parent tasks
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: task.id,
     data: {
       type: 'task',
       task,
     },
+    disabled: isSubtask, // Disable drag and drop for subtasks
   });
 
   // Memoize style object to prevent unnecessary re-renders
@@ -189,6 +192,19 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
     dispatch(toggleTaskSelection(taskId));
   }, [dispatch, taskId]);
 
+  // Handle task expansion toggle
+  const handleToggleExpansion = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    
+    // Always try to fetch subtasks when expanding, regardless of count
+    if (!task.show_sub_tasks && (!task.sub_tasks || task.sub_tasks.length === 0)) {
+      dispatch(fetchSubTasks({ taskId: task.id, projectId }));
+    }
+    
+    // Toggle expansion state
+    dispatch(toggleTaskExpansion(task.id));
+  }, [dispatch, task.id, task.sub_tasks, task.show_sub_tasks, projectId]);
+
   // Handle date change
   const handleDateChange = useCallback(
     (date: dayjs.Dayjs | null, field: 'startDate' | 'dueDate') => {
@@ -239,12 +255,11 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
       case 'dragHandle':
         return (
           <div
-            className="cursor-grab active:cursor-grabbing flex items-center justify-center"
+            className={`flex items-center justify-center ${isSubtask ? '' : 'cursor-grab active:cursor-grabbing'}`}
             style={baseStyle}
-            {...attributes}
+            {...(isSubtask ? {} : { ...attributes, ...listeners })}
-            {...listeners}
           >
-            <HolderOutlined className="text-gray-400 hover:text-gray-600" />
+            {!isSubtask && <HolderOutlined className="text-gray-400 hover:text-gray-600" />}
           </div>
         );
 
@@ -270,10 +285,63 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
 
       case 'title':
         return (
-          <div className="flex items-center" style={baseStyle}>
+          <div className="flex items-center justify-between group" style={baseStyle}>
+            <div className="flex items-center flex-1">
+              {/* Indentation for subtasks - increased padding */}
+              {isSubtask && <div className="w-8" />}
+              
+              {/* Expand/Collapse button - only show for parent tasks */}
+              {!isSubtask && (
+                <button
+                  onClick={handleToggleExpansion}
+                  className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-2 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors ${
+                    task.sub_tasks_count && task.sub_tasks_count > 0 
+                      ? 'opacity-100' 
+                      : 'opacity-0 group-hover:opacity-100'
+                  }`}
+                >
+                  {task.sub_tasks_count && task.sub_tasks_count > 0 ? (
+                    task.show_sub_tasks ? (
+                      <DownOutlined className="text-gray-600 dark:text-gray-400" />
+                    ) : (
+                      <RightOutlined className="text-gray-600 dark:text-gray-400" />
+                    )
+                  ) : (
+                    <RightOutlined className="text-gray-600 dark:text-gray-400" />
+                  )}
+                </button>
+              )}
+              
+              {/* Additional indentation for subtasks after the expand button space */}
+              {isSubtask && <div className="w-4" />}
+              
+              <div className="flex items-center gap-2">
                 <span className="text-sm text-gray-700 dark:text-gray-300 truncate">
                   {taskDisplayName}
                 </span>
+                
+                {/* Subtask count indicator */}
+                {!isSubtask && task.sub_tasks_count && task.sub_tasks_count > 0 && (
+                  <div className="flex items-center gap-1 px-2 py-1 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+                    <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
+                      {task.sub_tasks_count}
+                    </span>
+                    <DoubleRightOutlined className="text-xs text-blue-600 dark:text-blue-400" />
+                  </div>
+                )}
+              </div>
+            </div>
+            
+            <button
+              className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 ml-2 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-none bg-transparent cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                dispatch(setSelectedTaskId(task.id));
+                dispatch(setShowTaskDrawer(true));
+              }}
+            >
+              {t('openButton')}
+            </button>
           </div>
         );
 

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

@@ -0,0 +1,208 @@
+import React, { memo, useState, useCallback } from 'react';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { selectTaskById, createSubtask, selectSubtaskLoading } from '@/features/task-management/task-management.slice';
+import TaskRow from './TaskRow';
+import SubtaskLoadingSkeleton from './SubtaskLoadingSkeleton';
+import { Task } from '@/types/task-management.types';
+import { Input, Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';
+import { useTranslation } from 'react-i18next';
+
+interface TaskRowWithSubtasksProps {
+  taskId: string;
+  projectId: string;
+  visibleColumns: Array<{
+    id: string;
+    width: string;
+    isSticky?: boolean;
+  }>;
+}
+
+interface AddSubtaskRowProps {
+  parentTaskId: string;
+  projectId: string;
+  visibleColumns: Array<{
+    id: string;
+    width: string;
+    isSticky?: boolean;
+  }>;
+  onSubtaskAdded: () => void;
+}
+
+const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({ 
+  parentTaskId, 
+  projectId, 
+  visibleColumns, 
+  onSubtaskAdded 
+}) => {
+  const [isAdding, setIsAdding] = useState(false);
+  const [subtaskName, setSubtaskName] = useState('');
+  const { socket, connected } = useSocket();
+  const { t } = useTranslation('task-list-table');
+  const dispatch = useAppDispatch();
+
+  const handleAddSubtask = useCallback(() => {
+    if (!subtaskName.trim()) return;
+
+    // Create optimistic subtask immediately for better UX
+    dispatch(createSubtask({ 
+      parentTaskId, 
+      name: subtaskName.trim(), 
+      projectId 
+    }));
+
+    // Emit socket event for server-side creation
+    if (connected && socket) {
+      socket.emit(
+        SocketEvents.QUICK_TASK.toString(),
+        JSON.stringify({
+          name: subtaskName.trim(),
+          project_id: projectId,
+          parent_task_id: parentTaskId,
+        })
+      );
+    }
+
+    setSubtaskName('');
+    setIsAdding(false);
+    onSubtaskAdded();
+  }, [subtaskName, dispatch, parentTaskId, projectId, connected, socket, onSubtaskAdded]);
+
+  const handleCancel = useCallback(() => {
+    setSubtaskName('');
+    setIsAdding(false);
+  }, []);
+
+  const renderColumn = useCallback((columnId: string, width: string) => {
+    const baseStyle = { width };
+
+    switch (columnId) {
+      case 'dragHandle':
+        return <div style={baseStyle} />;
+      case 'checkbox':
+        return <div style={baseStyle} />;
+      case 'taskKey':
+        return <div style={baseStyle} />;
+      case 'title':
+        return (
+          <div className="flex items-center h-full" style={baseStyle}>
+            <div className="flex items-center w-full h-full">
+              {/* Match subtask indentation pattern - same as TaskRow for subtasks */}
+              <div className="w-8" />
+              
+              {!isAdding ? (
+                <button
+                  onClick={() => setIsAdding(true)}
+                  className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors h-full"
+                >
+                  <PlusOutlined className="text-xs" />
+                  {t('addSubTaskText')}
+                </button>
+              ) : (
+                <Input
+                  value={subtaskName}
+                  onChange={(e) => setSubtaskName(e.target.value)}
+                  onPressEnter={handleAddSubtask}
+                  onBlur={handleCancel}
+                  placeholder="Type subtask name and press Enter to save"
+                  className="w-full h-full border-none shadow-none bg-transparent"
+                  style={{ 
+                    height: '100%',
+                    minHeight: '42px',
+                    padding: '0',
+                    fontSize: '14px'
+                  }}
+                  autoFocus
+                />
+              )}
+            </div>
+          </div>
+        );
+      default:
+        return <div style={baseStyle} />;
+    }
+  }, [isAdding, subtaskName, handleAddSubtask, handleCancel, t]);
+
+  return (
+    <div className="flex items-center min-w-max px-4 py-2 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[42px]">
+      {visibleColumns.map((column) =>
+        renderColumn(column.id, column.width)
+      )}
+    </div>
+  );
+});
+
+AddSubtaskRow.displayName = 'AddSubtaskRow';
+
+const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({ 
+  taskId, 
+  projectId, 
+  visibleColumns 
+}) => {
+  const task = useAppSelector(state => selectTaskById(state, taskId));
+  const isLoadingSubtasks = useAppSelector(state => selectSubtaskLoading(state, taskId));
+  const dispatch = useAppDispatch();
+
+  const handleSubtaskAdded = useCallback(() => {
+    // Refresh subtasks after adding a new one
+    // The socket event will handle the real-time update
+  }, []);
+
+  if (!task) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Main task row */}
+      <TaskRow
+        taskId={taskId}
+        projectId={projectId}
+        visibleColumns={visibleColumns}
+      />
+      
+      {/* Subtasks and add subtask row when expanded */}
+      {task.show_sub_tasks && (
+        <>
+          {/* Show loading skeleton while fetching subtasks */}
+          {isLoadingSubtasks && (
+            <>
+              <SubtaskLoadingSkeleton visibleColumns={visibleColumns} />
+            </>
+          )}
+          
+          {/* Render existing subtasks when not loading */}
+          {!isLoadingSubtasks && task.sub_tasks?.map((subtask: Task) => (
+            <div key={subtask.id} className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
+              <TaskRow
+                taskId={subtask.id}
+                projectId={projectId}
+                visibleColumns={visibleColumns}
+                isSubtask={true}
+              />
+            </div>
+          ))}
+          
+          {/* Add subtask row - only show when not loading */}
+          {!isLoadingSubtasks && (
+            <div className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
+              <AddSubtaskRow
+                parentTaskId={taskId}
+                projectId={projectId}
+                visibleColumns={visibleColumns}
+                onSubtaskAdded={handleSubtaskAdded}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+});
+
+TaskRowWithSubtasks.displayName = 'TaskRowWithSubtasks';
+
+export default TaskRowWithSubtasks; 

worklenz-frontend/src/features/task-management/task-management.slice.ts

@@ -55,6 +55,7 @@ const initialState: TaskManagementState = {
   grouping: undefined,
   selectedPriorities: [],
   search: '',
+  loadingSubtasks: {},
 };
 
 // Async thunk to fetch tasks from API
@@ -703,6 +704,68 @@ const taskManagementSlice = createSlice({
         parent.sub_tasks_count = (parent.sub_tasks_count || 0) + 1;
       }
     },
+    createSubtask: (
+      state,
+      action: PayloadAction<{ parentTaskId: string; name: string; projectId: string }>
+    ) => {
+      const { parentTaskId, name, projectId } = action.payload;
+      const parent = state.entities[parentTaskId];
+      if (parent) {
+        // Create a temporary subtask - the real one will come from the socket
+        const tempId = `temp-${Date.now()}`;
+        const tempSubtask: Task = {
+          id: tempId,
+          task_key: '',
+          title: name,
+          name: name,
+          description: '',
+          status: 'todo',
+          priority: 'low',
+          phase: 'Development',
+          progress: 0,
+          assignees: [],
+          assignee_names: [],
+          labels: [],
+          dueDate: undefined,
+          due_date: undefined,
+          startDate: undefined,
+          timeTracking: {
+            estimated: 0,
+            logged: 0,
+          },
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+          order: 0,
+          parent_task_id: parentTaskId,
+          is_sub_task: true,
+          sub_tasks_count: 0,
+          show_sub_tasks: false,
+          isTemporary: true, // Mark as temporary
+        };
+        
+        // Add temporary subtask for immediate UI feedback
+        if (!parent.sub_tasks) {
+          parent.sub_tasks = [];
+        }
+        parent.sub_tasks.push(tempSubtask);
+        parent.sub_tasks_count = (parent.sub_tasks_count || 0) + 1;
+        state.entities[tempId] = tempSubtask;
+        state.ids.push(tempId);
+      }
+    },
+    removeTemporarySubtask: (
+      state,
+      action: PayloadAction<{ parentTaskId: string; tempId: string }>
+    ) => {
+      const { parentTaskId, tempId } = action.payload;
+      const parent = state.entities[parentTaskId];
+      if (parent && parent.sub_tasks) {
+        parent.sub_tasks = parent.sub_tasks.filter(subtask => subtask.id !== tempId);
+        parent.sub_tasks_count = Math.max((parent.sub_tasks_count || 0) - 1, 0);
+        delete state.entities[tempId];
+        state.ids = state.ids.filter(id => id !== tempId);
+      }
+    },
     updateTaskAssignees: (state, action: PayloadAction<{
       taskId: string;
       assigneeIds: string[];
@@ -719,6 +782,7 @@ const taskManagementSlice = createSlice({
         };
       }
     },
+    
   },
   extraReducers: builder => {
     builder
@@ -742,20 +806,66 @@ const taskManagementSlice = createSlice({
         state.groups = [];
       })
       .addCase(fetchSubTasks.pending, (state, action) => {
-        // Don't set global loading state for subtasks
+        // Set loading state for specific task
+        const { taskId } = action.meta.arg;
+        state.loadingSubtasks[taskId] = true;
         state.error = null;
       })
       .addCase(fetchSubTasks.fulfilled, (state, action) => {
         const { parentTaskId, subtasks } = action.payload;
         const parentTask = state.entities[parentTaskId];
-        if (parentTask) {
+        // Clear loading state
-          parentTask.sub_tasks = subtasks;
+        state.loadingSubtasks[parentTaskId] = false;
-          parentTask.sub_tasks_count = subtasks.length;
+        if (parentTask && subtasks) {
-          parentTask.show_sub_tasks = true;
+          // Convert subtasks to the proper format
+          const convertedSubtasks = subtasks.map(subtask => ({
+            id: subtask.id || '',
+            task_key: subtask.task_key || '',
+            title: subtask.name || subtask.title || '',
+            name: subtask.name || subtask.title || '',
+            description: subtask.description || '',
+            status: subtask.status || 'todo',
+            priority: subtask.priority || 'low',
+            phase: subtask.phase_name || subtask.phase || 'Development',
+            progress: subtask.complete_ratio || subtask.progress || 0,
+            assignees: subtask.assignees || [],
+            assignee_names: subtask.assignee_names || subtask.names || [],
+            labels: subtask.labels || [],
+            dueDate: subtask.end_date || subtask.dueDate,
+            due_date: subtask.end_date || subtask.due_date,
+            startDate: subtask.start_date || subtask.startDate,
+            timeTracking: subtask.timeTracking || {
+              estimated: 0,
+              logged: 0,
+            },
+            createdAt: subtask.created_at || subtask.createdAt || new Date().toISOString(),
+            created_at: subtask.created_at || subtask.createdAt || new Date().toISOString(),
+            updatedAt: subtask.updated_at || subtask.updatedAt || new Date().toISOString(),
+            updated_at: subtask.updated_at || subtask.updatedAt || new Date().toISOString(),
+            order: subtask.sort_order || subtask.order || 0,
+            parent_task_id: parentTaskId,
+            is_sub_task: true,
+            sub_tasks_count: 0,
+            show_sub_tasks: false,
+          }));
+
+          // Update parent task with subtasks
+          parentTask.sub_tasks = convertedSubtasks;
+          parentTask.sub_tasks_count = convertedSubtasks.length;
+          
+          // Add subtasks to entities so they can be accessed by ID
+          convertedSubtasks.forEach(subtask => {
+            state.entities[subtask.id] = subtask;
+            if (!state.ids.includes(subtask.id)) {
+              state.ids.push(subtask.id);
+            }
+          });
         }
       })
       .addCase(fetchSubTasks.rejected, (state, action) => {
-        // Set error but don't clear task data
+        // Clear loading state and set error
+        const { taskId } = action.meta.arg;
+        state.loadingSubtasks[taskId] = false;
         state.error = action.error.message || action.payload || 'Failed to fetch subtasks. Please try again.';
       })
       .addCase(fetchTasks.pending, (state) => {
@@ -801,6 +911,8 @@ export const {
   toggleTaskExpansion,
   addSubtaskToParent,
   updateTaskAssignees,
+  createSubtask,
+  removeTemporarySubtask,
 } = taskManagementSlice.actions;
 
 // Export the selectors
@@ -814,6 +926,7 @@ export const selectLoading = (state: RootState) => state.taskManagement.loading;
 export const selectError = (state: RootState) => state.taskManagement.error;
 export const selectSelectedPriorities = (state: RootState) => state.taskManagement.selectedPriorities;
 export const selectSearch = (state: RootState) => state.taskManagement.search;
+export const selectSubtaskLoading = (state: RootState, taskId: string) => state.taskManagement.loadingSubtasks[taskId] || false;
 
 // Memoized selectors
 export const selectTasksByStatus = (state: RootState, status: string) =>

worklenz-frontend/src/hooks/useTaskSocketHandlers.ts

@@ -200,20 +200,13 @@ export const useTaskSocketHandlers = () => {
       // Update enhanced kanban slice
       dispatch(updateEnhancedKanbanTaskStatus(response));
 
-      // For the task management slice, move task between groups without resetting
+      // For the task management slice, update the task entity and handle group movement
       const state = store.getState();
       const groups = state.taskManagement.groups;
       const currentTask = state.taskManagement.entities[response.id];
+      const currentGrouping = state.taskManagement.grouping;
 
-      if (groups && groups.length > 0 && currentTask && response.status_id) {
+      if (currentTask) {
-        // Find current group containing the task
-        const currentGroup = groups.find(group => group.taskIds.includes(response.id));
-
-        // Find target group based on new status ID
-        // The status_id from response is the UUID of the new status
-        const targetGroup = groups.find(group => group.id === response.status_id);
-
-        if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
         // Determine the new status value based on status category
         let newStatusValue: 'todo' | 'doing' | 'done' = 'todo';
         if (response.statusCategory) {
@@ -226,23 +219,38 @@ export const useTaskSocketHandlers = () => {
           }
         }
 
-          // Use the new action to move task between groups
+        // Update the task entity first
+        dispatch(
+          updateTask({
+            ...currentTask,
+            status: newStatusValue,
+            progress: response.complete_ratio || currentTask.progress,
+            updatedAt: new Date().toISOString(),
+          })
+        );
+
+        // Handle group movement ONLY if grouping by status
+        if (groups && groups.length > 0 && currentGrouping === 'status') {
+          // Find current group containing the task
+          const currentGroup = groups.find(group => group.taskIds.includes(response.id));
+
+          // Find target group based on new status value (not UUID)
+          const targetGroup = groups.find(group => group.groupValue === newStatusValue);
+
+          if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
+            // Use the action to move task between groups
             dispatch(
               moveTaskBetweenGroups({
                 taskId: response.id,
-              fromGroupId: currentGroup.id,
+                sourceGroupId: currentGroup.id,
-              toGroupId: targetGroup.id,
+                targetGroupId: targetGroup.id,
-              taskUpdate: {
-                status: newStatusValue,
-                progress: response.complete_ratio || currentTask.progress,
-              },
               })
             );
-        } else if (!currentGroup || !targetGroup) {
+          } else {
-          // Remove unnecessary refetch that causes data thrashing
+            console.log('🔧 No group movement needed for status change');
-          // if (projectId) {
+          }
-          //   dispatch(fetchTasksV3(projectId));
+        } else {
-          // }
+          console.log('🔧 Not grouped by status, skipping group movement');
         }
       }
     },
@@ -310,9 +318,10 @@ export const useTaskSocketHandlers = () => {
       // Update enhanced kanban slice
       dispatch(updateEnhancedKanbanTaskPriority(response));
 
-      // For the task management slice, always update the task entity first
+      // For the task management slice, update the task entity and handle group movement
       const state = store.getState();
       const currentTask = state.taskManagement.entities[response.id];
+      const currentGrouping = state.taskManagement.grouping;
 
       if (currentTask) {
         // Get priority list to map priority_id to priority name
@@ -327,20 +336,17 @@ export const useTaskSocketHandlers = () => {
           }
         }
 
-        // Update the task entity
+        // Update the task entity first
         dispatch(
           updateTask({
-            id: response.id,
+            ...currentTask,
-            changes: {
             priority: newPriorityValue,
             updatedAt: new Date().toISOString(),
-            },
           })
         );
 
         // Handle group movement ONLY if grouping by priority
         const groups = state.taskManagement.groups;
-        const currentGrouping = state.taskManagement.grouping;
 
         if (groups && groups.length > 0 && currentGrouping === 'priority') {
           // Find current group containing the task
@@ -348,18 +354,15 @@ export const useTaskSocketHandlers = () => {
 
           // Find target group based on new priority value
           const targetGroup = groups.find(
-            group => group.groupValue.toLowerCase() === newPriorityValue.toLowerCase()
+            group => group.groupValue?.toLowerCase() === newPriorityValue.toLowerCase()
           );
 
           if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
             dispatch(
               moveTaskBetweenGroups({
                 taskId: response.id,
-                fromGroupId: currentGroup.id,
+                sourceGroupId: currentGroup.id,
-                toGroupId: targetGroup.id,
+                targetGroupId: targetGroup.id,
-                taskUpdate: {
-                  priority: newPriorityValue,
-                },
               })
             );
           } else {
@@ -619,7 +622,7 @@ export const useTaskSocketHandlers = () => {
           parent_task_id: data.parent_task_id,
           is_sub_task: true,
         };
-        dispatch(addSubtaskToParent({ subtask, parentTaskId: data.parent_task_id }));
+        dispatch(addSubtaskToParent({ parentId: data.parent_task_id, subtask }));
 
         // Also update enhanced kanban slice for subtask creation
         dispatch(

worklenz-frontend/src/styles/task-management.css

@@ -310,8 +310,6 @@
 }
 
 .dark .ant-btn {
-  background-color: #262626;
-  border-color: #404040;
   color: rgba(255, 255, 255, 0.85);
 }
 

worklenz-frontend/src/types/task-management.types.ts

@@ -96,6 +96,7 @@ export interface TaskManagementState {
   grouping: string | undefined;
   selectedPriorities: string[];
   search: string;
+  loadingSubtasks: Record<string, boolean>; // Track loading state for individual tasks
 }
 
 export interface TaskGroupsState {