feat: starting to implement form to create request

tui/src/components.rs

@@ -3,6 +3,7 @@ pub mod confirm_popup;
 pub mod dashboard;
 pub mod error_popup;
 pub mod input;
+mod overlay;
 pub mod terminal_too_small;
 
 use crate::event_pool::Event;

tui/src/components/api_explorer/api_explorer.rs

@@ -5,6 +5,7 @@ use crate::components::{
         res_viewer::{ResViewer, ResViewerState, ResViewerTabs},
         sidebar::{Sidebar, SidebarState},
     },
+    overlay::draw_overlay,
     Component, Eventful,
 };
 use anyhow::Context;
@@ -31,12 +32,19 @@ use tokio::sync::mpsc::{unbounded_channel, UnboundedReceiver, UnboundedSender};
 
 #[derive(Debug, PartialEq)]
 pub struct ExplorerLayout {
+    pub hint_pane: Rect,
     pub sidebar: Rect,
     pub req_uri: Rect,
     pub req_editor: Rect,
     pub response_preview: Rect,
 }
 
+#[derive(Debug)]
+pub enum Overlays {
+    None,
+    CreateRequest,
+}
+
 #[derive(PartialEq)]
 enum VisitNode {
     Next,
@@ -72,6 +80,8 @@ pub struct ApiExplorer<'ae> {
     preview_header_scroll_x: usize,
     pretty_preview_scroll: usize,
 
+    curr_overlay: Overlays,
+
     editor: ReqEditor<'ae>,
     editor_tab: ReqEditorTabs,
 
@@ -127,6 +137,8 @@ impl<'ae> ApiExplorer<'ae> {
             preview_header_scroll_x: 0,
             pretty_preview_scroll: 0,
 
+            curr_overlay: Overlays::None,
+
             response_rx,
             request_tx,
             layout,
@@ -185,6 +197,7 @@ impl<'ae> ApiExplorer<'ae> {
                     .or(Some(id.clone()));
                 };
             }
+            KeyCode::Char('n') => self.curr_overlay = Overlays::CreateRequest,
             _ => {}
         }
 
@@ -350,6 +363,61 @@ impl<'ae> ApiExplorer<'ae> {
 
         Ok(None)
     }
+
+    fn draw_req_uri_hint(&self, frame: &mut Frame) {
+        let hint = "[type anything -> edit] [enter -> execute request] [<C-c> -> quit]"
+            .fg(self.colors.normal.magenta)
+            .into_centered_line();
+
+        frame.render_widget(hint, self.layout.hint_pane);
+    }
+    fn draw_sidebar_hint(&self, frame: &mut Frame) {
+        let hint =
+            "[j/k -> navigate] [enter -> select item] [n -> create item] [? -> help] [<C-c> -> quit]"
+                .fg(self.colors.normal.magenta)
+                .into_centered_line();
+
+        frame.render_widget(hint, self.layout.hint_pane);
+    }
+    fn draw_preview_hint(&self, frame: &mut Frame) {
+        let hint = match self
+            .selected_pane
+            .as_ref()
+            .is_some_and(|selected| selected.eq(&PaneFocus::Preview))
+        {
+            false => "[j/k -> scroll] [enter -> interact] [? -> help] [<C-c> -> quit]"
+                .fg(self.colors.normal.magenta)
+                .into_centered_line(),
+            true => {
+                "[j/k -> scroll] [esc -> deselect] [tab -> switch tab] [? -> help] [<C-c> -> quit]"
+                    .fg(self.colors.normal.magenta)
+                    .into_centered_line()
+            }
+        };
+
+        frame.render_widget(hint, self.layout.hint_pane);
+    }
+
+    fn draw_editor_hint(&self, frame: &mut Frame) {
+        let hint = match self
+            .selected_pane
+            .as_ref()
+            .is_some_and(|selected| selected.eq(&PaneFocus::Editor))
+        {
+            false => "[enter -> interact] [? -> help] [<C-c> -> quit]"
+                .fg(self.colors.normal.magenta)
+                .into_centered_line(),
+            true => "[esc -> deselect] [tab -> switch tab] [? -> help] [<C-c> -> quit]"
+                .fg(self.colors.normal.magenta)
+                .into_centered_line(),
+        };
+
+        frame.render_widget(hint, self.layout.hint_pane);
+    }
+
+    fn draw_create_request_form(&self, frame: &mut Frame) {
+        draw_overlay(self.colors, frame.size(), "新", frame);
+    }
 }
 
 impl Component for ApiExplorer<'_> {
@@ -364,6 +432,18 @@ impl Component for ApiExplorer<'_> {
         self.draw_req_uri(frame);
         self.draw_sidebar(frame);
 
