Add browser keyboard shortcuts

This commit is contained in:
2026-05-07 19:05:45 -04:00
parent 510af7a9b2
commit c6ddf806d1
2 changed files with 55 additions and 8 deletions
+18 -4
View File
@@ -1,18 +1,22 @@
mod shell; mod shell;
use gpui::{ use gpui::{
App, AppContext, Application, Bounds, KeyBinding, Menu, MenuItem, SystemMenuType, WindowBounds, App, AppContext, Application, Bounds, Focusable, KeyBinding, Menu, MenuItem, SystemMenuType,
WindowOptions, actions, px, size, WindowBounds, WindowOptions, actions, px, size,
}; };
use shell::ElyShell; use shell::ElyShell;
actions!(ely_app, [CloseCurrentTab, Quit]); actions!(ely_app, [CloseCurrentTab, FocusAddressBar, OpenNewTab, Quit]);
fn main() { fn main() {
Application::new().run(|cx: &mut App| { Application::new().run(|cx: &mut App| {
gpui_component::init(cx); gpui_component::init(cx);
cx.on_action(quit); cx.on_action(quit);
cx.bind_keys([ cx.bind_keys([
KeyBinding::new("cmd-t", OpenNewTab, None),
KeyBinding::new("ctrl-t", OpenNewTab, None),
KeyBinding::new("cmd-l", FocusAddressBar, None),
KeyBinding::new("ctrl-l", FocusAddressBar, None),
KeyBinding::new("cmd-w", CloseCurrentTab, None), KeyBinding::new("cmd-w", CloseCurrentTab, None),
KeyBinding::new("ctrl-w", CloseCurrentTab, None), KeyBinding::new("ctrl-w", CloseCurrentTab, None),
KeyBinding::new("cmd-q", Quit, None), KeyBinding::new("cmd-q", Quit, None),
@@ -28,7 +32,11 @@ fn main() {
}, },
Menu { Menu {
name: "File".into(), name: "File".into(),
items: vec![MenuItem::action("Close Tab", CloseCurrentTab)], items: vec![
MenuItem::action("New Tab", OpenNewTab),
MenuItem::separator(),
MenuItem::action("Close Tab", CloseCurrentTab),
],
}, },
]); ]);
@@ -41,6 +49,12 @@ fn main() {
}, },
|window, cx| { |window, cx| {
let shell = cx.new(|cx| ElyShell::new(window, cx)); let shell = cx.new(|cx| ElyShell::new(window, cx));
let focus_handle = shell.focus_handle(cx);
window.defer(cx, move |window, cx| {
if window.focused(cx).is_none() {
focus_handle.focus(window);
}
});
cx.new(|cx| gpui_component::Root::new(shell, window, cx)) cx.new(|cx| gpui_component::Root::new(shell, window, cx))
}, },
); );
+37 -4
View File
@@ -2,16 +2,17 @@ use ely_browser_core::{BrowserCore, BrowserSnapshot, InitialBrowserConfig};
use ely_design_system::{ELY_THEME, colors, spacing}; use ely_design_system::{ELY_THEME, colors, spacing};
use ely_domain::{BrowserTab, CommandIntent, TabId, UrlText}; use ely_domain::{BrowserTab, CommandIntent, TabId, UrlText};
use gpui::{ use gpui::{
AnyElement, AppContext, Context, Entity, InteractiveElement, IntoElement, ParentElement, AnyElement, App, AppContext, Context, Entity, FocusHandle, Focusable, InteractiveElement,
Render, SharedString, StatefulInteractiveElement, Styled, Subscription, Window, div, px, rgb, IntoElement, ParentElement, Render, SharedString, StatefulInteractiveElement, Styled,
Subscription, Window, div, px, rgb,
}; };
use gpui_component::{ use gpui_component::{
Sizable, StyledExt, Sizable, StyledExt,
button::{Button, ButtonVariants}, button::{Button, ButtonVariants},
input::{Input, InputEvent, InputState}, input::{Input, InputEvent, InputState, SelectAll},
}; };
use crate::CloseCurrentTab; use crate::{CloseCurrentTab, FocusAddressBar, OpenNewTab};
enum ShellState { enum ShellState {
Ready(BrowserCore), Ready(BrowserCore),
@@ -20,6 +21,7 @@ enum ShellState {
pub struct ElyShell { pub struct ElyShell {
state: ShellState, state: ShellState,
focus_handle: FocusHandle,
command_input: Entity<InputState>, command_input: Entity<InputState>,
last_intent: Option<CommandIntent>, last_intent: Option<CommandIntent>,
_command_subscription: Subscription, _command_subscription: Subscription,
@@ -58,6 +60,7 @@ impl ElyShell {
Self { Self {
state, state,
focus_handle: cx.focus_handle(),
command_input, command_input,
last_intent: None, last_intent: None,
_command_subscription: command_subscription, _command_subscription: command_subscription,
@@ -70,10 +73,18 @@ impl ElyShell {
{ {
core.open_tab(url); core.open_tab(url);
self.sync_address_input(window, cx); self.sync_address_input(window, cx);
self.focus_address_bar(window, cx);
cx.notify(); cx.notify();
} }
} }
fn focus_address_bar(&mut self, window: &mut Window, cx: &mut Context<Self>) {
self.command_input.update(cx, |input, cx| {
input.focus(window, cx);
});
window.dispatch_action(Box::new(SelectAll), cx);
}
fn select_tab(&mut self, tab_id: &TabId, window: &mut Window, cx: &mut Context<Self>) { fn select_tab(&mut self, tab_id: &TabId, window: &mut Window, cx: &mut Context<Self>) {
if let ShellState::Ready(core) = &mut self.state if let ShellState::Ready(core) = &mut self.state
&& core.select_tab(tab_id).is_ok() && core.select_tab(tab_id).is_ok()
@@ -101,6 +112,19 @@ impl ElyShell {
self.close_active_tab(window, cx); self.close_active_tab(window, cx);
} }
fn on_focus_address_bar(
&mut self,
_: &FocusAddressBar,
window: &mut Window,
cx: &mut Context<Self>,
) {
self.focus_address_bar(window, cx);
}
fn on_open_new_tab(&mut self, _: &OpenNewTab, window: &mut Window, cx: &mut Context<Self>) {
self.open_new_tab(window, cx);
}
fn sync_address_input(&mut self, window: &mut Window, cx: &mut Context<Self>) { fn sync_address_input(&mut self, window: &mut Window, cx: &mut Context<Self>) {
let ShellState::Ready(core) = &mut self.state else { let ShellState::Ready(core) = &mut self.state else {
return; return;
@@ -115,6 +139,12 @@ impl ElyShell {
} }
} }
impl Focusable for ElyShell {
fn focus_handle(&self, _: &App) -> FocusHandle {
self.focus_handle.clone()
}
}
impl Render for ElyShell { impl Render for ElyShell {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
match &self.state { match &self.state {
@@ -136,7 +166,10 @@ impl ElyShell {
) -> AnyElement { ) -> AnyElement {
div() div()
.size_full() .size_full()
.track_focus(&self.focus_handle)
.on_action(cx.listener(Self::on_close_current_tab)) .on_action(cx.listener(Self::on_close_current_tab))
.on_action(cx.listener(Self::on_focus_address_bar))
.on_action(cx.listener(Self::on_open_new_tab))
.bg(rgb(ELY_THEME.canvas)) .bg(rgb(ELY_THEME.canvas))
.text_color(rgb(ELY_THEME.ink)) .text_color(rgb(ELY_THEME.ink))
.flex() .flex()