From c88fad6bd8b5f484e5a33fec06a042228855cb51 Mon Sep 17 00:00:00 2001
From: Freedom <48708512+xddcode@users.noreply.github.com>
Date: Fri, 17 Jul 2026 18:14:11 +0800
Subject: [PATCH] fix(sidebar): sync create database dialog state

---
 .../sidebar/SidebarTreeRuntimeHost.vue        | 18 +++---
 .../sidebarDialogControllerRouting.spec.ts    | 63 +++++++++++++++++++
 .../sidebar/sidebarDialogControllerRouting.ts | 29 +++++++++
 .../app-tests/sidebarDialogRouting.test.ts    |  5 ++
 .../app-tests/sidebarMutationRuntime.test.ts  |  2 +-
 5 files changed, 108 insertions(+), 9 deletions(-)
 create mode 100644 apps/desktop/src/components/sidebar/__tests__/sidebarDialogControllerRouting.spec.ts
 create mode 100644 apps/desktop/src/components/sidebar/sidebarDialogControllerRouting.ts

diff --git a/apps/desktop/src/components/sidebar/SidebarTreeRuntimeHost.vue b/apps/desktop/src/components/sidebar/SidebarTreeRuntimeHost.vue
index ea594e1fa5..a26102a200 100644
--- a/apps/desktop/src/components/sidebar/SidebarTreeRuntimeHost.vue
+++ b/apps/desktop/src/components/sidebar/SidebarTreeRuntimeHost.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, watch, onBeforeUnmount, inject, reactive, shallowRef } from "vue";
+import { createRoutedSidebarDialogController } from "./sidebarDialogControllerRouting";
 import { useSqlHighlighter } from "@/composables/useSqlHighlighter";
 import { useSidebarDataOpenRuntime } from "@/composables/useSidebarDataOpenRuntime";
 import { useSidebarConnectionMutationRuntime } from "@/composables/useSidebarConnectionMutationRuntime";
