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

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
zed-industries · Dec 17, 2024 · c86cf2c · c86cf2c
1 parent 7425d24
commit c86cf2c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/assets/icons/zed_predict.svg b/assets/icons/zed_predict.svg
diff --git a/crates/editor/src/code_context_menus.rs b/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()