Implement auto-focus for newly added tasks and adjust task header padding

Author: robertpiosik

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

@@ -9,6 +9,7 @@ import cn from 'classnames'
 import { Task } from '@shared/types/task'
 import { IconButton } from '../IconButton'
 import { TaskGroup, SortableTask } from './components/TaskGroup'
+import { use_auto_focus_new_task } from './hooks/use-auto-focus-new-task'
 
 dayjs.extend(relativeTime)
 
@@ -59,6 +60,8 @@ export const Tasks: React.FC<Props> = (props) => {
   >(null)
   const prevent_edit_ref = useRef(false)
 
+  use_auto_focus_new_task(props.tasks, set_editing_timestamp)
+
   const structure_signature = useMemo(
     () => get_structure_signature(props.tasks),
     [props.tasks]

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

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import { Task } from '@shared/types/task'
+
+export const use_auto_focus_new_task = (
+  tasks: Task[],
+  set_editing_timestamp: (timestamp: number | null) => void
+) => {
+  const prev_ids_ref = useRef<Set<number>>(new Set())
+  const is_first_render = useRef(true)
+
+  useEffect(() => {
+    const current_ids = new Set<number>()
+    const collect_ids = (t: Task[]) => {
+      t.forEach((task) => {
+        current_ids.add(task.created_at)
+        if (task.children) collect_ids(task.children)
+      })
+    }
+    collect_ids(tasks)
+
+    if (is_first_render.current) {
+      is_first_render.current = false
+      prev_ids_ref.current = current_ids
+      return
+    }
+
+    const added_ids = Array.from(current_ids).filter(
+      (id) => !prev_ids_ref.current.has(id)
+    )
+
+    if (added_ids.length === 1) {
+      set_editing_timestamp(added_ids[0])
+    }
+
+    prev_ids_ref.current = current_ids
+  }, [tasks, set_editing_timestamp])
+}

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -144,7 +144,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1px 12px 0px 12px;
+    padding: 1px 12px 3px 12px;
     font-size: 11px;
     font-weight: bold;
     color: var(--cwc-text-color-dimmed);