Add tabs to the cockpit

thecockpit/Cargo.toml

@@ -36,3 +36,6 @@ wasm-bindgen-test = "0.3.34"
 # Tell `rustc` to optimize for small code size.
 opt-level = "s"
 
+[dependencies]
+web-time = "1.1.0"
+

thecockpit/src/app.rs

@@ -2,13 +2,17 @@
 use ratzilla::ratatui;
 
 use ratatui::{
+    layout::{Constraint, Direction, Layout},
     style::{Color, Stylize},
-    widgets::{Block, Borders, Paragraph},
+    widgets::{Block, Borders, Paragraph, Tabs},
     Frame,
 };
+use web_time::Instant;
 
-#[derive(Default)]
+pub struct App {
-pub struct App {}
+    transition_instant: Instant,
+    selected_tab: usize,
+}
 
 const SPLASH: &str = r#"
 !~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -37,14 +41,55 @@ YJJJJJJJJJ????????????77777777777!!!!!!!!!!!~~~~~~
 YJJJJJJJJJJJ???????????77777777777!!!!!!!!!!!~~~~~
 "#;
 
+const TABS: [&'static str; 3] = ["Whatzahoozits", "Thingamajigs", "Doohickeys"];
+
 impl App {
+    pub fn new() -> Self {
+        Self {
+            transition_instant: Instant::now(),
+            selected_tab: 0,
+        }
+    }
+
     pub fn draw(&mut self, frame: &mut Frame) {
+        let layout = Layout::new(
+            Direction::Vertical,
+            [Constraint::Length(3), Constraint::Min(0)],
+        )
+        .split(frame.area());
+        frame.render_widget(
+            Tabs::new(TABS)
+                .select(self.selected_tab)
+                .fg(Color::Rgb(226, 190, 89))
+                .bg(Color::Black)
+                .block(Block::new().borders(Borders::all()).title("Coming soon")),
+            layout[0],
+        );
         frame.render_widget(
             Paragraph::new(SPLASH)
                 .alignment(ratatui::layout::Alignment::Center)
                 .fg(Color::Rgb(226, 190, 89))
-                .block(Block::new().borders(Borders::all()).title("Coming soon")),
+                .bg(Color::Black)
-            frame.area(),
+                .block(Block::new().borders(Borders::all())),
+            layout[1],
         );
     }
+
+    pub fn next_tab(&mut self) {
+        self.transition_instant = Instant::now();
+        if self.selected_tab == TABS.len() - 1 {
+            self.selected_tab = 0;
+        } else {
+            self.selected_tab += 1;
+        }
+    }
+
+    pub fn prev_tab(&mut self) {
+        self.transition_instant = Instant::now();
+        if self.selected_tab == 0 {
+            self.selected_tab = TABS.len() - 1;
+        } else {
+            self.selected_tab -= 1;
+        }
+    }
 }

thecockpit/src/main.rs

@@ -5,7 +5,7 @@ use thecockpit::app::App;
 
 fn main() {
     let mut terminal = ratatui::init();
-    let mut app = App::default();
+    let mut app = App::new();
 
     loop {
         terminal.draw(|frame| app.draw(frame));
@@ -16,6 +16,14 @@ fn main() {
                     code: event::KeyCode::Char('q'),
                     ..
                 }) => break,
+                event::Event::Key(event::KeyEvent {
+                    code: event::KeyCode::Left,
+                    ..
+                }) => app.prev_tab(),
+                event::Event::Key(event::KeyEvent {
+                    code: event::KeyCode::Right,
+                    ..
+                }) => app.next_tab(),
                 _ => {}
             }
         }

thecockpit/src/web/mod.rs

@@ -2,6 +2,7 @@ use std::{cell::RefCell, rc::Rc};
 
 use ratzilla::{
     backend::canvas::CanvasBackendOptions,
+    event::KeyCode,
     ratatui::{
         widgets::{Block, Borders},
         Terminal,
@@ -31,7 +32,16 @@ pub fn run(grid_id: &str) {
     .unwrap();
     let terminal = Terminal::new(backend).unwrap();
 
-    let app = Rc::new(RefCell::new(App::default()));
+    let app = Rc::new(RefCell::new(App::new()));
+
+    terminal.on_key_event({
+        let app = Rc::clone(&app);
+        move |event| match event.code {
+            KeyCode::Left => app.borrow_mut().prev_tab(),
+            KeyCode::Right => app.borrow_mut().next_tab(),
+            _ => {}
+        }
+    });
 
     terminal.draw_web({
         let app = Rc::clone(&app);