support open browse path

src/App.vue

@@ -27,6 +27,8 @@ const {
   openProfileError,
   openBrowserProfile,
   page,
+  pickExecutablePath,
+  pickUserDataPath,
   profileSortKey,
   refreshAll,
   savingConfig,
@@ -115,17 +117,35 @@ const {
                 </label>
                 <label class="field-group">
                   <span>Executable Path</span>
-                  <input
-                    v-model="createConfigForm.executablePath"
-                    placeholder="C:\Program Files\...\chrome.exe"
-                  />
+                  <div class="path-input-row">
+                    <input
+                      v-model="createConfigForm.executablePath"
+                      placeholder="C:\Program Files\...\chrome.exe"
+                    />
+                    <button
+                      class="secondary-button"
+                      type="button"
+                      @click="pickExecutablePath"
+                    >
+                      Browse File
+                    </button>
+                  </div>
                 </label>
                 <label class="field-group field-span">
                   <span>User Data Path</span>
-                  <input
-                    v-model="createConfigForm.userDataPath"
-                    placeholder="C:\Users\...\User Data"
-                  />
+                  <div class="path-input-row">
+                    <input
+                      v-model="createConfigForm.userDataPath"
+                      placeholder="C:\Users\...\User Data"
+                    />
+                    <button
+                      class="secondary-button"
+                      type="button"
+                      @click="pickUserDataPath"
+                    >
+                      Browse Folder
+                    </button>
+                  </div>
                 </label>
               </div>
               <div class="config-form-actions">

src/features/browser-assistant/useBrowserAssistant.ts

@@ -1,5 +1,6 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
 
 import { sortBookmarks, sortExtensions, sortProfiles } from "./sort";
 import type {
@@ -179,6 +180,34 @@ export function useBrowserAssistant() {
     }
   }
 
+  async function pickExecutablePath() {
+    const selected = await open({
+      multiple: false,
+      directory: false,
+      filters: [
+        {
+          name: "Executable",
+          extensions: ["exe"],
+        },
+      ],
+    });
+
+    if (typeof selected === "string") {
+      createConfigForm.value.executablePath = selected;
+    }
+  }
+
+  async function pickUserDataPath() {
+    const selected = await open({
+      multiple: false,
+      directory: true,
+    });
+
+    if (typeof selected === "string") {
+      createConfigForm.value.userDataPath = selected;
+    }
+  }
+
   function isDeletingConfig(configId: string) {
     return deletingConfigId.value === configId;
   }
@@ -289,6 +318,8 @@ export function useBrowserAssistant() {
     openProfileError,
     openBrowserProfile,
     page,
+    pickExecutablePath,
+    pickUserDataPath,
     profileSortKey,
     refreshAll,
     savingConfig,

src/styles.css

@@ -357,6 +357,12 @@ button {
   gap: 6px;
 }
 
+.path-input-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+}
+
 .field-group span,
 .config-label {
   color: var(--muted);
@@ -390,6 +396,7 @@ button {
 }
 
 .primary-button,
+.secondary-button,
 .danger-button {
   padding: 9px 14px;
   border-radius: 12px;
@@ -403,6 +410,12 @@ button {
   color: #fff;
 }
 
+.secondary-button {
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
+  color: var(--text);
+}
+
 .danger-button {
   border: 1px solid rgba(239, 68, 68, 0.18);
   background: rgba(254, 242, 242, 0.96);
@@ -410,6 +423,7 @@ button {
 }
 
 .primary-button:disabled,
+.secondary-button:disabled,
 .danger-button:disabled {
   cursor: default;
   opacity: 0.72;