feat(share): split diffs on wide screens

packages/enterprise/src/routes/share/[shareID].tsx

@@ -41,6 +41,9 @@ const getData = query(async (shareID) => {
     session_diff_preload: {
       [sessionID: string]: PreloadMultiFileDiffResult<any>[]
     }
+    session_diff_preload_split: {
+      [sessionID: string]: PreloadMultiFileDiffResult<any>[]
+    }
     session_status: {
       [sessionID: string]: SessionStatus
     }
@@ -62,6 +65,9 @@ const getData = query(async (shareID) => {
     session_diff_preload: {
       [share.sessionID]: [],
     },
+    session_diff_preload_split: {
+      [share.sessionID]: [],
+    },
     session_status: {
       [share.sessionID]: {
         type: "idle",
@@ -78,16 +84,28 @@ const getData = query(async (shareID) => {
         break
       case "session_diff":
         result.session_diff[share.sessionID] = item.data
-        result.session_diff_preload[share.sessionID] = await Promise.all(
-          item.data.map(async (diff) =>
-            preloadMultiFileDiff<any>({
-              oldFile: { name: diff.file, contents: diff.before },
-              newFile: { name: diff.file, contents: diff.after },
-              options: createDefaultOptions("unified"),
-              // annotations,
-            }),
-          ),
-        )
+        await Promise.all([
+          Promise.all(
+            item.data.map(async (diff) =>
+              preloadMultiFileDiff<any>({
+                oldFile: { name: diff.file, contents: diff.before },
+                newFile: { name: diff.file, contents: diff.after },
+                options: createDefaultOptions("unified"),
+                // annotations,
+              }),
+            ),
+          ).then((r) => (result.session_diff_preload[share.sessionID] = r)),
+          Promise.all(
+            item.data.map(async (diff) =>
+              preloadMultiFileDiff<any>({
+                oldFile: { name: diff.file, contents: diff.before },
+                newFile: { name: diff.file, contents: diff.after },
+                options: createDefaultOptions("split"),
+                // annotations,
+              }),
+            ),
+          ).then((r) => (result.session_diff_preload_split[share.sessionID] = r)),
+        ])
         break
       case "message":
         result.message[item.data.sessionID] = result.message[item.data.sessionID] ?? []
@@ -169,6 +187,14 @@ export default function () {
                     preloaded: preloaded.find((d) => d.newFile.name === diff.file),
                   }))
                 })
+                const splitDiffs = createMemo(() => {
+                  const diffs = data().session_diff[data().sessionID] ?? []
+                  const preloaded = data().session_diff_preload_split[data().sessionID] ?? []
+                  return diffs.map((diff) => ({
+                    ...diff,
+                    preloaded: preloaded.find((d) => d.newFile.name === diff.file),
+                  }))
+                })
 
                 const title = () => (
                   <div class="flex flex-col gap-4">
@@ -281,8 +307,9 @@ export default function () {
                           </div>
                         </div>
                         <Show when={diffs().length > 0}>
-                          <div class="relative grow pt-14 flex-1 min-h-0 border-l border-border-weak-base">
+                          <div class="@container relative grow pt-14 flex-1 min-h-0 border-l border-border-weak-base">
                             <SessionReview
+                              class="@4xl:hidden"
                               diffs={diffs()}
                               classes={{
                                 root: "pb-20",
@@ -290,6 +317,16 @@ export default function () {
                                 container: "px-6",
                               }}
                             />
+                            <SessionReview
+                              class="hidden @4xl:flex"
+                              split
+                              diffs={splitDiffs()}
+                              classes={{
+                                root: "pb-20",
+                                header: "px-6",
+                                container: "px-6",
+                              }}
+                            />
                           </div>
                         </Show>
                       </div>