edit prediction: Add minor UI tweaks to the preview bar (#24174)

Danilo Leal created 11 months ago

Just little nudges of spacing, alignment, and treatment for overflowing
content.

Release Notes:

- N/A

Change summary

crates/editor/src/editor.rs | 66 +++++++++++++++++++++++---------------
1 file changed, 40 insertions(+), 26 deletions(-)

Detailed changes

crates/editor/src/editor.rs

@@ -5477,7 +5477,7 @@ impl Editor {
     }
 
     fn edit_prediction_cursor_popover_height(&self) -> Pixels {
-        px(32.)
+        px(30.)
     }
 
     fn current_user_player_color(&self, cx: &mut App) -> PlayerColor {
@@ -5531,7 +5531,11 @@ impl Editor {
                             .child(Icon::new(IconName::ZedPredict))
                             .child(Label::new("Accept Terms of Service"))
                             .child(div().w_full())
-                            .child(Icon::new(IconName::ArrowUpRight))
+                            .child(
+                                Icon::new(IconName::ArrowUpRight)
+                                    .color(Color::Muted)
+                                    .size(IconSize::Small),
+                            )
                             .into_any_element(),
                     )
                     .into_any(),
@@ -5542,8 +5546,9 @@ impl Editor {
 
         fn pending_completion_container() -> Div {
             h_flex()
+                .h_full()
                 .flex_1()
-                .gap_3()
+                .gap_2()
                 .child(Icon::new(IconName::ZedPredict))
         }
 
@@ -5599,6 +5604,14 @@ impl Editor {
             .as_ref()
             .map_or(false, |c| c.is_move());
 
+        let modifier_color = if !has_completion {
+            Color::Muted
+        } else if window.modifiers() == accept_keystroke.modifiers {
+            Color::Accent
+        } else {
+            Color::Default
+        };
+
         Some(
             h_flex()
                 .h(self.edit_prediction_cursor_popover_height())
@@ -5606,39 +5619,31 @@ impl Editor {
                 .max_w(max_width)
                 .flex_1()
                 .px_2()
-                .gap_3()
                 .elevation_2(cx)
                 .child(completion)
+                .child(ui::Divider::vertical())
                 .child(
                     h_flex()
-                        .border_l_1()
-                        .border_color(cx.theme().colors().border_variant)
+                        .h_full()
+                        .gap_1()
                         .pl_2()
-                        .child(
-                            h_flex()
-                                .font(buffer_font.clone())
-                                .p_1()
-                                .rounded_sm()
-                                .children(ui::render_modifiers(
-                                    &accept_keystroke.modifiers,
-                                    PlatformStyle::platform(),
-                                    if window.modifiers() == accept_keystroke.modifiers {
-                                        Some(Color::Accent)
-                                    } else {
-                                        None
-                                    },
-                                    !is_move,
-                                )),
-                        )
-                        .opacity(if has_completion { 1.0 } else { 0.1 })
+                        .child(h_flex().font(buffer_font.clone()).gap_1().children(
+                            ui::render_modifiers(
+                                &accept_keystroke.modifiers,
+                                PlatformStyle::platform(),
+                                Some(modifier_color),
+                                !is_move,
+                            ),
+                        ))
                         .child(if is_move {
                             div()
                                 .child(ui::Key::new(&accept_keystroke.key, None))
                                 .font(buffer_font.clone())
                                 .into_any()
                         } else {
-                            Label::new("Preview").color(Color::Muted).into_any_element()
-                        }),
+                            Label::new("Preview").into_any_element()
+                        })
+                        .opacity(if has_completion { 1.0 } else { 0.4 }),
                 )
                 .into_any(),
         )
@@ -5737,7 +5742,16 @@ impl Editor {
                     Icon::new(IconName::ZedPredict).into_any_element()
                 };
 
-                Some(h_flex().flex_1().gap_3().child(left).child(preview))
+                Some(
+                    h_flex()
+                        .h_full()
+                        .flex_1()
+                        .gap_2()
+                        .pr_1()
+                        .overflow_x_hidden()
+                        .child(left)
+                        .child(preview),
+                )
             }
 
             InlineCompletion::Move {