diff --git a/crates/extensions_ui/src/extensions_ui.rs b/crates/extensions_ui/src/extensions_ui.rs index 7d3a4db7b71c606137334ede1d77ef39306bb3f0..3e663798a1fca9f28bfaaf8a770e5e706c52a524 100644 --- a/crates/extensions_ui/src/extensions_ui.rs +++ b/crates/extensions_ui/src/extensions_ui.rs @@ -55,7 +55,11 @@ impl ExtensionsPage { let store = ExtensionStore::global(cx); let subscription = cx.observe(&store, |_, _, cx| cx.notify()); - let query_editor = cx.new_view(|cx| Editor::single_line(cx)); + let query_editor = cx.new_view(|cx| { + let mut input = Editor::single_line(cx); + input.set_placeholder_text("Search extensions...", cx); + input + }); cx.subscribe(&query_editor, Self::on_query_change).detach(); let mut this = Self { @@ -464,64 +468,73 @@ impl Render for ExtensionsPage { fn render(&mut self, cx: &mut ViewContext) -> impl IntoElement { v_flex() .size_full() - .p_4() - .gap_4() .bg(cx.theme().colors().editor_background) .child( - h_flex() - .w_full() - .child(Headline::new("Extensions").size(HeadlineSize::XLarge)), - ) - .child( - h_flex() - .w_full() - .gap_2() - .child(h_flex().child(self.render_search(cx))) + v_flex() + .gap_4() + .p_4() + .border_b() + .border_color(cx.theme().colors().border) + .bg(cx.theme().colors().editor_background) .child( h_flex() + .w_full() + .child(Headline::new("Extensions").size(HeadlineSize::XLarge)), + ) + .child( + h_flex() + .w_full() + .gap_2() + .justify_between() + .child(h_flex().child(self.render_search(cx))) .child( - ToggleButton::new("filter-all", "All") - .style(ButtonStyle::Filled) - .size(ButtonSize::Large) - .selected(self.filter == ExtensionFilter::All) - .on_click(cx.listener(|this, _event, _cx| { - this.filter = ExtensionFilter::All; - })) - .tooltip(move |cx| Tooltip::text("Show all extensions", cx)) - .first(), - ) - .child( - ToggleButton::new("filter-installed", "Installed") - .style(ButtonStyle::Filled) - .size(ButtonSize::Large) - .selected(self.filter == ExtensionFilter::Installed) - .on_click(cx.listener(|this, _event, _cx| { - this.filter = ExtensionFilter::Installed; - })) - .tooltip(move |cx| { - Tooltip::text("Show installed extensions", cx) - }) - .middle(), - ) - .child( - ToggleButton::new("filter-not-installed", "Not Installed") - .style(ButtonStyle::Filled) - .size(ButtonSize::Large) - .selected(self.filter == ExtensionFilter::NotInstalled) - .on_click(cx.listener(|this, _event, _cx| { - this.filter = ExtensionFilter::NotInstalled; - })) - .tooltip(move |cx| { - Tooltip::text("Show not installed extensions", cx) - }) - .last(), + h_flex() + .child( + ToggleButton::new("filter-all", "All") + .style(ButtonStyle::Filled) + .size(ButtonSize::Large) + .selected(self.filter == ExtensionFilter::All) + .on_click(cx.listener(|this, _event, _cx| { + this.filter = ExtensionFilter::All; + })) + .tooltip(move |cx| { + Tooltip::text("Show all extensions", cx) + }) + .first(), + ) + .child( + ToggleButton::new("filter-installed", "Installed") + .style(ButtonStyle::Filled) + .size(ButtonSize::Large) + .selected(self.filter == ExtensionFilter::Installed) + .on_click(cx.listener(|this, _event, _cx| { + this.filter = ExtensionFilter::Installed; + })) + .tooltip(move |cx| { + Tooltip::text("Show installed extensions", cx) + }) + .middle(), + ) + .child( + ToggleButton::new("filter-not-installed", "Not Installed") + .style(ButtonStyle::Filled) + .size(ButtonSize::Large) + .selected(self.filter == ExtensionFilter::NotInstalled) + .on_click(cx.listener(|this, _event, _cx| { + this.filter = ExtensionFilter::NotInstalled; + })) + .tooltip(move |cx| { + Tooltip::text("Show not installed extensions", cx) + }) + .last(), + ), ), ), ) - .child(v_flex().size_full().overflow_y_hidden().map(|this| { + .child(v_flex().px_4().size_full().overflow_y_hidden().map(|this| { let entries = self.filtered_extension_entries(cx); if entries.is_empty() { - return this.child(self.render_empty_state(cx)); + return this.py_4().child(self.render_empty_state(cx)); } this.child( @@ -537,6 +550,7 @@ impl Render for ExtensionsPage { Self::render_extensions, ) .size_full() + .pb_4() .track_scroll(scroll_handle) .into_any_element() .draw(