feat: add title bar style option (native vs integrated)

Introduced a new configuration setting allowing users to choose between:
1. Native: Standard OS title bar with the tab bar rendered below it.
2. Integrated: Custom title bar with Mac-style controls and embedded tabs.

Updated:
- ConfigFile/Store to include title_bar_style (defaulting to Native).
- localization files for English and Chinese with 'Restart required' hints.
- Settings dialog with a new dropdown in the Appearance group.
- Startup and UI logic to handle conditional title bar and tab bar rendering.
- UI now uses the title bar style detected at startup to ensure consistency
  until the application is restarted.
- Restored Windows app icon loading in startup.rs.
- Fixed Native mode layout to match previous standard behavior.

locales/en.yml

@@ -154,3 +154,7 @@ settings_split_pane_up: "Split Pane Up"
 settings_split_pane_down: "Split Pane Down"
 settings_close_pane: "Close Pane"
 keybind_conflict: '"%{key}" is already used by "%{action}", please choose another key'
+title_bar_style: "Title Bar Style"
+title_bar_native: "Native"
+title_bar_integrated: "Integrated"
+restart_hint: " (Restart required)"

locales/zh-CN.yml

@@ -156,3 +156,7 @@ settings_split_pane_up: "向上拆分面板"
 settings_split_pane_down: "向下拆分面板"
 settings_close_pane: "关闭当前面板"
 keybind_conflict: '"%{key}" 已被「%{action}」使用，请选择其他快捷键'
+title_bar_style: "标题栏样式"
+title_bar_native: "原生"
+title_bar_integrated: "融合"
+restart_hint: " (修改后重启生效)"

src/app/dialogs.rs

@@ -1297,6 +1297,50 @@ impl Ashell {
                                                         })
                                                     )
                                                 )
