From 6017eebaed78775a84462cbe92d64826a4a5406e Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Mon, 27 Oct 2025 08:20:37 +0700
Subject: [PATCH] chore: update gpui & components

---
 Cargo.lock                               |   40 +-
 crates/coop/src/views/account.rs         |   20 +-
 crates/coop/src/views/chat/mod.rs        |    8 +-
 crates/coop/src/views/login.rs           |    9 -
 crates/coop/src/views/new_account.rs     |    9 -
 crates/coop/src/views/onboarding.rs      |    5 -
 crates/coop/src/views/sidebar/mod.rs     |   10 +-
 crates/coop/src/views/welcome.rs         |   10 -
 crates/ui/src/actions.rs                 |   12 +-
 crates/ui/src/button.rs                  |  157 ++-
 crates/ui/src/dropdown.rs                |   10 +-
 crates/ui/src/input/element.rs           |   15 +-
 crates/ui/src/input/state.rs             |   15 +-
 crates/ui/src/input/text_input.rs        |    1 +
 crates/ui/src/input/text_wrapper.rs      |   16 +-
 crates/ui/src/kbd.rs                     |  312 ++++++
 crates/ui/src/lib.rs                     |    8 +-
 crates/ui/src/list/list.rs               |   24 +-
 crates/ui/src/menu/app_menu_bar.rs       |  244 +++++
 crates/ui/src/{ => menu}/context_menu.rs |  105 +-
 crates/ui/src/menu/menu_item.rs          |  122 +++
 crates/ui/src/menu/mod.rs                |   14 +
 crates/ui/src/menu/popup_menu.rs         | 1176 ++++++++++++++++++++++
 crates/ui/src/styled.rs                  |    4 +
 24 files changed, 2112 insertions(+), 234 deletions(-)
 create mode 100644 crates/ui/src/kbd.rs
 create mode 100644 crates/ui/src/menu/app_menu_bar.rs
 rename crates/ui/src/{ => menu}/context_menu.rs (69%)
 create mode 100644 crates/ui/src/menu/menu_item.rs
 create mode 100644 crates/ui/src/menu/mod.rs
 create mode 100644 crates/ui/src/menu/popup_menu.rs

