Skip to content

status_bar: add StatusBar component #2449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huacnlee merged 3 commits into from
Jun 9, 2026
Merged

status_bar: add StatusBar component #2449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9018f8d
status_bar: add StatusBar component
huacnlee Jun 8, 2026
0ca64c1
.
huacnlee Jun 9, 2026
9deb14a
.
huacnlee Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion crates/story/examples/dock.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ use gpui_component::{
button::{Button, ButtonVariants as _},
dock::{ClosePanel, DockArea, DockAreaState, DockEvent, DockItem, DockPlacement, ToggleZoom},
menu::DropdownMenu,
status_bar::StatusBar,
};

use gpui_component_assets::Assets;
Expand Down Expand Up @@ -513,7 +514,40 @@ impl Render for StoryWorkspace {
.flex()
.flex_col()
.child(self.title_bar.clone())
.child(self.dock_area.clone())
.child(div().flex_1().min_h_0().child(self.dock_area.clone()))
.child(
StatusBar::new()
.left(
Button::new("toggle-left-dock").ghost().xsmall()
.icon(IconName::PanelLeft)
.tooltip("Toggle Left Dock")
.on_click(cx.listener(|this, _, window, cx| {
this.dock_area.update(cx, |area, cx| {
area.toggle_dock(DockPlacement::Left, window, cx);
});
})),
)
.left(
Button::new("toggle-bottom-dock").ghost().xsmall()
.icon(IconName::PanelBottom)
.tooltip("Toggle Bottom Dock")
.on_click(cx.listener(|this, _, window, cx| {
this.dock_area.update(cx, |area, cx| {
area.toggle_dock(DockPlacement::Bottom, window, cx);
});
})),
)
.child(
Button::new("toggle-right-dock").ghost().xsmall()
.icon(IconName::PanelRight)
.tooltip("Toggle Right Dock")
.on_click(cx.listener(|this, _, window, cx| {
this.dock_area.update(cx, |area, cx| {
area.toggle_dock(DockPlacement::Right, window, cx);
});
})),
),
)
.children(sheet_layer)
.children(dialog_layer)
.children(notification_layer)
Expand Down
48 changes: 19 additions & 29 deletions crates/story/examples/editor.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ use gpui_component::{
},
list::ListItem,
resizable::{h_resizable, resizable_panel},
status_bar::StatusBar,
tree::{TreeItem, TreeState, tree},
v_flex,
};
Expand Down Expand Up @@ -972,7 +973,7 @@ impl Example {
&self,
_: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
) -> Button {
Button::new("line-number")
.when(self.line_number, |this| this.icon(IconName::Check))
.label("Line Number")
Expand All @@ -987,7 +988,7 @@ impl Example {
}))
}

