[Feature]: Create a Visual Code Diff Viewer

[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

• [X] I have starred the repository
• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I agree to follow this project's Code of Conduct
• [ ] I am willing to work on this issue (optional)

[github-actions[bot]]

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.