refactor(task-drawer): remove unused imports and add edit mode for task name

Removed unused `useEffect` import in `task-drawer-status-dropdown.tsx` and unused `connected` variable. Added edit mode for task name in `task-drawer-header.tsx` to improve user interaction by allowing inline editing of the task name.

worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx

@@ -27,6 +27,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   const { socket, connected } = useSocket();
   const { clearTaskFromUrl } = useTaskDrawerUrlSync();
   const isDeleting = useRef(false);
+  const [isEditing, setIsEditing] = useState(false);
 
   const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
   const [taskName, setTaskName] = useState<string>(taskFormViewModel?.task?.name ?? '');
@@ -88,6 +89,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   };
 
   const handleInputBlur = () => {
+    setIsEditing(false);
     if (
       !selectedTaskId ||
       !connected ||
@@ -113,21 +115,39 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   return (
     <Flex gap={12} align="center" style={{ marginBlockEnd: 6 }}>
       <Flex style={{ position: 'relative', width: '100%' }}>
-        <Input
+        {isEditing ? (
-          ref={inputRef}
+          <Input
-          size="large"
+            ref={inputRef}
-          value={taskName}
+            size="large"
-          onChange={e => onTaskNameChange(e)}
+            value={taskName}
-          onBlur={handleInputBlur}
+            onChange={e => onTaskNameChange(e)}
-          placeholder={t('taskHeader.taskNamePlaceholder')}
+            onBlur={handleInputBlur}
-          className="task-name-input"
+            placeholder={t('taskHeader.taskNamePlaceholder')}
-          style={{ 
+            className="task-name-input"
-            width: '100%', 
+            style={{ 
-            border: 'none',
+              width: '100%', 
-          }}
+              border: 'none',
-          showCount={false}
+            }}
-          maxLength={250}
+            showCount={true}
-        />
+            maxLength={250}
+            autoFocus
+          />
+        ) : (
+          <p 
+            onClick={() => setIsEditing(true)} 
+            style={{ 
+              margin: 0, 
+              padding: '4px 11px',
+              fontSize: '16px',
+              cursor: 'pointer',
+              wordWrap: 'break-word',
+              overflowWrap: 'break-word',
+              width: '100%'
+            }}
+          >
+            {taskName || t('taskHeader.taskNamePlaceholder')}
+          </p>
+        )}
       </Flex>
 
       <TaskDrawerStatusDropdown

worklenz-frontend/src/components/task-drawer/task-drawer-status-dropdown/task-drawer-status-dropdown.tsx

@@ -12,7 +12,7 @@ import { ITaskViewModel } from '@/types/tasks/task.types';
 import { ITaskStatus } from '@/types/tasks/taskStatus.types';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
 import { Select } from 'antd';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 interface TaskDrawerStatusDropdownProps {
   statuses: ITaskStatus[];
@@ -21,7 +21,7 @@ interface TaskDrawerStatusDropdownProps {
 }
 
 const TaskDrawerStatusDropdown = ({ statuses, task, teamId }: TaskDrawerStatusDropdownProps) => {
-  const { socket, connected } = useSocket();
+  const { socket } = useSocket();
   const dispatch = useAppDispatch();
   const themeMode = useAppSelector(state => state.themeReducer.mode);
   const { tab } = useTabSearchParam();