@@ -404,14 +405,15 @@ function routeTreeItemDialogController() {
   const controller = getTreeItemDialogController();
   const target = createSidebarActionTarget(activeNode.value);
   sidebarFormTarget.value = target;
-  const routedController = reactive<Record<string, any>>({ ...controller, node: target });
-  for (const [key, value] of Object.entries(controller)) {
-    if (typeof value !== "function") continue;
-    routedController[key] = (...args: unknown[]) => {
-      activateActionTarget(target);
-      return value(...args);
-    };
-  }
+  const routedController = createRoutedSidebarDialogController(controller, {
+    node: target,
+    wrapAction: (action) => {
+      return (...args: unknown[]) => {
+        activateActionTarget(target);
+        return action(...args);
+      };
+    },
+  });
   routedController.pasteTableDataCopySupported = pasteTableDataCopySupported.value;
   routedController.canSetCreateDatabaseCharset = canSetCreateDatabaseCharset.value;
   routedController.canEditDatabaseCharsetCollation = canEditDatabaseCharsetCollation.value;
diff --git a/apps/desktop/src/components/sidebar/__tests__/sidebarDialogControllerRouting.spec.ts b/apps/desktop/src/components/sidebar/__tests__/sidebarDialogControllerRouting.spec.ts
new file mode 100644
index 0000000000..7f92204e23
--- /dev/null
+++ b/apps/desktop/src/components/sidebar/__tests__/sidebarDialogControllerRouting.spec.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { reactive, ref, toRefs } from "vue";
+import { createRoutedSidebarDialogController } from "@/components/sidebar/sidebarDialogControllerRouting";
+
+describe("createRoutedSidebarDialogController", () => {
+  it("keeps dialog open flags linked to the shared module refs", () => {
+    const showCreateDatabaseDialog = ref(false);
+    const createDatabaseName = ref("");
+    const controller = reactive({
+      showCreateDatabaseDialog,
+      createDatabaseName,
+      confirmCreateDatabase: () => "ok",
+    });
+
+    let wrappedCalls = 0;
+    const routed = createRoutedSidebarDialogController(controller, {
+      node: { id: "connection:1" },
+      wrapAction: (action) => {
+        return (...args) => {
+          wrappedCalls += 1;
+          return action(...args);
+        };
+      },
+    });
+
+    const { showCreateDatabaseDialog: dialogOpen, createDatabaseName: dialogName } = toRefs(routed);
+
+    showCreateDatabaseDialog.value = true;
+    expect(dialogOpen.value).toBe(true);
+
+    dialogOpen.value = false;
+    expect(showCreateDatabaseDialog.value).toBe(false);
+
+    dialogName.value = "analytics";
+    expect(createDatabaseName.value).toBe("analytics");
+
+    expect(routed.confirmCreateDatabase()).toBe("ok");
+    expect(wrappedCalls).toBe(1);
+    expect(routed.node).toEqual({ id: "connection:1" });
+  });
+
+  it("does not leave shared open flags stuck after a disconnected-style cancel", () => {
+    const showCreateDatabaseDialog = ref(false);
+    const controller = reactive({ showCreateDatabaseDialog });
+
+    // Reproduce the old bug: spreading a reactive proxy unwraps refs.
+    const broken = reactive({ ...controller, node: { id: "connection:1" } });
+    showCreateDatabaseDialog.value = true;
+    expect(broken.showCreateDatabaseDialog).toBe(false);
+    broken.showCreateDatabaseDialog = false;
+    expect(showCreateDatabaseDialog.value).toBe(true);
+
+    // Fixed routing keeps cancel and open in sync.
+    const routed = createRoutedSidebarDialogController(controller, {
+      node: { id: "connection:1" },
+      wrapAction: (action) => action,
+    });
+    showCreateDatabaseDialog.value = true;
+    expect(routed.showCreateDatabaseDialog).toBe(true);
+    routed.showCreateDatabaseDialog = false;
+    expect(showCreateDatabaseDialog.value).toBe(false);
+  });
+});
diff --git a/apps/desktop/src/components/sidebar/sidebarDialogControllerRouting.ts b/apps/desktop/src/components/sidebar/sidebarDialogControllerRouting.ts
new file mode 100644
index 0000000000..591a729823
--- /dev/null
+++ b/apps/desktop/src/components/sidebar/sidebarDialogControllerRouting.ts
@@ -0,0 +1,29 @@
+import { reactive, toRaw } from "vue";
+
+/**
+ * Build a per-open dialog controller without unwrapping shared dialog refs.
+ *
+ * Spreading a reactive controller (`{ ...controller }`) unwraps nested refs into
+ * plain booleans. The dialog UI then mutates a disconnected copy, while actions
+ * still write the module-level refs — so cancel leaves `showCreateDatabaseDialog`
+ * stuck `true`, and the next sidebar right-click remounts an already-open dialog.
+ */
+export function createRoutedSidebarDialogController(
+  controller: Record<string, unknown>,
+  options: {
+    node: unknown;
+    wrapAction: (action: (...args: unknown[]) => unknown) => (...args: unknown[]) => unknown;
+  },
+): Record<string, any> {
+  const routedController = reactive<Record<string, any>>({});
+  for (const [key, value] of Object.entries(toRaw(controller))) {
+    if (key === "node") continue;
+    if (typeof value === "function") {
+      routedController[key] = options.wrapAction(value as (...args: unknown[]) => unknown);
+      continue;
+    }
+    routedController[key] = value;
+  }
+  routedController.node = options.node;
+  return routedController;
+}
diff --git a/packages/app-tests/sidebarDialogRouting.test.ts b/packages/app-tests/sidebarDialogRouting.test.ts
index c9deafde21..5116d6a25e 100644
--- a/packages/app-tests/sidebarDialogRouting.test.ts
+++ b/packages/app-tests/sidebarDialogRouting.test.ts
@@ -40,6 +40,11 @@ test("remaining form dialogs render once at tree level and keep confirm/cancel b
   assert.match(dialogHost, /@click="confirmPasteTable"/);
 });
 
+test("dialog controller routing preserves shared open-flag refs instead of spreading them", () => {
+  assert.match(runtimeHost, /createRoutedSidebarDialogController\(/);
+  assert.doesNotMatch(runtimeHost, /reactive<Record<string, any>>\(\{ \.\.\.controller/);
+});
+
 test("saved object dialogs refresh the immutable active target", () => {
   assert.match(connectionTree, /<SidebarObjectSourceDialog[\s\S]*?@saved="refreshSidebarActionTarget"/);
   assert.match(connectionTree, /<InstallExtensionDialog[\s\S]*?@close="refreshSidebarActionTarget"/);
diff --git a/packages/app-tests/sidebarMutationRuntime.test.ts b/packages/app-tests/sidebarMutationRuntime.test.ts
index 0ee9272e8a..486564d544 100644
--- a/packages/app-tests/sidebarMutationRuntime.test.ts
+++ b/packages/app-tests/sidebarMutationRuntime.test.ts
@@ -57,5 +57,5 @@ test("menu and dialog mutations resolve immutable accepted targets", () => {
   assert.match(runtimeHost, /activateActionTarget\(target\)/);
   assert.match(runtimeHost, /findSidebarActionTarget\(connectionStore\.treeNodes, target\) \?\? target/);
   assert.match(runtimeHost, /routedRequest\.confirm = async \(\) => \{[\s\S]*?activateActionTarget\(target\)/);
-  assert.match(runtimeHost, /routedController\[key\] = \(\.\.\.args: unknown\[\]\) => \{[\s\S]*?activateActionTarget\(target\)/);
+  assert.match(runtimeHost, /createRoutedSidebarDialogController\(controller, \{[\s\S]*?wrapAction: \(action\) => \{[\s\S]*?activateActionTarget\(target\)/);
 });