sidebar: make SidebarMenuItem implement Styled and add label_style (longbridge#2957)

## Description

Make `SidebarMenuItem` implement `Styled` (adding `style:
StyleRefinement`) and expose a dedicated `label_style` method / field.

This brings the item API in line with `SidebarMenu` (which already
implements `Styled`) and gives callers a clean way to customize both the
item container and the label text independently.

## How to Test

- Updated gallery example to verify both `style` and `label_style` apply
correctly
- Manually checked the story/gallery UI

## Checklist

- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [ ] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)

Author: ItsCacia

crates/component/src/sidebar/menu.rs

@@ -93,6 +93,8 @@ impl Styled for SidebarMenu {
 pub struct SidebarMenuItem {
     icon: Option<Icon>,
     label: SharedString,
+    label_style: StyleRefinement,
+    style: StyleRefinement,
     handler: Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>,
     active: bool,
     default_open: bool,
@@ -111,6 +113,8 @@ impl SidebarMenuItem {
         Self {
             icon: None,
             label: label.into(),
+            label_style: StyleRefinement::default(),
+            style: StyleRefinement::default(),
             handler: Rc::new(|_, _, _| {}),
             active: false,
             collapsed: false,
@@ -130,6 +134,12 @@ impl SidebarMenuItem {
         self
     }
 
+    /// Set the style for the label
+    pub fn label_style(mut self, style: StyleRefinement) -> Self {
+        self.label_style = style;
+        self
+    }
+
     /// Set the active state of the menu item
     pub fn active(mut self, active: bool) -> Self {
         self.active = active;
@@ -273,6 +283,7 @@ impl SidebarItem for SidebarMenuItem {
                     .gap_x_2()
                     .rounded(cx.theme().radius)
                     .text_sm()
+                    .refine_style(&self.style)
                     .when(is_hoverable, |this| {
                         this.hover(|this| {
                             this.bg(cx.theme().sidebar_accent.opacity(0.8))
@@ -303,6 +314,7 @@ impl SidebarItem for SidebarMenuItem {
                                         h_flex()
                                             .flex_1()
                                             .overflow_x_hidden()
+                                            .refine_style(&self.label_style)
                                             .child(self.label.clone()),
                                     )
                                     .when_some(self.suffix.clone(), |this, suffix| {
@@ -399,6 +411,12 @@ impl SidebarItem for SidebarMenuItem {
     }
 }
 
+impl Styled for SidebarMenuItem {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.style
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

crates/story/src/stories/sidebar_story.rs

@@ -1,5 +1,6 @@
 use std::collections::HashMap;
 
+use gpui_kit::component::red_500;
 use gpui_kit::prelude::FluentBuilder;
 use gpui_kit::*;
 
@@ -551,6 +552,9 @@ impl Render for SidebarStory {
                                     .active(is_active)
                                     .default_open(ix == 0)
                                     .click_to_open(self.click_to_open_submenu)
+                                    .when(is_active, |this| {
+                                        this.border_1().border_color(Hsla::white())
+                                    })
                                     .when(ix == 0, |this| {
                                         this.context_menu({
                                             move |this, _, _| {
@@ -580,6 +584,10 @@ impl Render for SidebarStory {
                                                                 ))
                                                         }
                                                     })
+                                                    .label_style(
+                                                        StyleRefinement::default()
+                                                            .text_color(red_500()),
+                                                    )
                                                     .context_menu({
                                                         move |this, _, _| {
                                                             this.label("This is a label")