fix(modals): focus name input on validation and update placeholder

Author: debba

src/components/modals/NewConnectionModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
   X,
@@ -163,6 +163,7 @@ export const NewConnectionModal = ({
 
   // ── validation errors ──
   const [nameError, setNameError] = useState(false);
+  const nameInputRef = useRef<HTMLInputElement>(null);
   const [databasesTabError, setDatabasesTabError] = useState(false);
 
   // ── capabilities ──
@@ -405,6 +406,7 @@ export const NewConnectionModal = ({
       setMessage(t("newConnection.nameRequired"));
       setTestResult("error");
       setNameError(true);
+      nameInputRef.current?.focus();
       return;
     }
     if (isMultiDb) {
@@ -1103,6 +1105,7 @@ export const NewConnectionModal = ({
             style={getDriverColorStyle(activeDriver)}
           />
           <input
+            ref={nameInputRef}
             type="text"
             value={name}
             onChange={(e) => {

src/i18n/locales/en.json

@@ -410,7 +410,7 @@
     "titleEdit": "Edit Connection",
     "subtitle": "Configure database connection settings",
     "name": "Connection Name",
-    "namePlaceholder": "My Production DB",
+    "namePlaceholder": "Provide your connection name",
     "nameRequired": "Connection name is required",
     "dbNameRequired": "Database name is required",
     "dbType": "Database Type",
@@ -867,4 +867,4 @@
     "dragHint": "Drag connections here",
     "createError": "Failed to create group"
   }
-}
+}