feat/tui: show regex error as a popup

src/action.rs

@@ -5,7 +5,10 @@ use ratatui::layout::Size;
 
 use crate::{
   event::TracerEvent,
-  tui::{copy_popup::CopyPopupState, details_popup::DetailsPopupState, query::Query},
+  tui::{
+    copy_popup::CopyPopupState, details_popup::DetailsPopupState, error_popup::ErrorPopupState,
+    query::Query,
+  },
 };
 
 #[derive(Debug, Clone)]
@@ -83,4 +86,5 @@ pub enum ActivePopup {
   Help,
   ViewDetails(DetailsPopupState),
   CopyTargetSelection(CopyPopupState),
+  ErrorPopup(ErrorPopupState),
 }

src/tui.rs

@@ -41,6 +41,7 @@ use crate::event::{Event, TracerEvent};
 pub mod app;
 pub mod copy_popup;
 pub mod details_popup;
+pub mod error_popup;
 mod event_list;
 pub mod help;
 mod partial_line;

src/tui/app.rs

@@ -28,7 +28,7 @@ use ratatui::{
   buffer::Buffer,
   layout::{Constraint, Layout, Rect},
   text::Line,
-  widgets::{Block, Paragraph, StatefulWidgetRef, Widget, Wrap},
+  widgets::{Block, Paragraph, StatefulWidget, StatefulWidgetRef, Widget, Wrap},
 };
 use strum::Display;
 use tokio::sync::mpsc;
@@ -45,12 +45,13 @@ use crate::{
   printer::PrinterArgs,
   proc::BaselineInfo,
   pty::{PtySize, UnixMasterPty},
-  tui::query::QueryKind,
+  tui::{error_popup::ErrorPopupState, query::QueryKind},
 };
 
 use super::{
   copy_popup::{CopyPopup, CopyPopupState},
   details_popup::{DetailsPopup, DetailsPopupState},
+  error_popup::ErrorPopup,
   event_list::EventList,
   help::{help, help_item},
   pseudo_term::PseudoTerminalPane,
@@ -186,18 +187,29 @@ impl App {
                         action_tx.send(action)?;
                       }
                     }
+                    ActivePopup::ErrorPopup(state) => {
+                      if let Some(action) = state.handle_key_event(ke) {
+                        action_tx.send(action)?;
+                      }
+                    }
                   }
                   continue;
                 }
 
                 // Handle query builder
                 if let Some(query_builder) = self.query_builder.as_mut() {
                   if query_builder.editing() {
-                    if let Ok(result) = query_builder.handle_key_events(ke) {
-                      result.map(|action| action_tx.send(action)).transpose()?;
-                    } else {
-                      // Regex error
-                      // TODO: Display error popup
+                    match query_builder.handle_key_events(ke) {
+                      Ok(result) => {
+                        result.map(|action| action_tx.send(action)).transpose()?;
+                      }
+                      Err(e) => {
+                        // Regex error
+                        self.popup = Some(ActivePopup::ErrorPopup(ErrorPopupState {
+                          title: "Regex Error".to_owned(),
+                          message: e,
+                        }));
+                      }
                     }
                     continue;
                   } else {
@@ -644,6 +656,9 @@ impl Widget for &mut App {
         ActivePopup::CopyTargetSelection(state) => {
           CopyPopup.render_ref(area, buf, state);
         }
+        ActivePopup::ErrorPopup(state) => {
+          ErrorPopup.render(area, buf, state);
+        }
         _ => {}
       }
     }

src/tui/error_popup.rs

@@ -0,0 +1,46 @@
+use crossterm::event::KeyEvent;
+use ratatui::{
+  buffer::Buffer,
+  layout::Rect,
+  style::Stylize,
+  text::Line,
+  widgets::{Paragraph, StatefulWidget, WidgetRef, Wrap},
+};
+use tui_popup::Popup;
+
+use crate::action::Action;
+
+use super::{sized_paragraph::SizedParagraph, theme::THEME};
+
+#[derive(Debug, Clone)]
+pub struct ErrorPopupState {
+  pub title: String,
+  pub message: Vec<Line<'static>>,
+}
+
+impl ErrorPopupState {
+  pub fn handle_key_event(&mut self, _key: KeyEvent) -> Option<Action> {
+    Some(Action::CancelCurrentPopup)
+  }
+}
+
+#[derive(Debug, Clone)]
+pub struct ErrorPopup;
+
+impl StatefulWidget for ErrorPopup {
+  type State = ErrorPopupState;
+
+  fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
+    let help = Line::raw("Press any key to close this popup");
+    let mut message = state.message.clone();
+    message.push("".into());
+    message.push(help.centered().bold());
+    let paragraph = Paragraph::new(message).wrap(Wrap { trim: false });
+    let popup = Popup::new(
+      Line::raw(state.title.as_str()).centered(),
+      SizedParagraph::new(paragraph, (area.width as f32 * 0.7) as usize),
+    )
+    .style(THEME.error_popup);
+    popup.render_ref(area, buf);
+  }
+}

src/tui/query.rs

@@ -1,5 +1,6 @@
 use crossterm::event::{KeyCode, KeyEvent, KeyModifiers};
 use indexmap::IndexMap;
+use itertools::Itertools;
 use ratatui::{
   style::Styled,
   text::{Line, Span},
@@ -156,7 +157,7 @@ impl QueryBuilder {
     self.state.cursor()
   }
 
-  pub fn handle_key_events(&mut self, key: KeyEvent) -> Result<Option<Action>, String> {
+  pub fn handle_key_events(&mut self, key: KeyEvent) -> Result<Option<Action>, Vec<Line<'static>>> {
     match (key.code, key.modifiers) {
       (KeyCode::Enter, _) => {
         let text = self.state.value();
@@ -170,7 +171,12 @@ impl QueryBuilder {
               RegexBuilder::new(text)
                 .case_insensitive(!self.case_sensitive)
                 .build()
-                .map_err(|e| e.to_string())?,
+                .map_err(|e| {
+                  e.to_string()
+                    .lines()
+                    .map(|line| Line::raw(line.to_owned()))
+                    .collect_vec()
+                })?,
             )
           } else {
             QueryValue::Text(text.to_owned())

src/tui/theme.rs

@@ -65,6 +65,8 @@ pub struct Theme {
   pub open_flag_status: Style,
   pub open_flag_other: Style,
   pub visual_separator: Style,
+  // Error Popup
+  pub error_popup: Style,
   // Tabs
   pub active_tab: Style,
 }
@@ -138,6 +140,8 @@ impl Default for Theme {
       open_flag_status: Style::default().light_yellow().bold(),
       open_flag_other: Style::default().light_red().bold(),
       visual_separator: Style::default().light_green(),
+      // -- Error Popup --
+      error_popup: Style::default().white().on_red(),
       // -- Tabs --
       active_tab: Style::default().white().on_magenta(),
     }