basic example with tabs and a header

Cargo.toml

@@ -7,4 +7,5 @@ edition = "2021"
 
 [dependencies]
 crossterm = "0.26.1"
-ratatui = "0.20.1"
+ratatui = "0.21.0"
+rusqlite = "0.29.0"

src/app.rs

@@ -1,69 +1,30 @@
-use std::error;
 
-/// Application result type.
+pub type AppResult<T> = std::result::Result<T, Box<dyn std::error::Error>>;
-pub type AppResult<T> = std::result::Result<T, Box<dyn error::Error>>;
 
-/// Application.
-#[derive(Debug)]
 pub struct App<'a> {
-    /// Is the application running?
     pub running: bool,
-    /// counter
+    pub tabs: Vec<&'a str>,
-    pub counter: u8,
+    pub tab_index: usize,
-
-    pub tab_titles: Vec<&'a str>,
-    pub current_tab: usize,
-}
-
-impl<'a> Default for App<'a> {
-    fn default() -> Self {
-        Self {
-            running: true,
-            counter: 0,
-            tab_titles: vec!["History", "New Entry", "Accounts"],
-            current_tab: 0,
-        }
-    }
 }
 
 impl<'a> App<'a> {
-    /// Constructs a new instance of [`App`].
+    pub fn new() -> App<'a> {
-    pub fn new() -> Self {
+        App {
-        Self::default()
+            running: true,
+
+            tabs: vec!["Tab1", "Tab2", "Tab3"],
+            tab_index: 0,
         }
-
-    /// Handles the tick event of the terminal.
-    pub fn tick(&self) {}
-
-    /// Set running to false to quit the application.
-    pub fn quit(&mut self) {
-        self.running = false;
     }
 
     pub fn next_tab(&mut self) {
-        self.current_tab += 1;
+        self.tab_index = (self.tab_index + 1) % self.tabs.len();
-        if self.current_tab >= self.tab_titles.len() {
-            self.current_tab = 0;
-        }
     }
 
     pub fn prev_tab(&mut self) {
-        if self.current_tab == 0 {
+        if self.tab_index > 0 {
-            self.current_tab = self.tab_titles.len() - 1;
+            self.tab_index -= 1;
         } else {
-            self.current_tab -= 1;
+            self.tab_index = self.tabs.len() - 1;
         }
-    }
+    }}
-
-    pub fn increment_counter(&mut self) {
-        if let Some(res) = self.counter.checked_add(1) {
-            self.counter = res;
-        }
-    }
-
-    pub fn decrement_counter(&mut self) {
-        if let Some(res) = self.counter.checked_sub(1) {
-            self.counter = res;
-        }
-    }
-}

src/event.rs

@@ -1,77 +0,0 @@
-use crate::app::AppResult;
-use crossterm::event::{self, Event as CrosstermEvent, KeyEvent, MouseEvent};
-use std::sync::mpsc;
-use std::thread;
-use std::time::{Duration, Instant};
-
-/// Terminal events.
-#[derive(Clone, Copy, Debug)]
-pub enum Event {
-    /// Terminal tick.
-    Tick,
-    /// Key press.
-    Key(KeyEvent),
-    /// Mouse click/scroll.
-    Mouse(MouseEvent),
-    /// Terminal resize.
-    Resize(u16, u16),
-}
-
-/// Terminal event handler.
-#[allow(dead_code)]
-#[derive(Debug)]
-pub struct EventHandler {
-    /// Event sender channel.
-    sender: mpsc::Sender<Event>,
-    /// Event receiver channel.
-    receiver: mpsc::Receiver<Event>,
-    /// Event handler thread.
-    handler: thread::JoinHandle<()>,
-}
-
-impl EventHandler {
-    /// Constructs a new instance of [`EventHandler`].
-    pub fn new(tick_rate: u64) -> Self {
-        let tick_rate = Duration::from_millis(tick_rate);
-        let (sender, receiver) = mpsc::channel();
-        let handler = {
-            let sender = sender.clone();
-            thread::spawn(move || {
-                let mut last_tick = Instant::now();
-                loop {
-                    let timeout = tick_rate
-                        .checked_sub(last_tick.elapsed())
-                        .unwrap_or(tick_rate);
-
-                    if event::poll(timeout).expect("no events available") {
-                        match event::read().expect("unable to read event") {
-                            CrosstermEvent::Key(e) => sender.send(Event::Key(e)),
-                            CrosstermEvent::Mouse(e) => sender.send(Event::Mouse(e)),
-                            CrosstermEvent::Resize(w, h) => sender.send(Event::Resize(w, h)),
-                            _ => unimplemented!(),
-                        }
-                        .expect("failed to send terminal event")
-                    }
-
-                    if last_tick.elapsed() >= tick_rate {
-                        sender.send(Event::Tick).expect("failed to send tick event");
-                        last_tick = Instant::now();
-                    }
-                }
-            })
-        };
-        Self {
-            sender,
-            receiver,
-            handler,
-        }
-    }
-
-    /// Receive the next event from the handler thread.
-    ///
-    /// This function will always block the current thread if
-    /// there is no data available and it's possible for more data to be sent.
-    pub fn next(&self) -> AppResult<Event> {
-        Ok(self.receiver.recv()?)
-    }
-}

