From c18889a127d1965845ac3edc36fede3bef97ff3f Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Thu, 22 May 2025 09:39:53 +0530
Subject: [PATCH] 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.
---
 .../task-drawer-header/task-drawer-header.tsx | 50 +++++++++++++------
 .../task-drawer-status-dropdown.tsx           |  4 +-
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx b/worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx
index 6a20f0b9..0bc322f3 100644
--- a/worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx
+++ b/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
-          ref={inputRef}
-          size="large"
-          value={taskName}
-          onChange={e => onTaskNameChange(e)}
-          onBlur={handleInputBlur}
-          placeholder={t('taskHeader.taskNamePlaceholder')}
-          className="task-name-input"
-          style={{ 
-            width: '100%', 
-            border: 'none',
-          }}
-          showCount={false}
-          maxLength={250}
-        />
+        {isEditing ? (
+          <Input
+            ref={inputRef}
+            size="large"
+            value={taskName}
+            onChange={e => onTaskNameChange(e)}
+            onBlur={handleInputBlur}
+            placeholder={t('taskHeader.taskNamePlaceholder')}
+            className="task-name-input"
+            style={{ 
+              width: '100%', 
+              border: 'none',
+            }}
+            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
diff --git a/worklenz-frontend/src/components/task-drawer/task-drawer-status-dropdown/task-drawer-status-dropdown.tsx b/worklenz-frontend/src/components/task-drawer/task-drawer-status-dropdown/task-drawer-status-dropdown.tsx
index 5378acb3..73b9df06 100644
--- a/worklenz-frontend/src/components/task-drawer/task-drawer-status-dropdown/task-drawer-status-dropdown.tsx
+++ b/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();