From 6a5dd3b51b52113395e49a1bc7c74b1df5bc64ab Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 9 May 2026 16:27:25 +0800
Subject: [PATCH] feat(sidebar): create connections from group menu

---
 src/components/layout/AppDialogs.vue | 12 +++++++++++-
 src/components/sidebar/TreeItem.vue  |  8 ++++++++
 src/lib/sidebarLayout.ts             | 17 ++++++++++++++++-
 src/stores/connectionStore.ts        | 16 +++++++++++++++-
 tests/sidebarLayout.test.ts          | 13 +++++++++++++
 5 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/AppDialogs.vue b/src/components/layout/AppDialogs.vue
index 9debba06e6..b912a4aa2e 100644
--- a/src/components/layout/AppDialogs.vue
+++ b/src/components/layout/AppDialogs.vue
@@ -70,10 +70,20 @@ watch(editConfig, (v) => {
   if (v) emit("update:showConnectionDialog", true);
 });
 
+watch(
+  () => connectionStore.newConnectionGroupId,
+  (v) => {
+    if (v) emit("update:showConnectionDialog", true);
+  },
+);
+
 watch(
   () => props.showConnectionDialog,
   (v) => {
-    if (!v) connectionStore.stopEditing();
+    if (!v) {
+      connectionStore.stopEditing();
+      connectionStore.stopCreatingConnectionInGroup();
+    }
   },
 );
 </script>
diff --git a/src/components/sidebar/TreeItem.vue b/src/components/sidebar/TreeItem.vue
index 7c6960c887..6ed41ee3d4 100644
--- a/src/components/sidebar/TreeItem.vue
+++ b/src/components/sidebar/TreeItem.vue
@@ -1075,6 +1075,10 @@ function deleteConnectionGroup() {
   showDeleteGroupConfirm.value = true;
 }
 
+function newConnectionInGroup() {
+  connectionStore.startCreatingConnectionInGroup(props.node.id);
+}
+
 function confirmDeleteGroup() {
   connectionStore.deleteConnectionGroup(props.node.id);
   showDeleteGroupConfirm.value = false;
@@ -1325,6 +1329,10 @@ const isDragging = computed(() => dragState.active && dragState.draggedId === pr
       </template>
 
       <template v-if="node.type === 'connection-group'">
+        <ContextMenuItem @click="newConnectionInGroup">
+          <Plus class="w-4 h-4" /> {{ t("toolbar.newConnection") }}
+        </ContextMenuItem>
+        <ContextMenuSeparator />
         <ContextMenuItem @click="startRenameGroup">
           <Pencil class="w-4 h-4" /> {{ t("connectionGroup.renameGroup") }}
         </ContextMenuItem>
diff --git a/src/lib/sidebarLayout.ts b/src/lib/sidebarLayout.ts
index 9591a24fb7..e0820952e0 100644
--- a/src/lib/sidebarLayout.ts
+++ b/src/lib/sidebarLayout.ts
@@ -281,6 +281,21 @@ export function removeConnectionFromSidebarLayout(layout: SidebarLayout, connect
   return { ...layout, order: removeConnectionFromLayout(layout.order, connectionId) };
 }
 
-export function appendConnectionToLayout(layout: SidebarLayout, connectionId: string): SidebarLayout {
+export function appendConnectionToLayout(
+  layout: SidebarLayout,
+  connectionId: string,
+  groupId?: string | null,
+): SidebarLayout {
+  if (groupId && layout.groups.some((group) => group.id === groupId)) {
+    return {
+      ...layout,
+      groups: layout.groups.map((group) => (group.id === groupId ? { ...group, collapsed: false } : group)),
+      order: layout.order.map((entry) =>
+        entry.type === "group" && entry.id === groupId
+          ? { ...entry, connectionIds: [...entry.connectionIds, connectionId] }
+          : entry,
+      ),
+    };
+  }
   return { ...layout, order: [...layout.order, { type: "connection" as const, id: connectionId }] };
 }
diff --git a/src/stores/connectionStore.ts b/src/stores/connectionStore.ts
index b370985a03..9db311b344 100644
--- a/src/stores/connectionStore.ts
+++ b/src/stores/connectionStore.ts
@@ -40,6 +40,7 @@ export const useConnectionStore = defineStore("connection", () => {
   const connectedIds = ref<Set<string>>(new Set());
   const connectionErrors = ref<Record<string, string>>({});
   const editingConnectionId = ref<string | null>(null);
+  const newConnectionGroupId = ref<string | null>(null);
   const completionTablesCache = ref<Record<string, SqlCompletionTable[]>>({});
   const completionColumnsCache = ref<Record<string, ColumnInfo[]>>({});
   const transferSource = ref<{ connectionId: string; database: string } | null>(null);
@@ -86,6 +87,15 @@ export const useConnectionStore = defineStore("connection", () => {
     editingConnectionId.value = null;
   }
 
+  function startCreatingConnectionInGroup(groupId: string) {
+    stopEditing();
+    newConnectionGroupId.value = groupId;
+  }
+
+  function stopCreatingConnectionInGroup() {
+    newConnectionGroupId.value = null;
+  }
+
   function getConfig(connectionId: string) {
     return connections.value.find((c) => c.id === connectionId);
   }
@@ -222,12 +232,13 @@ export const useConnectionStore = defineStore("connection", () => {
       nextConnections[existing] = normalized;
     } else {
       nextConnections.push(normalized);
-      sidebarLayout.value = appendConnectionToLayout(sidebarLayout.value, normalized.id);
+      sidebarLayout.value = appendConnectionToLayout(sidebarLayout.value, normalized.id, newConnectionGroupId.value);
     }
     await persistConnections(nextConnections);
     connections.value = nextConnections;
     rebuildTreeNodes();
     persistSidebarLayoutDebounced();
+    stopCreatingConnectionInGroup();
   }
 
   function invalidateCompletionCache(connectionId: string) {
@@ -1035,8 +1046,11 @@ export const useConnectionStore = defineStore("connection", () => {
     isDefaultDatabase,
     removeConnection,
     editingConnectionId,
+    newConnectionGroupId,
     startEditing,
     stopEditing,
+    startCreatingConnectionInGroup,
+    stopCreatingConnectionInGroup,
     connect,
     disconnect,
     ensureConnected,
diff --git a/tests/sidebarLayout.test.ts b/tests/sidebarLayout.test.ts
index fe452c4cd8..b4e052b3bc 100644
--- a/tests/sidebarLayout.test.ts
+++ b/tests/sidebarLayout.test.ts
@@ -247,6 +247,19 @@ test("appendConnectionToLayout adds to the end", () => {
   assert.deepEqual(layout.order[0], { type: "connection", id: "x" });
 });
 
+test("appendConnectionToLayout adds to target group and expands it", () => {
+  const layout: SidebarLayout = {
+    groups: [{ id: "g1", name: "G", collapsed: true }],
+    order: [{ type: "group", id: "g1", connectionIds: ["a"] }],
+  };
+  const result = appendConnectionToLayout(layout, "b", "g1");
+  const groupEntry = result.order[0];
+
+  assert.equal(result.groups[0].collapsed, false);
+  assert.ok(groupEntry.type === "group");
+  assert.deepEqual(groupEntry.connectionIds, ["a", "b"]);
+});
+
 test("removeConnectionFromSidebarLayout removes from ungrouped", () => {
   let layout = appendConnectionToLayout(emptyLayout(), "x");
   layout = removeConnectionFromSidebarLayout(layout, "x");