Improve Diff pane UI

[simurai]

Description

Here some brainstorming around the Diff (FilePatch) UI.

Problem

Currently it's quite hard to know if the Diff pane shows the unstaged or staged changes. There are the labels and titles, but the only difference is Uns vs S and takes some effort to process.

Also, there is the icon to switch to the other list, but that might add to the confusion. "Is this the current state or am I going to this state?"

[simurai]

Option A

Show both icons. They can be used to toggle between the two lists:

Also, the tab title just says: Diff (plus icon). So that it doesn't repeat the same thing twice. Alternative: Changes, but that could also be used for commit history later on.

Concerns

Split diffs #816 will also add one of these toggle buttons, which then muddies the water again.

[simurai]

Option B

Show both lists:

Then it's like the file lists on the right. Also, seeing how lines move between lists helps to understand what's going on. "Don't worry, your changes are still there, just in that other bucket".

Concerns

When there a lots of hunks, two scrolling areas will be annoying.

[BinaryMuse]

I personally really like option A. I agree that option B is problematic because of scrolling, and virtualizing that view will make it feel weirder.

Also your screenshots are always so ✨