wip(desktop): progress

Author: adamdotdevin

packages/desktop/src/app.tsx

@@ -1,20 +1,21 @@
 import "@/index.css"
+import { Show } from "solid-js"
 import { Router, Route, Navigate } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
 import { Font } from "@opencode-ai/ui/font"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
 import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
 import { Diff } from "@opencode-ai/ui/diff"
-import { GlobalSyncProvider } from "./context/global-sync"
+import { GlobalSyncProvider } from "@/context/global-sync"
+import { LayoutProvider } from "@/context/layout"
+import { GlobalSDKProvider } from "@/context/global-sdk"
+import { SessionProvider } from "@/context/session"
+import { NotificationProvider } from "@/context/notification"
+import { DialogProvider } from "@/context/dialog"
 import Layout from "@/pages/layout"
 import Home from "@/pages/home"
 import DirectoryLayout from "@/pages/directory-layout"
 import Session from "@/pages/session"
-import { LayoutProvider } from "./context/layout"
-import { GlobalSDKProvider } from "./context/global-sdk"
-import { SessionProvider } from "./context/session"
-import { Show } from "solid-js"
-import { NotificationProvider } from "./context/notification"
 
 declare global {
   interface Window {
@@ -38,27 +39,29 @@ export function App() {
         <GlobalSDKProvider url={url}>
           <GlobalSyncProvider>
             <LayoutProvider>
-              <NotificationProvider>
-                <MetaProvider>
-                  <Font />
-                  <Router root={Layout}>
-                    <Route path="/" component={Home} />
-                    <Route path="/:dir" component={DirectoryLayout}>
-                      <Route path="/" component={() => <Navigate href="session" />} />
-                      <Route
-                        path="/session/:id?"
-                        component={(p) => (
-                          <Show when={p.params.id || true} keyed>
-                            <SessionProvider>
-                              <Session />
-                            </SessionProvider>
-                          </Show>
-                        )}
-                      />
-                    </Route>
-                  </Router>
-                </MetaProvider>
-              </NotificationProvider>
+              <DialogProvider>
+                <NotificationProvider>
+                  <MetaProvider>
+                    <Font />
+                    <Router root={Layout}>
+                      <Route path="/" component={Home} />
+                      <Route path="/:dir" component={DirectoryLayout}>
+                        <Route path="/" component={() => <Navigate href="session" />} />
+                        <Route
+                          path="/session/:id?"
+                          component={(p) => (
+                            <Show when={p.params.id || true} keyed>
+                              <SessionProvider>
+                                <Session />
+                              </SessionProvider>
+                            </Show>
+                          )}
+                        />
+                      </Route>
+                    </Router>
+                  </MetaProvider>
+                </NotificationProvider>
+              </DialogProvider>
             </LayoutProvider>
           </GlobalSyncProvider>
         </GlobalSDKProvider>

packages/desktop/src/pages/directory-layout.tsx

@@ -6,7 +6,7 @@ import { LocalProvider } from "@/context/local"
 import { base64Decode } from "@opencode-ai/util/encode"
 import { DataProvider } from "@opencode-ai/ui/context"
 import { iife } from "@opencode-ai/util/iife"
-import { DialogProvider, DialogRoot } from "@/context/dialog"
+import { DialogRoot } from "@/context/dialog"
 
 export default function Layout(props: ParentProps) {
   const params = useParams()
@@ -22,9 +22,7 @@ export default function Layout(props: ParentProps) {
             return (
               <DataProvider data={sync.data} directory={directory()}>
                 <LocalProvider>
-                  <DialogProvider>
-                    <DialogRoot>{props.children}</DialogRoot>
-                  </DialogProvider>
+                  <DialogRoot>{props.children}</DialogRoot>
                 </LocalProvider>
               </DataProvider>
             )

packages/desktop/src/pages/layout.tsx

@@ -33,6 +33,8 @@ import { useGlobalSDK } from "@/context/global-sdk"
 import { useNotification } from "@/context/notification"
 import { Binary } from "@opencode-ai/util/binary"
 import { Header } from "@/components/header"
+import { useDialog } from "@/context/dialog"
+import { DialogSelectProvider } from "@/components/dialog-select-provider"
 
 export default function Layout(props: ParentProps) {
   const [store, setStore] = createStore({
@@ -48,6 +50,11 @@ export default function Layout(props: ParentProps) {
   const notification = useNotification()
   const navigate = useNavigate()
   const providers = useProviders()
+  const dialog = useDialog()
+
+  function connectProvider() {
+    dialog.replace(() => <DialogSelectProvider />)
+  }
 
   function navigateToProject(directory: string | undefined) {
     if (!directory) return
@@ -488,7 +495,7 @@ export default function Layout(props: ParentProps) {
                       class="flex w-full text-left justify-start text-12-medium text-text-strong stroke-[1.5px] rounded-lg rounded-t-none shadow-none border-t border-border-weak-base pl-2.25 pb-px"
                       size="large"
                       icon="plus"
-                      // onClick={connectProvider}
+                      onClick={connectProvider}
                     >
                       <Show when={layout.sidebar.opened()}>Connect provider</Show>
                     </Button>
@@ -502,7 +509,7 @@ export default function Layout(props: ParentProps) {
                     variant="ghost"
                     size="large"
                     icon="plus"
-                    // onClick={connectProvider}
+                    onClick={connectProvider}
                   >
                     <Show when={layout.sidebar.opened()}>Connect provider</Show>
                   </Button>

packages/ui/src/components/dialog.tsx

@@ -14,7 +14,7 @@ export interface DialogProps extends DialogRootProps {
   classList?: ComponentProps<"div">["classList"]
 }
 
-export function DialogRoot(props: DialogProps) {
+function DialogRoot(props: DialogProps) {
   let trigger!: HTMLElement
   const [local, others] = splitProps(props, ["trigger", "class", "classList", "children"])