Improve styling of tree branches in collab panel (#3941)

Marshall Bowers created 2 years ago

This PR updates the styling of the tree branches in the current call
section of the collab panel:

- Fixed the gap between the notes and chat items.
- We now overdraw the tree branch on the notes item so it fills the gap.
- The tree branch lines are now thinner.

<img width="231" alt="Screenshot 2024-01-08 at 12 35 35 PM"
src="https://github.com/zed-industries/zed/assets/1486634/844c9e18-c2de-4163-9384-41d1577e23a0">

Note: I think the signature for `render_tree_branch` could use some
improvement. I don't like having the multiple `bool` parameters, but any
change I could think of was going to be a bit more invasive than I
wanted to take on in this PR.

Release Notes:

- Improved the style of the tree branches in current call details in the
collab panel.

Change summary

crates/collab_ui/src/collab_panel.rs | 20 ++++++++++++--------
1 file changed, 12 insertions(+), 8 deletions(-)

Detailed changes

crates/collab_ui/src/collab_panel.rs

@@ -896,7 +896,7 @@ impl CollabPanel {
             .start_slot(
                 h_stack()
                     .gap_1()
-                    .child(render_tree_branch(is_last, cx))
+                    .child(render_tree_branch(is_last, false, cx))
                     .child(IconButton::new(0, Icon::Folder)),
             )
             .child(Label::new(project_name.clone()))
@@ -917,7 +917,7 @@ impl CollabPanel {
             .start_slot(
                 h_stack()
                     .gap_1()
-                    .child(render_tree_branch(is_last, cx))
+                    .child(render_tree_branch(is_last, false, cx))
                     .child(IconButton::new(0, Icon::Screen)),
             )
             .child(Label::new("Screen"))
@@ -958,7 +958,7 @@ impl CollabPanel {
             .start_slot(
                 h_stack()
                     .gap_1()
-                    .child(render_tree_branch(false, cx))
+                    .child(render_tree_branch(false, true, cx))
                     .child(IconButton::new(0, Icon::File)),
             )
             .child(div().h_7().w_full().child(Label::new("notes")))
@@ -979,7 +979,7 @@ impl CollabPanel {
             .start_slot(
                 h_stack()
                     .gap_1()
-                    .child(render_tree_branch(false, cx))
+                    .child(render_tree_branch(false, false, cx))
                     .child(IconButton::new(0, Icon::MessageBubbles)),
             )
             .child(Label::new("chat"))
@@ -1007,7 +1007,7 @@ impl CollabPanel {
             .start_slot(
                 h_stack()
                     .gap_1()
-                    .child(render_tree_branch(!has_visible_participants, cx))
+                    .child(render_tree_branch(!has_visible_participants, false, cx))
                     .child(""),
             )
             .child(Label::new(if count == 1 {
@@ -2404,11 +2404,11 @@ impl CollabPanel {
     }
 }
 
-fn render_tree_branch(is_last: bool, cx: &mut WindowContext) -> impl IntoElement {
+fn render_tree_branch(is_last: bool, overdraw: bool, cx: &mut WindowContext) -> impl IntoElement {
     let rem_size = cx.rem_size();
     let line_height = cx.text_style().line_height_in_pixels(rem_size);
     let width = rem_size * 1.5;
-    let thickness = px(2.);
+    let thickness = px(1.);
     let color = cx.theme().colors().text;
 
     canvas(move |bounds, cx| {
@@ -2422,7 +2422,11 @@ fn render_tree_branch(is_last: bool, cx: &mut WindowContext) -> impl IntoElement
                 point(start_x, top),
                 point(
                     start_x + thickness,
-                    if is_last { start_y } else { bounds.bottom() },
+                    if is_last {
+                        start_y
+                    } else {
+                        bounds.bottom() + if overdraw { px(1.) } else { px(0.) }
+                    },
                 ),
             ),
             color,