Enable native dialogs across shells

packages/ui/src/components/folder-selection-view.tsx

@@ -4,6 +4,7 @@ import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
+import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -21,6 +22,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
+  const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
  
   const folders = () => recentFolders()
@@ -78,7 +80,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
     if (isBrowseShortcut) {
       e.preventDefault()
-      handleBrowse()
+      void handleBrowse()
       return
     }
 
@@ -172,9 +174,20 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     props.onSelectFolder(path, selectedBinary())
   }
  
-  function handleBrowse() {
+  async function handleBrowse() {
     if (isLoading()) return
     setFocusMode("new")
+    if (nativeDialogsAvailable) {
+      const fallbackPath = folders()[0]?.path
+      const selected = await openNativeFolderDialog({
+        title: "Select Workspace",
+        defaultPath: fallbackPath,
+      })
+      if (selected) {
+        handleFolderSelect(selected)
+      }
+      return
+    }
     setIsFolderBrowserOpen(true)
   }
  
@@ -313,7 +326,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
               <div class="panel-body">
                 <button
-                  onClick={handleBrowse}
+                  onClick={() => void handleBrowse()}
                   disabled={props.isLoading}
                   class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
                   onMouseEnter={() => setFocusMode("new")}

packages/ui/src/components/opencode-binary-selector.tsx

@@ -3,6 +3,7 @@ import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-so
 import { useConfig } from "../stores/preferences"
 import { serverApi } from "../lib/api-client"
 import FileSystemBrowserDialog from "./filesystem-browser-dialog"
+import { openNativeFileDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 
 interface BinaryOption {
   path: string
@@ -32,8 +33,10 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
   const [versionInfo, setVersionInfo] = createSignal<Map<string, string>>(new Map<string, string>())
   const [validatingPaths, setValidatingPaths] = createSignal<Set<string>>(new Set<string>())
   const [isBinaryBrowserOpen, setIsBinaryBrowserOpen] = createSignal(false)
-
+  const nativeDialogsAvailable = supportsNativeDialogs()
+ 
   const binaries = () => opencodeBinaries()
+
   const lastUsedBinary = () => preferences().lastUsedBinary
 
   const customBinaries = createMemo(() => binaries().filter((binary) => binary.path !== "opencode"))
@@ -128,9 +131,19 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
     }
   }
 
-  function handleBrowseBinary() {
+  async function handleBrowseBinary() {
     if (props.disabled) return
     setValidationError(null)
+    if (nativeDialogsAvailable) {
+      const selected = await openNativeFileDialog({
+        title: "Select OpenCode Binary",
+      })
+      if (selected) {
+        setCustomPath(selected)
+        void handleValidateAndAdd(selected)
+      }
+      return
+    }
     setIsBinaryBrowserOpen(true)
   }
  
@@ -245,7 +258,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
 
           <button
             type="button"
-            onClick={handleBrowseBinary}
+            onClick={() => void handleBrowseBinary()}
             disabled={props.disabled}
             class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
           >