diff --git a/Cargo.lock b/Cargo.lock
index 0d26faa..40eb67c 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -810,9 +810,9 @@ dependencies = [
 
 [[package]]
 name = "bstr"
-version = "1.12.0"
+version = "1.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "234113d19d0d7d613b40e86fb654acf958910802bcceab913a4f9e7cda03b1a4"
+checksum = "63044e1ae8e69f3b5a92c736ca6269b8d12fa7efe39bf34ddb06d102cf0e2cab"
 dependencies = [
  "memchr",
  "serde",
@@ -1157,7 +1157,7 @@ dependencies = [
 [[package]]
 name = "collections"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "indexmap",
  "rustc-hash 2.1.1",
@@ -1597,7 +1597,7 @@ dependencies = [
 [[package]]
 name = "derive_refineable"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2494,7 +2494,7 @@ dependencies = [
 [[package]]
 name = "gpui"
 version = "0.2.2"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "as-raw-xcb-connection",
@@ -2589,7 +2589,7 @@ dependencies = [
 [[package]]
 name = "gpui_macros"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
@@ -2600,7 +2600,7 @@ dependencies = [
 [[package]]
 name = "gpui_tokio"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "gpui",
@@ -2829,7 +2829,7 @@ dependencies = [
 [[package]]
 name = "http_client"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "async-compression",
@@ -2854,7 +2854,7 @@ dependencies = [
 [[package]]
 name = "http_client_tls"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "rustls",
  "rustls-platform-verifier",
@@ -3672,7 +3672,7 @@ dependencies = [
 [[package]]
 name = "media"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "bindgen 0.71.1",
@@ -3789,9 +3789,9 @@ dependencies = [
 
 [[package]]
 name = "moxcms"
-version = "0.7.7"
+version = "0.7.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c588e11a3082784af229e23e8e4ecf5bcc6fbe4f69101e0421ce8d79da7f0b40"
+checksum = "692af879e4d9383c0fd9dec15524af6b6977c8bf1c6b278a4526d5341347c574"
 dependencies = [
  "num-traits",
  "pxfm",
@@ -4514,7 +4514,7 @@ checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 [[package]]
 name = "perf"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "collections",
  "serde",
@@ -5130,7 +5130,7 @@ dependencies = [
 [[package]]
 name = "refineable"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "derive_refineable",
 ]
@@ -5237,7 +5237,7 @@ dependencies = [
 [[package]]
 name = "reqwest_client"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "bytes",
@@ -5291,7 +5291,7 @@ dependencies = [
 [[package]]
 name = "rope"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "arrayvec",
  "log",
@@ -5759,7 +5759,7 @@ checksum = "16c2f82143577edb4921b71ede051dac62ca3c16084e918bf7b40c96ae10eb33"
 [[package]]
 name = "semantic_version"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "serde",
@@ -6203,7 +6203,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 [[package]]
 name = "sum_tree"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "arrayvec",
  "log",
@@ -7239,7 +7239,7 @@ checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
 [[package]]
 name = "util"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "anyhow",
  "async-fs",
@@ -7274,7 +7274,7 @@ dependencies = [
 [[package]]
 name = "util_macros"
 version = "0.1.0"
-source = "git+https://github.com/zed-industries/zed#b7cc597d28409b67c7985f8b983bc28241255f09"
+source = "git+https://github.com/zed-industries/zed#fd3ca0303ff1dfc552119878724eb151bc94b49c"
 dependencies = [
  "perf",
  "quote",
diff --git a/crates/coop/src/views/account.rs b/crates/coop/src/views/account.rs
index 5ca73d6..74b67db 100644
--- a/crates/coop/src/views/account.rs
+++ b/crates/coop/src/views/account.rs
@@ -21,7 +21,6 @@ use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
 use ui::dock_area::panel::{Panel, PanelEvent};
 use ui::indicator::Indicator;
-use ui::popup_menu::PopupMenu;
 use ui::{h_flex, v_flex, ContextModal, Sizable, StyledExt};
 
 use crate::actions::{reset, CoopAuthUrlHandler};
@@ -197,14 +196,6 @@ impl Panel for Account {
     fn title(&self, _cx: &App) -> AnyElement {
         self.name.clone().into_any_element()
     }
-
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
-
-    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
-        vec![]
-    }
 }
 
 impl EventEmitter<PanelEvent> for Account {}
@@ -308,8 +299,15 @@ impl Render for Account {
                                         })),
                                 )
                             })
-                            .active(|this| this.bg(cx.theme().element_active))
-                            .hover(|this| this.bg(cx.theme().element_hover))
+                            .text_color(cx.theme().text)
+                            .active(|this| {
+                                this.text_color(cx.theme().element_foreground)
+                                    .bg(cx.theme().element_active)
+                            })
+                            .hover(|this| {
+                                this.text_color(cx.theme().element_foreground)
+                                    .bg(cx.theme().element_hover)
+                            })
                             .on_click(cx.listener(move |this, _e, window, cx| {
                                 this.login(window, cx);
                             })),
diff --git a/crates/coop/src/views/chat/mod.rs b/crates/coop/src/views/chat/mod.rs
index 3caf248..9525167 100644
--- a/crates/coop/src/views/chat/mod.rs
+++ b/crates/coop/src/views/chat/mod.rs
@@ -34,7 +34,7 @@ use ui::emoji_picker::EmojiPicker;
 use ui::input::{InputEvent, InputState, TextInput};
 use ui::modal::ModalButtonProps;
 use ui::notification::Notification;
-use ui::popup_menu::{PopupMenu, PopupMenuExt};
+use ui::popup_menu::PopupMenuExt;
 use ui::text::RenderedText;
 use ui::{
     h_flex, v_flex, ContextModal, Disableable, Icon, IconName, InteractiveElementExt, Sizable,
@@ -1313,10 +1313,6 @@ impl Panel for Chat {
         })
     }
 
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
-
     fn toolbar_buttons(&self, _window: &Window, cx: &App) -> Vec<Button> {
         let subject_button = self.subject_button(cx);
         let reload_button = self.reload_button(cx);
@@ -1417,7 +1413,7 @@ impl Render for Chat {
                                             .ghost()
                                             .large()
                                             .popup_menu(move |this, _window, _cx| {
-                                                this.title("Encrypt by:")
+                                                this.label("Encrypt by:")
                                                     .menu_with_check(
                                                         "Encryption Key",
                                                         matches!(kind, SignerKind::Encryption),
diff --git a/crates/coop/src/views/login.rs b/crates/coop/src/views/login.rs
index 552c6c9..a14915c 100644
--- a/crates/coop/src/views/login.rs
+++ b/crates/coop/src/views/login.rs
@@ -18,7 +18,6 @@ use ui::button::{Button, ButtonVariants};
 use ui::dock_area::panel::{Panel, PanelEvent};
 use ui::input::{InputEvent, InputState, TextInput};
 use ui::notification::Notification;
-use ui::popup_menu::PopupMenu;
 use ui::{v_flex, ContextModal, Disableable, StyledExt};
 
 use crate::actions::CoopAuthUrlHandler;
@@ -343,14 +342,6 @@ impl Panel for Login {
     fn title(&self, _cx: &App) -> AnyElement {
         self.name.clone().into_any_element()
     }
-
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
-
-    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
-        vec![]
-    }
 }
 
 impl EventEmitter<PanelEvent> for Login {}
diff --git a/crates/coop/src/views/new_account.rs b/crates/coop/src/views/new_account.rs
index 072758f..99dc112 100644
--- a/crates/coop/src/views/new_account.rs
+++ b/crates/coop/src/views/new_account.rs
@@ -20,7 +20,6 @@ use ui::button::{Button, ButtonVariants};
 use ui::dock_area::panel::{Panel, PanelEvent};
 use ui::input::{InputState, TextInput};
 use ui::modal::ModalButtonProps;
-use ui::popup_menu::PopupMenu;
 use ui::{divider, v_flex, ContextModal, Disableable, IconName, Sizable, StyledExt};
 
 use crate::views::backup_keys::BackupKeys;
@@ -261,14 +260,6 @@ impl Panel for NewAccount {
     fn title(&self, _cx: &App) -> AnyElement {
         self.name.clone().into_any_element()
     }
-
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
-
-    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
-        vec![]
-    }
 }
 
 impl EventEmitter<PanelEvent> for NewAccount {}
diff --git a/crates/coop/src/views/onboarding.rs b/crates/coop/src/views/onboarding.rs
index e4cd516..1508db8 100644
--- a/crates/coop/src/views/onboarding.rs
+++ b/crates/coop/src/views/onboarding.rs
@@ -19,7 +19,6 @@ use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
 use ui::dock_area::panel::{Panel, PanelEvent};
 use ui::notification::Notification;
-use ui::popup_menu::PopupMenu;
 use ui::{divider, h_flex, v_flex, ContextModal, Icon, IconName, Sizable, StyledExt};
 
 use crate::chatspace::{self};
@@ -214,10 +213,6 @@ impl Panel for Onboarding {
     fn title(&self, _cx: &App) -> AnyElement {
         self.name.clone().into_any_element()
     }
-
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
 }
 
 impl EventEmitter<PanelEvent> for Onboarding {}
diff --git a/crates/coop/src/views/sidebar/mod.rs b/crates/coop/src/views/sidebar/mod.rs
index f0885d1..5aef821 100644
--- a/crates/coop/src/views/sidebar/mod.rs
+++ b/crates/coop/src/views/sidebar/mod.rs
@@ -26,7 +26,7 @@ use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
 use ui::dock_area::panel::{Panel, PanelEvent};
 use ui::input::{InputEvent, InputState, TextInput};
-use ui::popup_menu::{PopupMenu, PopupMenuExt};
+use ui::popup_menu::PopupMenuExt;
 use ui::{h_flex, v_flex, ContextModal, Icon, IconName, Selectable, Sizable, StyledExt};
 
 use crate::actions::{RelayStatus, Reload};
@@ -647,14 +647,6 @@ impl Panel for Sidebar {
     fn title(&self, _cx: &App) -> AnyElement {
         self.name.clone().into_any_element()
     }
-
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
-
-    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
-        vec![]
-    }
 }
 
 impl EventEmitter<PanelEvent> for Sidebar {}
diff --git a/crates/coop/src/views/welcome.rs b/crates/coop/src/views/welcome.rs
index 6116567..ff5aff9 100644
--- a/crates/coop/src/views/welcome.rs
+++ b/crates/coop/src/views/welcome.rs
@@ -4,9 +4,7 @@ use gpui::{
     StatefulInteractiveElement, Styled, Window,
 };
 use theme::ActiveTheme;
-use ui::button::Button;
 use ui::dock_area::panel::{Panel, PanelEvent};
-use ui::popup_menu::PopupMenu;
 use ui::{v_flex, StyledExt};
 
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<Welcome> {
@@ -50,14 +48,6 @@ impl Panel for Welcome {
             )
             .into_any_element()
     }
-
-    fn popup_menu(&self, menu: PopupMenu, _cx: &App) -> PopupMenu {
-        menu.track_focus(&self.focus_handle)
-    }
-
-    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
-        vec![]
-    }
 }
 
 impl EventEmitter<PanelEvent> for Welcome {}
diff --git a/crates/ui/src/actions.rs b/crates/ui/src/actions.rs
index 0abc6c8..5669f5a 100644
--- a/crates/ui/src/actions.rs
+++ b/crates/ui/src/actions.rs
@@ -20,14 +20,4 @@ pub struct Confirm {
     pub secondary: bool,
 }
 
-actions!(
-    list,
-    [
-        /// Close current list
-        Cancel,
-        /// Select the next item in lists
-        SelectPrev,
-        /// Select the previous item in list
-        SelectNext
-    ]
-);
+actions!(ui, [Cancel, SelectUp, SelectDown, SelectLeft, SelectRight]);
diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs
index f629847..9f52ea6 100644
--- a/crates/ui/src/button.rs
+++ b/crates/ui/src/button.rs
@@ -1,7 +1,9 @@
+use std::rc::Rc;
+
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
     div, relative, AnyElement, App, ClickEvent, Div, ElementId, Hsla, InteractiveElement,
-    IntoElement, MouseButton, ParentElement, RenderOnce, SharedString, Stateful,
+    IntoElement, ParentElement, RenderOnce, SharedString, Stateful,
     StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
 };
 use theme::ActiveTheme;
@@ -111,11 +113,11 @@ impl Default for ButtonVariant {
     }
 }
 
-type OnClick = Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>;
-
 /// A Button element.
 #[derive(IntoElement)]
+#[allow(clippy::type_complexity)]
 pub struct Button {
+    id: ElementId,
     base: Stateful<Div>,
     style: StyleRefinement,
 
@@ -136,10 +138,13 @@ pub struct Button {
     loading: bool,
     loading_icon: Option<Icon>,
 
-    on_click: OnClick,
+    on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
+    on_hover: Option<Rc<dyn Fn(&bool, &mut Window, &mut App)>>,
+
+    tab_index: isize,
+    tab_stop: bool,
 
     pub(crate) selected: bool,
-    pub(crate) stop_propagation: bool,
 }
 
 impl From<Button> for AnyElement {
@@ -150,8 +155,11 @@ impl From<Button> for AnyElement {
 
 impl Button {
     pub fn new(id: impl Into<ElementId>) -> Self {
+        let id = id.into();
+
         Self {
-            base: div().id(id.into()).flex_shrink_0(),
+            id: id.clone(),
+            base: div().flex_shrink_0().id(id),
             style: StyleRefinement::default(),
             icon: None,
             label: None,
@@ -162,13 +170,15 @@ impl Button {
             size: Size::Medium,
             tooltip: None,
             on_click: None,
-            stop_propagation: true,
+            on_hover: None,
             loading: false,
             reverse: false,
             bold: false,
             cta: false,
             children: Vec::new(),
             loading_icon: None,
+            tab_index: 0,
+            tab_stop: true,
         }
     }
 
@@ -220,26 +230,52 @@ impl Button {
         self
     }
 
-    /// Set the stop propagation of the button.
-    pub fn stop_propagation(mut self, val: bool) -> Self {
-        self.stop_propagation = val;
-        self
-    }
-
     /// Set the loading icon of the button.
     pub fn loading_icon(mut self, icon: impl Into<Icon>) -> Self {
         self.loading_icon = Some(icon.into());
         self
     }
 
-    /// Set the click handler of the button.
-    pub fn on_click<C>(mut self, handler: C) -> Self
-    where
-        C: Fn(&ClickEvent, &mut Window, &mut App) + 'static,
-    {
-        self.on_click = Some(Box::new(handler));
+    /// Add click handler.
+    pub fn on_click(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Rc::new(handler));
         self
     }
+
+    /// Add hover handler, the bool parameter indicates whether the mouse is hovering.
+    pub fn on_hover(mut self, handler: impl Fn(&bool, &mut Window, &mut App) + 'static) -> Self {
+        self.on_hover = Some(Rc::new(handler));
+        self
+    }
+
+    /// Set the tab index of the button, it will be used to focus the button by tab key.
+    ///
+    /// Default is 0.
+    pub fn tab_index(mut self, tab_index: isize) -> Self {
+        self.tab_index = tab_index;
+        self
+    }
+
+    /// Set the tab stop of the button, if true, the button will be focusable by tab key.
+    ///
+    /// Default is true.
+    pub fn tab_stop(mut self, tab_stop: bool) -> Self {
+        self.tab_stop = tab_stop;
+        self
+    }
+
+    #[inline]
+    fn clickable(&self) -> bool {
+        !(self.disabled || self.loading) && self.on_click.is_some()
+    }
+
+    #[inline]
+    fn hoverable(&self) -> bool {
+        !(self.disabled || self.loading) && self.on_hover.is_some()
+    }
 }
 
 impl Disableable for Button {
@@ -295,14 +331,28 @@ impl InteractiveElement for Button {
 impl RenderOnce for Button {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         let style: ButtonVariant = self.variant;
-        let normal_style = style.normal(window, cx);
+        let clickable = self.clickable();
+        let hoverable = self.hoverable();
+        let normal_style = style.normal(cx);
         let icon_size = match self.size {
             Size::Size(v) => Size::Size(v * 0.75),
             Size::Large => Size::Medium,
             _ => self.size,
         };
 
+        let focus_handle = window
+            .use_keyed_state(self.id.clone(), cx, |_, cx| cx.focus_handle())
+            .read(cx)
+            .clone();
+
         self.base
+            .when(!self.disabled, |this| {
+                this.track_focus(
+                    &focus_handle
+                        .tab_index(self.tab_index)
+                        .tab_stop(self.tab_stop),
+                )
+            })
             .flex_shrink_0()
             .flex()
             .items_center()
@@ -390,26 +440,39 @@ impl RenderOnce for Button {
             .when(!self.disabled && !self.selected, |this| {
                 this.bg(normal_style.bg)
                     .hover(|this| {
-                        let hover_style = style.hovered(window, cx);
+                        let hover_style = style.hovered(cx);
                         this.bg(hover_style.bg).text_color(hover_style.fg)
                     })
                     .active(|this| {
-                        let active_style = style.active(window, cx);
+                        let active_style = style.active(cx);
                         this.bg(active_style.bg).text_color(active_style.fg)
                     })
             })
             .when(self.selected, |this| {
-                let selected_style = style.selected(window, cx);
+                let selected_style = style.selected(cx);
                 this.bg(selected_style.bg).text_color(selected_style.fg)
             })
             .when(self.disabled, |this| {
-                let disabled_style = style.disabled(window, cx);
+                let disabled_style = style.disabled(cx);
                 this.cursor_not_allowed()
                     .bg(disabled_style.bg)
                     .text_color(disabled_style.fg)
-                    .shadow_none()
             })
             .refine_style(&self.style)
+            .on_mouse_down(gpui::MouseButton::Left, |_, window, _| {
+                // Avoid focus on mouse down.
+                window.prevent_default();
+            })
+            .when_some(self.on_click.filter(|_| clickable), |this, on_click| {
+                this.on_click(move |event, window, cx| {
+                    (on_click)(event, window, cx);
+                })
+            })
+            .when_some(self.on_hover.filter(|_| hoverable), |this, on_hover| {
+                this.on_hover(move |hovered, window, cx| {
+                    (on_hover)(hovered, window, cx);
+                })
+            })
             .child({
                 h_flex()
                     .id("label")
@@ -442,25 +505,13 @@ impl RenderOnce for Button {
                     })
                     .children(self.children)
             })
-            .when(self.loading, |this| this.bg(normal_style.bg.opacity(0.8)))
+            .when(self.loading && !self.disabled, |this| {
+                this.bg(normal_style.bg.opacity(0.8))
+                    .text_color(normal_style.fg.opacity(0.8))
+            })
             .when_some(self.tooltip.clone(), |this, tooltip| {
                 this.tooltip(move |window, cx| Tooltip::new(tooltip.clone(), window, cx).into())
             })
-            .when_some(
-                self.on_click.filter(|_| !self.disabled && !self.loading),
-                |this, on_click| {
-                    let stop_propagation = self.stop_propagation;
-                    this.on_mouse_down(MouseButton::Left, move |_, window, cx| {
-                        window.prevent_default();
-                        if stop_propagation {
-                            cx.stop_propagation();
-                        }
-                    })
-                    .on_click(move |event, window, cx| {
-                        (on_click)(event, window, cx);
-                    })
-                },
-            )
     }
 }
 
@@ -470,14 +521,14 @@ struct ButtonVariantStyle {
 }
 
 impl ButtonVariant {
-    fn normal(&self, window: &Window, cx: &App) -> ButtonVariantStyle {
-        let bg = self.bg_color(window, cx);
-        let fg = self.text_color(window, cx);
+    fn normal(&self, cx: &App) -> ButtonVariantStyle {
+        let bg = self.bg_color(cx);
+        let fg = self.text_color(cx);
 
         ButtonVariantStyle { bg, fg }
     }
 
-    fn bg_color(&self, _window: &Window, cx: &App) -> Hsla {
+    fn bg_color(&self, cx: &App) -> Hsla {
         match self {
             ButtonVariant::Primary => cx.theme().element_background,
             ButtonVariant::Secondary => cx.theme().elevated_surface_background,
@@ -495,7 +546,7 @@ impl ButtonVariant {
         }
     }
 
-    fn text_color(&self, _window: &Window, cx: &App) -> Hsla {
+    fn text_color(&self, cx: &App) -> Hsla {
         match self {
             ButtonVariant::Primary => cx.theme().element_foreground,
             ButtonVariant::Secondary => cx.theme().text_muted,
@@ -513,7 +564,7 @@ impl ButtonVariant {
         }
     }
 
-    fn hovered(&self, window: &Window, cx: &App) -> ButtonVariantStyle {
+    fn hovered(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
             ButtonVariant::Primary => cx.theme().element_hover,
             ButtonVariant::Secondary => cx.theme().secondary_hover,
@@ -528,13 +579,13 @@ impl ButtonVariant {
             ButtonVariant::Secondary => cx.theme().secondary_foreground,
             ButtonVariant::Ghost { .. } => cx.theme().text,
             ButtonVariant::Transparent => cx.theme().text_placeholder,
-            _ => self.text_color(window, cx),
+            _ => self.text_color(cx),
         };
 
         ButtonVariantStyle { bg, fg }
     }
 
-    fn active(&self, window: &Window, cx: &App) -> ButtonVariantStyle {
+    fn active(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
             ButtonVariant::Primary => cx.theme().element_active,
             ButtonVariant::Secondary => cx.theme().secondary_active,
@@ -548,13 +599,13 @@ impl ButtonVariant {
         let fg = match self {
             ButtonVariant::Secondary => cx.theme().secondary_foreground,
             ButtonVariant::Transparent => cx.theme().text_placeholder,
-            _ => self.text_color(window, cx),
+            _ => self.text_color(cx),
         };
 
         ButtonVariantStyle { bg, fg }
     }
 
-    fn selected(&self, window: &Window, cx: &App) -> ButtonVariantStyle {
+    fn selected(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
             ButtonVariant::Primary => cx.theme().element_selected,
             ButtonVariant::Secondary => cx.theme().secondary_selected,
@@ -568,13 +619,13 @@ impl ButtonVariant {
         let fg = match self {
             ButtonVariant::Secondary => cx.theme().secondary_foreground,
             ButtonVariant::Transparent => cx.theme().text_placeholder,
-            _ => self.text_color(window, cx),
+            _ => self.text_color(cx),
         };
 
         ButtonVariantStyle { bg, fg }
     }
 
-    fn disabled(&self, _window: &Window, cx: &App) -> ButtonVariantStyle {
+    fn disabled(&self, cx: &App) -> ButtonVariantStyle {
         let bg = match self {
             ButtonVariant::Danger => cx.theme().danger_disabled,
             ButtonVariant::Warning => cx.theme().warning_disabled,
diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs
index 2a624f6..22651f5 100644
--- a/crates/ui/src/dropdown.rs
+++ b/crates/ui/src/dropdown.rs
@@ -7,7 +7,7 @@ use gpui::{
 };
 use theme::ActiveTheme;
 
-use crate::actions::{Cancel, Confirm, SelectNext, SelectPrev};
+use crate::actions::{Cancel, Confirm, SelectDown, SelectUp};
 use crate::input::clear_button::clear_button;
 use crate::list::{List, ListDelegate, ListItem};
 use crate::{h_flex, v_flex, Disableable as _, Icon, IconName, Sizable, Size, StyleSized};
@@ -26,8 +26,8 @@ pub enum ListEvent {
 
 pub fn init(cx: &mut App) {
     cx.bind_keys([
-        KeyBinding::new("up", SelectPrev, Some(CONTEXT)),
-        KeyBinding::new("down", SelectNext, Some(CONTEXT)),
+        KeyBinding::new("up", SelectUp, Some(CONTEXT)),
+        KeyBinding::new("down", SelectDown, Some(CONTEXT)),
         KeyBinding::new("enter", Confirm { secondary: false }, Some(CONTEXT)),
         KeyBinding::new(
             "secondary-enter",
@@ -440,7 +440,7 @@ where
         cx.notify();
     }
 
-    fn up(&mut self, _: &SelectPrev, window: &mut Window, cx: &mut Context<Self>) {
+    fn up(&mut self, _: &SelectUp, window: &mut Window, cx: &mut Context<Self>) {
         if !self.open {
             return;
         }
@@ -449,7 +449,7 @@ where
         cx.propagate();
     }
 
-    fn down(&mut self, _: &SelectNext, window: &mut Window, cx: &mut Context<Self>) {
+    fn down(&mut self, _: &SelectDown, window: &mut Window, cx: &mut Context<Self>) {
         if !self.open {
             self.open = true;
         }
diff --git a/crates/ui/src/input/element.rs b/crates/ui/src/input/element.rs
index 2cdf8ea..69385ab 100644
--- a/crates/ui/src/input/element.rs
+++ b/crates/ui/src/input/element.rs
@@ -3,8 +3,8 @@ use std::rc::Rc;
 
 use gpui::{
     fill, point, px, relative, size, App, Bounds, Corners, Element, ElementId, ElementInputHandler,
-    Entity, GlobalElementId, Half, Hitbox, IntoElement, LayoutId, MouseButton, MouseMoveEvent,
-    Path, Pixels, Point, ShapedLine, SharedString, Size, Style, TextAlign, TextRun, UnderlineStyle,
+    Entity, GlobalElementId, Hitbox, IntoElement, LayoutId, MouseButton, MouseMoveEvent, Path,
+    Pixels, Point, ShapedLine, SharedString, Size, Style, TextAlign, TextRun, UnderlineStyle,
     Window,
 };
 use rope::Rope;
@@ -642,11 +642,8 @@ impl Element for TextElement {
         }
 
         let total_wrapped_lines = state.text_wrapper.len();
-        let empty_bottom_height = bounds
-            .size
-            .height
-            .half()
-            .max(BOTTOM_MARGIN_ROWS * line_height);
+        let empty_bottom_height = px(0.);
+
         let scroll_size = size(
             if longest_line_width + line_number_width + RIGHT_MARGIN > bounds.size.width {
                 longest_line_width + line_number_width + RIGHT_MARGIN
@@ -872,9 +869,7 @@ impl Element for TextElement {
             state.set_input_bounds(input_bounds, cx);
             state.last_selected_range = Some(selected_range);
             state.scroll_size = prepaint.scroll_size;
-            state
-                .scroll_handle
-                .set_offset(prepaint.cursor_scroll_offset);
+            state.update_scroll_offset(Some(prepaint.cursor_scroll_offset), cx);
             state.deferred_scroll_offset = None;
 
             cx.notify();
diff --git a/crates/ui/src/input/state.rs b/crates/ui/src/input/state.rs
index 8a430fd..795701c 100644
--- a/crates/ui/src/input/state.rs
+++ b/crates/ui/src/input/state.rs
@@ -1411,7 +1411,11 @@ impl InputState {
         self.update_scroll_offset(Some(self.scroll_handle.offset() + delta), cx);
     }
 
-    fn update_scroll_offset(&mut self, offset: Option<Point<Pixels>>, cx: &mut Context<Self>) {
+    pub(super) fn update_scroll_offset(
+        &mut self,
+        offset: Option<Point<Pixels>>,
+        cx: &mut Context<Self>,
+    ) {
         let mut offset = offset.unwrap_or(self.scroll_handle.offset());
 
         let safe_y_range =
@@ -1472,13 +1476,12 @@ impl InputState {
 
         // Check if row_offset_y is out of the viewport
         // If row offset is not in the viewport, scroll to make it visible
-        let edge_height = 3 * line_height;
-        if row_offset_y - edge_height < -scroll_offset.y {
+        if row_offset_y - line_height < -scroll_offset.y {
             // Scroll up
-            scroll_offset.y = -row_offset_y + edge_height;
-        } else if row_offset_y + edge_height > -scroll_offset.y + bounds.size.height {
+            scroll_offset.y = -row_offset_y + line_height;
+        } else if row_offset_y + line_height > -scroll_offset.y + bounds.size.height {
             // Scroll down
-            scroll_offset.y = -(row_offset_y - bounds.size.height + edge_height);
+            scroll_offset.y = -(row_offset_y - bounds.size.height + line_height);
         }
 
         scroll_offset.x = scroll_offset.x.min(px(0.));
diff --git a/crates/ui/src/input/text_input.rs b/crates/ui/src/input/text_input.rs
index 60737f3..9f5d702 100644
--- a/crates/ui/src/input/text_input.rs
+++ b/crates/ui/src/input/text_input.rs
@@ -150,6 +150,7 @@ impl RenderOnce for TextInput {
 
         self.state.update(cx, |state, cx| {
             state.text_wrapper.set_font(font, font_size, cx);
+            state.text_wrapper.prepare_if_need(&state.text, cx);
             state.disabled = self.disabled;
         });
 
diff --git a/crates/ui/src/input/text_wrapper.rs b/crates/ui/src/input/text_wrapper.rs
index 57395ed..5bdbb5d 100644
--- a/crates/ui/src/input/text_wrapper.rs
+++ b/crates/ui/src/input/text_wrapper.rs
@@ -42,14 +42,19 @@ impl LineItem {
 /// After use lines to calculate the scroll size of the Editor.
 pub(super) struct TextWrapper {
     text: Rope,
+
     /// Total wrapped lines (Inlucde the first line), value is start and end index of the line.
     soft_lines: usize,
     font: Font,
     font_size: Pixels,
+
     /// If is none, it means the text is not wrapped
     wrap_width: Option<Pixels>,
+
     /// The lines by split \n
     pub(super) lines: Vec<LineItem>,
+
+    _initialized: bool,
 }
 
 #[allow(unused)]
@@ -62,6 +67,7 @@ impl TextWrapper {
             wrap_width,
             soft_lines: 0,
             lines: Vec::new(),
+            _initialized: false,
         }
     }
 
@@ -86,7 +92,6 @@ impl TextWrapper {
         if wrap_width == self.wrap_width {
             return;
         }
-
         self.wrap_width = wrap_width;
         self.update_all(&self.text.clone(), true, cx);
     }
@@ -95,12 +100,19 @@ impl TextWrapper {
         if self.font.eq(&font) && self.font_size == font_size {
             return;
         }
-
         self.font = font;
         self.font_size = font_size;
         self.update_all(&self.text.clone(), true, cx);
     }
 
+    pub(super) fn prepare_if_need(&mut self, text: &Rope, cx: &mut App) {
+        if self._initialized {
+            return;
+        }
+        self._initialized = true;
+        self.update_all(text, true, cx);
+    }
+
     /// Update the text wrapper and recalculate the wrapped lines.
     ///
     /// If the `text` is the same as the current text, do nothing.
diff --git a/crates/ui/src/kbd.rs b/crates/ui/src/kbd.rs
new file mode 100644
index 0000000..8e27be5
--- /dev/null
+++ b/crates/ui/src/kbd.rs
@@ -0,0 +1,312 @@
+use gpui::{
+    div, relative, Action, AsKeystroke, FocusHandle, IntoElement, KeyContext, Keystroke,
+    ParentElement as _, RenderOnce, StyleRefinement, Styled, Window,
+};
+use theme::ActiveTheme;
+
+use crate::StyledExt;
+
+/// A key binding tag
+#[derive(IntoElement, Clone, Debug)]
+pub struct Kbd {
+    style: StyleRefinement,
+    stroke: Keystroke,
+    appearance: bool,
+}
+
+impl From<Keystroke> for Kbd {
+    fn from(stroke: Keystroke) -> Self {
+        Self {
+            style: StyleRefinement::default(),
+            stroke,
+            appearance: true,
+        }
+    }
+}
+
+impl Kbd {
+    pub fn new(stroke: Keystroke) -> Self {
+        Self {
+            style: StyleRefinement::default(),
+            stroke,
+            appearance: true,
+        }
+    }
+
+    /// Set the appearance of the keybinding.
+    pub fn appearance(mut self, appearance: bool) -> Self {
+        self.appearance = appearance;
+        self
+    }
+
+    /// Return the first keybinding for the given action and context.
+    pub fn binding_for_action(
+        action: &dyn Action,
+        context: Option<&str>,
+        window: &Window,
+    ) -> Option<Self> {
+        let key_context = context.and_then(|context| KeyContext::parse(context).ok());
+        let binding = match key_context {
+            Some(context) => {
+                window.highest_precedence_binding_for_action_in_context(action, context)
+            }
+            None => window.highest_precedence_binding_for_action(action),
+        }?;
+
+        binding
+            .keystrokes()
+            .first()
+            .map(|key| Self::new(key.as_keystroke().clone()))
+    }
+
+    /// Return the first keybinding for the given action and focus handle.
+    pub fn binding_for_action_in(
+        action: &dyn Action,
+        focus_handle: &FocusHandle,
+        window: &Window,
+    ) -> Option<Self> {
+        let binding = window.highest_precedence_binding_for_action_in(action, focus_handle)?;
+
+        binding
+            .keystrokes()
+            .first()
+            .map(|key| Self::new(key.as_keystroke().clone()))
+    }
+
+    /// Return the Platform specific keybinding string by KeyStroke
+    ///
+    /// macOS: https://support.apple.com/en-us/HT201236
+    /// Windows: https://support.microsoft.com/en-us/windows/keyboard-shortcuts-in-windows-dcc61a57-8ff0-cffe-9796-cb9706c75eec
+    pub fn format(key: &Keystroke) -> String {
+        #[cfg(target_os = "macos")]
+        const DIVIDER: &str = "";
+        #[cfg(not(target_os = "macos"))]
+        const DIVIDER: &str = "+";
+
+        let mut parts = vec![];
+
+        // The key map order in macOS is: ⌃⌥⇧⌘
+        // And in Windows is: Ctrl+Alt+Shift+Win
+
+        if key.modifiers.control {
+            #[cfg(target_os = "macos")]
+            parts.push("⌃");
+
+            #[cfg(not(target_os = "macos"))]
+            parts.push("Ctrl");
+        }
+
+        if key.modifiers.alt {
+            #[cfg(target_os = "macos")]
+            parts.push("⌥");
+
+            #[cfg(not(target_os = "macos"))]
+            parts.push("Alt");
+        }
+
+        if key.modifiers.shift {
+            #[cfg(target_os = "macos")]
+            parts.push("⇧");
+
+            #[cfg(not(target_os = "macos"))]
+            parts.push("Shift");
+        }
+
+        if key.modifiers.platform {
+            #[cfg(target_os = "macos")]
+            parts.push("⌘");
+
+            #[cfg(not(target_os = "macos"))]
+            parts.push("Win");
+        }
+
+        let mut keys = String::new();
+        let key_str = key.key.as_str();
+        match key_str {
+            #[cfg(target_os = "macos")]
+            "ctrl" => keys.push('⌃'),
+            #[cfg(not(target_os = "macos"))]
+            "ctrl" => keys.push_str("Ctrl"),
+            #[cfg(target_os = "macos")]
+            "alt" => keys.push('⌥'),
+            #[cfg(not(target_os = "macos"))]
+            "alt" => keys.push_str("Alt"),
+            #[cfg(target_os = "macos")]
+            "shift" => keys.push('⇧'),
+            #[cfg(not(target_os = "macos"))]
+            "shift" => keys.push_str("Shift"),
+            #[cfg(target_os = "macos")]
+            "cmd" => keys.push('⌘'),
+            #[cfg(not(target_os = "macos"))]
+            "cmd" => keys.push_str("Win"),
+            #[cfg(target_os = "macos")]
+            "space" => keys.push_str("Space"),
+            #[cfg(target_os = "macos")]
+            "backspace" => keys.push('⌫'),
+            #[cfg(not(target_os = "macos"))]
+            "backspace" => keys.push_str("Backspace"),
+            #[cfg(target_os = "macos")]
+            "delete" => keys.push('⌫'),
+            #[cfg(not(target_os = "macos"))]
+            "delete" => keys.push_str("Delete"),
+            #[cfg(target_os = "macos")]
+            "escape" => keys.push('⎋'),
+            #[cfg(not(target_os = "macos"))]
+            "escape" => keys.push_str("Esc"),
+            #[cfg(target_os = "macos")]
+            "enter" => keys.push('⏎'),
+            #[cfg(not(target_os = "macos"))]
+            "enter" => keys.push_str("Enter"),
+            "pagedown" => keys.push_str("Page Down"),
+            "pageup" => keys.push_str("Page Up"),
+            #[cfg(target_os = "macos")]
+            "left" => keys.push('←'),
+            #[cfg(not(target_os = "macos"))]
+            "left" => keys.push_str("Left"),
+            #[cfg(target_os = "macos")]
+            "right" => keys.push('→'),
+            #[cfg(not(target_os = "macos"))]
+            "right" => keys.push_str("Right"),
+            #[cfg(target_os = "macos")]
+            "up" => keys.push('↑'),
+            #[cfg(not(target_os = "macos"))]
+            "up" => keys.push_str("Up"),
+            #[cfg(target_os = "macos")]
+            "down" => keys.push('↓'),
+            #[cfg(not(target_os = "macos"))]
+            "down" => keys.push_str("Down"),
+            _ => {
+                if key_str.len() == 1 {
+                    keys.push_str(&key_str.to_uppercase());
+                } else {
+                    let mut chars = key_str.chars();
+                    if let Some(first_char) = chars.next() {
+                        keys.push_str(&format!(
+                            "{}{}",
+                            first_char.to_uppercase(),
+                            chars.collect::<String>()
+                        ));
+                    } else {
+                        keys.push_str(key_str);
+                    }
+                }
+            }
+        }
+
+        parts.push(&keys);
+        parts.join(DIVIDER)
+    }
+}
+
+impl Styled for Kbd {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.style
+    }
+}
+
+impl RenderOnce for Kbd {
+    fn render(self, _: &mut gpui::Window, cx: &mut gpui::App) -> impl gpui::IntoElement {
+        if !self.appearance {
+            return Self::format(&self.stroke).into_any_element();
+        }
+
+        div()
+            .border_1()
+            .border_color(cx.theme().border)
+            .text_color(cx.theme().text_muted)
+            .bg(cx.theme().surface_background)
+            .py_0p5()
+            .px_1()
+            .min_w_5()
+            .text_center()
+            .rounded_sm()
+            .line_height(relative(1.))
+            .text_xs()
+            .whitespace_normal()
+            .flex_shrink_0()
+            .refine_style(&self.style)
+            .child(Self::format(&self.stroke))
+            .into_any_element()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    #[test]
+    fn test_format() {
+        use gpui::Keystroke;
+
+        use super::Kbd;
+
+        if cfg!(target_os = "macos") {
+            assert_eq!(Kbd::format(&Keystroke::parse("cmd-a").unwrap()), "⌘A");
+            assert_eq!(Kbd::format(&Keystroke::parse("cmd--").unwrap()), "⌘-");
+            assert_eq!(Kbd::format(&Keystroke::parse("cmd-+").unwrap()), "⌘+");
+            assert_eq!(Kbd::format(&Keystroke::parse("cmd-enter").unwrap()), "⌘⏎");
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("secondary-f12").unwrap()),
+                "⌘F12"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("shift-pagedown").unwrap()),
+                "⇧Page Down"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("shift-pageup").unwrap()),
+                "⇧Page Up"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("shift-space").unwrap()),
+                "⇧Space"
+            );
+            assert_eq!(Kbd::format(&Keystroke::parse("cmd-ctrl-a").unwrap()), "⌃⌘A");
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("cmd-alt-backspace").unwrap()),
+                "⌥⌘⌫"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("shift-delete").unwrap()),
+                "⇧⌫"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("cmd-ctrl-shift-a").unwrap()),
+                "⌃⇧⌘A"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("cmd-ctrl-shift-alt-a").unwrap()),
+                "⌃⌥⇧⌘A"
+            );
+        } else {
+            assert_eq!(Kbd::format(&Keystroke::parse("a").unwrap()), "A");
+            assert_eq!(Kbd::format(&Keystroke::parse("ctrl-a").unwrap()), "Ctrl+A");
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("shift-space").unwrap()),
+                "Shift+Space"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("ctrl-alt-a").unwrap()),
+                "Ctrl+Alt+A"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("ctrl-alt-shift-a").unwrap()),
+                "Ctrl+Alt+Shift+A"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("ctrl-alt-shift-win-a").unwrap()),
+                "Ctrl+Alt+Shift+Win+A"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("ctrl-shift-backspace").unwrap()),
+                "Ctrl+Shift+Backspace"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("alt-delete").unwrap()),
+                "Alt+Delete"
+            );
+            assert_eq!(
+                Kbd::format(&Keystroke::parse("alt-tab").unwrap()),
+                "Alt+Tab"
+            );
+        }
+    }
+}
diff --git a/crates/ui/src/lib.rs b/crates/ui/src/lib.rs
index 558ad62..48b8c41 100644
--- a/crates/ui/src/lib.rs
+++ b/crates/ui/src/lib.rs
@@ -1,6 +1,8 @@
 pub use event::InteractiveElementExt;
 pub use focusable::FocusableCycle;
 pub use icon::*;
+pub use kbd::*;
+pub use menu::{context_menu, popup_menu};
 pub use root::{ContextModal, Root};
 pub use styled::*;
 pub use window_border::{window_border, WindowBorder};
@@ -12,7 +14,6 @@ pub mod animation;
 pub mod avatar;
 pub mod button;
 pub mod checkbox;
-pub mod context_menu;
 pub mod divider;
 pub mod dock_area;
 pub mod dropdown;
@@ -21,10 +22,10 @@ pub mod history;
 pub mod indicator;
 pub mod input;
 pub mod list;
+pub mod menu;
 pub mod modal;
 pub mod notification;
 pub mod popover;
-pub mod popup_menu;
 pub mod resizable;
 pub mod scroll;
 pub mod skeleton;
@@ -36,6 +37,7 @@ pub mod tooltip;
 mod event;
 mod focusable;
 mod icon;
+mod kbd;
 mod root;
 mod styled;
 mod window_border;
@@ -53,5 +55,5 @@ pub fn init(cx: &mut gpui::App) {
     list::init(cx);
     modal::init(cx);
     popover::init(cx);
-    popup_menu::init(cx);
+    menu::init(cx);
 }
diff --git a/crates/ui/src/list/list.rs b/crates/ui/src/list/list.rs
index 51b272d..745ff4a 100644
--- a/crates/ui/src/list/list.rs
+++ b/crates/ui/src/list/list.rs
@@ -12,7 +12,7 @@ use smol::Timer;
 use theme::ActiveTheme;
 
 use super::loading::Loading;
-use crate::actions::{Cancel, Confirm, SelectNext, SelectPrev};
+use crate::actions::{Cancel, Confirm, SelectDown, SelectUp};
 use crate::input::{InputEvent, InputState, TextInput};
 use crate::scroll::{Scrollbar, ScrollbarState};
 use crate::{v_flex, Icon, IconName, Sizable as _, Size};
@@ -23,8 +23,8 @@ pub fn init(cx: &mut App) {
         KeyBinding::new("escape", Cancel, context),
         KeyBinding::new("enter", Confirm { secondary: false }, context),
         KeyBinding::new("secondary-enter", Confirm { secondary: true }, context),
-        KeyBinding::new("up", SelectPrev, context),
-        KeyBinding::new("down", SelectNext, context),
+        KeyBinding::new("up", SelectUp, context),
+        KeyBinding::new("down", SelectDown, context),
     ]);
 }
 
@@ -428,12 +428,7 @@ where
         cx.notify();
     }
 
-    fn on_action_select_prev(
-        &mut self,
-        _: &SelectPrev,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-    ) {
+    fn on_select_prev(&mut self, _: &SelectUp, window: &mut Window, cx: &mut Context<Self>) {
         let items_count = self.delegate.items_count(cx);
         if items_count == 0 {
             return;
@@ -448,12 +443,7 @@ where
         self.select_item(selected_index, window, cx);
     }
 
-    fn on_action_select_next(
-        &mut self,
-        _: &SelectNext,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-    ) {
+    fn on_select_next(&mut self, _: &SelectDown, window: &mut Window, cx: &mut Context<Self>) {
         let items_count = self.delegate.items_count(cx);
         if items_count == 0 {
             return;
@@ -598,8 +588,8 @@ where
             .when(!loading, |this| {
                 this.on_action(cx.listener(Self::on_action_cancel))
                     .on_action(cx.listener(Self::on_action_confirm))
-                    .on_action(cx.listener(Self::on_action_select_next))
-                    .on_action(cx.listener(Self::on_action_select_prev))
+                    .on_action(cx.listener(Self::on_select_next))
+                    .on_action(cx.listener(Self::on_select_prev))
                     .map(|this| {
                         if let Some(view) = initial_view {
                             this.child(view)
diff --git a/crates/ui/src/menu/app_menu_bar.rs b/crates/ui/src/menu/app_menu_bar.rs
new file mode 100644
index 0000000..c51f677
--- /dev/null
+++ b/crates/ui/src/menu/app_menu_bar.rs
@@ -0,0 +1,244 @@
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    anchored, deferred, div, px, App, AppContext as _, ClickEvent, Context, DismissEvent, Entity,
+    Focusable, InteractiveElement as _, IntoElement, KeyBinding, OwnedMenu, ParentElement, Render,
+    SharedString, StatefulInteractiveElement, Styled, Subscription, Window,
+};
+
+use crate::actions::{Cancel, SelectLeft, SelectRight};
+use crate::button::{Button, ButtonVariants};
+use crate::popup_menu::PopupMenu;
+use crate::{h_flex, Selectable, Sizable};
+
+const CONTEXT: &str = "AppMenuBar";
+pub fn init(cx: &mut App) {
+    cx.bind_keys([
+        KeyBinding::new("escape", Cancel, Some(CONTEXT)),
+        KeyBinding::new("left", SelectLeft, Some(CONTEXT)),
+        KeyBinding::new("right", SelectRight, Some(CONTEXT)),
+    ]);
+}
+
+/// The application menu bar, for Windows and Linux.
+pub struct AppMenuBar {
+    menus: Vec<Entity<AppMenu>>,
+    selected_ix: Option<usize>,
+}
+
+impl AppMenuBar {
+    /// Create a new app menu bar.
+    pub fn new(window: &mut Window, cx: &mut App) -> Entity<Self> {
+        cx.new(|cx| {
+            let menu_bar = cx.entity();
+            let menus = cx
+                .get_menus()
+                .unwrap_or_default()
+                .iter()
+                .enumerate()
+                .map(|(ix, menu)| AppMenu::new(ix, menu, menu_bar.clone(), window, cx))
+                .collect();
+
+            Self {
+                selected_ix: None,
+                menus,
+            }
+        })
+    }
+
+    fn move_left(&mut self, _: &SelectLeft, window: &mut Window, cx: &mut Context<Self>) {
+        let Some(selected_ix) = self.selected_ix else {
+            return;
+        };
+
+        let new_ix = if selected_ix == 0 {
+            self.menus.len().saturating_sub(1)
+        } else {
+            selected_ix.saturating_sub(1)
+        };
+        self.set_selected_ix(Some(new_ix), window, cx);
+    }
+
+    fn move_right(&mut self, _: &SelectRight, window: &mut Window, cx: &mut Context<Self>) {
+        let Some(selected_ix) = self.selected_ix else {
+            return;
+        };
+
+        let new_ix = if selected_ix + 1 >= self.menus.len() {
+            0
+        } else {
+            selected_ix + 1
+        };
+        self.set_selected_ix(Some(new_ix), window, cx);
+    }
+
+    fn cancel(&mut self, _: &Cancel, window: &mut Window, cx: &mut Context<Self>) {
+        self.set_selected_ix(None, window, cx);
+    }
+
+    fn set_selected_ix(&mut self, ix: Option<usize>, _: &mut Window, cx: &mut Context<Self>) {
+        self.selected_ix = ix;
+        cx.notify();
+    }
+
+    #[inline]
+    fn has_activated_menu(&self) -> bool {
+        self.selected_ix.is_some()
+    }
+}
+
+impl Render for AppMenuBar {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        h_flex()
+            .id("app-menu-bar")
+            .key_context(CONTEXT)
+            .on_action(cx.listener(Self::move_left))
+            .on_action(cx.listener(Self::move_right))
+            .on_action(cx.listener(Self::cancel))
+            .size_full()
+            .gap_x_1()
+            .overflow_x_scroll()
+            .children(self.menus.clone())
+    }
+}
+
+/// A menu in the menu bar.
+pub(super) struct AppMenu {
+    menu_bar: Entity<AppMenuBar>,
+    ix: usize,
+    name: SharedString,
+    menu: OwnedMenu,
+    popup_menu: Option<Entity<PopupMenu>>,
+
+    _subscription: Option<Subscription>,
+}
+
+impl AppMenu {
+    pub(super) fn new(
+        ix: usize,
+        menu: &OwnedMenu,
+        menu_bar: Entity<AppMenuBar>,
+        _: &mut Window,
+        cx: &mut App,
+    ) -> Entity<Self> {
+        let name = menu.name.clone();
+        cx.new(|_| Self {
+            ix,
+            menu_bar,
+            name,
+            menu: menu.clone(),
+            popup_menu: None,
+            _subscription: None,
+        })
+    }
+
+    fn build_popup_menu(
+        &mut self,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Entity<PopupMenu> {
+        let popup_menu = match self.popup_menu.as_ref() {
+            None => {
+                let items = self.menu.items.clone();
+                let popup_menu = PopupMenu::build(window, cx, |menu, window, cx| {
+                    menu.when_some(window.focused(cx), |this, handle| {
+                        this.action_context(handle)
+                    })
+                    .with_menu_items(items, window, cx)
+                });
+                popup_menu.read(cx).focus_handle(cx).focus(window);
+                self._subscription =
+                    Some(cx.subscribe_in(&popup_menu, window, Self::handle_dismiss));
+                self.popup_menu = Some(popup_menu.clone());
+
+                popup_menu
+            }
+            Some(menu) => menu.clone(),
+        };
+
+        let focus_handle = popup_menu.read(cx).focus_handle(cx);
+        if !focus_handle.contains_focused(window, cx) {
+            focus_handle.focus(window);
+        }
+
+        popup_menu
+    }
+
+    fn handle_dismiss(
+        &mut self,
+        _: &Entity<PopupMenu>,
+        _: &DismissEvent,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self._subscription.take();
+        self.popup_menu.take();
+        self.menu_bar.update(cx, |state, cx| {
+            state.cancel(&Cancel, window, cx);
+        });
+    }
+
+    fn handle_trigger_click(
+        &mut self,
+        _: &ClickEvent,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let is_selected = self.menu_bar.read(cx).selected_ix == Some(self.ix);
+
+        self.menu_bar.update(cx, |state, cx| {
+            let new_ix = if is_selected { None } else { Some(self.ix) };
+            state.set_selected_ix(new_ix, window, cx);
+        });
+    }
+
+    fn handle_hover(&mut self, hovered: &bool, window: &mut Window, cx: &mut Context<Self>) {
+        if !*hovered {
+            return;
+        }
+
+        let has_activated_menu = self.menu_bar.read(cx).has_activated_menu();
+        if !has_activated_menu {
+            return;
+        }
+
+        self.menu_bar.update(cx, |state, cx| {
+            state.set_selected_ix(Some(self.ix), window, cx);
+        });
+    }
+}
+
+impl Render for AppMenu {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let menu_bar = self.menu_bar.read(cx);
+        let is_selected = menu_bar.selected_ix == Some(self.ix);
+
+        div()
+            .id(self.ix)
+            .relative()
+            .child(
+                Button::new("menu")
+                    .small()
+                    .py_0p5()
+                    .xsmall()
+                    .ghost()
+                    .label(self.name.clone())
+                    .selected(is_selected)
+                    .on_click(cx.listener(Self::handle_trigger_click)),
+            )
+            .on_hover(cx.listener(Self::handle_hover))
+            .when(is_selected, |this| {
+                this.child(deferred(
+                    anchored()
+                        .anchor(gpui::Corner::TopLeft)
+                        .snap_to_window_with_margin(px(8.))
+                        .child(
+                            div()
+                                .size_full()
+                                .occlude()
+                                .top_1()
+                                .child(self.build_popup_menu(window, cx)),
+                        ),
+                ))
+            })
+    }
+}
diff --git a/crates/ui/src/context_menu.rs b/crates/ui/src/menu/context_menu.rs
similarity index 69%
rename from crates/ui/src/context_menu.rs
rename to crates/ui/src/menu/context_menu.rs
index ed664b9..3848f9f 100644
--- a/crates/ui/src/context_menu.rs
+++ b/crates/ui/src/menu/context_menu.rs
@@ -3,10 +3,10 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    anchored, deferred, div, px, relative, AnyElement, App, Context, Corner, DismissEvent,
-    DispatchPhase, Element, ElementId, Entity, Focusable, GlobalElementId, InteractiveElement,
-    IntoElement, MouseButton, MouseDownEvent, ParentElement, Pixels, Point, Position, Size,
-    Stateful, Style, Window,
+    anchored, deferred, div, px, relative, AnyElement, App, Context, Corner, DismissEvent, Element,
+    ElementId, Entity, Focusable, GlobalElementId, InspectorElementId, InteractiveElement,
+    IntoElement, MouseButton, MouseDownEvent, ParentElement, Pixels, Point, Position, Stateful,
+    Style, Subscription, Window,
 };
 
 use crate::popup_menu::PopupMenu;
@@ -22,13 +22,12 @@ pub trait ContextMenuExt: ParentElement + Sized {
 
 impl<E> ContextMenuExt for Stateful<E> where E: ParentElement {}
 
-type Menu =
-    Option<Box<dyn Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static>>;
-
 /// A context menu that can be shown on right-click.
+#[allow(clippy::type_complexity)]
 pub struct ContextMenu {
     id: ElementId,
-    menu: Menu,
+    menu:
+        Option<Box<dyn Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static>>,
     anchor: Corner,
 }
 
@@ -76,20 +75,28 @@ impl IntoElement for ContextMenu {
     }
 }
 
+struct ContextMenuSharedState {
+    menu_view: Option<Entity<PopupMenu>>,
+    open: bool,
+    position: Point<Pixels>,
+    _subscription: Option<Subscription>,
+}
+
 pub struct ContextMenuState {
-    menu_view: Rc<RefCell<Option<Entity<PopupMenu>>>>,
     menu_element: Option<AnyElement>,
-    open: Rc<RefCell<bool>>,
-    position: Rc<RefCell<Point<Pixels>>>,
+    shared_state: Rc<RefCell<ContextMenuSharedState>>,
 }
 
 impl Default for ContextMenuState {
     fn default() -> Self {
         Self {
-            menu_view: Rc::new(RefCell::new(None)),
             menu_element: None,
-            open: Rc::new(RefCell::new(false)),
-            position: Default::default(),
+            shared_state: Rc::new(RefCell::new(ContextMenuSharedState {
+                menu_view: None,
+                open: false,
+                position: Default::default(),
+                _subscription: None,
+            })),
         }
     }
 }
@@ -106,6 +113,7 @@ impl Element for ContextMenu {
         None
     }
 
+    #[allow(clippy::field_reassign_with_default)]
     fn request_layout(
         &mut self,
         id: Option<&gpui::GlobalElementId>,
@@ -113,29 +121,27 @@ impl Element for ContextMenu {
         window: &mut Window,
         cx: &mut App,
     ) -> (gpui::LayoutId, Self::RequestLayoutState) {
+        let mut style = Style::default();
+        // Set the layout style relative to the table view to get same size.
+        style.position = Position::Absolute;
+        style.flex_grow = 1.0;
+        style.flex_shrink = 1.0;
+        style.size.width = relative(1.).into();
+        style.size.height = relative(1.).into();
+
         let anchor = self.anchor;
-        let style = Style {
-            position: Position::Absolute,
-            flex_grow: 1.0,
-            flex_shrink: 1.0,
-            size: Size {
-                width: relative(1.).into(),
-                height: relative(1.).into(),
-            },
-            ..Default::default()
-        };
 
         self.with_element_state(
             id.unwrap(),
             window,
             cx,
             |_, state: &mut ContextMenuState, window, cx| {
-                let position = state.position.clone();
-                let position = position.borrow();
-                let open = state.open.clone();
-                let menu_view = state.menu_view.borrow().clone();
-
-                let (menu_element, menu_layout_id) = if *open.borrow() {
+                let (position, open) = {
+                    let shared_state = state.shared_state.borrow();
+                    (shared_state.position, shared_state.open)
+                };
+                let menu_view = state.shared_state.borrow().menu_view.clone();
+                let (menu_element, menu_layout_id) = if open {
                     let has_menu_item = menu_view
                         .as_ref()
                         .map(|menu| !menu.read(cx).is_empty())
@@ -144,12 +150,14 @@ impl Element for ContextMenu {
                     if has_menu_item {
                         let mut menu_element = deferred(
                             anchored()
-                                .position(*position)
+                                .position(position)
                                 .snap_to_window_with_margin(px(8.))
                                 .anchor(anchor)
                                 .when_some(menu_view, |this, menu| {
                                     // Focus the menu, so that can be handle the action.
-                                    menu.focus_handle(cx).focus(window);
+                                    if !menu.focus_handle(cx).contains_focused(window, cx) {
+                                        menu.focus_handle(cx).focus(window);
+                                    }
 
                                     this.child(div().occlude().child(menu.clone()))
                                 }),
@@ -188,7 +196,7 @@ impl Element for ContextMenu {
     fn prepaint(
         &mut self,
         _: Option<&gpui::GlobalElementId>,
-        _: Option<&gpui::InspectorElementId>,
+        _: Option<&InspectorElementId>,
         _: gpui::Bounds<gpui::Pixels>,
         request_layout: &mut Self::RequestLayoutState,
         window: &mut Window,
@@ -202,7 +210,7 @@ impl Element for ContextMenu {
     fn paint(
         &mut self,
         id: Option<&gpui::GlobalElementId>,
-        _: Option<&gpui::InspectorElementId>,
+        _: Option<&InspectorElementId>,
         bounds: gpui::Bounds<gpui::Pixels>,
         request_layout: &mut Self::RequestLayoutState,
         _: &mut Self::PrepaintState,
@@ -222,34 +230,35 @@ impl Element for ContextMenu {
             window,
             cx,
             |_view, state: &mut ContextMenuState, window, _| {
-                let position = state.position.clone();
-                let open = state.open.clone();
-                let menu_view = state.menu_view.clone();
+                let shared_state = state.shared_state.clone();
 
                 // When right mouse click, to build content menu, and show it at the mouse position.
                 window.on_mouse_event(move |event: &MouseDownEvent, phase, window, cx| {
-                    if phase == DispatchPhase::Bubble
+                    if phase.bubble()
                         && event.button == MouseButton::Right
                         && bounds.contains(&event.position)
                     {
-                        *position.borrow_mut() = event.position;
-                        *open.borrow_mut() = true;
+                        {
+                            let mut shared_state = shared_state.borrow_mut();
+                            shared_state.position = event.position;
+                            shared_state.open = true;
+                        }
 
                         let menu = PopupMenu::build(window, cx, |menu, window, cx| {
                             (builder)(menu, window, cx)
                         })
                         .into_element();
 
-                        let open = open.clone();
-                        window
-                            .subscribe(&menu, cx, move |_, _: &DismissEvent, window, _| {
-                                *open.borrow_mut() = false;
+                        let _subscription = window.subscribe(&menu, cx, {
+                            let shared_state = shared_state.clone();
+                            move |_, _: &DismissEvent, window, _| {
+                                shared_state.borrow_mut().open = false;
                                 window.refresh();
-                            })
-                            .detach();
-
-                        *menu_view.borrow_mut() = Some(menu);
+                            }
+                        });
 
+                        shared_state.borrow_mut().menu_view = Some(menu.clone());
+                        shared_state.borrow_mut()._subscription = Some(_subscription);
                         window.refresh();
                     }
                 });
diff --git a/crates/ui/src/menu/menu_item.rs b/crates/ui/src/menu/menu_item.rs
new file mode 100644
index 0000000..3474b1e
--- /dev/null
+++ b/crates/ui/src/menu/menu_item.rs
@@ -0,0 +1,122 @@
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    AnyElement, App, ClickEvent, ElementId, InteractiveElement, IntoElement, MouseButton,
+    ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _, StyleRefinement,
+    Styled, Window,
+};
+use smallvec::SmallVec;
+use theme::ActiveTheme;
+
+use crate::{h_flex, Disableable, StyledExt};
+
+#[derive(IntoElement)]
+#[allow(clippy::type_complexity)]
+pub(crate) struct MenuItemElement {
+    id: ElementId,
+    group_name: SharedString,
+    style: StyleRefinement,
+    disabled: bool,
+    selected: bool,
+    on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
+    on_hover: Option<Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>>,
+    children: SmallVec<[AnyElement; 2]>,
+}
+
+impl MenuItemElement {
+    pub fn new(id: impl Into<ElementId>, group_name: impl Into<SharedString>) -> Self {
+        let id: ElementId = id.into();
+        Self {
+            id: id.clone(),
+            group_name: group_name.into(),
+            style: StyleRefinement::default(),
+            disabled: false,
+            selected: false,
+            on_click: None,
+            on_hover: None,
+            children: SmallVec::new(),
+        }
+    }
+
+    /// Set ListItem as the selected item style.
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    pub fn on_click(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Box::new(handler));
+        self
+    }
+
+    /// Set a handler for when the mouse enters the MenuItem.
+    #[allow(unused)]
+    pub fn on_hover(mut self, handler: impl Fn(&bool, &mut Window, &mut App) + 'static) -> Self {
+        self.on_hover = Some(Box::new(handler));
+        self
+    }
+}
+
+impl Disableable for MenuItemElement {
+    fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+}
+
+impl Styled for MenuItemElement {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        &mut self.style
+    }
+}
+
+impl ParentElement for MenuItemElement {
+    fn extend(&mut self, elements: impl IntoIterator<Item = gpui::AnyElement>) {
+        self.children.extend(elements);
+    }
+}
+
+impl RenderOnce for MenuItemElement {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        h_flex()
+            .id(self.id)
+            .group(&self.group_name)
+            .gap_x_1()
+            .py_1()
+            .px_2()
+            .text_base()
+            .text_color(cx.theme().text)
+            .relative()
+            .items_center()
+            .justify_between()
+            .refine_style(&self.style)
+            .when_some(self.on_hover, |this, on_hover| {
+                this.on_hover(move |hovered, window, cx| (on_hover)(hovered, window, cx))
+            })
+            .when(!self.disabled, |this| {
+                this.group_hover(self.group_name, |this| {
+                    this.bg(cx.theme().elevated_surface_background)
+                        .text_color(cx.theme().text)
+                })
+                .when(self.selected, |this| {
+                    this.bg(cx.theme().elevated_surface_background)
+                        .text_color(cx.theme().text)
+                })
+                .when_some(self.on_click, |this, on_click| {
+                    this.on_mouse_down(MouseButton::Left, move |_, _, cx| {
+                        cx.stop_propagation();
+                    })
+                    .on_click(on_click)
+                })
+            })
+            .when(self.disabled, |this| this.text_color(cx.theme().text_muted))
+            .children(self.children)
+    }
+}
diff --git a/crates/ui/src/menu/mod.rs b/crates/ui/src/menu/mod.rs
new file mode 100644
index 0000000..0d91c7f
--- /dev/null
+++ b/crates/ui/src/menu/mod.rs
@@ -0,0 +1,14 @@
+use gpui::App;
+
+mod app_menu_bar;
+mod menu_item;
+
+pub mod context_menu;
+pub mod popup_menu;
+
+pub use app_menu_bar::AppMenuBar;
+
+pub(crate) fn init(cx: &mut App) {
+    app_menu_bar::init(cx);
+    popup_menu::init(cx);
+}
diff --git a/crates/ui/src/menu/popup_menu.rs b/crates/ui/src/menu/popup_menu.rs
new file mode 100644
index 0000000..1fe6847
--- /dev/null
+++ b/crates/ui/src/menu/popup_menu.rs
@@ -0,0 +1,1176 @@
+use std::rc::Rc;
+
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    anchored, canvas, div, px, rems, Action, AnyElement, App, AppContext, Bounds, Context, Corner,
+    DismissEvent, Edges, Entity, EventEmitter, FocusHandle, Focusable, Half, InteractiveElement,
+    IntoElement, KeyBinding, MouseDownEvent, OwnedMenuItem, ParentElement, Pixels, Render,
+    ScrollHandle, SharedString, StatefulInteractiveElement, Styled, Subscription, WeakEntity,
+    Window,
+};
+use theme::ActiveTheme;
+
+use crate::actions::{Cancel, Confirm, SelectDown, SelectLeft, SelectRight, SelectUp};
+use crate::button::Button;
+use crate::menu::menu_item::MenuItemElement;
+use crate::popover::Popover;
+use crate::scroll::{Scrollbar, ScrollbarState};
+use crate::{h_flex, v_flex, Icon, IconName, Kbd, Selectable, Side, Sizable as _, Size, StyledExt};
+
+const CONTEXT: &str = "PopupMenu";
+
+pub fn init(cx: &mut App) {
+    cx.bind_keys([
+        KeyBinding::new("enter", Confirm { secondary: false }, Some(CONTEXT)),
+        KeyBinding::new("escape", Cancel, Some(CONTEXT)),
+        KeyBinding::new("up", SelectUp, Some(CONTEXT)),
+        KeyBinding::new("down", SelectDown, Some(CONTEXT)),
+        KeyBinding::new("left", SelectLeft, Some(CONTEXT)),
+        KeyBinding::new("right", SelectRight, Some(CONTEXT)),
+    ]);
+}
+
+pub trait PopupMenuExt: Styled + Selectable + InteractiveElement + IntoElement + 'static {
+    /// Create a popup menu with the given items, anchored to the TopLeft corner
+    fn popup_menu(
+        self,
+        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
+    ) -> Popover<PopupMenu> {
+        self.popup_menu_with_anchor(Corner::TopLeft, f)
+    }
+
+    /// Create a popup menu with the given items, anchored to the given corner
+    fn popup_menu_with_anchor(
+        mut self,
+        anchor: impl Into<Corner>,
+        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
+    ) -> Popover<PopupMenu> {
+        let style = self.style().clone();
+        let id = self.interactivity().element_id.clone();
+
+        Popover::new(SharedString::from(format!("popup-menu:{id:?}")))
+            .no_style()
+            .trigger(self)
+            .trigger_style(style)
+            .anchor(anchor.into())
+            .content(move |window, cx| {
+                PopupMenu::build(window, cx, |menu, window, cx| f(menu, window, cx))
+            })
+    }
+}
+impl PopupMenuExt for Button {}
+
+#[allow(clippy::type_complexity)]
+pub(crate) enum PopupMenuItem {
+    Separator,
+    Label(SharedString),
+    Item {
+        icon: Option<Icon>,
+        label: SharedString,
+        disabled: bool,
+        is_link: bool,
+        action: Option<Box<dyn Action>>,
+        // For link item
+        handler: Option<Rc<dyn Fn(&mut Window, &mut App)>>,
+    },
+    ElementItem {
+        icon: Option<Icon>,
+        disabled: bool,
+        action: Box<dyn Action>,
+        render: Box<dyn Fn(&mut Window, &mut App) -> AnyElement + 'static>,
+        handler: Option<Rc<dyn Fn(&mut Window, &mut App)>>,
+    },
+    Submenu {
+        icon: Option<Icon>,
+        label: SharedString,
+        disabled: bool,
+        menu: Entity<PopupMenu>,
+    },
+}
+
+impl PopupMenuItem {
+    #[inline]
+    fn is_clickable(&self) -> bool {
+        !matches!(self, PopupMenuItem::Separator)
+            && matches!(
+                self,
+                PopupMenuItem::Item {
+                    disabled: false,
+                    ..
+                } | PopupMenuItem::ElementItem {
+                    disabled: false,
+                    ..
+                } | PopupMenuItem::Submenu {
+                    disabled: false,
+                    ..
+                }
+            )
+    }
+
+    #[inline]
+    fn is_separator(&self) -> bool {
+        matches!(self, PopupMenuItem::Separator)
+    }
+}
+
+pub struct PopupMenu {
+    pub(crate) focus_handle: FocusHandle,
+    pub(crate) menu_items: Vec<PopupMenuItem>,
+    /// The focus handle of Entity to handle actions.
+    pub(crate) action_context: Option<FocusHandle>,
+    has_icon: bool,
+    selected_index: Option<usize>,
+    min_width: Option<Pixels>,
+    max_width: Option<Pixels>,
+    max_height: Option<Pixels>,
+    bounds: Bounds<Pixels>,
+    size: Size,
+
+    /// The parent menu of this menu, if this is a submenu
+    parent_menu: Option<WeakEntity<Self>>,
+    scrollable: bool,
+    external_link_icon: bool,
+    scroll_handle: ScrollHandle,
+    scroll_state: ScrollbarState,
+    // This will update on render
+    submenu_anchor: (Corner, Pixels),
+
+    _subscriptions: Vec<Subscription>,
+}
+
+impl PopupMenu {
+    pub(crate) fn new(cx: &mut App) -> Self {
+        Self {
+            focus_handle: cx.focus_handle(),
+            action_context: None,
+            parent_menu: None,
+            menu_items: Vec::new(),
+            selected_index: None,
+            min_width: None,
+            max_width: None,
+            max_height: None,
+            has_icon: false,
+            bounds: Bounds::default(),
+            scrollable: false,
+            scroll_handle: ScrollHandle::default(),
+            scroll_state: ScrollbarState::default(),
+            external_link_icon: true,
+            size: Size::default(),
+            submenu_anchor: (Corner::TopLeft, Pixels::ZERO),
+            _subscriptions: vec![],
+        }
+    }
+
+    pub fn build(
+        window: &mut Window,
+        cx: &mut App,
+        f: impl FnOnce(Self, &mut Window, &mut Context<PopupMenu>) -> Self,
+    ) -> Entity<Self> {
+        cx.new(|cx| f(Self::new(cx), window, cx))
+    }
+
+    /// Set the focus handle of Entity to handle actions.
+    ///
+    /// When the menu is dismissed or before an action is triggered, the focus will be returned to this handle.
+    ///
+    /// Then the action will be dispatched to this handle.
+    pub fn action_context(mut self, handle: FocusHandle) -> Self {
+        self.action_context = Some(handle);
+        self
+    }
+
+    /// Set min width of the popup menu, default is 120px
+    pub fn min_w(mut self, width: impl Into<Pixels>) -> Self {
+        self.min_width = Some(width.into());
+        self
+    }
+
+    /// Set max width of the popup menu, default is 500px
+    pub fn max_w(mut self, width: impl Into<Pixels>) -> Self {
+        self.max_width = Some(width.into());
+        self
+    }
+
+    /// Set max height of the popup menu, default is half of the window height
+    pub fn max_h(mut self, height: impl Into<Pixels>) -> Self {
+        self.max_height = Some(height.into());
+        self
+    }
+
+    /// Set the menu to be scrollable to show vertical scrollbar.
+    ///
+    /// NOTE: If this is true, the sub-menus will cannot be support.
+    pub fn scrollable(mut self) -> Self {
+        self.scrollable = true;
+        self
+    }
+
+    /// Set the menu to show external link icon, default is true.
+    pub fn external_link_icon(mut self, visible: bool) -> Self {
+        self.external_link_icon = visible;
+        self
+    }
+
+    /// Add Menu Item
+    pub fn menu(self, label: impl Into<SharedString>, action: Box<dyn Action>) -> Self {
+        self.menu_with_disabled(label, action, false)
+    }
+
+    /// Add Menu Item with enable state
+    pub fn menu_with_enable(
+        mut self,
+        label: impl Into<SharedString>,
+        action: Box<dyn Action>,
+        enable: bool,
+    ) -> Self {
+        self.add_menu_item(label, None, action, !enable);
+        self
+    }
+
+    /// Add Menu Item with disabled state
+    pub fn menu_with_disabled(
+        mut self,
+        label: impl Into<SharedString>,
+        action: Box<dyn Action>,
+        disabled: bool,
+    ) -> Self {
+        self.add_menu_item(label, None, action, disabled);
+        self
+    }
+
+    /// Add label
+    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
+        self.menu_items.push(PopupMenuItem::Label(label.into()));
+        self
+    }
+
+    /// Add Menu to open link
+    pub fn link(self, label: impl Into<SharedString>, href: impl Into<String>) -> Self {
+        self.link_with_disabled(label, href, false)
+    }
+
+    /// Add Menu to open link with disabled state
+    pub fn link_with_disabled(
+        mut self,
+        label: impl Into<SharedString>,
+        href: impl Into<String>,
+        disabled: bool,
+    ) -> Self {
+        let href = href.into();
+        self.menu_items.push(PopupMenuItem::Item {
+            icon: None,
+            label: label.into(),
+            disabled,
+            action: None,
+            is_link: true,
+            handler: Some(Rc::new(move |_, cx| cx.open_url(&href))),
+        });
+        self
+    }
+
+    /// Add Menu to open link
+    pub fn link_with_icon(
+        self,
+        label: impl Into<SharedString>,
+        icon: impl Into<Icon>,
+        href: impl Into<String>,
+    ) -> Self {
+        self.link_with_icon_and_disabled(label, icon, href, false)
+    }
+
+    /// Add Menu to open link with icon and disabled state
+    pub fn link_with_icon_and_disabled(
+        mut self,
+        label: impl Into<SharedString>,
+        icon: impl Into<Icon>,
+        href: impl Into<String>,
+        disabled: bool,
+    ) -> Self {
+        let href = href.into();
+        self.menu_items.push(PopupMenuItem::Item {
+            icon: Some(icon.into()),
+            label: label.into(),
+            disabled,
+            action: None,
+            is_link: true,
+            handler: Some(Rc::new(move |_, cx| cx.open_url(&href))),
+        });
+        self
+    }
+
+    /// Add Menu Item with Icon.
+    pub fn menu_with_icon(
+        self,
+        label: impl Into<SharedString>,
+        icon: impl Into<Icon>,
+        action: Box<dyn Action>,
+    ) -> Self {
+        self.menu_with_icon_and_disabled(label, icon, action, false)
+    }
+
+    /// Add Menu Item with Icon and disabled state
+    pub fn menu_with_icon_and_disabled(
+        mut self,
+        label: impl Into<SharedString>,
+        icon: impl Into<Icon>,
+        action: Box<dyn Action>,
+        disabled: bool,
+    ) -> Self {
+        self.add_menu_item(label, Some(icon.into()), action, disabled);
+        self
+    }
+
+    /// Add Menu Item with check icon
+    pub fn menu_with_check(
+        self,
+        label: impl Into<SharedString>,
+        checked: bool,
+        action: Box<dyn Action>,
+    ) -> Self {
+        self.menu_with_check_and_disabled(label, checked, action, false)
+    }
+
+    /// Add Menu Item with check icon and disabled state
+    pub fn menu_with_check_and_disabled(
+        mut self,
+        label: impl Into<SharedString>,
+        checked: bool,
+        action: Box<dyn Action>,
+        disabled: bool,
+    ) -> Self {
+        if checked {
+            self.add_menu_item(label, Some(IconName::Check.into()), action, disabled);
+        } else {
+            self.add_menu_item(label, None, action, disabled);
+        }
+
+        self
+    }
+
+    /// Add Menu Item with custom element render.
+    pub fn menu_element<F, E>(self, action: Box<dyn Action>, builder: F) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> E + 'static,
+        E: IntoElement,
+    {
+        self.menu_element_with_check(false, action, builder)
+    }
+
+    /// Add Menu Item with custom element render with disabled state.
+    pub fn menu_element_with_disabled<F, E>(
+        self,
+        action: Box<dyn Action>,
+        disabled: bool,
+        builder: F,
+    ) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> E + 'static,
+        E: IntoElement,
+    {
+        self.menu_element_with_check_and_disabled(false, action, disabled, builder)
+    }
+
+    /// Add Menu Item with custom element render with icon.
+    pub fn menu_element_with_icon<F, E>(
+        self,
+        icon: impl Into<Icon>,
+        action: Box<dyn Action>,
+        builder: F,
+    ) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> E + 'static,
+        E: IntoElement,
+    {
+        self.menu_element_with_icon_and_disabled(icon, action, false, builder)
+    }
+
+    /// Add Menu Item with custom element render with icon and disabled state
+    pub fn menu_element_with_icon_and_disabled<F, E>(
+        mut self,
+        icon: impl Into<Icon>,
+        action: Box<dyn Action>,
+        disabled: bool,
+        builder: F,
+    ) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> E + 'static,
+        E: IntoElement,
+    {
+        self.menu_items.push(PopupMenuItem::ElementItem {
+            render: Box::new(move |window, cx| builder(window, cx).into_any_element()),
+            action,
+            icon: Some(icon.into()),
+            disabled,
+            handler: None,
+        });
+        self.has_icon = true;
+        self
+    }
+
+    /// Add Menu Item with custom element render with check state
+    pub fn menu_element_with_check<F, E>(
+        self,
+        checked: bool,
+        action: Box<dyn Action>,
+        builder: F,
+    ) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> E + 'static,
+        E: IntoElement,
+    {
+        self.menu_element_with_check_and_disabled(checked, action, false, builder)
+    }
+
+    /// Add Menu Item with custom element render with check state and disabled state
+    pub fn menu_element_with_check_and_disabled<F, E>(
+        mut self,
+        checked: bool,
+        action: Box<dyn Action>,
+        disabled: bool,
+        builder: F,
+    ) -> Self
+    where
+        F: Fn(&mut Window, &mut App) -> E + 'static,
+        E: IntoElement,
+    {
+        if checked {
+            self.menu_items.push(PopupMenuItem::ElementItem {
+                render: Box::new(move |window, cx| builder(window, cx).into_any_element()),
+                action,
+                handler: None,
+                icon: Some(IconName::Check.into()),
+                disabled,
+            });
+            self.has_icon = true;
+        } else {
+            self.menu_items.push(PopupMenuItem::ElementItem {
+                render: Box::new(move |window, cx| builder(window, cx).into_any_element()),
+                action,
+                handler: None,
+                icon: None,
+                disabled,
+            });
+        }
+        self
+    }
+
+    /// Use small size, the menu item will have smaller height.
+    #[allow(dead_code)]
+    pub(crate) fn small(mut self) -> Self {
+        self.size = Size::Small;
+        self
+    }
+
+    /// Add a separator Menu Item
+    pub fn separator(mut self) -> Self {
+        if self.menu_items.is_empty() {
+            return self;
+        }
+
+        if let Some(PopupMenuItem::Separator) = self.menu_items.last() {
+            return self;
+        }
+
+        self.menu_items.push(PopupMenuItem::Separator);
+        self
+    }
+
+    /// Add a Submenu
+    pub fn submenu(
+        self,
+        label: impl Into<SharedString>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
+    ) -> Self {
+        self.submenu_with_icon(None, label, window, cx, f)
+    }
+
+    /// Add a Submenu item with disabled state
+    pub fn submenu_with_disabled(
+        self,
+        label: impl Into<SharedString>,
+        disabled: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
+    ) -> Self {
+        self.submenu_with_icon_with_disabled(None, label, disabled, window, cx, f)
+    }
+
+    /// Add a Submenu item with icon
+    pub fn submenu_with_icon(
+        self,
+        icon: Option<Icon>,
+        label: impl Into<SharedString>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
+    ) -> Self {
+        self.submenu_with_icon_with_disabled(icon, label, false, window, cx, f)
+    }
+
+    /// Add a Submenu item with icon and disabled state
+    pub fn submenu_with_icon_with_disabled(
+        mut self,
+        icon: Option<Icon>,
+        label: impl Into<SharedString>,
+        disabled: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
+    ) -> Self {
+        let submenu = PopupMenu::build(window, cx, f);
+        let parent_menu = cx.entity().downgrade();
+        submenu.update(cx, |view, _| {
+            view.parent_menu = Some(parent_menu);
+        });
+
+        self.menu_items.push(PopupMenuItem::Submenu {
+            icon,
+            label: label.into(),
+            menu: submenu,
+            disabled,
+        });
+        self
+    }
+
+    fn add_menu_item(
+        &mut self,
+        label: impl Into<SharedString>,
+        icon: Option<Icon>,
+        action: Box<dyn Action>,
+        disabled: bool,
+    ) -> &mut Self {
+        if icon.is_some() {
+            self.has_icon = true;
+        }
+
+        self.menu_items.push(PopupMenuItem::Item {
+            icon,
+            label: label.into(),
+            disabled,
+            action: Some(action.boxed_clone()),
+            is_link: false,
+            handler: None,
+        });
+        self
+    }
+
+    pub(super) fn with_menu_items<I>(
+        mut self,
+        items: impl IntoIterator<Item = I>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Self
+    where
+        I: Into<OwnedMenuItem>,
+    {
+        for item in items {
+            match item.into() {
+                OwnedMenuItem::Action { name, action, .. } => {
+                    self = self.menu(name, action.boxed_clone())
+                }
+                OwnedMenuItem::Separator => {
+                    self = self.separator();
+                }
+                OwnedMenuItem::Submenu(submenu) => {
+                    self = self.submenu(submenu.name, window, cx, move |menu, window, cx| {
+                        menu.with_menu_items(submenu.items.clone(), window, cx)
+                    })
+                }
+                OwnedMenuItem::SystemMenu(_) => {}
+            }
+        }
+
+        if self.menu_items.len() > 20 {
+            self.scrollable = true;
+        }
+
+        self
+    }
+
+    pub(crate) fn active_submenu(&self) -> Option<Entity<PopupMenu>> {
+        if let Some(ix) = self.selected_index {
+            if let Some(item) = self.menu_items.get(ix) {
+                return match item {
+                    PopupMenuItem::Submenu { menu, .. } => Some(menu.clone()),
+                    _ => None,
+                };
+            }
+        }
+
+        None
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.menu_items.is_empty()
+    }
+
+    fn clickable_menu_items(&self) -> impl Iterator<Item = (usize, &PopupMenuItem)> {
+        self.menu_items
+            .iter()
+            .enumerate()
+            .filter(|(_, item)| item.is_clickable())
+    }
+
+    fn on_click(&mut self, ix: usize, window: &mut Window, cx: &mut Context<Self>) {
+        cx.stop_propagation();
+        window.prevent_default();
+        self.selected_index = Some(ix);
+        self.confirm(&Confirm { secondary: false }, window, cx);
+    }
+
+    fn confirm(&mut self, _: &Confirm, window: &mut Window, cx: &mut Context<Self>) {
+        if let Some(index) = self.selected_index {
+            let item = self.menu_items.get(index);
+
+            match item {
+                Some(PopupMenuItem::Item {
+                    handler, action, ..
+                }) => {
+                    if let Some(handler) = handler {
+                        handler(window, cx);
+                    } else if let Some(action) = action.as_ref() {
+                        self.dispatch_confirm_action(action.as_ref(), window, cx);
+                    }
+
+                    self.dismiss(&Cancel, window, cx)
+                }
+                Some(PopupMenuItem::ElementItem {
+                    handler, action, ..
+                }) => {
+                    if let Some(handler) = handler {
+                        handler(window, cx);
+                    } else {
+                        self.dispatch_confirm_action(action.as_ref(), window, cx);
+                    }
+                    self.dismiss(&Cancel, window, cx)
+                }
+                _ => {}
+            }
+        }
+    }
+
+    fn dispatch_confirm_action(
+        &self,
+        action: &dyn Action,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(context) = self.action_context.as_ref() {
+            context.focus(window);
+        }
+
+        window.dispatch_action(action.boxed_clone(), cx);
+    }
+
+    fn set_selected_index(&mut self, ix: usize, cx: &mut Context<Self>) {
+        if self.selected_index != Some(ix) {
+            self.selected_index = Some(ix);
+            self.scroll_handle.scroll_to_item(ix);
+            cx.notify();
+        }
+    }
+
+    fn select_up(&mut self, _: &SelectUp, _: &mut Window, cx: &mut Context<Self>) {
+        cx.stop_propagation();
+        let ix = self.selected_index.unwrap_or(0);
+
+        if let Some((prev_ix, _)) = self
+            .menu_items
+            .iter()
+            .enumerate()
+            .rev()
+            .find(|(i, item)| *i < ix && item.is_clickable())
+        {
+            self.set_selected_index(prev_ix, cx);
+            return;
+        }
+
+        let last_clickable_ix = self.clickable_menu_items().last().map(|(ix, _)| ix);
+        self.set_selected_index(last_clickable_ix.unwrap_or(0), cx);
+    }
+
+    fn select_down(&mut self, _: &SelectDown, _: &mut Window, cx: &mut Context<Self>) {
+        cx.stop_propagation();
+        let Some(ix) = self.selected_index else {
+            self.set_selected_index(0, cx);
+            return;
+        };
+
+        if let Some((next_ix, _)) = self
+            .menu_items
+            .iter()
+            .enumerate()
+            .find(|(i, item)| *i > ix && item.is_clickable())
+        {
+            self.set_selected_index(next_ix, cx);
+            return;
+        }
+
+        self.set_selected_index(0, cx);
+    }
+
+    fn select_left(&mut self, _: &SelectLeft, window: &mut Window, cx: &mut Context<Self>) {
+        let handled = if matches!(self.submenu_anchor.0, Corner::TopLeft | Corner::BottomLeft) {
+            self._unselect_submenu(window, cx)
+        } else {
+            self._select_submenu(window, cx)
+        };
+
+        if self.parent_side(cx).is_left() {
+            self._focus_parent_menu(window, cx);
+        }
+
+        if handled {
+            return;
+        }
+
+        // For parent AppMenuBar to handle.
+        if self.parent_menu.is_none() {
+            cx.propagate();
+        }
+    }
+
+    fn select_right(&mut self, _: &SelectRight, window: &mut Window, cx: &mut Context<Self>) {
+        let handled = if matches!(self.submenu_anchor.0, Corner::TopLeft | Corner::BottomLeft) {
+            self._select_submenu(window, cx)
+        } else {
+            self._unselect_submenu(window, cx)
+        };
+
+        if self.parent_side(cx).is_right() {
+            self._focus_parent_menu(window, cx);
+        }
+
+        if handled {
+            return;
+        }
+
+        // For parent AppMenuBar to handle.
+        if self.parent_menu.is_none() {
+            cx.propagate();
+        }
+    }
+
+    fn _select_submenu(&mut self, window: &mut Window, cx: &mut Context<Self>) -> bool {
+        if let Some(active_submenu) = self.active_submenu() {
+            // Focus the submenu, so that can be handle the action.
+            active_submenu.update(cx, |view, cx| {
+                view.set_selected_index(0, cx);
+                view.focus_handle.focus(window);
+            });
+            cx.notify();
+            return true;
+        }
+
+        false
+    }
+
+    fn _unselect_submenu(&mut self, _: &mut Window, cx: &mut Context<Self>) -> bool {
+        if let Some(active_submenu) = self.active_submenu() {
+            active_submenu.update(cx, |view, cx| {
+                view.selected_index = None;
+                cx.notify();
+            });
+            return true;
+        }
+
+        false
+    }
+
+    fn _focus_parent_menu(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let Some(parent) = self.parent_menu.as_ref() else {
+            return;
+        };
+        let Some(parent) = parent.upgrade() else {
+            return;
+        };
+
+        self.selected_index = None;
+        parent.update(cx, |view, cx| {
+            view.focus_handle.focus(window);
+            cx.notify();
+        });
+    }
+
+    fn parent_side(&self, cx: &App) -> Side {
+        let Some(parent) = self.parent_menu.as_ref() else {
+            return Side::Left;
+        };
+
+        let Some(parent) = parent.upgrade() else {
+            return Side::Left;
+        };
+
+        match parent.read(cx).submenu_anchor.0 {
+            Corner::TopLeft | Corner::BottomLeft => Side::Left,
+            Corner::TopRight | Corner::BottomRight => Side::Right,
+        }
+    }
+
+    fn dismiss(&mut self, _: &Cancel, window: &mut Window, cx: &mut Context<Self>) {
+        if self.active_submenu().is_some() {
+            return;
+        }
+
+        cx.emit(DismissEvent);
+
+        // Focus back to the previous focused handle.
+        if let Some(action_context) = self.action_context.as_ref() {
+            window.focus(action_context);
+        }
+
+        let Some(parent_menu) = self.parent_menu.clone() else {
+            return;
+        };
+
+        // Dismiss parent menu, when this menu is dismissed
+        _ = parent_menu.update(cx, |view, cx| {
+            view.selected_index = None;
+            view.dismiss(&Cancel, window, cx);
+        });
+    }
+
+    fn render_key_binding(
+        &self,
+        action: Option<Box<dyn Action>>,
+        window: &mut Window,
+        _: &mut Context<Self>,
+    ) -> Option<impl IntoElement> {
+        let action = action?;
+
+        match self
+            .action_context
+            .as_ref()
+            .and_then(|handle| Kbd::binding_for_action_in(action.as_ref(), handle, window))
+        {
+            Some(kbd) => Some(kbd),
+            // Fallback to App level key binding
+            None => Kbd::binding_for_action(action.as_ref(), None, window),
+        }
+        .map(|this| {
+            this.p_0()
+                .flex_nowrap()
+                .border_0()
+                .bg(gpui::transparent_white())
+        })
+    }
+
+    fn render_icon(
+        has_icon: bool,
+        icon: Option<Icon>,
+        _: &mut Window,
+        _: &mut Context<Self>,
+    ) -> Option<impl IntoElement> {
+        if !has_icon {
+            return None;
+        }
+
+        let icon = h_flex()
+            .w_3p5()
+            .h_3p5()
+            .justify_center()
+            .text_sm()
+            .when_some(icon, |this, icon| this.child(icon.clone().xsmall()));
+
+        Some(icon)
+    }
+
+    #[inline]
+    fn max_width(&self) -> Pixels {
+        self.max_width.unwrap_or(px(500.))
+    }
+
+    /// Calculate the anchor corner and left offset for child submenu
+    fn update_submenu_menu_anchor(&mut self, window: &Window) {
+        let bounds = self.bounds;
+        let max_width = self.max_width();
+        let (anchor, left) = if max_width + bounds.origin.x > window.bounds().size.width {
+            (Corner::TopRight, -px(16.))
+        } else {
+            (Corner::TopLeft, bounds.size.width - px(8.))
+        };
+
+        let is_bottom_pos = bounds.origin.y + bounds.size.height > window.bounds().size.height;
+        self.submenu_anchor = if is_bottom_pos {
+            (anchor.other_side_corner_along(gpui::Axis::Vertical), left)
+        } else {
+            (anchor, left)
+        };
+    }
+
+    fn render_item(
+        &self,
+        ix: usize,
+        item: &PopupMenuItem,
+        state: ItemState,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> impl IntoElement {
+        let has_icon = self.has_icon;
+        let selected = self.selected_index == Some(ix);
+        const EDGE_PADDING: Pixels = px(4.);
+        const INNER_PADDING: Pixels = px(8.);
+
+        let is_submenu = matches!(item, PopupMenuItem::Submenu { .. });
+        let group_name = format!("popup-menu-item-{ix}");
+
+        let (item_height, radius) = match self.size {
+            Size::Small => (px(20.), state.radius.half()),
+            _ => (px(26.), state.radius),
+        };
+
+        let this = MenuItemElement::new(ix, &group_name)
+            .relative()
+            .text_sm()
+            .py_0()
+            .px(INNER_PADDING)
+            .rounded(radius)
+            .items_center()
+            .selected(selected)
+            .on_hover(cx.listener(move |this, hovered, _, cx| {
+                if *hovered {
+                    this.selected_index = Some(ix);
+                } else if !is_submenu && this.selected_index == Some(ix) {
+                    // TODO: Better handle the submenu unselection when hover out
+                    this.selected_index = None;
+                }
+
+                cx.notify();
+            }));
+
+        match item {
+            PopupMenuItem::Separator => this
+                .h_auto()
+                .p_0()
+                .my_0p5()
+                .mx_neg_1()
+                .h(px(1.))
+                .bg(cx.theme().border)
+                .disabled(true),
+            PopupMenuItem::Label(label) => this.disabled(true).cursor_default().child(
+                h_flex()
+                    .cursor_default()
+                    .items_center()
+                    .gap_x_1()
+                    .font_semibold()
+                    .children(Self::render_icon(has_icon, None, window, cx))
+                    .child(label.clone()),
+            ),
+            PopupMenuItem::ElementItem {
+                render,
+                icon,
+                disabled,
+                ..
+            } => this
+                .when(!disabled, |this| {
+                    this.on_click(
+                        cx.listener(move |this, _, window, cx| this.on_click(ix, window, cx)),
+                    )
+                })
+                .disabled(*disabled)
+                .child(
+                    h_flex()
+                        .flex_1()
+                        .min_h(item_height)
+                        .items_center()
+                        .gap_x_1()
+                        .children(Self::render_icon(has_icon, icon.clone(), window, cx))
+                        .child((render)(window, cx)),
+                ),
+            PopupMenuItem::Item {
+                icon,
+                label,
+                action,
+                disabled,
+                is_link,
+                ..
+            } => {
+                let show_link_icon = *is_link && self.external_link_icon;
+                let action = action.as_ref().map(|action| action.boxed_clone());
+                let key = self.render_key_binding(action, window, cx);
+
+                this.when(!disabled, |this| {
+                    this.on_click(
+                        cx.listener(move |this, _, window, cx| this.on_click(ix, window, cx)),
+                    )
+                })
+                .disabled(*disabled)
+                .h(item_height)
+                .children(Self::render_icon(has_icon, icon.clone(), window, cx))
+                .child(
+                    h_flex()
+                        .w_full()
+                        .gap_2()
+                        .items_center()
+                        .justify_between()
+                        .when(!show_link_icon, |this| this.child(label.clone()))
+                        .when(show_link_icon, |this| {
+                            this.child(
+                                h_flex()
+                                    .w_full()
+                                    .justify_between()
+                                    .gap_1p5()
+                                    .child(label.clone())
+                                    .child(
+                                        Icon::new(IconName::OpenUrl)
+                                            .xsmall()
+                                            .text_color(cx.theme().text_muted),
+                                    ),
+                            )
+                        })
+                        .children(key),
+                )
+            }
+            PopupMenuItem::Submenu {
+                icon,
+                label,
+                menu,
+                disabled,
+            } => this
+                .selected(selected)
+                .disabled(*disabled)
+                .items_start()
+                .child(
+                    h_flex()
+                        .min_h(item_height)
+                        .size_full()
+                        .items_center()
+                        .gap_x_1()
+                        .children(Self::render_icon(has_icon, icon.clone(), window, cx))
+                        .child(
+                            h_flex()
+                                .flex_1()
+                                .gap_2()
+                                .items_center()
+                                .justify_between()
+                                .child(label.clone())
+                                .child(IconName::CaretRight),
+                        ),
+                )
+                .when(selected, |this| {
+                    this.child({
+                        let (anchor, left) = self.submenu_anchor;
+                        let is_bottom_pos =
+                            matches!(anchor, Corner::BottomLeft | Corner::BottomRight);
+                        anchored()
+                            .anchor(anchor)
+                            .child(
+                                div()
+                                    .id("submenu")
+                                    .occlude()
+                                    .when(is_bottom_pos, |this| this.bottom_0())
+                                    .when(!is_bottom_pos, |this| this.top_neg_1())
+                                    .left(left)
+                                    .child(menu.clone()),
+                            )
+                            .snap_to_window_with_margin(Edges::all(EDGE_PADDING))
+                    })
+                }),
+        }
+    }
+}
+
+impl FluentBuilder for PopupMenu {}
+impl EventEmitter<DismissEvent> for PopupMenu {}
+impl Focusable for PopupMenu {
+    fn focus_handle(&self, _: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+#[derive(Clone, Copy)]
+struct ItemState {
+    radius: Pixels,
+}
+
+impl Render for PopupMenu {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        self.update_submenu_menu_anchor(window);
+
+        let max_width = self.max_width();
+        let max_height = self.max_height.map_or_else(
+            || {
+                let window_half_height = window.window_bounds().get_bounds().size.height * 0.5;
+                window_half_height.min(px(450.))
+            },
+            |height| height,
+        );
+
+        let view = cx.entity().clone();
+        let items_count = self.menu_items.len();
+        let item_state = ItemState {
+            radius: cx.theme().radius.min(px(8.)),
+        };
+
+        v_flex()
+            .id("popup-menu")
+            .key_context(CONTEXT)
+            .track_focus(&self.focus_handle)
+            .on_action(cx.listener(Self::select_up))
+            .on_action(cx.listener(Self::select_down))
+            .on_action(cx.listener(Self::select_left))
+            .on_action(cx.listener(Self::select_right))
+            .on_action(cx.listener(Self::confirm))
+            .on_action(cx.listener(Self::dismiss))
+            .on_mouse_down_out(cx.listener(|this, ev: &MouseDownEvent, window, cx| {
+                // Do not dismiss, if click inside the parent menu
+                if let Some(parent) = this.parent_menu.as_ref() {
+                    if let Some(parent) = parent.upgrade() {
+                        if parent.read(cx).bounds.contains(&ev.position) {
+                            return;
+                        }
+                    }
+                }
+
+                this.dismiss(&Cancel, window, cx);
+            }))
+            .popover_style(cx)
+            .text_color(cx.theme().text)
+            .relative()
+            .child(
+                v_flex()
+                    .id("items")
+                    .p_1()
+                    .gap_y_0p5()
+                    .min_w(rems(8.))
+                    .when_some(self.min_width, |this, min_width| this.min_w(min_width))
+                    .max_w(max_width)
+                    .when(self.scrollable, |this| {
+                        this.max_h(max_height)
+                            .overflow_y_scroll()
+                            .track_scroll(&self.scroll_handle)
+                    })
+                    .children(
+                        self.menu_items
+                            .iter()
+                            .enumerate()
+                            // Ignore last separator
+                            .filter(|(ix, item)| !(*ix + 1 == items_count && item.is_separator()))
+                            .map(|(ix, item)| self.render_item(ix, item, item_state, window, cx)),
+                    )
+                    .child({
+                        canvas(
+                            move |bounds, _, cx| view.update(cx, |r, _| r.bounds = bounds),
+                            |_, _, _, _| {},
+                        )
+                        .absolute()
+                        .size_full()
+                    }),
+            )
+            .when(self.scrollable, |this| {
+                // TODO: When the menu is limited by `overflow_y_scroll`, the sub-menu will cannot be displayed.
+                this.child(
+                    div()
+                        .absolute()
+                        .top_0()
+                        .left_0()
+                        .right_0()
+                        .bottom_0()
+                        .child(Scrollbar::vertical(&self.scroll_state, &self.scroll_handle)),
+                )
+            })
+    }
+}
diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs
index 4617f9b..82e388d 100644
--- a/crates/ui/src/styled.rs
+++ b/crates/ui/src/styled.rs
@@ -317,6 +317,10 @@ impl Side {
     pub(crate) fn is_left(&self) -> bool {
         matches!(self, Self::Left)
     }
+
+    pub(crate) fn is_right(&self) -> bool {
+        matches!(self, Self::Right)
+    }
 }
 
 /// A trait for defining element that can be collapsed.