Improve discoverability around closing git diffs

[Morgandri1]

Check for existing issues

• Completed

Describe the feature

Hello!
When you open a git diff on a line, there isn't a [easy] way to close the diff. An 'x' button, or something similar to the close diagnostic button would be much appreciated

If applicable, add mockups / screenshots to help present your vision of the feature

[Morgandri1]

in hindsight I guess the button should be in the current version, but 🤷

[jtlandis]

I also agree that there should be a button. After a bit of searching, I found that pressing CMD+' while your cursor is on the added line (in your case line 70) should close the git diff.

[Morgandri1]

Although convoluted, thank you Jason! I think this is probably a pretty good first issue?

[Moshyfawn]

There's also the Esc key and the editor: toggle hunk diff action in the command panel. I'm not sure how the team feels about a button, though.

[Morgandri1]

didn't know about the esc keybind. good to know.

imo if there's a dismiss button for the error diagnostic, there should be one here, but thats just me.

[someone13574]

Maybe you could keep showing the git gutter and have clicking that toggle it off, just like you can toggle it on by clicking the git gutter?

[Morgandri1]

Not a bad idea; Would the gutter expand or only show on the current?

[someone13574]

I’d say only show for the current code, with the same colour as when it is unexpanded.

[Morgandri1]

So I was able to get the git gutter to stay when opened, but can't figure out how to close it.

Would appreciate some help
https://github.com/Morgandri1/zed

[SomeoneToIgnore]

To show the X mark in the gutter, here's a set of pointers:

• Zed is already able to combine LSP actions (lightning icon in the gutter) and tasks (triangle icon in the gutter) under the same entry, and can replace one icon with another, if tasks are mixed.
  Here's how tasks' icon is added:
  

  zed/crates/editor/src/element.rs

  Line 1561 in cfbf5dc

  let button = prepaint_gutter_button(

  
  we could add another X icon similar way for every added and modified hunk.

In the editor element, when we paint the gutter during fn paint_gutter, we have all its layout.display_hunks — whatever one has the hitbox is clickable ergo folded (as the code works now), otherwise it's expanded.

zed/crates/editor/src/element.rs

Line 2837 in cfbf5dc

Self::paint_diff_hunks(layout.gutter_hitbox.bounds, layout, cx)

We can add another icon below for every expanded hunk, similar to test_indicators and indicator:

zed/crates/editor/src/element.rs

Lines 2860 to 2874 in cfbf5dc

	cx.paint_layer(layout.gutter_hitbox.bounds, |cx| {
	cx.with_element_namespace("gutter_fold_toggles", |cx| {
	for fold_indicator in layout.gutter_fold_toggles.iter_mut().flatten() {
	fold_indicator.paint(cx);
	}
	});
	for test_indicators in layout.test_indicators.iter_mut() {
	test_indicators.paint(cx);
	}
	if let Some(indicator) = layout.code_actions_indicator.as_mut() {
	indicator.paint(cx);
	}
	});

• Deleted hunks are harder, as those open a separate, nested editor and push down the real gutter — X mark has to be placed inside that editor's gutter instead.
  For deleted hunks' editors, we now draw a fake space padded with the gutter size instead of the real gutter:
  

  zed/crates/editor/src/hunk_diff.rs

  Line 323 in cfbf5dc

  .pl(gutter_dimensions.full_width())

  
  we can add an X icon straight there and toggle the hunk folding for parent editor from there.

• To fold an expanded hunk, one has to remove it from the editor.expanded_hunks collection and clear row highlights and/or sub-editors, similar to how toggle_hunks_expanded method does it:
  

  zed/crates/editor/src/hunk_diff.rs

  Lines 161 to 165 in cfbf5dc

  	highlights_to_remove.push(expanded_hunk.hunk_range.clone());
  	blocks_to_remove.extend(expanded_hunk.block);
  	hunks_to_toggle.next();
  	retain = false;
  	break;