1use gpui::{
 2    AnyElement, App, BoxShadow, IntoElement, ParentElement, RenderOnce, Styled, Window, div, hsla,
 3    point, prelude::FluentBuilder, px,
 4};
 5use theme::ActiveTheme;
 6
 7use crate::{ElevationIndex, h_flex};
 8
 9use super::ButtonLike;
10
11#[derive(Clone, Copy, PartialEq)]
12pub enum SplitButtonStyle {
13    Filled,
14    Outlined,
15}
16
17/// /// A button with two parts: a primary action on the left and a secondary action on the right.
18///
19/// The left side is a [`ButtonLike`] with the main action, while the right side can contain
20/// any element (typically a dropdown trigger or similar).
21///
22/// The two sections are visually separated by a divider, but presented as a unified control.
23#[derive(IntoElement)]
24pub struct SplitButton {
25    pub left: ButtonLike,
26    pub right: AnyElement,
27    style: SplitButtonStyle,
28}
29
30impl SplitButton {
31    pub fn new(left: ButtonLike, right: AnyElement) -> Self {
32        Self {
33            left,
34            right,
35            style: SplitButtonStyle::Filled,
36        }
37    }
38
39    pub fn style(mut self, style: SplitButtonStyle) -> Self {
40        self.style = style;
41        self
42    }
43}
44
45impl RenderOnce for SplitButton {
46    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
47        h_flex()
48            .rounded_sm()
49            .border_1()
50            .border_color(cx.theme().colors().border.opacity(0.5))
51            .child(div().flex_grow().child(self.left))
52            .child(
53                div()
54                    .h_full()
55                    .w_px()
56                    .bg(cx.theme().colors().border.opacity(0.5)),
57            )
58            .child(self.right)
59            .when(self.style == SplitButtonStyle::Filled, |this| {
60                this.bg(ElevationIndex::Surface.on_elevation_bg(cx))
61                    .shadow(vec![BoxShadow {
62                        color: hsla(0.0, 0.0, 0.0, 0.16),
63                        offset: point(px(0.), px(1.)),
64                        blur_radius: px(0.),
65                        spread_radius: px(0.),
66                    }])
67            })
68    }
69}