Fixes for accept edit popovers (#24703)

Max Brunsfeld , danilo-leal , and agu-z created

Follow-up to #24700

Release Notes:

- N/A

---------

Co-authored-by: danilo-leal <daniloleal09@gmail.com>
Co-authored-by: agu-z <hi@aguz.me>

Change summary

crates/editor/src/editor.rs  | 25 +++++++++++--------
crates/editor/src/element.rs | 48 +++++++++++++++----------------------
2 files changed, 34 insertions(+), 39 deletions(-)

Detailed changes

crates/editor/src/editor.rs 🔗

@@ -1567,6 +1567,7 @@ impl Editor {
         if has_active_edit_prediction {
             key_context.add("copilot_suggestion");
             key_context.add(EDIT_PREDICTION_KEY_CONTEXT);
+
             if showing_completions || self.edit_prediction_requires_modifier() {
                 key_context.add(EDIT_PREDICTION_REQUIRES_MODIFIER_KEY_CONTEXT);
             }
@@ -4793,12 +4794,10 @@ impl Editor {
     }
 
     pub fn edit_prediction_preview_is_active(&self) -> bool {
-        match self.edit_prediction_preview {
-            EditPredictionPreview::Inactive => false,
-            EditPredictionPreview::Active { .. } => {
-                self.edit_prediction_requires_modifier() || self.has_visible_completions_menu()
-            }
-        }
+        matches!(
+            self.edit_prediction_preview,
+            EditPredictionPreview::Active { .. }
+        )
     }
 
     pub fn inline_completions_enabled(&self, cx: &App) -> bool {
@@ -4971,7 +4970,7 @@ impl Editor {
                     if position_map
                         .visible_row_range
                         .contains(&target.to_display_point(&position_map.snapshot).row())
-                        || !self.edit_prediction_preview_is_active()
+                        || !self.edit_prediction_requires_modifier()
                     {
                         // Note that this is also done in vim's handler of the Tab action.
                         self.change_selections(
@@ -5218,7 +5217,10 @@ impl Editor {
         };
 
         if &accept_keystroke.modifiers == modifiers {
-            if !self.edit_prediction_preview_is_active() {
+            if matches!(
+                self.edit_prediction_preview,
+                EditPredictionPreview::Inactive
+            ) {
                 self.edit_prediction_preview = EditPredictionPreview::Active {
                     previous_scroll_position: None,
                 };
@@ -5795,15 +5797,16 @@ impl Editor {
                 .max_w(max_width)
                 .flex_1()
                 .px_2()
-                .py_1()
                 .elevation_2(cx)
                 .border_color(cx.theme().colors().border)
-                .child(completion)
-                .child(ui::Divider::vertical())
+                .child(div().py_1().overflow_hidden().child(completion))
                 .child(
                     h_flex()
                         .h_full()
+                        .border_l_1()
+                        .border_color(cx.theme().colors().border)
                         .gap_1()
+                        .py_1()
                         .pl_2()
                         .child(
                             h_flex()

crates/editor/src/element.rs 🔗

@@ -3585,7 +3585,7 @@ impl EditorElement {
                     if target_display_point.row() < visible_row_range.start {
                         let mut element = inline_completion_accept_indicator(
                             "Scroll",
-                            Some(IconName::ZedPredictUp),
+                            Some(IconName::ArrowUp),
                             editor,
                             window,
                             cx,
@@ -3601,7 +3601,7 @@ impl EditorElement {
 
                         let cursor_character_x = cursor_row_layout.x_for_index(cursor_column);
 
-                        const PADDING_Y: Pixels = px(24.);
+                        const PADDING_Y: Pixels = px(12.);
 
                         let origin = start_point + point(cursor_character_x, PADDING_Y);
 
@@ -3610,7 +3610,7 @@ impl EditorElement {
                     } else if target_display_point.row() >= visible_row_range.end {
                         let mut element = inline_completion_accept_indicator(
                             "Scroll",
-                            Some(IconName::ZedPredictDown),
+                            Some(IconName::ArrowDown),
                             editor,
                             window,
                             cx,
@@ -3625,7 +3625,7 @@ impl EditorElement {
                         let cursor_column = cursor.column() as usize;
 
                         let cursor_character_x = cursor_row_layout.x_for_index(cursor_column);
-                        const PADDING_Y: Pixels = px(24.);
+                        const PADDING_Y: Pixels = px(12.);
 
                         let origin = start_point
                             + point(
@@ -3643,12 +3643,14 @@ impl EditorElement {
                                 inline_completion_accept_indicator(
                                     "Jump", None, editor, window, cx,
                                 )?
-                                .rounded_br(px(0.)),
+                                .rounded_br(px(0.))
+                                .rounded_tr(px(0.))
+                                .border_r_2(),
                             )
                             .child(
                                 div()
                                     .w(POLE_WIDTH)
-                                    .bg(cx.theme().colors().border)
+                                    .bg(cx.theme().colors().text_accent.opacity(0.8))
                                     .h(line_height),
                             )
                             .items_end()
@@ -5821,11 +5823,23 @@ fn inline_completion_accept_indicator(
         })
         .child(accept_keystroke.key.clone());
 
+    let colors = cx.theme().colors();
+
+    let accent_color = colors.text_accent;
+    let editor_bg_color = colors.editor_background;
+    let bg_color = editor_bg_color.blend(accent_color.opacity(0.2));
+    let padding_right = if icon.is_some() { px(4.) } else { px(8.) };
+
     let result = h_flex()
         .gap_1()
         .border_1()
         .rounded_md()
         .shadow_sm()
+        .bg(bg_color)
+        .border_color(colors.text_accent.opacity(0.8))
+        .py_0p5()
+        .pl_1()
+        .pr(padding_right)
         .child(accept_key)
         .child(Label::new(label).size(LabelSize::Small))
         .when_some(icon, |element, icon| {
@@ -5836,28 +5850,6 @@ fn inline_completion_accept_indicator(
             )
         });
 
-    let colors = cx.theme().colors();
-
-    let result = if editor.edit_prediction_requires_modifier() {
-        result
-            .py_1()
-            .px_2()
-            .elevation_2(cx)
-            .border_color(colors.border)
-    } else {
-        let accent_color = colors.text_accent;
-        let editor_bg_color = colors.editor_background;
-        let bg_color = editor_bg_color.blend(accent_color.opacity(0.2));
-        let padding_right = if icon.is_some() { px(4.) } else { px(8.) };
-
-        result
-            .bg(bg_color)
-            .border_color(colors.text_accent.opacity(0.8))
-            .py_0p5()
-            .pl_1()
-            .pr(padding_right)
-    };
-
     Some(result)
 }