Refactor Frontend Diff Component to Custom Implementation using json-diff-patch

[kyasbal]

Description

The current frontend diff component limits our ability to provide advanced interactions and format-specific visualizations. We need to replace the existing implementation with a custom-built component.

This refactor aims to utilize json-diff-patch to calculate diffs specifically optimized for YAML structures. By owning the component implementation, we can introduce custom user interactions, such as auto-scrolling to the next detected change, which are not currently supported.

Goals

• Replace Existing Component: Remove the current diff viewer dependency/implementation in favor of a custom solution.
• YAML-Optimized Diffing: Use json-diff-patch to compute deltas, ensuring the rendering logic effectively represents changes in a YAML format (rather than standard text line-diffs).
• Enhanced Interaction: Implement navigation features, specifically a "Scroll to Next Change" capability.

Proposed Solution

1. Dependency Integration: Add json-diff-patch to the frontend package.json.
2. Diff Logic: Implement a service or utility to convert YAML content to JSON objects, calculate the delta using json-diff-patch, and map the results back to a YAML-like visual structure.
3. UI Implementation:

• Create a new Diff Component that renders the calculated delta.
• Ensure proper highlighting of additions, deletions, and modifications.
• Add UI controls for navigating between changes.

Expected Behavior

• The diff view should visually represent the structural changes in YAML resources.
• Users should be able to click a button or use a shortcut to jump immediately to the next diff chunk in the file.
• The component should handle large YAML files performantly.

Environment

• Component Location: web/src/app/diff/
• Target Library: json-diff-patch