Improve task addition interactivity with row-level hover effects and restrict auto-focus to empty new tasks

Author: robertpiosik

packages/ui/src/components/editor/panel/Tasks/Tasks.module.scss

@@ -157,6 +157,19 @@
   }
 }
 
+.add-row {
+  position: relative;
+  display: flex;
+
+  &:hover {
+    background-color: var(--vscode-list-hoverBackground);
+
+    .add-button::before {
+      opacity: 1;
+    }
+  }
+}
+
 .empty {
   padding: 8px 12px;
   font-size: 11px;

packages/ui/src/components/editor/panel/Tasks/components/TaskGroup.tsx

@@ -70,7 +70,7 @@ export const TaskGroup: React.FC<TaskGroupProps> = (props) => {
         })}
       </ReactSortable>
       {props.on_add && (
-        <div style={{ position: 'relative', display: 'flex' }}>
+        <div className={styles['add-row']} onClick={props.on_add}>
           {[...Array(depth)].map((_, i) => (
             <div
               key={i}
@@ -80,7 +80,6 @@ export const TaskGroup: React.FC<TaskGroupProps> = (props) => {
           ))}
           <button
             className={cn(styles['add-button'], styles['add-button--add'])}
-            onClick={props.on_add}
             style={{ marginLeft: `${13 + depth * 20}px` }}
             title="Add task"
           />

packages/ui/src/components/editor/panel/Tasks/hooks/use-auto-focus-new-task.ts

@@ -10,9 +10,12 @@ export const use_auto_focus_new_task = (
 
   useEffect(() => {
     const current_ids = new Set<number>()
+    const id_to_task = new Map<number, Task>()
+
     const collect_ids = (t: Task[]) => {
       t.forEach((task) => {
         current_ids.add(task.created_at)
+        id_to_task.set(task.created_at, task)
         if (task.children) collect_ids(task.children)
       })
     }
@@ -29,7 +32,10 @@ export const use_auto_focus_new_task = (
     )
 
     if (added_ids.length === 1) {
-      set_editing_timestamp(added_ids[0])
+      const new_task = id_to_task.get(added_ids[0])
+      if (new_task && new_task.text === '') {
+        set_editing_timestamp(added_ids[0])
+      }
     }
 
     prev_ids_ref.current = current_ids