src/handler.rs

@@ -1,28 +0,0 @@
-use crate::app::{App, AppResult};
-use crossterm::event::{KeyCode, KeyEvent, KeyModifiers};
-
-/// Handles the key events and updates the state of [`App`].
-pub fn handle_key_events(key_event: KeyEvent, app: &mut App) -> AppResult<()> {
-    match key_event.code {
-        // Exit application on `ESC` or `q`
-        KeyCode::Esc | KeyCode::Char('q') => {
-            app.quit();
-        }
-        // Exit application on `Ctrl-C`
-        KeyCode::Char('c') | KeyCode::Char('C') => {
-            if key_event.modifiers == KeyModifiers::CONTROL {
-                app.quit();
-            }
-        }
-        // Counter handlers
-        KeyCode::Right => {
-            app.increment_counter();
-        }
-        KeyCode::Left => {
-            app.decrement_counter();
-        }
-        // Other handlers you could add here.
-        _ => {}
-    }
-    Ok(())
-}

src/lib.rs

@@ -1,14 +1,6 @@
-/// Application.
+
 pub mod app;
 
-/// Terminal events handler.
-pub mod event;
-
-/// Widget renderer.
-pub mod ui;
-
-/// Terminal user interface.
 pub mod tui;
 
-/// Event handler.
+pub mod ui;
-pub mod handler;

src/main.rs

@@ -1,9 +1,13 @@
 use std::io;
-use ratatui::backend::CrosstermBackend;
+use std::time::Duration;
-use ratatui::Terminal;
+use crossterm::event::{self, Event, KeyCode, KeyEventKind};
+
+use ratatui::{
+    backend::CrosstermBackend,
+    Terminal,
+};
+
 use recount::app::{App, AppResult};
