feat(desktop): improve side-by-side diff view UI and fix content reset

[Kitenite]

Summary

• Simplify diff view mode toggle to a single button that switches between inline and side-by-side modes
• Fix diff content baseline update to trigger when any diff data exists (not just when modified content exists)
• Reset diff content refs when navigating to a different file to prevent stale content
• Update close button hover styles from destructive to primary color

Test plan

• Open a file with diff view and toggle between inline and side-by-side modes
• Navigate between different files and verify diff content updates correctly
• Verify close buttons in ports list show primary color on hover

Summary by CodeRabbit

Release Notes

• New Features

  • Added toggle to switch between side-by-side and inline diff view modes in the file viewer toolbar.
  • Added expand and close controls to the sidebar header.

• Improvements

  • Enhanced diff viewer to properly refresh when file path or view mode changes.

• Style

  • Updated hover text colors for close button controls.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The changes implement a new diff view mode toggle system allowing users to switch between side-by-side and inline diff views in the file viewer. Additionally, UI controls for expanding and closing the changes sidebar are added, along with styling updates to port-related components and improved diff editor mounting behavior.

Changes

Cohort / File(s)	Summary
Port Component Styling MergedPortBadge.tsx, WorkspacePortGroup.tsx	Updated hover text color from text-destructive to text-primary on close buttons (cosmetic styling change)
Diff Editor Enhancement DiffViewer.tsx	Added dynamic key to force remount on filePath or viewMode changes; injected useInlineViewWhenSpaceIsLimited: false option to override inline view behavior
Diff View Mode System FileViewerPane.tsx, FileViewerContent.tsx, FileViewerToolbar.tsx	Removed showEditableBadge logic and wired useChangesStore to enable diffViewMode control; introduced new diffViewMode prop threaded through component hierarchy; added diff view toggle UI in toolbar to switch between side-by-side and inline views
File Content Hook useFileContent.ts	Changed conditional from diffData?.modified && !isDirty to diffData && !isDirty, removing explicit check for modified property existence
Sidebar UI Controls ChangesHeader.tsx	Added expand and close sidebar buttons with tooltips; integrated useSidebarStore to enable sidebar toggling

Sequence Diagram

sequenceDiagram
    actor User
    participant FileViewerToolbar
    participant FileViewerPane
    participant FileViewerContent
    participant DiffViewer
    participant useChangesStore

    User->>FileViewerToolbar: Click diff view mode toggle
    FileViewerToolbar->>FileViewerPane: onDiffViewModeChange(newMode)
    FileViewerPane->>useChangesStore: setDiffViewMode(newMode)
    useChangesStore-->>FileViewerPane: Store updated
    FileViewerPane->>FileViewerContent: diffViewMode prop updated
    FileViewerContent->>DiffViewer: viewMode={diffViewMode}
    DiffViewer-->>DiffViewer: Dynamic key triggers remount
    DiffViewer-->>User: Renders with new diff layout

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• superset-sh/superset#387: Modifies the same DiffViewer.tsx component for editor behavior and options.
• superset-sh/superset#444: Also changes DiffViewer.tsx, including loading UI and editor configuration.
• superset-sh/superset#450: Modifies the sidebar store API that is integrated in the ChangesHeader component.

Poem

🐰 The diff view dances left and right,
Side-by-side or inline, what a sight!
Toggles flow through components with care,
While sidebars expand into the air,
Port badges now blush a calming hue,
ding! Another control flow breakthrough! ✨

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ⚠️ Neon database branch
• ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