fix(connection): improve save-and-connect flow and feedback (#23)

* fix(connection): avoid duplicate saves on failed connect

* fix(connection): show save-and-connect progress

src/components/connection/ConnectionDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle,
@@ -23,8 +23,15 @@ const props = defineProps<{
   editConfig?: ConnectionConfig;
 }>();
 
+const emit = defineEmits<{
+  connectStarted: [name: string];
+  connectSucceeded: [name: string];
+  connectFailed: [message: string];
+}>();
+
 const store = useConnectionStore();
 const isTesting = ref(false);
+const isSaving = ref(false);
 const testResult = ref<{ ok: boolean; message: string } | null>(null);
 const editingId = ref<string | null>(null);
 
@@ -228,6 +235,9 @@ watch(open, (value) => {
 });
 
 async function save() {
+  if (isSaving.value) return;
+  isSaving.value = true;
+  testResult.value = null;
   try {
     if (editingId.value) {
       const updated: ConnectionConfig = { ...form.value, id: editingId.value };
@@ -236,11 +246,23 @@ async function save() {
     } else {
       const config: ConnectionConfig = { ...form.value, id: crypto.randomUUID() };
       store.addConnection(config);
-      await store.connect(config);
+      open.value = false;
+      await nextTick();
+      emit("connectStarted", config.name);
+      void store.connect(config)
+        .then(() => {
+          emit("connectSucceeded", config.name);
+        })
+        .catch((e: any) => {
+          emit("connectFailed", String(e?.message || e));
+        });
+      return;
     }
     open.value = false;
-  } catch (e) {
-    console.error("[save] error:", e);
+  } catch (e: any) {
+    testResult.value = { ok: false, message: String(e?.message || e) };
+  } finally {
+    isSaving.value = false;
   }
 }
 
@@ -419,11 +441,11 @@ watch([() => editingId.value, () => open.value], () => {
         <span v-if="testResult" :class="testResult.ok ? 'text-green-500' : 'text-red-500'" class="text-sm mr-auto">
           {{ testResult.ok ? t('connection.testSuccess') : testResult.message }}
         </span>
-        <Button variant="outline" :disabled="isTesting" @click="testConnection">
+        <Button variant="outline" :disabled="isTesting || isSaving" @click="testConnection">
           {{ isTesting ? t('connection.testing') : t('connection.test') }}
         </Button>
-        <Button @click="save" :disabled="!form.name || !form.host">
-          {{ editingId ? t('connection.save') : t('connection.saveAndConnect') }}
+        <Button @click="save" :disabled="isSaving || !form.name || !form.host">
+          {{ isSaving ? t('common.loading') : (editingId ? t('connection.save') : t('connection.saveAndConnect')) }}
         </Button>
       </DialogFooter>
     </DialogContent>