fix: use diff context instead of prop drilling

Author: adamdotdevin

packages/desktop/src/index.tsx

@@ -6,6 +6,8 @@ import { MetaProvider } from "@solidjs/meta"
 import { Font } from "@opencode-ai/ui/font"
 import { Favicon } from "@opencode-ai/ui/favicon"
 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, useGlobalSync } from "./context/global-sync"
 import Layout from "@/pages/layout"
 import DirectoryLayout from "@/pages/directory-layout"
@@ -35,38 +37,40 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 render(
   () => (
     <MarkedProvider>
-      <GlobalSDKProvider url={url}>
-        <GlobalSyncProvider>
-          <LayoutProvider>
-            <MetaProvider>
-              <Font />
-              <Router root={Layout}>
-                <Route
-                  path="/"
-                  component={() => {
-                    const globalSync = useGlobalSync()
-                    const slug = createMemo(() => base64Encode(globalSync.data.defaultProject!.worktree))
-                    return <Navigate href={`${slug()}/session`} />
-                  }}
-                />
-                <Route path="/:dir" component={DirectoryLayout}>
-                  <Route path="/" component={() => <Navigate href="session" />} />
+      <DiffComponentProvider component={Diff}>
+        <GlobalSDKProvider url={url}>
+          <GlobalSyncProvider>
+            <LayoutProvider>
+              <MetaProvider>
+                <Font />
+                <Router root={Layout}>
                   <Route
-                    path="/session/:id?"
-                    component={(p) => (
-                      <Show when={p.params.id || true} keyed>
-                        <SessionProvider>
-                          <Session />
-                        </SessionProvider>
-                      </Show>
-                    )}
+                    path="/"
+                    component={() => {
+                      const globalSync = useGlobalSync()
+                      const slug = createMemo(() => base64Encode(globalSync.data.defaultProject!.worktree))
+                      return <Navigate href={`${slug()}/session`} />
+                    }}
                   />
-                </Route>
-              </Router>
-            </MetaProvider>
-          </LayoutProvider>
-        </GlobalSyncProvider>
-      </GlobalSDKProvider>
+                  <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>
+            </LayoutProvider>
+          </GlobalSyncProvider>
+        </GlobalSDKProvider>
+      </DiffComponentProvider>
     </MarkedProvider>
   ),
   root!,

packages/desktop/src/pages/session.tsx

@@ -30,7 +30,6 @@ import { useSync } from "@/context/sync"
 import { useSession } from "@/context/session"
 import { useLayout } from "@/context/layout"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { Diff } from "@opencode-ai/ui/diff"
 import { Terminal } from "@/components/terminal"
 
 export default function Page() {
@@ -282,7 +281,7 @@ export default function Page() {
   const wide = createMemo(() => layout.review.state() === "tab" || !session.diffs().length)
 
   return (
-    <div class="relative bg-background-base size-full overflow-x-hidden flex flex-col items-start">
+    <div class="relative bg-background-base size-full overflow-x-hidden flex flex-col">
       <div class="min-h-0 grow w-full">
         <DragDropProvider
           onDragStart={handleDragStart}
@@ -389,7 +388,6 @@ export default function Page() {
                                   ? "pr-6 pl-18"
                                   : "px-6"),
                           }}
-                          diffComponent={Diff}
                         />
                       </div>
                     </Match>
@@ -438,7 +436,6 @@ export default function Page() {
                         container: "px-6",
                       }}
                       diffs={session.diffs()}
-                      diffComponent={Diff}
                       actions={
                         <Tooltip value="Open in tab">
                           <IconButton
@@ -470,7 +467,6 @@ export default function Page() {
                       container: "px-6",
                     }}
                     diffs={session.diffs()}
-                    diffComponent={Diff}
                     split
                   />
                 </div>