+        match self.focused_pane {
+            PaneFocus::ReqUri => self.draw_req_uri_hint(frame),
+            PaneFocus::Sidebar => self.draw_sidebar_hint(frame),
+            PaneFocus::Preview => self.draw_preview_hint(frame),
+            PaneFocus::Editor => self.draw_editor_hint(frame),
+        }
+
+        match self.curr_overlay {
+            Overlays::CreateRequest => self.draw_create_request_form(frame),
+            Overlays::None => {}
+        }
+
         if self
             .selected_pane
             .as_ref()
@@ -455,10 +535,15 @@ impl Eventful for ApiExplorer<'_> {
 }
 
 pub fn build_layout(size: Rect) -> ExplorerLayout {
+    let [top_pane, hint_pane] = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Fill(1), Constraint::Length(1)])
+        .areas(size);
+
     let [sidebar, right_pane] = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Length(30), Constraint::Fill(1)])
-        .areas(size);
+        .areas(top_pane);
 
     let [req_uri, req_builder] = Layout::default()
         .direction(Direction::Vertical)
@@ -478,6 +563,7 @@ pub fn build_layout(size: Rect) -> ExplorerLayout {
     };
 
     ExplorerLayout {
+        hint_pane,
         sidebar,
         req_uri,
         req_editor,

tui/src/components/api_explorer/req_editor.rs

@@ -267,6 +267,7 @@ impl<'re> ReqEditor<'re> {
 
         let block = Block::default()
             .borders(Borders::ALL)
+            .title("Editor")
             .border_style(block_border);
 
         block.render(size, buf);

tui/src/components/api_explorer/req_uri.rs

@@ -55,7 +55,8 @@ impl<'a> StatefulWidget for ReqUri<'a> {
             .block(
                 Block::default()
                     .borders(Borders::ALL)
-                    .border_style(block_border),
+                    .border_style(block_border)
+                    .title("Request URI"),
             )
             .render(size, buf);
     }

tui/src/components/api_explorer/res_viewer.rs

@@ -134,6 +134,7 @@ impl<'a> ResViewer<'a> {
 
         let block = Block::default()
             .borders(Borders::ALL)
+            .title("Preview")
             .border_style(block_border);
 
         block.render(size, buf);

tui/src/components/api_explorer/sidebar.rs

@@ -80,7 +80,7 @@ impl<'a> StatefulWidget for Sidebar<'a> {
 
         let block = Block::default()
             .borders(Borders::ALL)
-            .title("Requests")
+            .title("Navigation")
             .border_style(block_border);
 
         block.render(area, buf);

tui/src/components/dashboard/dashboard.rs

@@ -5,6 +5,7 @@ use crate::components::{
         schema_list::{SchemaList, SchemaListState},
     },
     error_popup::ErrorPopup,
+    overlay::draw_overlay,
     Component, Eventful,
 };
 use reqtui::{command::Command, schema::types::Schema};
@@ -326,21 +327,9 @@ impl<'a> Dashboard<'a> {
         frame.render_widget(hint, self.layout.hint_pane);
     }
 
-    fn draw_overlay(&self, size: Rect, fill_text: &str, frame: &mut Frame) {
-        let lines: Vec<Line<'_>> =
-            vec![fill_text.repeat(size.width.into()).into(); size.height.into()];
-
-        let overlay = Paragraph::new(lines)
-            .fg(self.colors.primary.hover)
-            .bg(self.colors.primary.background)
-            .bold();
-
-        frame.render_widget(overlay, size);
-    }
-
     fn draw_help_popup(&self, size: Rect, frame: &mut Frame) {
         frame.render_widget(Clear, size);
-        self.draw_overlay(size, "助ける", frame);
+        draw_overlay(self.colors, size, "助ける", frame);
 
         let lines = vec![
             Line::from(vec![
@@ -468,7 +457,7 @@ impl<'a> Dashboard<'a> {
 
     fn draw_form_popup(&mut self, size: Rect, frame: &mut Frame) {
         self.draw_background(size, frame);
-        self.draw_overlay(size, "新", frame);
+        draw_overlay(self.colors, size, "新", frame);
 
         let form = NewCollectionForm::new(self.colors);
         form.render(

tui/src/components/overlay.rs

@@ -0,0 +1,12 @@
+use ratatui::{layout::Rect, style::Stylize, text::Line, widgets::Paragraph, Frame};
+
+pub fn draw_overlay(colors: &colors::Colors, size: Rect, fill_text: &str, frame: &mut Frame) {
+    let lines: Vec<Line<'_>> = vec![fill_text.repeat(size.width.into()).into(); size.height.into()];
+
+    let overlay = Paragraph::new(lines)
+        .fg(colors.primary.hover)
+        .bg(colors.primary.background)
+        .bold();
+
+    frame.render_widget(overlay, size);
+}