Enhance TraceDiff UI components

[Parship999]

Which problem is this PR solving?

• Resolves [Feature]: Enhance visual design of TraceDiff UI Components #2777

Description of the changes

• UI Enhancements:

  • Redesigned the "VS" separator with a circular badge design for clearer visual separation between traces
  • Added subtle interactive effects to provide better feedback to users
  • Improved the empty state visualization to better represent the comparison relationship
  • Added two action buttons to the empty state:
    • "Go to Search" button to help users find traces to compare
    • "Learn how to compare traces" button linking to the medium blog post about trace diffs

• Additional Changes(Non UI):

  • Added new traceDiff config section with configurable help links in default-config.tsx
  • TypeScript best practices with lowercase primitives (Number, Boolean) to lowercase (number, boolean)

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully
  • for jaeger: make lint test
  • for jaeger-ui: npm run lint and npm run test

Before:

After:

Before:

After:

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.32%. Comparing base (483d574) to head (228a504).
Report is 8 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2806   +/-   ##
=======================================
  Coverage   97.31%   97.32%           
=======================================
  Files         256      256           
  Lines        7947     7951    +4     
  Branches     2077     2078    +1     
=======================================
+ Hits         7734     7738    +4     
  Misses        213      213           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[yurishkuro]

please resolve merge conflict

[Parship999]

The chevron icon positioned in the trace title, causing it to overlap with trace content when the window was resized to smaller widths. So I moved it to flow inline with the spans count, so that it can move with the content and prevents overlap during window resizing.

[yurishkuro]

the new chevron position looks a bit confusing to me. I think top-right corner was the right position. Next to the trace title/ID it is interpreted as "select", but next to timestamp etc. it reads more like "show more details".

[Parship999]

@yurishkuro
I think now it's fine

Small Window:

Medium Window:

The changes are proper text wrapping in small windows, consistent chevron icon positioning, cean layout in both window sizes

Please review these changs. I'll push them once you confirm.

[Parship999]

@yurishkuro I had actually sent you a message earlier asking for confirmation, I was working on for the chevron icon and text wrapping in different window sizes, since you told me the new chevron position looks a bit confusing. I've attached screenshots in my last msg. The last change of chevron icon was not pushed. Would you like me to create a new PR for the change or the current chevron icon position is ok?

Current:

[yurishkuro]

I thought you added the change - please do in another PR