Split workspace into electron and ui packages

packages/ui/src/components/advanced-settings-modal.tsx

@@ -0,0 +1,60 @@
+import { Component } from "solid-js"
+import { Dialog } from "@kobalte/core/dialog"
+import OpenCodeBinarySelector from "./opencode-binary-selector"
+import EnvironmentVariablesEditor from "./environment-variables-editor"
+
+interface AdvancedSettingsModalProps {
+  open: boolean
+  onClose: () => void
+  selectedBinary: string
+  onBinaryChange: (binary: string) => void
+  isLoading?: boolean
+}
+
+const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) => {
+  return (
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
+            <header class="px-6 py-4 border-b" style={{ "border-color": "var(--border-base)" }}>
+              <Dialog.Title class="text-xl font-semibold text-primary">Advanced Settings</Dialog.Title>
+            </header>
+
+            <div class="flex-1 overflow-y-auto p-6 space-y-6">
+              <OpenCodeBinarySelector
+                selectedBinary={props.selectedBinary}
+                onBinaryChange={props.onBinaryChange}
+                disabled={Boolean(props.isLoading)}
+                isVisible={props.open}
+              />
+
+              <div class="panel">
+                <div class="panel-header">
+                  <h3 class="panel-title">Environment Variables</h3>
+                  <p class="panel-subtitle">Applied whenever a new OpenCode instance starts</p>
+                </div>
+                <div class="panel-body">
+                  <EnvironmentVariablesEditor disabled={Boolean(props.isLoading)} />
+                </div>
+              </div>
+            </div>
+
+            <div class="px-6 py-4 border-t flex justify-end" style={{ "border-color": "var(--border-base)" }}>
+              <button
+                type="button"
+                class="selector-button selector-button-secondary"
+                onClick={props.onClose}
+              >
+                Close
+              </button>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+export default AdvancedSettingsModal