task input autofocus

Author: refact0r

src/lib/components/AddTask.svelte

@@ -7,10 +7,17 @@
         disabled = false,
         loading = false,
         show = false,
-        onsubmit,
-        oninput,
+        onsubmit = undefined,
+        oninput = undefined,
     } = $props()
 
+    let inputElement
+
+    // Expose focus method to parent
+    export function focus() {
+        inputElement?.focus()
+    }
+
     const handleSubmit = (event) => {
         event.preventDefault()
         onsubmit?.(event)
@@ -88,6 +95,7 @@
             {/if}
         </div>
         <input
+            bind:this={inputElement}
             class="add-task-input"
             type="text"
             bind:value

src/lib/components/Tasks.svelte

@@ -22,6 +22,7 @@
     let newTaskContent = $state('')
     let addingTask = $state(false)
     let togglingTasks = $state(new Set())
+    let addTaskComponent = $state()
 
     // Derived project match
     let parsedProject = $derived(
@@ -83,6 +84,28 @@
         }
     }
 
+    function handleGlobalKeydown(event) {
+        // Only auto-focus if:
+        // 1. No input, textarea, or contenteditable element is currently focused
+        // 2. The key is a printable character (not a modifier or special key)
+        const activeElement = document.activeElement
+        const isInputFocused =
+            activeElement?.tagName === 'INPUT' ||
+            activeElement?.tagName === 'TEXTAREA' ||
+            (activeElement instanceof HTMLElement && activeElement.isContentEditable)
+
+        if (
+            addTaskComponent &&
+            !isInputFocused &&
+            event.key.length === 1 && // Printable character
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey
+        ) {
+            addTaskComponent.focus()
+        }
+    }
+
     $effect(() => {
         const backend = settings.taskBackend
         const token = settings.todoistApiToken
@@ -334,10 +357,12 @@
     onMount(() => {
         initializeAPI(settings.taskBackend, settings.todoistApiToken)
         document.addEventListener('visibilitychange', handleVisibilityChange)
+        document.addEventListener('keydown', handleGlobalKeydown)
     })
 
     onDestroy(() => {
         document.removeEventListener('visibilitychange', handleVisibilityChange)
+        document.removeEventListener('keydown', handleGlobalKeydown)
     })
 </script>
 
@@ -379,6 +404,7 @@
                     </span>
                 {/if}
                 <AddTask
+                    bind:this={addTaskComponent}
                     bind:value={newTaskContent}
                     bind:parsed={parsedDate}
                     {parsedProject}