change layout and title

src/main.rs

@@ -109,7 +109,8 @@ fn runApp<B: Backend>(app: &mut AppState, terminal: &mut Terminal<B>) -> Result<
                         app.screen = CurrentScreen::Main;
                         app.currentlyEditing = None;
                     }
-                    (KeyModifiers::NONE, KeyCode::Tab) => app.nextField(),
+                    (KeyModifiers::NONE, KeyCode::Tab | KeyCode::Right) => app.nextField(),
+                    (KeyModifiers::NONE, KeyCode::Left) => app.prevField(),
                     (KeyModifiers::SHIFT, KeyCode::Tab) => app.prevField(),
                     (_, KeyCode::Char(v)) => {
                         if let Some(e) = &app.currentlyEditing {

src/ui/mod.rs

@@ -14,32 +14,39 @@ use crate::app::{AppState, status::EditingField};
 use crate::ui::centeredRect::centered_rect;
 
 pub fn ui(frame: &mut Frame, app: &AppState) {
-    let chunks = Layout::default()
+    // Split entire body into left title+body and right screen+keybinds chunks
-        .direction(ratatui::layout::Direction::Vertical)
+    let screenChunks = Layout::default()
-        .constraints([
+        .direction(ratatui::layout::Direction::Horizontal)
-            Constraint::Length(3),
+        .constraints([Constraint::Fill(5), Constraint::Fill(2)])
-            Constraint::Min(3),
-            Constraint::Length(3),
-        ])
         .split(frame.area());
 
-    let footerChunks = Layout::default()
+    // Split left chunk into title and body
-        .direction(ratatui::layout::Direction::Horizontal)
+    let titleBodyChunks = Layout::default()
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+        .direction(ratatui::layout::Direction::Vertical)
-        .split(chunks[2]);
+        .constraints([Constraint::Length(3), Constraint::Min(3)])
+        .split(screenChunks[0]);
 
+    // Split right chunk into header and keybind area
+    let headerKeybindChunks = Layout::default()
+        .direction(ratatui::layout::Direction::Vertical)
+        .constraints([Constraint::Length(3), Constraint::Min(3)])
+        .split(screenChunks[1]);
+
+    // ------------------------
+    // Create and add title block
     let titleBlock = Block::default()
-        .borders(Borders::ALL)
+        .borders(Borders::all())
         .style(Style::default());
 
     let title = Paragraph::new(Text::styled(
-        "Create new entry",
+        "SteckBrett, a network ports plugboard",
         Style::default().fg(Color::Green),
     ))
     .block(titleBlock);
 
-    frame.render_widget(title, chunks[0]);
+    frame.render_widget(title, titleBodyChunks[0]);
 
+    // Create and add body
     let mut currentItems = Vec::<ListItem>::new();
     for (i, e) in app.entries.iter().enumerate() {
         currentItems.push(ListItem::new(Line::from(Span::styled(
@@ -47,9 +54,10 @@ pub fn ui(frame: &mut Frame, app: &AppState) {
             Style::default().fg(Color::Yellow),
         ))));
     }
-    let list = List::new(currentItems);
+    let list = List::new(currentItems).block(Block::default().borders(Borders::all()));
-    frame.render_widget(list, chunks[1]);
+    frame.render_widget(list, titleBodyChunks[1]);
 
+    // Renter exit prompt
     if let CurrentScreen::Exit = app.screen {
         let exitPopup = Block::default()
             .title("Save and Exit?")
@@ -68,6 +76,7 @@ pub fn ui(frame: &mut Frame, app: &AppState) {
         frame.render_widget(exitPara, area);
     }
 
+    // Editing screen popup
     if let Some(edit) = &app.currentlyEditing {
         let popup = Block::default()
             .title("Add an entry")
@@ -112,7 +121,9 @@ pub fn ui(frame: &mut Frame, app: &AppState) {
         frame.render_widget(toPortPara, fields[3]);
     };
 
-    let screenHelp = vec![
+    // --------------------------------
+    // Current page title and status
+    let screenHeader = vec![
         match app.screen {
             CurrentScreen::Main => Span::styled("Main Screen", Style::default().fg(Color::Green)),
             CurrentScreen::Add => Span::styled("Add entry", Style::default().fg(Color::Yellow)),
@@ -141,30 +152,36 @@ pub fn ui(frame: &mut Frame, app: &AppState) {
         },
     ];
 
-    let helpFooter =
+    let screenHeaderPara = Paragraph::new(Line::from(screenHeader))
-        Paragraph::new(Line::from(screenHelp)).block(Block::default().borders(Borders::ALL));
+        .block(Block::default().borders(Borders::TOP | Borders::LEFT | Borders::RIGHT));
 
+    // Keybinds Entry
     let keybinds = {
         match app.screen {
-            CurrentScreen::Main => Span::styled(
+            CurrentScreen::Main => Text::from(vec![
-                "(a) add entry / (q) save and quit",
+                Line::from("(a) add entry").style(Style::default().fg(Color::Green)),
-                Style::default().fg(Color::Red),
+                Line::from("(q) save and quit").style(Style::default().fg(Color::Green)),
-            ),
+            ]),
-            CurrentScreen::Add => Span::styled(
+            CurrentScreen::Add => Text::from(vec![
-                "(l) localhost / (enter/tab) next field / (c) clear / (C) clear all / (esc) main menu",
+                Line::from("(l) localhost"),
-                Style::default().fg(Color::Red),
+                Line::from("(enter) next field"),
-            ),
+                Line::from("(c) clear"),
-            CurrentScreen::Settings => Span::styled("", Style::default().fg(Color::Red)),
+                Line::from("(C) clear all"),
-            CurrentScreen::Exit => Span::styled(
+                Line::from("(esc) main menu"),
-                "(enter) save and exit / (esc) main menu",
+            ]),
-                Style::default().fg(Color::Red),
+            CurrentScreen::Settings => {
-            ),
+                Text::from(Line::from("").style(Style::default().fg(Color::Red)))
+            }
+            CurrentScreen::Exit => Text::from(vec![
+                Line::from("(enter) save and exit").style(Style::default().fg(Color::Red)),
+                Line::from("(esc) main menu").style(Style::default().fg(Color::Red)),
+            ]),
         }
     };
 
-    let keyBindFooter =
+    let keyBindFooter = Paragraph::new(keybinds)
-        Paragraph::new(Line::from(keybinds)).block(Block::default().borders(Borders::ALL));
+        .block(Block::default().borders(Borders::BOTTOM | Borders::LEFT | Borders::RIGHT));
 
-    frame.render_widget(helpFooter, footerChunks[0]);
+    frame.render_widget(screenHeaderPara, headerKeybindChunks[0]);
-    frame.render_widget(keyBindFooter, footerChunks[1]);
+    frame.render_widget(keyBindFooter, headerKeybindChunks[1]);
 }