refactor: use key up and down to navigate in menus

Author: EmixamPP

src/configure/app/ir_enabler.rs

@@ -27,7 +27,8 @@ use tokio::{
 const KEY_YES: KeyCode = KeyCode::Char('y');
 const KEY_NO: KeyCode = KeyCode::Char('n');
 const KEY_EXIT: KeyCode = KeyCode::Esc;
-const KEY_NAVIGATE: KeyCode = KeyCode::Tab;
+const KEY_NAVIGATE_UP: KeyCode = KeyCode::Up;
+const KEY_NAVIGATE_DOWN: KeyCode = KeyCode::Down;
 const KEY_CONTINUE: KeyCode = KeyCode::Enter;
 const KEY_DELETE: KeyCode = KeyCode::Backspace;
 
@@ -433,7 +434,8 @@ impl App {
         match self.state() {
             State::Menu => match key {
                 KEY_EXIT => self.set_state(State::Failure),
-                KEY_NAVIGATE => self.next_setting(),
+                KEY_NAVIGATE_UP => self.prev_setting(),
+                KEY_NAVIGATE_DOWN => self.next_setting(),
                 KEY_DELETE => self.edit_setting(None),
                 KeyCode::Char(c) => self.edit_setting(Some(c)),
                 KEY_CONTINUE => self.set_state(State::ConfirmStart),
@@ -541,15 +543,22 @@ impl App {
                 self.device_settings_list_state.select(None);
                 self.search_settings_list_state.select_first();
             }
-        } else if let Some(i) = self.search_settings_list_state.selected() {
-            if i < 3 {
-                self.search_settings_list_state.select_next();
+        } else {
+            self.search_settings_list_state.select_next();
+        }
+    }
+
+    /// Moves the selection to the previous setting in the settings lists.
+    fn prev_setting(&mut self) {
+        if let Some(i) = self.search_settings_list_state.selected() {
+            if i > 0 {
+                self.search_settings_list_state.select_previous();
             } else {
                 self.search_settings_list_state.select(None);
-                self.device_settings_list_state.select_first();
+                self.device_settings_list_state.select_last();
             }
         } else {
-            self.device_settings_list_state.select_first();
+            self.device_settings_list_state.select_previous();
         }
     }
 
@@ -726,7 +735,7 @@ mod tests {
     }
 
     #[test]
-    fn test_next_setting_device_to_search_and_back() {
+    fn test_next_setting_device_to_search() {
         let mut app = make_app();
         // Move through device settings (0..4)
         for i in 0..4 {
@@ -737,14 +746,47 @@ mod tests {
         app.next_setting();
         assert!(app.device_settings_list_state.selected().is_none());
         assert_eq!(app.search_settings_list_state.selected(), Some(0));
-        // Move through search settings (0..2)
+        // Move through search settings (0..3)
         for i in 0..3 {
             app.next_setting();
             assert_eq!(app.search_settings_list_state.selected(), Some(i + 1));
         }
-        // After 2, should wrap to device settings first
+        // After 3 we should stay at the last search setting
         app.next_setting();
+        assert_eq!(app.search_settings_list_state.selected(), Some(4));
+    }
+
+    #[test]
+    fn test_prev_setting_device_to_search() {
+        let mut app = make_app();
+        // Start at the end of search settings
+        app.device_settings_list_state.select(None);
+        app.search_settings_list_state.select(Some(4));
+
+        // Move through search settings (4..0)
+        for i in (1..=4).rev() {
+            assert_eq!(app.search_settings_list_state.selected(), Some(i));
+            app.prev_setting();
+        }
+
+        // At index 0 of search settings, prev_setting should move to device settings last
+        assert_eq!(app.search_settings_list_state.selected(), Some(0));
+        app.prev_setting();
         assert!(app.search_settings_list_state.selected().is_none());
+
+        // NOTE: select_last() sets to usize::MAX until screen is rendered to know that it is actually 4
+        assert_eq!(app.device_settings_list_state.selected(), Some(usize::MAX));
+        // so let's cheat
+        app.device_settings_list_state.select(Some(4));
+
+        // Move through device settings (4..0)
+        for i in (1..=4).rev() {
+            app.prev_setting();
+            assert_eq!(app.device_settings_list_state.selected(), Some(i - 1));
+        }
+
+        // At the first device setting, we should stay there
+        app.prev_setting();
         assert_eq!(app.device_settings_list_state.selected(), Some(0));
     }
 
@@ -893,7 +935,7 @@ mod tests {
         let mut app = make_app();
         app.set_state(State::Menu);
         app.device_settings_list_state.select(Some(0));
-        let key_event = make_term_key_event(KEY_NAVIGATE);
+        let key_event = make_term_key_event(KEY_NAVIGATE_DOWN);
         let res = app.handle_term_event(key_event).await;
         assert!(res.is_ok(), "{:?}", res.err());
         assert_eq!(app.device_settings_list_state.selected(), Some(1));

src/configure/snapshots/linux_enable_ir_emitter__configure__ui__tests__render_keys.snap

@@ -3,7 +3,7 @@ source: src/configure/ui.rs
 expression: terminal.backend()
 ---
 "Quit <Esc>                                                                                          "
-"Navigate <Tab>                                                                                      "
+"Navigate <↑↓>                                                                                       "
 "Continue <Enter>                                                                                    "
 "Yes <y>                                                                                             "
 "No <n>                                                                                              "

src/configure/ui.rs

@@ -15,16 +15,26 @@ mod keys {
         text::{Line, Span},
     };
 
+    #[derive(Debug, Clone, Copy)]
+    enum KeyRepr {
+        Code(KeyCode),
+        Str(&'static str),
+    }
+
     #[derive(Debug, Clone, Copy)]
     pub struct Key {
-        code: KeyCode,
+        repr: KeyRepr,
         name: &'static str,
         color: Color,
     }
 
     impl Key {
         const fn new(code: KeyCode, name: &'static str, color: Color) -> Self {
-            Self { code, name, color }
+            Self { repr: KeyRepr::Code(code), name, color }
+        }
+
+        const fn custom(repr: &'static str, name: &'static str, color: Color) -> Self {
+            Self { repr: KeyRepr::Str(repr), name, color }
         }
     }
 
@@ -33,7 +43,10 @@ mod keys {
         for (i, key) in keys.iter().enumerate() {
             spans.push(format!("{} <", key.name).bold());
             spans.push(Span::styled(
-                key.code.to_string(),
+                match key.repr {
+                    KeyRepr::Code(code) => code.to_string(),
+                    KeyRepr::Str(s) => s.to_string(),
+                },
                 Style::default().fg(key.color),
             ));
             spans.push(">".bold());
@@ -46,6 +59,7 @@ mod keys {
     }
 
     pub const KEY_EXIT: Key = Key::new(KeyCode::Esc, "Quit", Color::Red);
+    pub const KEYS_NAVIGATE: Key = Key::custom("↑↓", "Navigate", Color::Yellow);
     pub const KEY_NAVIGATE: Key = Key::new(KeyCode::Tab, "Navigate", Color::Yellow);
     pub const KEY_CONTINUE: Key = Key::new(KeyCode::Enter, "Continue", Color::Green);
     pub const KEY_YES: Key = Key::new(KeyCode::Char('y'), "Yes", Color::Green);
@@ -62,7 +76,7 @@ mod tests {
     #[test]
     fn test_render_keys() {
         assert_ui_snapshot!(|frame| {
-            let keys = [KEY_EXIT, KEY_NAVIGATE, KEY_CONTINUE, KEY_YES, KEY_NO];
+            let keys = [KEY_EXIT, KEYS_NAVIGATE, KEY_CONTINUE, KEY_YES, KEY_NO];
 
             let chunks =
                 Layout::vertical(vec![Constraint::Length(1); keys.len()]).split(frame.area());

src/configure/ui/ir_enabler.rs

@@ -1,6 +1,6 @@
 use super::{
     DeviceSettingsCtx, SearchSettingsCtx,
-    keys::{KEY_CONTINUE, KEY_EXIT, KEY_NAVIGATE, KEY_NO, KEY_YES, keys_to_line},
+    keys::{KEY_CONTINUE, KEY_EXIT, KEYS_NAVIGATE, KEY_NO, KEY_YES, keys_to_line},
     popup_area, render_full_menu, render_main_window, render_video_preview,
 };
 use crate::video::stream::Image;
@@ -141,7 +141,7 @@ where
 {
     match app.view() {
         View::Menu => {
-            let main_area = render_main_window(frame, &[KEY_NAVIGATE, KEY_CONTINUE, KEY_EXIT]);
+            let main_area = render_main_window(frame, &[KEYS_NAVIGATE, KEY_CONTINUE, KEY_EXIT]);
             render_full_menu(
                 frame,
                 main_area,

src/configure/ui/shared.rs

@@ -205,7 +205,7 @@ mod tests {
         assert_ui_snapshot!(|frame| {
             let _ = render_main_window(
                 frame,
-                &[keys::KEY_NAVIGATE, keys::KEY_CONTINUE, keys::KEY_EXIT],
+                &[keys::KEYS_NAVIGATE, keys::KEY_CONTINUE, keys::KEY_EXIT],
             );
         });
     }

src/configure/ui/snapshots/linux_enable_ir_emitter__configure__ui__ir_enabler__tests__menu_empty.snap

@@ -30,5 +30,5 @@ expression: terminal.backend()
 "┃                                                                                                  ┃"
 "┃                                                                                                  ┃"
 "┃──────────────────────────────────────────────────────────────────────────────────────────────────┃"
-"┃                          Navigate <Tab>   Continue <Enter>   Quit <Esc>                          ┃"
+"┃                           Navigate <↑↓>   Continue <Enter>   Quit <Esc>                          ┃"
 "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"

src/configure/ui/snapshots/linux_enable_ir_emitter__configure__ui__ir_enabler__tests__menu_strart.snap

@@ -30,5 +30,5 @@ expression: terminal.backend()
 "┃                                                                                                  ┃"
 "┃                                                                                                  ┃"
 "┃──────────────────────────────────────────────────────────────────────────────────────────────────┃"
-"┃                          Navigate <Tab>   Continue <Enter>   Quit <Esc>                          ┃"
+"┃                           Navigate <↑↓>   Continue <Enter>   Quit <Esc>                          ┃"
 "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"

src/configure/ui/snapshots/linux_enable_ir_emitter__configure__ui__ir_enabler__tests__menu_valid_values.snap

@@ -30,5 +30,5 @@ expression: terminal.backend()
 "┃                                                                                                  ┃"
 "┃                                                                                                  ┃"
 "┃──────────────────────────────────────────────────────────────────────────────────────────────────┃"
-"┃                          Navigate <Tab>   Continue <Enter>   Quit <Esc>                          ┃"
+"┃                           Navigate <↑↓>   Continue <Enter>   Quit <Esc>                          ┃"
 "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"

src/configure/ui/snapshots/linux_enable_ir_emitter__configure__ui__shared__tests__render_main_window.snap

@@ -30,5 +30,5 @@ expression: terminal.backend()
 "┃                                                                                                  ┃"
 "┃                                                                                                  ┃"
 "┃──────────────────────────────────────────────────────────────────────────────────────────────────┃"
-"┃                          Navigate <Tab>   Continue <Enter>   Quit <Esc>                          ┃"
+"┃                           Navigate <↑↓>   Continue <Enter>   Quit <Esc>                          ┃"
 "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"

src/configure/ui/snapshots/linux_enable_ir_emitter__configure__ui__tweaker__tests__main_empty.snap

@@ -30,5 +30,5 @@ expression: terminal.backend()
 "┃│                                               ││                                               │┃"
 "┃└───────────────────────────────────────────────┘└───────────────────────────────────────────────┘┃"
 "┃──────────────────────────────────────────────────────────────────────────────────────────────────┃"
-"┃                            Navigate <Tab>   Edit <Enter>   Quit <Esc>                            ┃"
+"┃                             Navigate <↑↓>   Edit <Enter>   Quit <Esc>                            ┃"
 "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛"