Skip to content

[Feature]: Create a Visual Code Diff Viewer #87

Description

@harmeetsingh11

Description

Implement a feature that visually displays the differences between the original and refactored code, similar to GitHub's diff viewer.

Details:

  • Overview: Enhance the user interface to include a visual code diff viewer. This will allow users to easily see the changes made during the refactoring process by highlighting the differences between the original and refactored code.

  • Requirements:

    • Add a new section in the UI to display the code diff.
    • Use a diff library to compute the differences between the original and refactored code.
    • Render the diff output in a visually appealing and easy-to-understand format, similar to GitHub's diff viewer.
    • Ensure that additions, deletions, and modifications are clearly highlighted with appropriate colors and symbols.
    • Add the ability to toggle between the diff view and the original/refactored code view.

Justification

  • Improves user experience by providing a clear visual representation of code changes.
  • Helps users understand the modifications made during the refactoring process.
  • Makes it easier to identify and review changes, especially in large codebases.

Implementation Details (optional)

No response

Screenshots

No response

Checklist

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions