Created functionality for sidebar (diffbar) - Using the logic of the projectlist-sidebar.

Created diff/route.ts to handle GET, run oasdiff and return JSON.

Created DiffContent.tsx - fetches the data, compares the branches and show the data.
- Finds the fromBranch based of baseRef and toBranch is chosen based id
- Handles if same branch is chosen in to and from - non comparable
- Components to display data.

baseRef to Version if a PR exist for that branch

Author: oscarlund121

package-lock.json

@@ -57,9 +57,9 @@
     "@types/node": "^24.0.8",
     "@types/nprogress": "^0.2.3",
     "@types/pg": "^8.15.2",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
     "@typescript-eslint/parser": "^8.31.1",
     "eslint": "^9.30.0",
     "eslint-config-next": "^15.3.4",

package.json

@@ -0,0 +1,56 @@
+  import { NextRequest, NextResponse } from "next/server"
+import { session, userGitHubClient } from "@/composition"
+import { makeUnauthenticatedAPIErrorResponse } from "@/common"
+import { execSync } from "child_process"
+
+interface GetDiffParams {
+  owner: string
+  repository: string
+  path: [string]
+}
+
+export async function GET(req: NextRequest, { params }: { params: Promise<GetDiffParams> }) {
+  const isAuthenticated = await session.getIsAuthenticated()
+  if (!isAuthenticated) {
+    return makeUnauthenticatedAPIErrorResponse()
+  }
+
+  const { path: paramsPath, owner, repository } = await params
+  const path = paramsPath.join("/")
+  
+  const fromRef = req.nextUrl.searchParams.get("from")
+  const toRef = req.nextUrl.searchParams.get("to")
+  
+  if (!fromRef || !toRef) {
+    return NextResponse.json({ error: "Missing from/to parameters" }, { status: 400 })
+  }
+
+  const fullRepositoryName = repository + "-openapi"
+
+  const spec1 = await userGitHubClient.getRepositoryContent({
+    repositoryOwner: owner,
+    repositoryName: fullRepositoryName,
+    path: path,
+    ref: fromRef
+  })
+
+  const spec2 = await userGitHubClient.getRepositoryContent({
+    repositoryOwner: owner,
+    repositoryName: fullRepositoryName,
+    path: path, 
+    ref: toRef
+  })
+
+  const result = execSync(`oasdiff changelog --format json "${spec1.downloadURL}" "${spec2.downloadURL}"`, { encoding: 'utf8' })
+  
+  console.log(result)
+
+  
+  const diffData = JSON.parse(result)
+ 
+  return NextResponse.json({
+    from: fromRef,
+    to: toRef,
+    changes: diffData 
+  })
+}

src/app/api/diff/[owner]/[repository]/[...path]/route.ts

@@ -12,13 +12,21 @@ const SpacedList = ({
 }) => {
   return (
     <List disablePadding sx={{ ...sx }}>
-      {React.Children.map(children, (child, idx) => (
-        <Box sx={{
-          marginBottom: idx < React.Children.count(children) - 1 ? itemSpacing : 0
-        }}>
-          {child}
-        </Box>
-      ))}
+      {React.Children.map(children, (child, idx) => {
+        const baseKey = (child as any)?.key ?? "idx";
+        const key = `${String(baseKey)}-${idx}`;
+        return (
+          <Box
+            key={key}
+            sx={{
+              marginBottom:
+                idx < React.Children.count(children) - 1 ? itemSpacing : 0,
+            }}
+          >
+            {child}
+          </Box>
+        );
+      })}
     </List>
   )
 }

src/common/ui/SpacedList.tsx

@@ -140,7 +140,8 @@ export default class GitHubProjectDataSource implements IProjectDataSource {
       name: ref.name,
       specifications: specifications,
       url: `https://github.com/${ownerName}/${repositoryName}/tree/${ref.name}`,
-      isDefault: isDefaultRef || false
+      isDefault: isDefaultRef || false,
+      baseRef: ref.baseRef,
     }
   }