assistant: Tweak the model selector design (#19704)
Danilo Leal
created 1 year ago
Exploring using the UI font for it, as it is more common for dropdowns
and popovers throughout the app. Feeling like it makes it lighter and
also shorter in width!
| Before | After |
|--------|--------|
| <img width="1296" alt="Screenshot 2024-10-24 at 16 39 04"
src="https://github.com/user-attachments/assets/0412f922-77a9-4d83-adf9-5632534d6c5b">
| <img width="1296" alt="Screenshot 2024-10-24 at 16 38 26"
src="https://github.com/user-attachments/assets/8bf52ba7-fda7-4437-b53e-903c282f2931">
|
Release Notes:
- N/A
Change summary
crates/assistant/src/model_selector.rs | 51 ++++++++++++---------------
1 file changed, 23 insertions(+), 28 deletions(-)
Detailed changes
@@ -158,39 +158,34 @@ impl PickerDelegate for ModelPickerDelegate {
.spacing(ListItemSpacing::Sparse)
.selected(selected)
.start_slot(
- div().pr_1().child(
+ div().pr_0p5().child(
Icon::new(model_info.icon)
.color(Color::Muted)
.size(IconSize::Medium),
),
)
.child(
- h_flex()
- .w_full()
- .justify_between()
- .font_buffer(cx)
- .min_w(px(240.))
- .child(
- h_flex()
- .gap_2()
- .child(Label::new(model_info.model.name().0.clone()))
- .child(
- Label::new(provider_name)
- .size(LabelSize::XSmall)
- .color(Color::Muted),
- )
- .children(match model_info.availability {
- LanguageModelAvailability::Public => None,
- LanguageModelAvailability::RequiresPlan(Plan::Free) => None,
- LanguageModelAvailability::RequiresPlan(Plan::ZedPro) => {
- show_badges.then(|| {
- Label::new("Pro")
- .size(LabelSize::XSmall)
- .color(Color::Muted)
- })
- }
- }),
- ),
+ h_flex().w_full().justify_between().min_w(px(200.)).child(
+ h_flex()
+ .gap_1p5()
+ .child(Label::new(model_info.model.name().0.clone()))
+ .child(
+ Label::new(provider_name)
+ .size(LabelSize::XSmall)
+ .color(Color::Muted),
+ )
+ .children(match model_info.availability {
+ LanguageModelAvailability::Public => None,
+ LanguageModelAvailability::RequiresPlan(Plan::Free) => None,
+ LanguageModelAvailability::RequiresPlan(Plan::ZedPro) => {
+ show_badges.then(|| {
+ Label::new("Pro")
+ .size(LabelSize::XSmall)
+ .color(Color::Muted)
+ })
+ }
+ }),
+ ),
)
.end_slot(div().when(model_info.is_selected, |this| {
this.child(
@@ -212,7 +207,7 @@ impl PickerDelegate for ModelPickerDelegate {
h_flex()
.w_full()
.border_t_1()
- .border_color(cx.theme().colors().border)
+ .border_color(cx.theme().colors().border_variant)
.p_1()
.gap_4()
.justify_between()