From ecdc86a478d863cdaeea26c9245f733c8efa3486 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 6 May 2026 18:51:53 +0800
Subject: [PATCH] feat(connection): add file picker for SQLite/DuckDB and fix
 default host (#121)

Add a browse button next to the file path input for SQLite and DuckDB
connections, allowing users to select database files via system dialog
instead of manually typing paths. Clear the default host value when
switching to file-based database types.
---
 .../connection/ConnectionDialog.vue           | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/connection/ConnectionDialog.vue b/src/components/connection/ConnectionDialog.vue
index 7e8a711aee..95e58301f8 100644
--- a/src/components/connection/ConnectionDialog.vue
+++ b/src/components/connection/ConnectionDialog.vue
@@ -214,6 +214,9 @@ function applyProfile(val: string, preserveConnectionFields = false) {
     form.value.port = profile.port;
     form.value.username = profile.user;
     form.value.url_params = profile.urlParams || "";
+    if (profile.type === "sqlite" || profile.type === "duckdb") {
+      form.value.host = "";
+    }
   }
 }
 
@@ -514,6 +517,24 @@ async function browseSshKeyPath() {
     }
   }
 }
+
+async function browseDbFilePath() {
+  if (isTauriRuntime()) {
+    const { open } = await import("@tauri-apps/plugin-dialog");
+    const filters =
+      form.value.db_type === "duckdb"
+        ? [{ name: "DuckDB", extensions: ["duckdb", "db"] }]
+        : [{ name: "SQLite", extensions: ["db", "sqlite", "sqlite3"] }];
+    const selected = await open({
+      title: "Select Database File",
+      multiple: false,
+      filters,
+    });
+    if (selected && typeof selected === "string") {
+      form.value.host = selected;
+    }
+  }
+}
 </script>
 
 <template>
@@ -687,7 +708,17 @@ async function browseSshKeyPath() {
                 <template v-if="form.db_type === 'sqlite' || form.db_type === 'duckdb'">
                   <div class="grid grid-cols-4 items-center gap-4">
                     <Label class="text-right">{{ t("connection.filePath") }}</Label>
-                    <Input v-model="form.host" class="col-span-3" placeholder="/path/to/database.db" />
+                    <div class="col-span-3 flex items-center gap-1">
+                      <Input v-model="form.host" class="flex-1" placeholder="/path/to/database.db" />
+                      <Tooltip>
+                        <TooltipTrigger as-child>
+                          <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="browseDbFilePath">
+                            <FolderOpen class="h-4 w-4" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>{{ t("connection.sshKeyPathBrowse") }}</TooltipContent>
+                      </Tooltip>
+                    </div>
                   </div>
                 </template>