app/menu: add a fade zone

bin/app/src/app/node.rs

@@ -686,6 +686,11 @@ pub fn create_menu(name: &str) -> SceneNode {
     prop.set_range_f32(0., 1.);
     node.add_property(prop).unwrap();
 
+    let mut prop = Property::new("fade_zone", PropertyType::Float32, PropertySubType::Pixel);
+    prop.set_ui_text("Fade Zone", "Fade out items in the last X pixels");
+    prop.set_range_f32(0., f32::MAX);
+    node.add_property(prop).unwrap();
+
     let mut prop = Property::new("items", PropertyType::Str, PropertySubType::Null);
     prop.set_ui_text("Items", "Menu items");
     prop.set_unbounded();

bin/app/src/app/schema/menu.rs

@@ -44,6 +44,7 @@ mod android_ui_consts {
     pub const CHANNEL_LABEL_FONTSIZE: f32 = 44.;
     pub const MENU_SEP_SIZE: f32 = 3.;
     pub const MENU_HANDLE_PAD: f32 = 200.;
+    pub const MENU_FADE: f32 = 1200.;
     pub const VERBLOCK_SCALE: f32 = 150.;
     pub const VERBLOCK_X: f32 = 180.;
     pub const VERBLOCK_Y: f32 = 80.;
@@ -70,6 +71,7 @@ mod ui_consts {
     pub const CHANNEL_LABEL_FONTSIZE: f32 = 22.;
     pub const MENU_SEP_SIZE: f32 = 1.;
     pub const MENU_HANDLE_PAD: f32 = 100.;
+    pub const MENU_FADE: f32 = 600.;
     pub const VERBLOCK_SCALE: f32 = 80.;
     pub const VERBLOCK_X: f32 = 110.;
     pub const VERBLOCK_Y: f32 = 50.;
@@ -224,6 +226,7 @@ pub async fn make(app: &App, content: SceneNodePtr, i18n_fish: &I18nBabelFish) {
     prop.set_f32(atom, Role::App, 1, CHANNEL_LABEL_LINESPACE / 2.).unwrap();
 
     node.set_property_f32(atom, Role::App, "handle_padding", MENU_HANDLE_PAD).unwrap();
+    node.set_property_f32(atom, Role::App, "fade_zone", MENU_FADE).unwrap();
 
     let prop = node.get_property("items").unwrap();
     for channel in CHANNELS {

bin/app/src/ui/menu/mod.rs

@@ -134,6 +134,7 @@ pub struct Menu {
     sep_color: PropertyColor,
     active_color: PropertyColor,
     alert_color: PropertyColor,
+    fade_zone: PropertyFloat32,
     window_scale: PropertyFloat32,
 
     mouse_pos: SyncMutex<Point>,
@@ -177,6 +178,8 @@ impl Menu {
         let active_color = PropertyColor::wrap(node_ref, Role::Internal, "active_color").unwrap();
         let alert_color = PropertyColor::wrap(node_ref, Role::Internal, "alert_color").unwrap();
 
+        let fade_zone = PropertyFloat32::wrap(node_ref, Role::Internal, "fade_zone", 0).unwrap();
+
         let scroll_start_accel =
             PropertyFloat32::wrap(node_ref, Role::Internal, "scroll_start_accel", 0).unwrap();
         let scroll_resist =
@@ -205,6 +208,7 @@ impl Menu {
             sep_color,
             active_color,
             alert_color,
+            fade_zone,
             window_scale,
             mouse_pos: SyncMutex::new(Point::new(0., 0.)),
             touch_info: SyncMutex::new(None),
@@ -325,6 +329,7 @@ impl Menu {
         let bg_color = self.bg_color.get();
         let sep_size = self.sep_size.get();
         let sep_color = self.sep_color.get();
+        let fade_distance = self.fade_zone.get();
         let window_scale = self.window_scale.get();
 
         let num_items = self.items.get_len();
@@ -384,12 +389,25 @@ impl Menu {
         for idx in 0..num_items {
             let item_text = items_list[idx].clone();
 
-            let color = match item_states.get(&item_text) {
+            let base_color = match item_states.get(&item_text) {
                 Some(ItemStatus::Active) => active_color,
                 Some(ItemStatus::Alert) => alert_color,
                 _ => text_color,
             };
 
+            // Apply fade effect in the configured fade zone
+            let item_y = idx as f32 * item_height - scroll;
+            let fade_zone_start = rect.h - fade_distance;
+            let color = if item_y >= fade_zone_start {
+                let fade_factor =
+                    1.0 - ((item_y - fade_zone_start) / fade_distance).clamp(0.0, 1.0);
+                let mut faded = base_color;
+                faded[3] *= fade_factor;
+                faded
+            } else {
+                base_color
+            };
+
             instrs.append(&mut edit_instrs.clone());
 
             // Draw text