panel: Avoid render panel when TabPanel is collapsed. (#492)

Close #488

- Fix `collapsed` sync to `TabPanel` when load state.

crates/ui/src/dock/dock.rs

@@ -144,6 +144,11 @@ impl Dock {
                         panel.set_collapsed(true, cx);
                     });
                 }
+                DockItem::Split { items, .. } => {
+                    for item in items {
+                        item.set_collapsed(true, cx);
+                    }
+                }
                 _ => {}
             }
         }

crates/ui/src/dock/mod.rs

@@ -85,6 +85,29 @@ pub enum DockItem {
     Panel { view: Arc<dyn PanelView> },
 }
 
+impl std::fmt::Debug for DockItem {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            DockItem::Split {
+                axis, items, sizes, ..
+            } => f
+                .debug_struct("Split")
+                .field("axis", axis)
+                .field("items", &items.len())
+                .field("sizes", sizes)
+                .finish(),
+            DockItem::Tabs {
+                items, active_ix, ..
+            } => f
+                .debug_struct("Tabs")
+                .field("items", &items.len())
+                .field("active_ix", active_ix)
+                .finish(),
+            DockItem::Panel { .. } => f.debug_struct("Panel").finish(),
+        }
+    }
+}
+
 impl DockItem {
     /// Create DockItem with split layout, each item of panel have equal size.
     pub fn split(

crates/ui/src/dock/tab_panel.rs

@@ -560,6 +560,7 @@ impl TabPanel {
             )
             .children(self.panels.iter().enumerate().map(|(ix, panel)| {
                 let mut active = ix == self.active_ix;
+                let disabled = self.is_collapsed;
 
                 // Always not show active tab style, if the panel is collapsed
                 if self.is_collapsed {
@@ -569,31 +570,34 @@ impl TabPanel {
                 Tab::new(("tab", ix), panel.title(cx))
                     .py_2()
                     .selected(active)
-                    .on_click(cx.listener(move |view, _, cx| {
+                    .disabled(disabled)
-                        view.set_active_ix(ix, cx);
+                    .when(!disabled, |this| {
-                    }))
+                        this.on_click(cx.listener(move |view, _, cx| {
-                    .when(state.draggable, |this| {
+                            view.set_active_ix(ix, cx);
-                        this.on_drag(
+                        }))
-                            DragPanel::new(panel.clone(), view.clone()),
+                        .when(state.draggable, |this| {
-                            |drag, _, cx| {
+                            this.on_drag(
-                                cx.stop_propagation();
+                                DragPanel::new(panel.clone(), view.clone()),
-                                cx.new_view(|_| drag.clone())
+                                |drag, _, cx| {
-                            },
+                                    cx.stop_propagation();
-                        )
+                                    cx.new_view(|_| drag.clone())
-                    })
+                                },
-                    .when(state.droppable, |this| {
+                            )
-                        this.drag_over::<DragPanel>(|this, _, cx| {
+                        })
-                            this.rounded_l_none()
+                        .when(state.droppable, |this| {
-                                .border_l_2()
+                            this.drag_over::<DragPanel>(|this, _, cx| {
-                                .border_r_0()
+                                this.rounded_l_none()
-                                .border_color(cx.theme().drag_border)
+                                    .border_l_2()
+                                    .border_r_0()
+                                    .border_color(cx.theme().drag_border)
+                            })
+                            .on_drop(cx.listener(
+                                move |this, drag: &DragPanel, cx| {
+                                    this.will_split_placement = None;
+                                    this.on_drop(drag, Some(ix), true, cx)
+                                },
+                            ))
                         })
-                        .on_drop(cx.listener(
-                            move |this, drag: &DragPanel, cx| {
-                                this.will_split_placement = None;
-                                this.on_drop(drag, Some(ix), true, cx)
-                            },
-                        ))
                     })
             }))
             .child(
@@ -637,6 +641,10 @@ impl TabPanel {
     }
 
     fn render_active_panel(&self, state: TabState, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        if self.is_collapsed {
+            return Empty {}.into_any_element();
+        }
+
         self.active_panel()
             .map(|panel| {
                 div()

crates/ui/src/tab/tab.rs

@@ -42,6 +42,12 @@ impl Tab {
         self.suffix = Some(suffix.into());
         self
     }
+
+    /// Set disabled state to the tab
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
 }
 
 impl Selectable for Tab {
@@ -72,9 +78,11 @@ impl Styled for Tab {
 impl RenderOnce for Tab {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let (text_color, bg_color) = match (self.selected, self.disabled) {
-            (true, _) => (cx.theme().tab_active_foreground, cx.theme().tab_active),
+            (true, false) => (cx.theme().tab_active_foreground, cx.theme().tab_active),
-            (false, true) => (cx.theme().tab_foreground.opacity(0.5), cx.theme().tab),
             (false, false) => (cx.theme().muted_foreground, cx.theme().tab),
+            // disabled
+            (true, true) => (cx.theme().muted_foreground, cx.theme().tab_active),
+            (false, true) => (cx.theme().muted_foreground, cx.theme().tab),
         };
 
         self.base
@@ -89,7 +97,6 @@ impl RenderOnce for Tab {
             .border_color(cx.theme().transparent)
             .when(self.selected, |this| this.border_color(cx.theme().border))
             .text_sm()
-            .when(self.disabled, |this| this)
             .when_some(self.prefix, |this, prefix| {
                 this.child(prefix).text_color(text_color)
             })