gpui-native-kit/crates/data/src/tabs.rs

use std::rc::Rc;

use gpui::prelude::FluentBuilder as _;
use gpui::{
    AnyElement, App, ElementId, InteractiveElement as _, IntoElement, KeyDownEvent,
    ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
    Styled as _, Window, div,
};
use gpui_native_icons::{IconRole, icon};
use gpui_native_theme::{ActiveTheme as _, Theme};
use gpui_native_utils::adjacent_selectable;

/// The change reporter, fired with the next selected tab by pointer and keys.
type ChangeHandler = Rc<dyn Fn(usize, &mut Window, &mut App)>;
type TabsFn = Box<dyn Fn(&mut Window, &mut App) -> Vec<Tab>>;

/// One tab of a [`Tabs`] strip.
pub struct Tab {
    label: SharedString,
    icon: Option<IconRole>,
    disabled: bool,
}

impl Tab {
    /// Creates a tab with this label.
    pub fn new<L>(label: L) -> Self
    where
        L: Into<SharedString>,
    {
        Self {
            label: label.into(),
            icon: None,
            disabled: false,
        }
    }

    /// Shows an icon leading the label.
    pub fn icon(mut self, role: IconRole) -> Self {
        self.icon = Some(role);
        self
    }

    /// Renders the tab dimmed; clicks and keyboard skip it.
    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }
}

/// A tab strip.
#[derive(IntoElement)]
pub struct Tabs {
    id: ElementId,
    selected: usize,
    a11y_label: Option<SharedString>,
    on_change: Option<ChangeHandler>,
    tabs: Option<TabsFn>,
}

impl Tabs {
    /// Creates a strip selecting the first tab.
    pub fn new<I>(id: I) -> Self
    where
        I: Into<ElementId>,
    {
        Self {
            id: id.into(),
            selected: 0,
            a11y_label: None,
            on_change: None,
            tabs: None,
        }
    }

    /// Sets the current selection.
    pub fn selected(mut self, selected: usize) -> Self {
        self.selected = selected;
        self
    }

    /// Reports the next selected tab, from clicks and keys alike.
    pub fn on_change<F>(mut self, handler: F) -> Self
    where
        F: Fn(usize, &mut Window, &mut App) + 'static,
    {
        self.on_change = Some(Rc::new(handler));
        self
    }

    /// Sets the tabs, built fresh each render.
    pub fn tabs<F>(mut self, tabs: F) -> Self
    where
        F: Fn(&mut Window, &mut App) -> Vec<Tab> + 'static,
    {
        self.tabs = Some(Box::new(tabs));
        self
    }

    /// Overrides the accessibility label, which defaults to the id.
    pub fn accessibility_label<L>(mut self, label: L) -> Self
    where
        L: Into<SharedString>,
    {
        self.a11y_label = Some(label.into());
        self
    }
}

impl RenderOnce for Tabs {
    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
        let tabs = match self.tabs {
            Some(build) => build(window, cx),
            None => Vec::new(),
        };

        let selectable: Vec<usize> = tabs
            .iter()
            .enumerate()
            .filter(|(_, tab)| !tab.disabled)
            .map(|(index, _)| index)
            .collect();

        let focus = gpui_native_utils::focus_handle(&self.id, window, cx);
        let theme = cx.theme();

        let label = self
            .a11y_label
            .clone()
            .unwrap_or_else(|| SharedString::from(self.id.to_string()));

        let strip: Vec<AnyElement> = tabs
            .iter()
            .enumerate()
            .map(|(index, tab)| {
                render_tab(
                    theme,
                    tab,
                    index,
                    self.selected == index,
                    self.selected,
                    &self.on_change,
                    &focus,
                )
            })
            .collect();

        div()
            .id(self.id)
            .flex()
            .gap_1()
            .border_b_1()
            .border_color(theme.colors.border)
            .text_size(theme.sizes.medium.text_size)
            .track_focus(&focus)
            .focusable()
            .tab_stop(true)
            .role(Role::TabList)
            .aria_label(label)
            .on_key_down({
                let selected = self.selected;
                let on_change = self.on_change.clone();
                move |event: &KeyDownEvent, window, cx| {
                    let target = match event.keystroke.key.as_str() {
                        "right" => adjacent_selectable(&selectable, Some(selected), true),
                        "left" => adjacent_selectable(&selectable, Some(selected), false),
                        "home" => selectable.first().copied(),
                        "end" => selectable.last().copied(),
                        _ => return,
                    };
                    if let Some(next) = target
                        && next != selected
                        && let Some(on_change) = &on_change
                    {
                        on_change(next, window, cx);
                    }
                    cx.stop_propagation();
                }
            })
            .children(strip)
    }
}

fn render_tab(
    theme: &Theme,
    tab: &Tab,
    index: usize,
    selected: bool,
    selected_index: usize,
    on_change: &Option<ChangeHandler>,
    focus: &gpui::FocusHandle,
) -> AnyElement {
    let label_color = if tab.disabled {
        theme.colors.muted_foreground
    } else if selected {
        theme.ramps.primary.base
    } else {
        theme.colors.foreground
    };

    let mut strip_tab = div()
        .id(("tab", index))
        .flex()
        .items_center()
        .gap_1p5()
        .px_2()
        .py_1()
        .rounded_tl(theme.radius.sm)
        .rounded_tr(theme.radius.sm)
        .role(Role::Tab)
        .aria_selected(selected)
        .text_color(label_color)
        .when(selected, |strip_tab| {
            strip_tab
                .border_b_2()
                .border_color(theme.ramps.primary.base)
        })
        .when(!tab.disabled && !selected, |strip_tab| {
            strip_tab.hover(|strip_tab| strip_tab.bg(theme.colors.muted))
        })
        .child(
            div()
                .flex_none()
                .pb_0p5()
                .when_some(tab.icon, |strip_tab, role| {
                    strip_tab.child(
                        icon(role)
                            .size(theme.sizes.medium.icon_size * 0.75)
                            .color(label_color),
                    )
                }),
        )
        .child(strip_tab_label(tab.label.clone(), selected, theme));

    if !tab.disabled {
        strip_tab = strip_tab.cursor_pointer().on_click({
            let on_change = on_change.clone();
            let focus = focus.clone();
            move |_, window, cx| {
                window.focus(&focus, cx);
                if index != selected_index
                    && let Some(on_change) = &on_change
                {
                    on_change(index, window, cx);
                }
            }
        });
    }

    strip_tab.into_any_element()
}

fn strip_tab_label(label: SharedString, selected: bool, theme: &Theme) -> AnyElement {
    div()
        .text_color(if selected {
            theme.ramps.primary.base
        } else {
            theme.colors.foreground
        })
        .child(label)
        .into_any_element()
}