extensions_ui: Add design changes to expose the filters more (#29582)

Closes https://github.com/zed-industries/zed/issues/28086

The main motivator for this change is to have the "MCP Servers" filter
more clearly visible. And because of this, all other filters end up more
visible, as they're not in a dropdown menu anymore. Ended up pushing
some other small changes here and there as well. This is our final
product:

<img
src="https://github.com/user-attachments/assets/16ac78b6-72d9-4a8a-801b-b4b992221331"
width="700"/>

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-04-29 07:54:39 -03:00 committed by GitHub
parent 756fcd0733
commit 9b37206147
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 75 additions and 102 deletions

View file

@ -40,7 +40,7 @@ impl RenderOnce for ExtensionCard {
.bg(cx.theme().colors().elevated_surface_background)
.border_1()
.border_color(cx.theme().colors().border)
.rounded_sm()
.rounded_md()
.children(self.children)
.when(self.overridden_by_dev_extension, |card| {
card.child(

View file

@ -1,6 +1,6 @@
use gpui::{AnyElement, Div, StyleRefinement};
use smallvec::SmallVec;
use ui::{ButtonLike, prelude::*};
use ui::prelude::*;
#[derive(IntoElement)]
pub struct FeatureUpsell {
@ -46,21 +46,20 @@ impl FeatureUpsell {
impl RenderOnce for FeatureUpsell {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
self.base
.p_4()
.py_2()
.px_4()
.justify_between()
.border_color(cx.theme().colors().border)
.child(v_flex().overflow_hidden().child(Label::new(self.text)))
.flex_wrap()
.border_color(cx.theme().colors().border_variant)
.child(Label::new(self.text))
.child(h_flex().gap_2().children(self.children).when_some(
self.docs_url,
|el, docs_url| {
el.child(
ButtonLike::new("open_docs")
.child(
h_flex()
.gap_2()
.child(Label::new("View docs"))
.child(Icon::new(IconName::ArrowUpRight)),
)
Button::new("open_docs", "View Documentation")
.icon(IconName::ArrowUpRight)
.icon_size(IconSize::XSmall)
.icon_position(IconPosition::End)
.on_click({
let docs_url = docs_url.clone();
move |_event, _window, cx| {