fn render_soft_wrap_button(&self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
fn render_soft_wrap_button(&self, _: &mut Window, cx: &mut Context<Self>) -> Button {
Button::new("soft-wrap")
.ghost()
.xsmall()
Expand All @@ -1006,7 +1007,7 @@ impl Example {
&self,
_: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
) -> Button {
Button::new("show-whitespace")
.ghost()
.xsmall()
Expand All @@ -1025,7 +1026,7 @@ impl Example {
&self,
_: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
) -> Button {
Button::new("indent-guides")
.ghost()
.xsmall()
Expand All @@ -1040,7 +1041,7 @@ impl Example {
}))
}

fn render_folding_button(&self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
fn render_folding_button(&self, _: &mut Window, cx: &mut Context<Self>) -> Button {
Button::new("folding")
.ghost()
.xsmall()
Expand Down Expand Up @@ -1076,7 +1077,7 @@ impl Example {
&self,
_: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
) -> Button {
Button::new("scroll-beyond-last-line")
.ghost()
.xsmall()
Expand All @@ -1097,7 +1098,7 @@ impl Example {
&self,
_: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
) -> Button {
Button::new("cursor-surrounding-lines")
.ghost()
.xsmall()
Expand All @@ -1114,7 +1115,7 @@ impl Example {
}))
}

fn render_go_to_line_button(&self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
fn render_go_to_line_button(&self, _: &mut Window, cx: &mut Context<Self>) -> Button {
let position = self.editor.read(cx).cursor_position();
let cursor = self.editor.read(cx).cursor();

Expand All @@ -1127,6 +1128,7 @@ impl Example {
position.character + 1,
cursor
))
.tooltip("Go to Line/Column")
.on_click(cx.listener(Self::go_to_line))
}
}
Expand Down Expand Up @@ -1173,27 +1175,15 @@ impl Render for Example {
),
)
.child(
h_flex()
.justify_between()
.text_sm()
.bg(cx.theme().background)
.py_1p5()
.px_4()
.border_t_1()
.border_color(cx.theme().border)
.text_color(cx.theme().muted_foreground)
.child(
h_flex()
.gap_3()
.child(self.render_line_number_button(window, cx))
.child(self.render_soft_wrap_button(window, cx))
.child(self.render_show_whitespaces_button(window, cx))
.child(self.render_indent_guides_button(window, cx))
.child(self.render_folding_button(window, cx))
.child(self.render_scroll_beyond_last_line_button(window, cx))
.child(self.render_cursor_surrounding_lines_button(window, cx)),
)
.child(self.render_go_to_line_button(window, cx)),
StatusBar::new()
.left(self.render_line_number_button(window, cx))
.left(self.render_soft_wrap_button(window, cx))
.left(self.render_show_whitespaces_button(window, cx))
.left(self.render_indent_guides_button(window, cx))
.left(self.render_folding_button(window, cx))
.left(self.render_scroll_beyond_last_line_button(window, cx))
.left(self.render_cursor_surrounding_lines_button(window, cx))
.right(self.render_go_to_line_button(window, cx)),
),
)
}
Expand Down
37 changes: 35 additions & 2 deletions crates/story/src/gallery.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
use gpui::{prelude::*, *};
use gpui_component::{
ActiveTheme as _, Icon, IconName, h_flex,
ActiveTheme as _, Icon, IconName, Sizable as _,
button::{Button, ButtonVariants as _},
h_flex,
input::{Input, InputEvent, InputState},
resizable::{h_resizable, resizable_panel},
separator::Separator,
sidebar::{Sidebar, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuItem},
status_bar::StatusBar,
v_flex,
};

Expand Down Expand Up @@ -84,6 +88,7 @@ impl Gallery {
StoryContainer::panel::<SkeletonStory>(window, cx),
StoryContainer::panel::<SliderStory>(window, cx),
StoryContainer::panel::<SpinnerStory>(window, cx),
StoryContainer::panel::<StatusBarStory>(window, cx),
StoryContainer::panel::<StepperStory>(window, cx),
StoryContainer::panel::<SwitchStory>(window, cx),
StoryContainer::panel::<DataTableStory>(window, cx),
Expand Down Expand Up @@ -162,7 +167,10 @@ impl Render for Gallery {
("".into(), "".into())
};

h_resizable("gallery-container")
let current_story = story_name.clone();
let total_components: usize = self.stories.iter().map(|(_, items)| items.len()).sum();

let body = h_resizable("gallery-container")
.child(
resizable_panel()
.size(px(255.))
Expand Down Expand Up @@ -300,6 +308,31 @@ impl Render for Gallery {
}),
)
.into_any_element(),
);

v_flex()
.size_full()
.child(div().flex_1().min_h_0().child(body))
.child(
StatusBar::new()
.child(Icon::new(IconName::GalleryVerticalEnd).xsmall())
.child(format!("{total_components} components"))
.child(Separator::vertical())
.when(!current_story.is_empty(), |this| {
this.child(current_story.clone())
})
.right(cx.theme().theme_name().clone())
.right(format!("v{}", env!("CARGO_PKG_VERSION")))
.right(
Button::new("assistant")
.ghost()
.xsmall()
.icon(IconName::Github)
.tooltip("GPUI Component GitHub repository")
.on_click(|_, _, cx| {
cx.open_url("https://github.com/longbridge/gpui-component")
}),
),
)
}
}
2 changes: 2 additions & 0 deletions crates/story/src/stories/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ mod sidebar_story;
mod skeleton_story;
mod slider_story;
mod spinner_story;
mod status_bar_story;
mod stepper_story;
mod switch_story;
mod table_story;
Expand Down Expand Up @@ -110,6 +111,7 @@ pub use sidebar_story::SidebarStory;
pub use skeleton_story::SkeletonStory;
pub use slider_story::SliderStory;
pub use spinner_story::SpinnerStory;
pub use status_bar_story::StatusBarStory;
pub use stepper_story::StepperStory;
pub use switch_story::SwitchStory;
pub use table_story::TableStory;
Expand Down
Loading
Loading