+                                                .item(
+                                                    SettingItem::new(
+                                                        format!("{}{}", t!("title_bar_style"), t!("restart_hint")),
+                                                        SettingField::render({
+                                                            let view = view_clone_for_general.clone();
+                                                            move |_, _window, cx| {
+                                                                let current_style = view.read(cx).config.title_bar_style();
+                                                                Button::new("title-bar-style-dropdown")
+                                                                    .small()
+                                                                    .label(match current_style {
+                                                                        crate::session::config::TitleBarStyle::Native => t!("title_bar_native").to_string(),
+                                                                        crate::session::config::TitleBarStyle::Integrated => t!("title_bar_integrated").to_string(),
+                                                                    })
+                                                                    .dropdown_menu_with_anchor(Anchor::BottomRight, {
+                                                                        let view = view.clone();
+                                                                        move |mut menu, window, cx| {
+                                                                            let current_style = view.read(cx).config.title_bar_style();
+                                                                            menu = menu.min_w(160.)
+                                                                                .item(
+                                                                                    PopupMenuItem::new(t!("title_bar_native").to_string())
+                                                                                        .checked(current_style == crate::session::config::TitleBarStyle::Native)
+                                                                                        .on_click(window.listener_for(&view, |this, _, _, cx| {
+                                                                                            this.config.set_title_bar_style(crate::session::config::TitleBarStyle::Native);
+                                                                                            let _ = this.config.save();
+                                                                                            cx.notify();
+                                                                                        }))
+                                                                                )
+                                                                                .item(
+                                                                                    PopupMenuItem::new(t!("title_bar_integrated").to_string())
+                                                                                        .checked(current_style == crate::session::config::TitleBarStyle::Integrated)
+                                                                                        .on_click(window.listener_for(&view, |this, _, _, cx| {
+                                                                                            this.config.set_title_bar_style(crate::session::config::TitleBarStyle::Integrated);
+                                                                                            let _ = this.config.save();
+                                                                                            cx.notify();
+                                                                                        }))
+                                                                                );
+                                                                            menu
+                                                                        }
+                                                                    })
+                                                                    .into_any_element()
+                                                            }
+                                                        })
+                                                    )
+                                                )
                                         )
                                         .group(
                                             SettingGroup::new()

src/app/mod.rs

@@ -258,6 +258,7 @@ pub(crate) struct Ashell {
     pub(crate) prev_monitoring_size: Option<Pixels>,
     pub(crate) status: SharedString,
     pub(crate) config: ConfigStore,
+    pub(crate) active_title_bar_style: crate::session::config::TitleBarStyle,
     pub(crate) system_sampler: SystemSampler,
     pub(crate) recording_action: Option<String>,
     pub(crate) active_dialog: Option<DialogKind>,
@@ -482,6 +483,7 @@ impl Ashell {
             collapsed_saved_scroll_handle: gpui::ScrollHandle::new(),
             prev_monitoring_size: None,
             status: "ready".into(),
+            active_title_bar_style: config.title_bar_style(),
             config,
             system_sampler,
             recording_action: None,

src/app/startup.rs

@@ -176,17 +176,23 @@ pub(crate) fn sync_macos_launch_environment() {
 pub(crate) fn sync_macos_launch_environment() {}
 
 pub(crate) fn open_main_window(cx: &mut App) {
-    let mut window_options = WindowOptions {
-        titlebar: Some(gpui_component::TitleBar::title_bar_options()),
-        ..Default::default()
-    };
+    let config = ConfigStore::load().unwrap_or_else(|_| ConfigStore::in_memory());
+
+    let mut window_options = WindowOptions::default();
+
+    if config.title_bar_style() == crate::session::config::TitleBarStyle::Integrated {
+        window_options.titlebar = Some(gpui::TitlebarOptions {
+            title: None,
+            appears_transparent: true,
+            traffic_light_position: Some(gpui::point(px(9.0), px(9.0))),
+        });
+    }
 
     #[cfg(not(target_os = "macos"))]
     if let Ok(img) = image::load_from_memory(include_bytes!("../../assets/icons/ashell.png")) {
         window_options.icon = Some(std::sync::Arc::new(img.into_rgba8()));
     }
 
-    let config = ConfigStore::load().unwrap_or_else(|_| ConfigStore::in_memory());
     if let Some(bounds) = config.window_bounds() {
         window_options.window_bounds = Some(match bounds {
             crate::session::config::SavedWindowBounds::Fullscreen {

src/app/ui.rs

@@ -1,12 +1,12 @@
 use gpui::{
     Context, ElementId, Focusable as _, FontWeight, Hsla, InteractiveElement as _, IntoElement,
     MouseButton, MouseDownEvent, ParentElement as _, PathBuilder, Pixels, Render,
-    StatefulInteractiveElement as _, Styled as _, Window, canvas, div, point,
-    prelude::FluentBuilder as _, px, rems, uniform_list,
+    StatefulInteractiveElement as _, Styled as _, Window, WindowControlArea, canvas, div, hsla,
+    point, prelude::FluentBuilder as _, px, rems, uniform_list,
 };
 use gpui_component::{
-    ActiveTheme, Disableable as _, ElementExt, Icon, IconName, Root, Size, Sizable as _,
-    button::{Button, ButtonVariants as _},
+    ActiveTheme, Disableable as _, ElementExt, Icon, IconName, InteractiveElementExt as _, Root,
+    Size, Sizable as _, button::{Button, ButtonVariants as _},
     checkbox::Checkbox,
     h_flex,
     input::Input,
@@ -1896,6 +1896,58 @@ impl Ashell {
             )
     }
 
+    fn render_window_controls(&self, window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
+        let is_macos = cfg!(target_os = "macos");
+        let is_fullscreen = window.is_fullscreen();
+
+        h_flex()
+            .flex_none()
+            .items_center()
+            .px_3()
+            .gap_2()
+            .when(!is_macos || is_fullscreen, |this| {
+                this.child(
+                    div()
+                        .id("window-close")
+                        .size(px(12.))
+                        .rounded_full()
+                        .bg(hsla(0.0, 0.8, 0.4, 1.0)) // Red
+                        .on_click(|_, window, _| window.remove_window())
+                        .hover(|s| s.bg(hsla(0.0, 0.8, 0.5, 1.0)))
+                        .active(|s| s.bg(hsla(0.0, 0.8, 0.3, 1.0))),
+                )
+                .child(
+                    div()
+                        .id("window-minimize")
+                        .size(px(12.))
+                        .rounded_full()
+                        .bg(hsla(0.12, 0.8, 0.4, 1.0)) // Yellow
+                        .on_click(|_, window, _| window.minimize_window())
+                        .hover(|s| s.bg(hsla(0.12, 0.8, 0.5, 1.0)))
+                        .active(|s| s.bg(hsla(0.12, 0.8, 0.3, 1.0))),
+                )
+                .child(
+                    div()
+                        .id("window-maximize")
+                        .size(px(12.))
+                        .rounded_full()
+                        .bg(hsla(0.33, 0.8, 0.4, 1.0)) // Green
+                        .on_click(|_, window, _| {
+                            if window.is_fullscreen() {
+                                window.toggle_fullscreen();
+                            } else {
+                                window.zoom_window();
+                            }
+                        })
+                        .hover(|s| s.bg(hsla(0.33, 0.8, 0.5, 1.0)))
+                        .active(|s| s.bg(hsla(0.33, 0.8, 0.3, 1.0))),
+                )
+            })
+            .when(is_macos, |this| {
+                this.when(!is_fullscreen, |this| this.w(px(80.)))
+            })
+    }
+
     fn render_tab_bar(&self, cx: &mut Context<Self>) -> impl IntoElement {
         let active_tab_index = self
             .active_tab
@@ -1919,150 +1971,131 @@ impl Ashell {
                 (g.id.clone(), g.title.clone(), pane_ids)
             })
             .collect();
-        v_flex()
-            .h(px(32.))
-            .w_full()
-            .flex_none()
-            .bg(cx.theme().tab_bar)
+        h_flex()
+            .flex_1()
+            .min_w(px(0.))
+            .h_full()
+            .items_center()
+            .gap_2()
+            .child(
+                div()
+                    .flex_1()
+                    .min_w(px(0.))
+                    .h_full()
+                    .overflow_x_hidden()
+                    .child({
+                        TabBar::new("ashell-tab-bar")
+                            .track_scroll(&self.tabs_scroll_handle)
+                            .selected_index(selected)
+                            .children(groups_data.iter().enumerate().map(
+                                |(ix, (group_id, title, pane_ids))| {
+                                    let gid = group_id.clone();
+                                    let label = if pane_ids.len() > 1 {
+                                        format!("{} ({})", title, pane_ids.len())
+                                    } else {
+                                        title.clone()
+                                    };
+                                    let close_id = if self.active_group.as_ref() == Some(&gid) {
+                                        self.active_tab.clone().unwrap_or_else(|| {
+                                            pane_ids.first().cloned().unwrap_or_default()
+                                        })
+                                    } else {
+                                        pane_ids.first().cloned().unwrap_or_default()
+                                    };
+
+                                    let dot_color = pane_ids
+                                        .first()
+                                        .and_then(|id| self.tabs.iter().find(|t| t.id == *id))
+                                        .map(|tab| {
+                                            if tab.connected {
+                                                cx.theme().success
+                                            } else {
+                                                cx.theme().danger
+                                            }
+                                        })
+                                        .unwrap_or(cx.theme().success);
+                                    Tab::new()
+                                        .min_w(px(80.))
+                                        .prefix(div().w(px(5.)).h(px(32.)).bg(dot_color))
+                                        .child(
+                                            div()
+                                                .when(ix == selected, |this| {
+                                                    this.font_weight(FontWeight::BOLD)
+                                                        .text_color(cx.theme().primary)
+                                                        .text_base()
+                                                })
+                                                .child(label),
+                                        )
+                                        .on_click(cx.listener(move |this, _, window, cx| {
+                                            this.activate_group(gid.clone(), window, cx)
+                                        }))
+                                        .suffix(
+                                            Button::new(("tab-close", ix))
+                                                .ghost()
+                                                .xsmall()
+                                                .icon(IconName::Close)
+                                                .mr(px(5.))
+                                                .on_mouse_down(MouseButton::Left, |_, window, cx| {
+                                                    window.prevent_default();
+                                                    cx.stop_propagation();
+                                                })
+                                                .on_click(cx.listener(move |this, _, window, cx| {
+                                                    window.prevent_default();
+                                                    cx.stop_propagation();
+                                                    if !close_id.is_empty() {
+                                                        this.close_tab(close_id.clone(), cx)
+                                                    }
+                                                })),
+                                        )
+                                },
+                            ))
+                            .last_empty_space(div().w_3())
+                            .w_full()
+                            .h_full()
+                    }),
+            )
             .child(
                 h_flex()
-                    .h_full()
-                    .w_full()
+                    .flex_none()
                     .items_center()
-                    .gap_2()
+                    .gap_1()
+                    .pr(px(6.))
                     .child(
-                        div()
-                            .flex_1()
-                            .min_w(px(0.))
-                            .h_full()
-                            .overflow_x_hidden()
-                            .child({
-                                TabBar::new("ashell-tab-bar")
-                                    .track_scroll(&self.tabs_scroll_handle)
-                                    .selected_index(selected)
-                                    .children(groups_data.iter().enumerate().map(
-                                        |(ix, (group_id, title, pane_ids))| {
-                                            let gid = group_id.clone();
-                                            let label = if pane_ids.len() > 1 {
-                                                format!("{} ({})", title, pane_ids.len())
-                                            } else {
-                                                title.clone()
-                                            };
-                                            let close_id = if self.active_group.as_ref()
-                                                == Some(&gid)
-                                            {
-                                                self.active_tab.clone().unwrap_or_else(|| {
-                                                    pane_ids.first().cloned().unwrap_or_default()
-                                                })
-                                            } else {
-                                                pane_ids.first().cloned().unwrap_or_default()
-                                            };
-                                            let dot_color = pane_ids
-                                                .first()
-                                                .and_then(|id| {
-                                                    self.tabs.iter().find(|t| t.id == *id)
-                                                })
-                                                .map(|tab| {
-                                                    if tab.connected {
-                                                        cx.theme().success
-                                                    } else {
-                                                        cx.theme().danger
-                                                    }
-                                                })
-                                                .unwrap_or(cx.theme().success);
-                                            Tab::new()
-                                                .min_w(px(80.))
-                                                .prefix(div().w(px(5.)).h(px(32.)).bg(dot_color))
-                                                .child(
-                                                    div()
-                                                        .when(ix == selected, |this| {
-                                                            this.font_weight(FontWeight::BOLD)
-                                                                .text_color(cx.theme().primary)
-                                                                .text_base()
-                                                        })
-                                                        .child(label),
-                                                )
-                                                .on_click(cx.listener(
-                                                    move |this, _, window, cx| {
-                                                        this.activate_group(gid.clone(), window, cx)
-                                                    },
-                                                ))
-                                                .suffix(
-                                                    Button::new(("tab-close", ix))
-                                                        .ghost()
-                                                        .xsmall()
-                                                        .icon(IconName::Close)
-                                                        .mr(px(5.))
-                                                        .on_mouse_down(
-                                                            MouseButton::Left,
-                                                            |_, window, cx| {
-                                                                window.prevent_default();
-                                                                cx.stop_propagation();
-                                                            },
-                                                        )
-                                                        .on_click(cx.listener(
-                                                            move |this, _, window, cx| {
-                                                                window.prevent_default();
-                                                                cx.stop_propagation();
-                                                                if !close_id.is_empty() {
-                                                                    this.close_tab(
-                                                                        close_id.clone(),
-                                                                        cx,
-                                                                    )
-                                                                }
-                                                            },
-                                                        )),
-                                                )
-                                        },
-                                    ))
-                                    .last_empty_space(div().w_3())
-                                    .w_full()
-                                    .h_full()
-                            }),
+                        Button::new("open-selector")
+                            .secondary()
+                            .small()
+                            .rounded(px(999.))
+                            .icon(IconName::Plus)
+                            .tooltip(t!("settings_open_session").to_string())
+                            .on_click(cx.listener(|this, _, window, cx| {
+                                this.show_selector_dialog(window, cx)
+                            })),
                     )
                     .child(
-                        h_flex()
-                            .flex_none()
-                            .items_center()
-                            .gap_1()
-                            .pr(px(6.))
-                            .child(
-                                Button::new("open-selector")
-                                    .secondary()
-                                    .small()
-                                    .rounded(px(999.))
-                                    .icon(IconName::Plus)
-                                    .tooltip(t!("settings_open_session").to_string())
-                                    .on_click(cx.listener(|this, _, window, cx| {
-                                        this.show_selector_dialog(window, cx)
-                                    })),
-                            )
-                            .child(
-                                Button::new("split-horizontal")
-                                    .secondary()
-                                    .small()
-                                    .rounded(px(999.))
-                                    .icon(IconName::PanelBottom)
-                                    .tooltip(t!("settings_split_pane_down").to_string())
-                                    .on_click(cx.listener(|this, _, window, cx| {
-                                        window.prevent_default();
-                                        cx.stop_propagation();
-                                        this.split_current_pane("down", cx);
-                                    })),
-                            )
-                            .child(
-                                Button::new("split-vertical")
-                                    .secondary()
-                                    .small()
-                                    .rounded(px(999.))
-                                    .icon(IconName::PanelRight)
-                                    .tooltip(t!("settings_split_pane_right").to_string())
-                                    .on_click(cx.listener(|this, _, window, cx| {
-                                        window.prevent_default();
-                                        cx.stop_propagation();
-                                        this.split_current_pane("right", cx);
-                                    })),
-                            ),
+                        Button::new("split-horizontal")
+                            .secondary()
+                            .small()
+                            .rounded(px(999.))
+                            .icon(IconName::PanelBottom)
+                            .tooltip(t!("settings_split_pane_down").to_string())
+                            .on_click(cx.listener(|this, _, window, cx| {
+                                window.prevent_default();
+                                cx.stop_propagation();
+                                this.split_current_pane("down", cx);
+                            })),
+                    )
+                    .child(
+                        Button::new("split-vertical")
+                            .secondary()
+                            .small()
+                            .rounded(px(999.))
+                            .icon(IconName::PanelRight)
+                            .tooltip(t!("settings_split_pane_right").to_string())
+                            .on_click(cx.listener(|this, _, window, cx| {
+                                window.prevent_default();
+                                cx.stop_propagation();
+                                this.split_current_pane("right", cx);
+                            })),
                     ),
             )
     }
@@ -2431,6 +2464,21 @@ impl Render for Ashell {
                                 .size_full()
                                 .relative()
                                 .overflow_hidden()
+                                .when(
+                                    self.active_title_bar_style == crate::session::config::TitleBarStyle::Native,
+                                    |this| {
+                                        this.child(
+                                            div()
+                                                .flex_none()
+                                                .h(px(32.))
+                                                .w_full()
+                                                .bg(cx.theme().tab_bar)
+                                                .border_b_1()
+                                                .border_color(cx.theme().border)
+                                                .child(self.render_tab_bar(cx)),
+                                        )
+                                    },
+                                )
                                 .child(body_panel),
                         ),
                 )
@@ -2451,6 +2499,21 @@ impl Render for Ashell {
                     .size_full()
                     .relative()
                     .overflow_hidden()
+                    .when(
+                        self.active_title_bar_style == crate::session::config::TitleBarStyle::Native,
+                        |this| {
+                            this.child(
+                                div()
+                                    .flex_none()
+                                    .h(px(32.))
+                                    .w_full()
+                                    .bg(cx.theme().tab_bar)
+                                    .border_b_1()
+                                    .border_color(cx.theme().border)
+                                    .child(self.render_tab_bar(cx)),
+                            )
+                        },
+                    )
                     .child(body_panel),
             );
 
@@ -2493,11 +2556,32 @@ impl Render for Ashell {
                     this.close_tab(active_id, cx);
                 }
             }))
-            .child(
-                gpui_component::TitleBar::new().child(
-                    div().flex().items_center().w_full().child(self.render_tab_bar(cx)),
-                ),
-            )
+            .when(self.active_title_bar_style == crate::session::config::TitleBarStyle::Integrated, |this| {
+                this.child(
+                    div()
+                        .id("title-bar")
+                        .flex()
+                        .items_center()
+                        .h(px(34.))
+                        .w_full()
+                        .bg(cx.theme().tab_bar)
+                        .on_double_click(|_, window, _| {
+                            #[cfg(target_os = "macos")]
+                            window.titlebar_double_click();
+                            #[cfg(not(target_os = "macos"))]
+                            window.zoom_window();
+                        })
+                        .child(self.render_window_controls(window, cx))
+                        .child(
+                            div()
+                                .flex_1()
+                                .min_w(px(0.))
+                                .h_full()
+                                .window_control_area(WindowControlArea::Drag)
+                                .child(self.render_tab_bar(cx)),
+                        ),
+                )
+            })
             .child(
                 div().flex_1().min_h_0().child(workspace),
             )

src/session/config.rs

@@ -98,6 +98,14 @@ pub enum SavedWindowBounds {
     },
 }
 
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq, Default)]
+#[serde(rename_all = "lowercase")]
+pub enum TitleBarStyle {
+    #[default]
+    Native,
+    Integrated,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, Default)]
 pub struct ConfigFile {
     #[serde(default = "default_follow_system_theme")]
@@ -121,6 +129,8 @@ pub struct ConfigFile {
     #[serde(default = "default_terminal_font_family")]
     pub terminal_font_family: String,
     #[serde(default)]
+    pub title_bar_style: TitleBarStyle,
+    #[serde(default)]
     pub sessions: Vec<Session>,
     #[serde(default)]
     pub window_bounds: Option<SavedWindowBounds>,
@@ -406,6 +416,14 @@ impl ConfigStore {
         self.cache.terminal_font_family = family.to_string();
     }
 
+    pub fn title_bar_style(&self) -> TitleBarStyle {
+        self.cache.title_bar_style
+    }
+
+    pub fn set_title_bar_style(&mut self, style: TitleBarStyle) {
+        self.cache.title_bar_style = style;
+    }
+
     pub fn show_hidden_files(&self) -> bool {
         self.cache.show_hidden_files
     }