component preview: Add separators between sections in sidebar (#34701)

Danilo Leal created 6 months ago

Small improvement for navigating inside the component preview.

Release Notes:

- N/A

Change summary

crates/component/src/component_layout.rs |  4 ++--
crates/zed/src/zed/component_preview.rs  | 26 +++++++++-----------------
2 files changed, 11 insertions(+), 19 deletions(-)

Detailed changes

crates/component/src/component_layout.rs

@@ -118,8 +118,8 @@ impl RenderOnce for ComponentExampleGroup {
                         .flex()
                         .items_center()
                         .gap_3()
-                        .pb_1()
-                        .child(div().h_px().w_4().bg(cx.theme().colors().border))
+                        .mt_4()
+                        .mb_1()
                         .child(
                             div()
                                 .flex_none()

crates/zed/src/zed/component_preview.rs

@@ -369,7 +369,6 @@ impl ComponentPreview {
         // Always show all components first
         entries.push(PreviewEntry::AllComponents);
         entries.push(PreviewEntry::ActiveThread);
-        entries.push(PreviewEntry::Separator);
 
         let mut scopes: Vec<_> = scope_groups
             .keys()
@@ -382,7 +381,9 @@ impl ComponentPreview {
         for scope in scopes {
             if let Some(components) = scope_groups.remove(&scope) {
                 if !components.is_empty() {
+                    entries.push(PreviewEntry::Separator);
                     entries.push(PreviewEntry::SectionHeader(scope.to_string().into()));
+
                     let mut sorted_components = components;
                     sorted_components.sort_by_key(|(component, _)| component.sort_name());
 
@@ -515,16 +516,12 @@ impl ComponentPreview {
                             Vec::new()
                         };
                         if valid_positions.is_empty() {
-                            Label::new(name.clone())
-                                .color(Color::Default)
-                                .into_any_element()
+                            Label::new(name.clone()).into_any_element()
                         } else {
                             HighlightedLabel::new(name.clone(), valid_positions).into_any_element()
                         }
                     } else {
-                        Label::new(name.clone())
-                            .color(Color::Default)
-                            .into_any_element()
+                        Label::new(name.clone()).into_any_element()
                     })
                     .selectable(true)
                     .toggle_state(selected)
@@ -542,7 +539,7 @@ impl ComponentPreview {
                 let selected = self.active_page == PreviewPage::AllComponents;
 
                 ListItem::new(ix)
-                    .child(Label::new("All Components").color(Color::Default))
+                    .child(Label::new("All Components"))
                     .selectable(true)
                     .toggle_state(selected)
                     .inset(true)
@@ -555,7 +552,7 @@ impl ComponentPreview {
                 let selected = self.active_page == PreviewPage::ActiveThread;
 
                 ListItem::new(ix)
-                    .child(Label::new("Active Thread").color(Color::Default))
+                    .child(Label::new("Active Thread"))
                     .selectable(true)
                     .toggle_state(selected)
                     .inset(true)
@@ -565,12 +562,8 @@ impl ComponentPreview {
                     .into_any_element()
             }
             PreviewEntry::Separator => ListItem::new(ix)
-                .child(
-                    h_flex()
-                        .occlude()
-                        .pt_3()
-                        .child(Divider::horizontal_dashed()),
-                )
+                .disabled(true)
+                .child(div().w_full().py_2().child(Divider::horizontal()))
                 .into_any_element(),
         }
     }
@@ -585,7 +578,6 @@ impl ComponentPreview {
         h_flex()
             .w_full()
             .h_10()
-            .items_center()
             .child(Headline::new(title).size(HeadlineSize::XSmall))
             .child(Divider::horizontal())
     }
@@ -798,7 +790,7 @@ impl Render for ComponentPreview {
                         )
                         .track_scroll(self.nav_scroll_handle.clone())
                         .p_2p5()
-                        .w(px(240.))
+                        .w(px(229.))
                         .h_full()
                         .flex_1(),
                     )