-use recount::event::{Event, EventHandler};
-use recount::handler::handle_key_events;
 use recount::tui::Tui;
 
 fn main() -> AppResult<()> {
@@ -13,24 +17,30 @@ fn main() -> AppResult<()> {
     // Initialize the terminal user interface.
     let backend = CrosstermBackend::new(io::stderr());
     let terminal = Terminal::new(backend)?;
-    let events = EventHandler::new(250);
+    let mut tui = Tui::new(terminal);
-    let mut tui = Tui::new(terminal, events);
+
     tui.init()?;
 
     // Start the main loop.
     while app.running {
         // Render the user interface.
         tui.draw(&mut app)?;
+
         // Handle events.
-        match tui.events.next()? {
+        if let Event::Key(key) = event::read()? {
-            Event::Tick => app.tick(),
+            if key.kind == KeyEventKind::Press {
-            Event::Key(key_event) => handle_key_events(key_event, &mut app)?,
+                match key.code {
-            Event::Mouse(_) => {}
+                    KeyCode::Char('q') => break,
-            Event::Resize(_, _) => {}
+                    KeyCode::Tab => app.next_tab(),
+                    // KeyCode::Right => app.next(),
+                    // KeyCode::Left => app.previous(),
+                    _ => {}
                 }
             }
+        }
+        std::thread::sleep(Duration::from_millis(20));
+    }
 
-    // Exit the user interface.
+    // restore terminal
-    tui.exit()?;
+    tui.exit()
-    Ok(())
 }

src/tui.rs

@@ -1,6 +1,5 @@
-use crate::app::{App, AppResult};
-use crate::event::EventHandler;
 use crate::ui;
+use crate::app::{App, AppResult};
 use crossterm::event::{DisableMouseCapture, EnableMouseCapture};
 use crossterm::terminal::{self, EnterAlternateScreen, LeaveAlternateScreen};
 use std::io;
@@ -15,20 +14,18 @@ use ratatui::Terminal;
 pub struct Tui<B: Backend> {
     /// Interface to the Terminal.
     terminal: Terminal<B>,
-    /// Terminal event handler.
-    pub events: EventHandler,
 }
 
 impl<B: Backend> Tui<B> {
     /// Constructs a new instance of [`Tui`].
-    pub fn new(terminal: Terminal<B>, events: EventHandler) -> Self {
+    pub fn new(terminal: Terminal<B>) -> Self {
-        Self { terminal, events }
+        Self { terminal }
     }
 
     /// Initializes the terminal interface.
     ///
     /// It enables the raw mode and sets terminal properties.
-    pub fn init(&mut self) -> AppResult<()> {
+    pub fn init(&mut self) -> Result<(), Box<dyn std::error::Error>> {
         terminal::enable_raw_mode()?;
         crossterm::execute!(io::stderr(), EnterAlternateScreen, EnableMouseCapture)?;
         self.terminal.hide_cursor()?;
@@ -41,7 +38,7 @@ impl<B: Backend> Tui<B> {
     /// [`Draw`]: tui::Terminal::draw
     /// [`rendering`]: crate::ui:render
     pub fn draw(&mut self, app: &mut App) -> AppResult<()> {
-        self.terminal.draw(|frame| ui::render(app, frame))?;
+        self.terminal.draw(|frame| ui::render(frame, app))?;
         Ok(())
     }
 

src/ui.rs

@@ -1,36 +1,68 @@
+use std::rc::Rc;
+
+use crate::app::{AppResult, App};
 use ratatui::{
     backend::Backend,
-    layout::Alignment,
+    layout::{Constraint, Direction, Layout, Rect},
-    style::{Color, Style},
+    style::{Color, Modifier, Style},
-    widgets::{Block, BorderType, Borders, Paragraph},
+    text::{Line, Text},
+    widgets::{Block, Borders, Tabs, Paragraph},
     Frame,
 };
 
-use crate::app::App;
 
-/// Renders the user interface widgets.
+pub fn render<B: Backend> (f: &mut Frame<B>, app: &App) {
-pub fn render<B: Backend>(app: &mut App, frame: &mut Frame<'_, B>) {
+
-    // This is where you add new widgets.
+    let size = f.size();
-    // See the following resources:
+    let chunks = Layout::default()
-    // - https://docs.rs/ratatui/latest/ratatui/widgets/index.html
+        .direction(Direction::Vertical)
-    // - https://github.com/tui-rs-revival/ratatui/tree/master/examples
+        .constraints([Constraint::Length(3), Constraint::Min(0)].as_ref())
-    frame.render_widget(
+        .split(size);
-        Paragraph::new(format!(
+
-            "This is a tui template.\n\
+    let bottom_block = Block::default();
-                Press `Esc`, `Ctrl-C` or `q` to stop running.\n\
+    f.render_widget(bottom_block, chunks[1]);
-                Press left and right to increment and decrement the counter respectively.\n\
+
-                Counter: {}",
+    render_statusbar(f, chunks[0], app);
-            app.counter
+}
-        ))
+
-        .block(
+pub fn render_statusbar<B: Backend> (f: &mut Frame<B>, status_rect: Rect, app: &App) {
-            Block::default()
+
-                .title("Template")
+    let status_bar_chunks = Layout::default()
-                .title_alignment(Alignment::Center)
+        .direction(Direction::Horizontal)
-                .borders(Borders::ALL)
+        .constraints([Constraint::Percentage(50), Constraint::Min(10)])
-                .border_type(BorderType::Rounded),
+        .margin(1)
-        )
+        .split(status_rect);
-        .style(Style::default().fg(Color::Cyan).bg(Color::Black))
+
-        .alignment(Alignment::Center),
+    let top_block = Block::default()
-        frame.size(),
+        .borders(Borders::ALL);
-    )
+
+    f.render_widget(top_block, status_rect);
+
+    let titles = app
+        .tabs
+        .iter()
+        .cloned()
+        .map(Line::from)
+        .collect();
+
+    let tabs = Tabs::new(titles)
+        .block(Block::default().borders(Borders::NONE))
+        .select(app.tab_index)
+        .style(Style::default().fg(Color::Cyan))
+        .highlight_style(
+            Style::default()
+                .fg(Color::White)
+                .add_modifier(Modifier::BOLD | Modifier::SLOW_BLINK)
+                .bg(Color::Blue),
+        );
+
+    f.render_widget(tabs, status_bar_chunks[0]);
+
+    let connection_paragraph = Paragraph::new(
+        Text::styled("Aurora",
+                     Style::default().fg(Color::Green)
+        )
+    );
+
+    f.render_widget(connection_paragraph, status_bar_chunks[1]);
 }