zeta: Refine visuals for the completion popover (#22142)

Danilo Leal created 1 year ago

Most notably, trying out a different icon and adding the "Completion"
word to the side of the provider name.

<img width="800" alt="Screenshot 2024-12-17 at 13 04 55"
src="https://github.com/user-attachments/assets/6dcaa699-f358-4242-9812-e1668f426207"
/>

Release Notes:

- N/A

Change summary

assets/icons/zed_predict.svg            |  5 +-
crates/editor/src/code_context_menus.rs | 53 +++++++++++++-------------
2 files changed, 29 insertions(+), 29 deletions(-)

Detailed changes

assets/icons/zed_predict.svg

@@ -1,4 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 8.9V11C5.93097 11 5.06903 11 3 11V10.4L8 5.6V5H3V7.1" stroke="black" stroke-width="1.5"/>
-<path d="M11 5L13 8L11 11" stroke="black" stroke-width="1.5"/>
+<path d="M7 8.9V11C5.34478 11 4.65522 11 3 11V10.4L7 5.6V5H3V7.1" stroke="black" stroke-width="1.5"/>
+<path d="M12 5L14 8L12 11" stroke="black" stroke-width="1.5"/>
+<path d="M10 6.5L11 8L10 9.5" stroke="black" stroke-width="1.5"/>
 </svg>

crates/editor/src/code_context_menus.rs

@@ -14,11 +14,7 @@ use multi_buffer::{Anchor, ExcerptId};
 use ordered_float::OrderedFloat;
 use project::{CodeAction, Completion, TaskSourceKind};
 use task::ResolvedTask;
-use ui::{
-    h_flex, ActiveTheme as _, Color, FluentBuilder as _, InteractiveElement as _, IntoElement,
-    Label, LabelCommon as _, LabelSize, ListItem, ParentElement as _, Popover,
-    StatefulInteractiveElement as _, Styled, Toggleable as _,
-};
+use ui::{prelude::*, Color, IntoElement, ListItem, Popover, Styled};
 use util::ResultExt as _;
 use workspace::Workspace;
 
@@ -425,8 +421,10 @@ impl CompletionsMenu {
             CompletionEntry::InlineCompletionHint(hint) => Some(match &hint.text {
                 InlineCompletionText::Edit { text, highlights } => div()
                     .my_1()
-                    .rounded_md()
+                    .rounded(px(6.))
                     .bg(cx.theme().colors().editor_background)
+                    .border_1()
+                    .border_color(cx.theme().colors().border_variant)
                     .child(
                         gpui::StyledText::new(text.clone())
                             .with_highlights(&style.text, highlights.clone()),
@@ -451,9 +449,8 @@ impl CompletionsMenu {
                 .flex_1()
                 .px_1p5()
                 .py_1()
-                .min_w(px(260.))
                 .max_w(px(640.))
-                .w(px(500.))
+                .w(px(450.))
                 .overflow_y_scroll()
                 .occlude()
         });
@@ -513,6 +510,7 @@ impl CompletionsMenu {
                                             (range, highlight)
                                         }),
                                 );
+
                                 let completion_label =
                                     StyledText::new(completion.label.text.clone())
                                         .with_highlights(&style.text, highlights);
@@ -559,25 +557,26 @@ impl CompletionsMenu {
                             CompletionEntry::InlineCompletionHint(InlineCompletionMenuHint {
                                 provider_name,
                                 ..
-                            }) => div()
-                                .min_w(px(250.))
-                                .max_w(px(500.))
-                                .pb_1()
-                                .border_b_1()
-                                .border_color(cx.theme().colors().border_variant)
-                                .child(
-                                    ListItem::new("inline-completion")
-                                        .inset(true)
-                                        .toggle_state(item_ix == selected_item)
-                                        .on_click(cx.listener(move |editor, _event, cx| {
-                                            cx.stop_propagation();
-                                            editor.accept_inline_completion(
-                                                &AcceptInlineCompletion {},
-                                                cx,
-                                            );
-                                        }))
-                                        .child(Label::new(SharedString::new_static(provider_name))),
-                                ),
+                            }) => div().min_w(px(250.)).max_w(px(500.)).child(
+                                ListItem::new("inline-completion")
+                                    .inset(true)
+                                    .toggle_state(item_ix == selected_item)
+                                    .start_slot(Icon::new(IconName::ZedPredict))
+                                    .child(
+                                        StyledText::new(format!(
+                                            "{} Completion",
+                                            SharedString::new_static(provider_name)
+                                        ))
+                                        .with_highlights(&style.text, None),
+                                    )
+                                    .on_click(cx.listener(move |editor, _event, cx| {
+                                        cx.stop_propagation();
+                                        editor.accept_inline_completion(
+                                            &AcceptInlineCompletion {},
+                                            cx,
+                                        );
+                                    })),
+                            ),
                         }
                     })
                     .collect()