From adb88e80e51dcec8342a3384b47425fcf81cc1ed Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Fri, 3 Jul 2026 10:48:41 +0200
Subject: [PATCH] feat: autofocus migration name input and flag it red when
 empty

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../workspaceSettings/NewDataTableMigrationModal.svelte     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/lib/components/workspaceSettings/NewDataTableMigrationModal.svelte b/frontend/src/lib/components/workspaceSettings/NewDataTableMigrationModal.svelte
index e4f9a9d411..53a0db169b 100644
--- a/frontend/src/lib/components/workspaceSettings/NewDataTableMigrationModal.svelte
+++ b/frontend/src/lib/components/workspaceSettings/NewDataTableMigrationModal.svelte
@@ -9,6 +9,7 @@
 	import SimpleEditor from '../SimpleEditor.svelte'
 	import { WorkspaceService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
+	import { tick } from 'svelte'
 
 	let {
 		workspace,
@@ -40,6 +41,7 @@
 	})
 	let tab = $state('up')
 	let name = $state('')
+	let nameInput = $state<TextInput>()
 	let codeUp = $state('')
 	let enableDown = $state(false)
 	let codeDown = $state('')
@@ -69,6 +71,8 @@
 		enableDown = (prefill?.codeDown ?? '') !== ''
 		tab = 'up'
 		isOpen = true
+		// Focus the name field once the modal content has rendered.
+		tick().then(() => nameInput?.focus())
 	}
 
 	async function create(run: boolean) {
@@ -137,7 +141,9 @@
 >
 	<div class="flex flex-col gap-3 w-full grow min-h-0">
 		<TextInput
+			bind:this={nameInput}
 			bind:value={name}
+			error={name.trim() === ''}
 			inputProps={{ placeholder: 'Migration name (e.g. add_index_to_customers)' }}
 		/>
 		<Tabs bind:selected={tab} class="grow min-h-0">