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, PaneEvent};
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            // VSCode behavior: the active tab always shows its close button;
39            // inactive tabs reveal it only on hover.
40            let mut close_ib = IconButton::new(("pane-tab-close", tab_id.0), IconName::Close)
41                .icon_size(IconSize::XSmall)
42                .on_click(cx.listener(move |this, _, _, cx| {
43                    this.close_tab(ix, cx);
44                }));
45            if !selected {
46                close_ib = close_ib.visible_on_hover(hover_group.clone());
47            }
48            let close_button = debug_wrap(
49                ("pane-tab-close-wrap", tab_id.0),
50                format!("PANE-TAB-CLOSE-{}", tab_id.0),
51                close_ib,
52            );
53
54            let tab = Tab::new(("pane-tab", tab_id.0))
55                .group(hover_group)
56                .toggle_state(selected)
57                .end_slot(close_button)
58                // Wrap in `Label` so the tab title uses the UI font family/size
59                // consistently (a bare string child inherits the window's
60                // default text size, which mismatches other UI text and can
61                // overflow the tab strip's height).
62                .child(Label::new(title).size(LabelSize::Small))
63                .on_click(cx.listener(move |this, _, _, cx| {
64                    this.activate(ix, cx);
65                }))
66                .on_drag(TabDragPayload { from_idx: ix }, |_, _, _, cx| {
67                    cx.new(|_| Empty)
68                })
69                .drag_over::<TabDragPayload>(|style, _, _, _| style.opacity(0.5))
70                .on_drop(cx.listener(move |this, payload: &TabDragPayload, _, cx| {
71                    this.reorder(payload.from_idx, ix, cx);
72                }));
73
74            tab_bar = tab_bar.child(tab);
75        }
76
77        tab_bar = tab_bar.end_child(debug_wrap(
78            "pane-add-tab-wrap",
79            "PANE-ADD-TAB".to_string(),
80            IconButton::new("pane-add-tab", IconName::Plus)
81                .icon_size(IconSize::XSmall)
82                .on_click(cx.listener(|this, _, _, cx| {
83                    let content = (this.new_tab_factory)();
84                    this.add_tab(content, cx);
85                })),
86        ));
87
88        // Close-pane "x" at the far right of the header — asks the parent
89        // PaneGroup to remove this whole pane (ignored if it is the last one).
90        tab_bar = tab_bar.end_child(debug_wrap(
91            "pane-close-wrap",
92            "PANE-CLOSE".to_string(),
93            IconButton::new("pane-close", IconName::Close)
94                .icon_size(IconSize::XSmall)
95                .on_click(cx.listener(|_, _, _, cx| {
96                    cx.emit(PaneEvent::CloseRequested);
97                })),
98        ));
99
100        let content = self
101            .tabs
102            .get(active_idx)
103            .map(|(_, content)| content.render(true, window, cx));
104
105        v_flex()
106            .id("pane")
107            .size_full()
108            .child(tab_bar)
109            .child(div().flex_1().min_h_0().overflow_hidden().children(content))
110    }
111}
ui/components/pane/render.rs

ui/components/pane/
render.rs
