feat(sidebar): create connections from group menu

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>

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>

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 }] };
 }

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,