ui/components/pane/
render.rs

1//! [`Render`] impl for [`super::Pane`] — the tab strip (with close/add
2//! affordances and drag-to-reorder) plus the active tab's content.
3
4use gpui::Empty;
5
6use super::Pane;
7use crate::{IconButton, IconName, IconSize, Tab, TabBar, prelude::*};
8
9/// Bare `IconButton::new`'s own default `debug_selector` (`"ICON-{icon:?}"`)
10/// collides across every tab sharing the same icon within a `Pane` — this
11/// wraps it in a `div` carrying a per-instance selector instead. The wrapper
12/// does not intercept clicks; the inner `IconButton` still owns the only
13/// click handler (mirrors `ActionPanel`'s Save/Cancel wrapper precedent).
14fn debug_wrap(id: impl Into<ElementId>, selector: String, child: IconButton) -> impl IntoElement {
15    div().id(id).debug_selector(move || selector).child(child)
16}
17
18/// Drag payload used for reordering tabs within a [`Pane`]'s tab strip.
19#[derive(Clone, Copy)]
20struct TabDragPayload {
21    from_idx: usize,
22}
23
24impl Render for Pane {
25    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
26        let active_idx = self.active_idx;
27        let mut tab_bar = TabBar::new("pane-tab-bar");
28
29        for ix in 0..self.tabs.len() {
30            let tab_id = self.tabs[ix].0;
31            let title = self.tabs[ix].1.title();
32            let selected = ix == active_idx;
33
34            // Per-tab hover group: the close button is hidden until the mouse
35            // hovers this specific tab (each tab is its own `group` scope, so
36            // hovering one tab reveals only its own close button).
37            let hover_group = SharedString::from(format!("pane-tab-{}", tab_id.0));
38            let close_button = debug_wrap(
39                ("pane-tab-close-wrap", tab_id.0),
40                format!("PANE-TAB-CLOSE-{}", tab_id.0),
41                IconButton::new(("pane-tab-close", tab_id.0), IconName::Close)
42                    .icon_size(IconSize::XSmall)
43                    .visible_on_hover(hover_group.clone())
44                    .on_click(cx.listener(move |this, _, _, cx| {
45                        this.close_tab(ix, cx);
46                    })),
47            );
48
49            let tab = Tab::new(("pane-tab", tab_id.0))
50                .group(hover_group)
51                .toggle_state(selected)
52                .end_slot(close_button)
53                // Wrap in `Label` so the tab title uses the UI font family/size
54                // consistently (a bare string child inherits the window's
55                // default text size, which mismatches other UI text and can
56                // overflow the tab strip's height).
57                .child(Label::new(title).size(LabelSize::Small))
58                .on_click(cx.listener(move |this, _, _, cx| {
59                    this.activate(ix, cx);
60                }))
61                .on_drag(TabDragPayload { from_idx: ix }, |_, _, _, cx| {
62                    cx.new(|_| Empty)
63                })
64                .drag_over::<TabDragPayload>(|style, _, _, _| style.opacity(0.5))
65                .on_drop(cx.listener(move |this, payload: &TabDragPayload, _, cx| {
66                    this.reorder(payload.from_idx, ix, cx);
67                }));
68
69            tab_bar = tab_bar.child(tab);
70        }
71
72        tab_bar = tab_bar.end_child(debug_wrap(
73            "pane-add-tab-wrap",
74            "PANE-ADD-TAB".to_string(),
75            IconButton::new("pane-add-tab", IconName::Plus)
76                .icon_size(IconSize::XSmall)
77                .on_click(cx.listener(|this, _, _, cx| {
78                    let content = (this.new_tab_factory)();
79                    this.add_tab(content, cx);
80                })),
81        ));
82
83        let content = self
84            .tabs
85            .get(active_idx)
86            .map(|(_, content)| content.render(true, window, cx));
87
88        v_flex()
89            .id("pane")
90            .size_full()
91            .child(tab_bar)
92            .child(div().flex_1().min_h_0().overflow_hidden().children(content))
93    }
94}
ui/components/pane/render.rs

ui/components/pane/
render.rs
