feat: added MB4/MB5 and Esc navigation globaly

packages/oneclient_app/src/components/button.rs

@@ -327,7 +327,7 @@ impl Component for Button {
                 })
                 .cursor(cursor_icon)
                 .map(on_press.clone(), |rect, handler| {
-                    rect.on_all_press(move |event: Event<PressEventData>| {
+                    rect.on_press(move |event: Event<PressEventData>| {
                         handler.call(event);
                     })
                 });

packages/oneclient_app/src/components/dropdown.rs

@@ -1,6 +1,7 @@
 use freya::prelude::*;
 
 use crate::components::{Icon, IconType, ScrollArea};
+use crate::hooks::use_overlay_claim_when;
 use crate::theme::colors;
 use crate::ui::border_all_color;
 
@@ -70,6 +71,8 @@ impl Component for Dropdown {
         let on_select = self.on_select.clone();
         let is_open = open();
 
+        use_overlay_claim_when(is_open);
+
         if !is_open && list_size().is_some() {
             let _ = list_size.take();
         }
@@ -108,6 +111,11 @@ impl Component for Dropdown {
 
         rect()
             .width(self.width.clone())
+            .on_global_key_down(move |e: Event<KeyboardEventData>| {
+                if e.key == Key::Named(NamedKey::Escape) {
+                    open.set_if_modified(false);
+                }
+            })
             .child(
                 rect()
                     .width(Size::fill())
@@ -130,7 +138,7 @@ impl Component for Dropdown {
                     .on_sized(move |e: Event<SizedEventData>| {
                         button_area.set_if_modified(Some(e.area));
                     })
-                    .on_all_press(move |e: Event<PressEventData>| {
+                    .on_press(move |e: Event<PressEventData>| {
                         e.prevent_default();
                         e.stop_propagation();
                         open.toggle();
@@ -237,7 +245,7 @@ impl Component for DropdownOption {
             })
             .on_pointer_enter(move |_| hovering.set(true))
             .on_pointer_leave(move |_| hovering.set(false))
-            .on_all_press(self.on_press.clone())
+            .on_press(self.on_press.clone())
             .child(
                 label()
                     .text(self.text.clone())

packages/oneclient_app/src/components/navbar/app_navbar.rs

@@ -189,7 +189,7 @@ impl Component for NavLink {
             .a11y_id(a11y_id)
             .a11y_focusable(true)
             .a11y_role(AccessibilityRole::Button)
-            .on_all_press(move |e: Event<PressEventData>| {
+            .on_press(move |e: Event<PressEventData>| {
                 e.prevent_default();
                 match &target {
                     NavTarget::Route(route) => {

packages/oneclient_app/src/components/overlay_popup.rs

@@ -3,6 +3,8 @@ use freya::{
     prelude::*,
 };
 
+use crate::hooks::use_overlay_claim;
+
 const SCRIM_ALPHA: f32 = 90.;
 
 #[derive(PartialEq)]
@@ -61,6 +63,8 @@ impl KeyExt for OverlayPopup {
 
 impl Component for OverlayPopup {
     fn render(&self) -> impl IntoElement {
+        use_overlay_claim();
+
         let a11y_id = use_a11y();
         let scrim_close = self.on_close.clone();
         let key_close = self.on_close.clone();

packages/oneclient_app/src/components/recents_row.rs

@@ -173,7 +173,7 @@ impl Component for ClusterCard {
                             .y(0.)
                             .color(Color::from_af32rgb(0.3, 0, 0, 0)),
                     )
-                    .on_all_press(on_press)
+                    .on_press(on_press)
                     .child(
                         rect()
                             .width(Size::fill())
@@ -281,7 +281,7 @@ impl Component for OtherVersionsTile {
                     .y(0.)
                     .color(Color::from_af32rgb(0.3, 0, 0, 0)),
             )
-            .on_all_press(|_| {
+            .on_press(|_| {
                 let _ = RouterContext::get().push(Route::Clusters {});
             })
             .child(

packages/oneclient_app/src/components/segmented_control.rs

@@ -185,7 +185,7 @@ impl<T: Copy + PartialEq + 'static> Component for SegmentButton<T> {
             })
             .maybe(!disabled, |el| {
                 el.cursor(CursorIcon::Pointer)
-                    .on_all_press(move |_| *selected.write() = value)
+                    .on_press(move |_| *selected.write() = value)
             })
             .maybe_child(self.icon.map(|icon| {
                 let mut ic = Icon::new(icon);

packages/oneclient_app/src/components/tab_bar.rs

@@ -187,7 +187,7 @@ impl Component for TabButton {
             .cursor(CursorIcon::Pointer);
 
         if let Some(handler) = self.on_press.clone() {
-            el = el.on_all_press(move |e| handler.call(e));
+            el = el.on_press(move |e| handler.call(e));
         }
 
         el.child(

packages/oneclient_app/src/components/toggle.rs

@@ -106,7 +106,7 @@ impl Component for Switch {
             .a11y_focusable(!disabled)
             .a11y_role(AccessibilityRole::Button)
             .maybe(!disabled, |el| {
-                el.cursor(CursorIcon::Pointer).on_all_press(move |_| {
+                el.cursor(CursorIcon::Pointer).on_press(move |_| {
                     on_press.call(());
                 })
             })

packages/oneclient_app/src/components/version_card.rs

@@ -79,7 +79,7 @@ impl Component for VersionCard {
             .a11y_id(a11y_id)
             .a11y_focusable(true)
             .a11y_role(AccessibilityRole::Button)
-            .on_all_press(move |e| on_press.call(e))
+            .on_press(move |e| on_press.call(e))
             .on_pointer_enter(move |_| {
                 *hovering.write() = true;
             })

packages/oneclient_app/src/hooks/mod.rs

@@ -1,10 +1,15 @@
 mod active_cluster;
 mod debounce;
 mod actions;
+mod overlay_claims;
 mod queries;
 mod view_state;
 
 pub use debounce::use_debounced;
+pub use overlay_claims::{
+    OverlayClaims, use_overlay_claim, use_overlay_claim_when, use_overlay_claims,
+    use_provide_overlay_claims,
+};
 pub use view_state::{PersistedView, use_view_state};
 
 pub use active_cluster::{

packages/oneclient_app/src/hooks/overlay_claims.rs

@@ -0,0 +1,60 @@
+use std::cell::Cell;
+use std::rc::Rc;
+
+use freya::prelude::*;
+
+#[derive(Clone, Default)]
+pub struct OverlayClaims(Rc<Cell<usize>>);
+
+impl OverlayClaims {
+    /// Whether anything on screen currently owns Escape and mouse-back.
+    pub fn any(&self) -> bool {
+        self.0.get() > 0
+    }
+
+    fn acquire(&self) {
+        self.0.set(self.0.get() + 1);
+    }
+
+    fn release(&self) {
+        self.0.set(self.0.get().saturating_sub(1));
+    }
+}
+
+pub fn use_provide_overlay_claims() {
+    use_provide_root_context(OverlayClaims::default);
+}
+
+pub fn use_overlay_claims() -> OverlayClaims {
+    consume_root_context::<OverlayClaims>()
+}
+
+pub fn use_overlay_claim() {
+    let claims = use_overlay_claims();
+    let released = claims.clone();
+
+    use_hook(move || claims.acquire());
+    use_drop(move || released.release());
+}
+
+pub fn use_overlay_claim_when(active: bool) {
+    let claims = use_overlay_claims();
+    let held = use_hook(|| Rc::new(Cell::new(false)));
+
+    if held.get() != active {
+        held.set(active);
+        if active {
+            claims.acquire();
+        } else {
+            claims.release();
+        }
+    }
+
+    let released = claims;
+    let held_at_drop = held;
+    use_drop(move || {
+        if held_at_drop.get() {
+            released.release();
+        }
+    });
+}

packages/oneclient_app/src/layout/animated_outlet.rs

@@ -2,8 +2,9 @@ use freya::animation::*;
 use freya::prelude::*;
 use freya::router::*;
 
-use super::app_shell::{appshell_overlay, back_button, hides_overlay};
+use super::app_shell::{appshell_overlay, back_button, hides_overlay, navigate_back};
 use crate::Route;
+use crate::hooks::use_overlay_claims;
 use crate::theme;
 use crate::ui::entrance_motion_layer;
 
@@ -46,6 +47,23 @@ fn is_cluster_route(route: &Route) -> bool {
     )
 }
 
+/// Checks if it should go back to home or somewhere else
+fn escape_exits_section(route: &Route) -> bool {
+    is_cluster_route(route) || is_sidebar_route(route)
+}
+
+/// Escape belongs to whatever the user is typing in before it belongs to the
+/// router so a search field does not throw the page away mid-word
+fn is_text_entry(role: AccessibilityRole) -> bool {
+    matches!(
+        role,
+        AccessibilityRole::TextInput
+            | AccessibilityRole::MultilineTextInput
+            | AccessibilityRole::SearchInput
+            | AccessibilityRole::PasswordInput
+    )
+}
+
 fn enter_kind(from: &Route, to: &Route) -> Enter {
     if (is_sidebar_route(from) && is_sidebar_route(to))
         || (is_cluster_route(from) && is_cluster_route(to))
@@ -66,6 +84,9 @@ impl Component for AnimatedAppOutlet {
         let mut router = use_animated_router::<Route>();
 
         let route = use_route::<Route>();
+        let at_home = matches!(&route, Route::Home {});
+        let exits_section = escape_exits_section(&route);
+
         let mut origin_route = use_state(|| route.clone());
         let mut last_route = use_state(|| route.clone());
 
@@ -79,6 +100,41 @@ impl Component for AnimatedAppOutlet {
 
         let back_title = origin_route.read().title();
 
+        let platform = Platform::get();
+        let focused_node = platform.focused_accessibility_node;
+        let focused_id = platform.focused_accessibility_id;
+
+        let key_claims = use_overlay_claims();
+        let pointer_claims = key_claims.clone();
+
+        let on_global_key = move |e: Event<KeyboardEventData>| {
+            if e.key != Key::Named(NamedKey::Escape) || key_claims.any() {
+                return;
+            }
+
+            if is_text_entry(focused_node.peek().role()) {
+                focused_id.peek().request_unfocus();
+                return;
+            }
+
+            if exits_section {
+                let _ = RouterContext::get().push(Route::Home {});
+            } else {
+                navigate_back(at_home);
+            }
+        };
+
+        let on_global_pointer = move |e: Event<PointerEventData>| {
+            if pointer_claims.any() {
+                return;
+            }
+            match e.button() {
+                Some(MouseButton::Back) => navigate_back(at_home),
+                Some(MouseButton::Forward) => RouterContext::get().go_forward(),
+                _ => {}
+            }
+        };
+
         let anim = use_animation(|_conf| {
             AnimNum::new(0., 1.)
                 .time(430)
@@ -170,6 +226,8 @@ impl Component for AnimatedAppOutlet {
             .width(Size::fill())
             .height(Size::fill())
             .overflow(Overflow::Clip)
+            .on_global_key_down(on_global_key)
+            .on_global_pointer_press(on_global_pointer)
             .maybe_child(overlay)
             .child(column)
     }

packages/oneclient_app/src/layout/app_shell.rs

@@ -600,12 +600,22 @@ pub(crate) fn gradient_overlay_radial() -> impl IntoElement {
         ))
 }
 
+pub(crate) fn navigate_back(at_home: bool) {
+    let router = RouterContext::get();
+    if router.can_go_back() {
+        router.go_back();
+    } else if !at_home {
+        let _ = router.push(Route::Home {});
+    }
+}
+
 pub(crate) fn back_button(destination: &str) -> impl IntoElement {
     Button::new()
         .ghost()
         .small()
         .on_press(|_| {
-            RouterContext::get().go_back();
+            // Only rendered off home so the history-empty fallback is reachable
+            navigate_back(false);
         })
         .margin(Gaps::new(0., 0., 0., 32.))
         .child(Icon::new(IconType::ArrowLeft).size(12.))

packages/oneclient_app/src/layout/root_layout.rs

@@ -6,7 +6,7 @@ use crate::components::{
     NotificationCenter, PackageUpdatePopup, SplashCurtain, StatusBar, Toasts,
     UpdatePromptOverlay,
 };
-use crate::hooks::{SplashState, use_provide_splash};
+use crate::hooks::{SplashState, use_provide_overlay_claims, use_provide_splash};
 use crate::layout::HomeArtPrefetch;
 use crate::motion::AnimationClockDriver;
 use crate::routes::Route;
@@ -21,6 +21,7 @@ impl Component for RootLayout {
         let active = use_state(|| false);
         let home_ready = use_state(|| false);
         use_provide_splash(SplashState { active, home_ready });
+        use_provide_overlay_claims();
 
         // macOS rounds the window natively so Freya must not round on top of it
         #[cfg(target_os = "macos")]

packages/oneclient_app/src/layout/settings_shell.rs

@@ -794,7 +794,7 @@ impl Component for SidebarItem {
             .on_pointer_enter(move |_| *hovering.write() = true)
             .on_pointer_leave(move |_| *hovering.write() = false)
             .map(route, |el, route| {
-                el.on_all_press(move |_| {
+                el.on_press(move |_| {
                     let _ = RouterContext::get().replace(route.clone());
                 })
             });