Created functionality for sidebar (diffbar) using the logic of the …

[oscarlund121]

…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

Created a sidebar for the changes called Diffbar. It's main purpose is to show changes in the API on projects connected to Framna Docs.
It uses most of the same logic as the projectlist-sidebar to keep consistency in the project.
Divided DiffContent in several component, also trying to keep consistency by using a setup simular to the projectlist.

Description

Diffbar:

• The purpose of the function is to compare two branches and see which changes has been added and/or removed between two branches. By running 'oasdiff changelog --format json' we're able to return parsed JSON and show the comparisons.
• DiffContent fetches the data and sets up the comparison
  'const res = await fetch(/api/diff/${project.owner}/${project.name}/${specification.id}?from=${fromBranch}&to=${toBranch});'
• We can map through the API and choose what information we'd like shown. In this case it's path and descriptive text.
• MUI material and local themes have been used for styling of the different components

UPS!
Some logic still missing. As of now it shows all the changes and differences between the two chosen branches, not just the new changes from main to the chosen branch

• Talk to Ulrik for info :-)

Motivation and Context

Seeing changes in the API

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

[Copilot]

Pull Request Overview

This PR implements a new "Diffbar" sidebar feature that displays API changes between branches by comparing OpenAPI specifications using oasdiff. The functionality mirrors the existing project list sidebar architecture for consistency.

Key Changes:

• Added a tertiary sidebar (Diffbar) with toggle functionality via Cmd/Ctrl+K keyboard shortcut
• Created API endpoint /api/diff/[owner]/[repository]/[...path] to execute oasdiff and return JSON changelog
• Extended data model to include baseRef property for tracking PR base branches

Reviewed Changes

Copilot reviewed 21 out of 23 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
src/features/sidebar/view/internal/tertiary/Container.tsx	New container component for the diff sidebar
src/features/sidebar/view/internal/secondary/Container.tsx	Updated to support offset/transitions for the diff sidebar
src/features/sidebar/view/internal/diffbar/components/*.tsx	Components for rendering diff lists, items, dialogs, and headers
src/features/sidebar/view/internal/diffbar/DiffContent.tsx	Main logic for fetching and displaying API diffs
src/features/sidebar/view/internal/ClientSplitView.tsx	Integration of diff sidebar with keyboard shortcut
src/features/sidebar/view/SplitView.tsx	Added DiffContent to the split view
src/features/sidebar/view/SecondarySplitHeader.tsx	Added toggle button for diff sidebar
src/features/sidebar/data/useDiffbarOpen.ts	Hook for managing diff sidebar open state
src/features/projects/domain/*.ts	Added baseRef property to version and repository types
src/features/projects/data/*.ts	Extended GraphQL queries to fetch PR base references
src/app/api/diff/[owner]/[repository]/[...path]/route.ts	API endpoint executing oasdiff to compare specs
package.json	Reordered dependencies (no functional change)

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}