Repository: fujiapple852/trippy (language: rust)

Issue:
Revamp the help dialog
## Current Help Dialog

The existing help dialog looks as follows:

<img width="1009" alt="Screenshot 2024-08-09 at 10 39 56 PM" src="https://github.com/user-attachments/assets/790cbcb6-3c37-4240-bd58-efac5132ef15">

Other than being visually poor, it also shows hardcoded key bindings and so will be wrong for users who have modified their configuration.  

## Current Settings Dialog (Bindings tab)

The key bindings were added to the settings dialog as a dedicated tab several releases ago, making the help dialog redundant.

<img width="1007" alt="Screenshot 2024-08-09 at 10 58 48 PM" src="https://github.com/user-attachments/assets/07caba83-12ad-4477-a822-feab06455f76">

## New Help DIalog

The help dialog will be redesigned to show basic information about Trippy and show information about how to access settings, key binding, and column selection from the existing settings dialog.

<img width="1007" alt="Screenshot 2024-08-09 at 10 38 47 PM" src="https://github.com/user-attachments/assets/25d483c2-2687-4eac-95eb-33f9209bbf46">


Discussion / hints:

Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 521e7d262..bb8b2d689 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Transient error handling for `IPv4` on macOS, Linux &
   Windows ([#1255](https://github.com/fujiapple852/trippy/issues/1255))
 - Improved error messages ([#1150](https://github.com/fujiapple852/trippy/issues/1150))
+- Revamp the help dialog ([#1260](https://github.com/fujiapple852/trippy/issues/1260))
 
 ### Fixed
 
diff --git a/crates/trippy-tui/src/frontend.rs b/crates/trippy-tui/src/frontend.rs
index 82c354492..8bce829ec 100644
--- a/crates/trippy-tui/src/frontend.rs
+++ b/crates/trippy-tui/src/frontend.rs
@@ -82,6 +82,30 @@ fn run_app<B: Backend>(
                             || bindings.quit.check(key)
                         {
                             app.toggle_help();
+                        } else if bindings.toggle_settings.check(key) {
+                            app.toggle_help();
+                            app.toggle_settings();
+                        } else if bindings.toggle_settings_tui.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(0);
+                        } else if bindings.toggle_settings_trace.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(1);
+                        } else if bindings.toggle_settings_dns.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(2);
+                        } else if bindings.toggle_settings_geoip.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(3);
+                        } else if bindings.toggle_settings_bindings.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(4);
+                        } else if bindings.toggle_settings_theme.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(5);
+                        } else if bindings.toggle_settings_columns.check(key) {
+                            app.toggle_help();
+                            app.show_settings_columns(6);
                         }
                     } else if app.show_settings {
                         if bindings.toggle_settings.check(key)
diff --git a/crates/trippy-tui/src/frontend/render/help.rs b/crates/trippy-tui/src/frontend/render/help.rs
index 642b5dcd5..57766341c 100644
--- a/crates/trippy-tui/src/frontend/render/help.rs
+++ b/crates/trippy-tui/src/frontend/render/help.rs
@@ -8,44 +8,46 @@ use ratatui::Frame;
 
 /// Render help dialog.
 pub fn render(f: &mut Frame<'_>, app: &TuiApp) {
+    let s = app.tui_config.bindings.toggle_settings;
+    let b = app.tui_config.bindings.toggle_settings_bindings;
+    let c = app.tui_config.bindings.toggle_settings_columns;
+    #[allow(clippy::needless_raw_string_hashes)]
+    let help_lines = vec![
+        r#"                           "#.to_string(),
+        r#" _____    _                "#.to_string(),
+        r#"|_   _| _(_)_ __ _ __ _  _ "#.to_string(),
+        r#"  | || '_| | '_ \ '_ \ || |"#.to_string(),
+        r#"  |_||_| |_| .__/ .__/\_, |"#.to_string(),
+        r#"           |_|  |_|   |__/ "#.to_string(),
+        r#"                           "#.to_string(),
+        r#" A network diagnostic tool "#.to_string(),
+        r#"                           "#.to_string(),
+        format!(" Press [{s}] to show all settings "),
+        format!(" Press [{b}] to show key bindings "),
+        format!(" Press [{c}] to choose columns "),
+        r#"                           "#.to_string(),
+        r#" https://github.com/fujiapple852/trippy "#.to_string(),
+        r#"                           "#.to_string(),
+        r#" Distributed under the Apache License 2.0 "#.to_string(),
+        r#"                           "#.to_string(),
+        r#" Copyright 2022 Trippy Contributors "#.to_string(),
+    ];
     let block = Block::default()
-        .title(" Default Controls ")
+        .title(" Help ")
         .title_alignment(Alignment::Center)
         .borders(Borders::ALL)
         .style(Style::default().bg(app.tui_config.theme.help_dialog_bg))
         .border_type(BorderType::Double);
-    let control_line: Vec<_> = HELP_LINES.iter().map(|&line| Line::from(line)).collect();
+    let control_line: Vec<_> = help_lines
+        .iter()
+        .map(|line| Line::from(line.as_str()))
+        .collect();
     let control = Paragraph::new(control_line)
         .style(Style::default().fg(app.tui_config.theme.help_dialog_text))
         .block(block.clone())
-        .alignment(Alignment::Left);
+        .alignment(Alignment::Center);
     let area = util::centered_rect(60, 60, f.area());
     f.render_widget(Clear, area);
     f.render_widget(block, area);
     f.render_widget(control, area);
 }
-
-const HELP_LINES: [&str; 22] = [
-    "[up] & [down]    - select hop",
-    "[left] & [right] - select trace or flow",
-    ", & .            - select hop address",
-    "[esc]            - clear selection",
-    "d                - toggle hop details",
-    "f                - toggle flows",
-    "c                - toggle chart",
-    "m                - toggle map",
-    "p                - toggle privacy",
-    "Ctrl+f           - toggle freeze display",
-    "Ctrl+r           - reset statistics",
-    "Ctrl+k           - flush DNS cache",
-    "i                - show IP only",
-    "n                - show hostname only",
-    "b                - show both IP and hostname",
-    "[ & ]            - expand & collapse hosts",
-    "{ & }            - expand & collapse hosts to max and min",
-    "+ & -            - zoom chart in and out",
-    "z                - toggle AS information (if available)",
-    "h or ?           - toggle help",
-    "s                - toggle settings (jump to tab with 1-7 keys)",
-    "q                - quit",
-];
diff --git a/crates/trippy-tui/src/frontend/render/settings.rs b/crates/trippy-tui/src/frontend/render/settings.rs
index 9f8450db1..a676ae4a5 100644
--- a/crates/trippy-tui/src/frontend/render/settings.rs
+++ b/crates/trippy-tui/src/frontend/render/settings.rs
@@ -152,7 +152,7 @@ fn format_all_settings(app: &TuiApp) -> Vec<(&'static str, String, Vec<SettingsI
         ("Theme", String::from("Tui theme colors"), theme_settings),
         (
             "Columns",
-            format!("Tui table columns (press {toggle_column} to toggle a column on or off and use the {move_down} and {move_up} keys to change the column order)"),
+            format!("Tui table columns.  Press [{toggle_column}] to toggle a column on or off and use the [{move_down}] and [{move_up}] keys to change the column order."),
             columns_settings,
         ),
     ]


Test patch: