document name input focus

src/components/DocumentDrawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { PhCheckerboard, PhFilmReel, PhPlus, PhX } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
 import { confirmDialog, promptDialog, dialogState } from '@/components/ui'
@@ -19,6 +19,7 @@ const { projectName, renameProject } = useProjectName()
 const { presets, addPreset, removePreset } = useCanvasPresets()
 
 const rootEl = ref<HTMLElement | null>(null)
+const nameInput = ref<HTMLInputElement | null>(null)
 
 // The drawer is opened only by the topbar project-name button (no tab,
 // no hover). An outside click or ESC dismisses it. A dialog on top
@@ -52,6 +53,14 @@ watch(open, (v) => {
       document.addEventListener('pointerdown', onDocPointerDown, true)
       document.addEventListener('keydown', onDocKeyDown)
     }, 0)
+    // Focus + select the project-name field on open — renaming is
+    // the main reason this drawer exists, so the cursor should land
+    // there without an extra click.
+    void nextTick().then(() => {
+      if (!open.value) return
+      nameInput.value?.focus()
+      nameInput.value?.select()
+    })
   } else {
     document.removeEventListener('pointerdown', onDocPointerDown, true)
     document.removeEventListener('keydown', onDocKeyDown)
@@ -327,6 +336,7 @@ async function onRemovePreset(p: CanvasPreset) {
         <label class="name-field">
           <span class="name-label">{{ t('documentDrawer.projectName') }}</span>
           <input
+            ref="nameInput"
             class="name-input"
             type="text"
             :value="nameDraft"