diff --git a/apps/desktop/src/components/connection/ConnectionTreeSelect.vue b/apps/desktop/src/components/connection/ConnectionTreeSelect.vue
new file mode 100644
index 0000000000..f594b9d51b
--- /dev/null
+++ b/apps/desktop/src/components/connection/ConnectionTreeSelect.vue
@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ searchPlaceholder }}
+
+
+
+
+
+
+
+
+
+
+ {{ emptyText }}
+
+
+
-
@@ -450,18 +440,7 @@ async function changeCatalog(selectedCatalog: string) {
{{ t("editor.selectConnection") }}
-
-
-
-
-
- {{ connectionGroupLabel(option) }}
-
-
-
-
-
+
`${row.kind}:${row.id}@${row.depth}`);
+}
+
+describe("buildConnectionPickerRows", () => {
+ it("flattens the layout tree with depths in sidebar order", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(), "");
+ expect(kinds(rows)).toEqual(["group:g1@0", "group:g2@1", "connection:c1@2", "connection:c2@1", "connection:c3@0", "connection:c4@0"]);
+ });
+
+ it("appends connections missing from the layout at the top level", () => {
+ const rows = buildConnectionPickerRows({ groups: [], order: [] }, connections, new Set(), "");
+ expect(kinds(rows)).toEqual(["connection:c1@0", "connection:c2@0", "connection:c3@0", "connection:c4@0"]);
+ });
+
+ it("hides children of collapsed groups without dropping them from the fallback", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(["g1"]), "");
+ expect(kinds(rows)).toEqual(["group:g1@0", "connection:c3@0", "connection:c4@0"]);
+ expect(rows[0]?.collapsed).toBe(true);
+ });
+
+ it("keeps deeper groups visible when only a nested group is collapsed", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(["g2"]), "");
+ expect(kinds(rows)).toEqual(["group:g1@0", "group:g2@1", "connection:c2@1", "connection:c3@0", "connection:c4@0"]);
+ });
+
+ it("skips stale layout connection ids that no longer exist", () => {
+ const stale: SidebarLayout = { groups: [], order: [{ type: "connection", id: "gone" }] };
+ const rows = buildConnectionPickerRows(stale, connections, new Set(), "");
+ expect(kinds(rows)).toEqual(["connection:c1@0", "connection:c2@0", "connection:c3@0", "connection:c4@0"]);
+ });
+
+ it("filters connections by name and keeps ancestor groups expanded", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(["g1", "g2"]), "本地");
+ expect(kinds(rows)).toEqual(["connection:c3@0"]);
+ });
+
+ it("matches connections by group path and keeps the hierarchy", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(), "华东");
+ expect(kinds(rows)).toEqual(["group:g1@0", "group:g2@1", "connection:c1@2"]);
+ expect(rows.every((row) => !row.collapsed)).toBe(true);
+ });
+
+ it("matches fallback connections by name during search", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(), "孤儿");
+ expect(kinds(rows)).toEqual(["connection:c4@0"]);
+ });
+
+ it("returns no rows when nothing matches the query", () => {
+ expect(buildConnectionPickerRows(layout(), connections, new Set(), "不存在")).toEqual([]);
+ });
+
+ it("falls back to the connection id when the name is empty", () => {
+ const rows = buildConnectionPickerRows({ groups: [], order: [] }, [{ id: "c9", name: "" }], new Set(), "");
+ expect(rows[0]?.label).toBe("c9");
+ });
+});
+
+describe("connectionPickerSelectableRows", () => {
+ it("keeps only connection rows for keyboard navigation", () => {
+ const rows = buildConnectionPickerRows(layout(), connections, new Set(), "");
+ expect(connectionPickerSelectableRows(rows).map((row) => row.id)).toEqual(["c1", "c2", "c3", "c4"]);
+ });
+});
diff --git a/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts b/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts
index 8b3942cb6c..3bc1bfa2de 100644
--- a/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts
+++ b/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts
@@ -20,10 +20,9 @@ describe("SearchableSelect layout", () => {
expect(fixedConnectionIcons).toHaveLength(2);
});
- it("wraps deep connection group paths without hiding connection names", () => {
- expect(editorToolbarSource).toContain('item-class="min-h-9 h-auto py-1"');
- expect(editorToolbarSource).toMatch(/\s*\{\{ connectionGroupLabel\(option\) \}\}\s*<\/span>/);
- expect(editorToolbarSource).toContain(' {
+ expect(editorToolbarSource).toContain("): SidebarOrderEntry[] {
+ return entry.children ?? entry.connectionIds?.map((id) => ({ type: "connection" as const, id })) ?? [];
+}
+
+function collectLayoutConnectionIds(entries: SidebarOrderEntry[], into: Set) {
+ for (const entry of entries) {
+ if (entry.type === "connection") {
+ into.add(entry.id);
+ } else {
+ collectLayoutConnectionIds(groupEntryChildren(entry), into);
+ }
+ }
+}
+
+function connectionMatchesQuery(name: string, groupPath: string[], normalizedQuery: string): boolean {
+ if (name.toLowerCase().includes(normalizedQuery)) return true;
+ return groupPath.join(" / ").toLowerCase().includes(normalizedQuery);
+}
+
+/**
+ * Flattens the sidebar layout into renderable rows for the toolbar connection
+ * picker. Groups are shown as non-selectable rows that mirror the sidebar tree;
+ * connections missing from the layout are appended at the top level so they
+ * stay reachable. With a search query the tree is fully expanded and only
+ * connections matching by name or group path (plus their ancestor groups) are
+ * kept.
+ */
+export function buildConnectionPickerRows(layout: SidebarLayout, connections: readonly ConnectionPickerConnection[], collapsedGroupIds: ReadonlySet, searchQuery: string): ConnectionPickerRow[] {
+ const connectionById = new Map(connections.map((connection) => [connection.id, connection]));
+ const groupById = new Map(layout.groups.map((group) => [group.id, group]));
+ const normalizedQuery = searchQuery.trim().toLowerCase();
+
+ if (normalizedQuery) {
+ const rows: ConnectionPickerRow[] = [];
+ const visitSearch = (entries: SidebarOrderEntry[], depth: number, groupPath: string[]): ConnectionPickerRow[] => {
+ const result: ConnectionPickerRow[] = [];
+ for (const entry of entries) {
+ if (entry.type === "connection") {
+ const connection = connectionById.get(entry.id);
+ if (!connection) continue;
+ const label = connection.name || connection.id;
+ if (connectionMatchesQuery(label, groupPath, normalizedQuery)) {
+ result.push({ key: `connection:${connection.id}`, kind: "connection", id: connection.id, label, depth, collapsed: false });
+ }
+ continue;
+ }
+ const group = groupById.get(entry.id);
+ if (!group) continue;
+ const childRows = visitSearch(groupEntryChildren(entry), depth + 1, [...groupPath, group.name]);
+ if (childRows.length === 0) continue;
+ result.push({ key: `group:${group.id}`, kind: "group", id: group.id, label: group.name, depth, collapsed: false }, ...childRows);
+ }
+ return result;
+ };
+ rows.push(...visitSearch(layout.order, 0, []));
+
+ const layoutConnectionIds = new Set();
+ collectLayoutConnectionIds(layout.order, layoutConnectionIds);
+ for (const connection of connections) {
+ if (layoutConnectionIds.has(connection.id)) continue;
+ const label = connection.name || connection.id;
+ if (connectionMatchesQuery(label, [], normalizedQuery)) {
+ rows.push({ key: `connection:${connection.id}`, kind: "connection", id: connection.id, label, depth: 0, collapsed: false });
+ }
+ }
+ return rows;
+ }
+
+ const rows: ConnectionPickerRow[] = [];
+ const visitTree = (entries: SidebarOrderEntry[], depth: number) => {
+ for (const entry of entries) {
+ if (entry.type === "connection") {
+ const connection = connectionById.get(entry.id);
+ if (!connection) continue;
+ rows.push({ key: `connection:${connection.id}`, kind: "connection", id: connection.id, label: connection.name || connection.id, depth, collapsed: false });
+ continue;
+ }
+ const group = groupById.get(entry.id);
+ if (!group) continue;
+ const collapsed = collapsedGroupIds.has(group.id);
+ rows.push({ key: `group:${group.id}`, kind: "group", id: group.id, label: group.name, depth, collapsed });
+ if (!collapsed) visitTree(groupEntryChildren(entry), depth + 1);
+ }
+ };
+ visitTree(layout.order, 0);
+
+ const layoutConnectionIds = new Set();
+ collectLayoutConnectionIds(layout.order, layoutConnectionIds);
+ for (const connection of connections) {
+ if (layoutConnectionIds.has(connection.id)) continue;
+ rows.push({ key: `connection:${connection.id}`, kind: "connection", id: connection.id, label: connection.name || connection.id, depth: 0, collapsed: false });
+ }
+ return rows;
+}
+
+/** Selectable rows in display order, used for keyboard navigation. */
+export function connectionPickerSelectableRows(rows: readonly ConnectionPickerRow[]): ConnectionPickerRow[] {
+ return rows.filter((row) => row.kind === "connection");
+}