feat: add git-diff-style editor with unified/split toggle and full screen mode for patch editing
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 37.4k
- Forks
- 3k
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 73
Description
Feature Request
I'd like to propose adding a git-diff-style editor to the patch editing UI.
Motivation
Currently, the patch editor shows a plain code editor with no visual diff. When editing an existing patch, there's no indication of which lines were added, removed, or modified relative to the original file. This makes it difficult for users to review what changes a patch will actually apply, especially for larger files.
Suggested Behavior
- Create mode (no patch yet): Diff highlights appear as the user types — added lines in green, removed lines in red.
- Edit mode (existing patch): Highlights computed from the stored patch against the original file content on load.
- Unified/Split toggle: Button to switch between inline view (green/red line backgrounds + gutter markers) and side-by-side view (read-only original on the left, editable new content on the right).
- Full screen: Button to expand the editor to viewport size, collapsing the file tree while keeping app chrome accessible.
Implementation Notes
- Extend the
readRepoFileendpoint to return the original file content alongside the existing patch data. - Introduce a
DiffCodeEditorcomponent wrapping CodeMirror with custom decorations for inline mode, and@codemirror/mergefor split mode. - Dependencies:
diff,@types/diff,@codemirror/merge. - Edge cases: delete-type patches (no editor), large-file debounce (~150ms), mode switching preserving state, dark mode support.
Questions for Discussion
- Does the team agree with this approach, or is there a preferred direction?
- Are there any concerns with adding
@codemirror/mergeas a dependency? - Would this be a welcome contribution from a community member?
/cc @Siumauricio
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the patch editing UI and the readRepoFile endpoint. Review how create and edit modes currently load patch data, then assess the proposed DiffCodeEditor, CodeMirror merge support, full-screen behavior, and large-file handling. Done means the team has agreed on the direction and the editor supports the listed modes and edge cases with appropriate tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- backend, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100