Skip to content

feat: Improve diff viewer readability by highlighting header lines#38

Closed
shatrughantwt wants to merge 3 commits intomasterfrom
feat-improve-diff-viewer-ux
Closed

feat: Improve diff viewer readability by highlighting header lines#38
shatrughantwt wants to merge 3 commits intomasterfrom
feat-improve-diff-viewer-ux

Conversation

@shatrughantwt
Copy link
Contributor

Description

Fixes #36

This PR improves the readability of the TUI diff viewer by visually highlighting diff header lines.

What Changed

  • Added a lightweight styleDiffContent() preprocessing step.
  • Detects and styles lines starting with:
    • diff --git
    • index
    • ---
    • +++
    • @@
  • Applies bold BrightMagenta styling for clearer visual distinction.
  • Integrates styling before passing content to the viewport.

Why

Previously, diff headers blended with metadata and content lines, making multi-file diffs harder to scan.

This change improves visual hierarchy and makes it easier to quickly identify:

  • File boundaries
  • Hunk markers
  • Metadata vs. content changes

@shatrughantwt shatrughantwt requested a review from bakayu February 12, 2026 13:28
@bakayu
Copy link
Member

bakayu commented Feb 12, 2026

@shatrughantwt since this involves visual changes to the app, can you share screenshots/video recordings of how it is working on your end so that I can confirm that it is the same same and intended behavior as mine as I test it on my machine?
Thank you.

@shatrughantwt
Copy link
Contributor Author

shatrughantwt commented Feb 12, 2026

@shatrughantwt since this involves visual changes to the app, can you share screenshots/video recordings of how it is working on your end so that I can confirm that it is the same same and intended behavior as mine as I test it on my machine? Thank you.

  • Multiple file diffs
  • Large diffs (~150+ lines)
  • Commit diffs
  • Stash diffs
Screenshot from 2026-02-12 21-56-09 Screenshot from 2026-02-12 21-57-38 Screenshot from 2026-02-12 22-01-04 Screenshot from 2026-02-12 22-04-49

@shatrughantwt
Copy link
Contributor Author

would you prefer a split (side-by-side) diff
or improved unified diff with red/green background styling?

…d readability

Signed-off-by: shatrughan mishra <shatrughanm485@gmail.com>
Signed-off-by: shatrughan mishra <shatrughanm485@gmail.com>
@bakayu bakayu force-pushed the feat-improve-diff-viewer-ux branch from c3311ff to e5365bd Compare February 15, 2026 19:12
@bakayu
Copy link
Member

bakayu commented Feb 16, 2026

image

I don't think this is the intended behavior?
It looks like it is just copying the same diff from the left side to the right side

@shatrughantwt
Copy link
Contributor Author

help me out this
Screenshot from 2026-02-16 13-53-12

@bakayu
Copy link
Member

bakayu commented Feb 16, 2026

@shatrughantwt can you try doing a git pull first?

@shatrughantwt
Copy link
Contributor Author

shatrughantwt commented Feb 16, 2026

@shatrughantwt can you try doing a git pull first?

i already did. it shows this
Screenshot from 2026-02-16 15-28-28

@shatrughantwt
Copy link
Contributor Author

should i reclone then push ?

@bakayu
Copy link
Member

bakayu commented Feb 16, 2026

sure, try doing that

@shatrughantwt
Copy link
Contributor Author

shatrughantwt commented Feb 16, 2026

should i close this pr now ?

@bakayu
Copy link
Member

bakayu commented Feb 16, 2026

should i close this pr now ?

It is upto you, you can use this same PR by pushing to the same branch, or open a new one.

@shatrughantwt shatrughantwt deleted the feat-improve-diff-viewer-ux branch February 16, 2026 14:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve visual diff viewer for clearer and more intuitive change representation

2 participants