refactor: fix themes, add rat eye, scrollbars etc.

examples/demo2.tape

@@ -3,19 +3,35 @@
 Output "target/demo2.gif"
 Set Theme "OceanicMaterial"
 # Github social preview size (1280x640 with 80px padding)
-Set Width 1280
-Set Height 640
+# Set Width 1280
+# Set Height 640
 # Without the padding for README.md, etc.
-# Set Width 1120
-# Set Height 480
+Set Width 1120
+Set Height 480
 Set Padding 0
 Hide
 Type "cargo run --example demo2"
 Enter
 Sleep 2s
 Show
 # About screen
-Sleep 5s
+Sleep 1s
+Down # Red eye
+Sleep 0.35s
+Down # black eye
+Sleep 0.35s
+Down # red eye
+Sleep 0.35s
+Down # black eye
+Sleep 1.5s
+Down # Red eye
+Sleep 0.35s
+Down # black eye
+Sleep 0.35s
+Down # red eye
+Sleep 0.35s
+Down # black eye
+Sleep 1.5s
 Tab
 # Email
 Sleep 5s

examples/demo2/app.rs

@@ -3,7 +3,7 @@ use std::time::Duration;
 use anyhow::{Context, Result};
 use crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind, KeyModifiers};
 
-use crate::{root::Root, term::Term};
+use crate::{Root, Term};
 
 #[derive(Debug)]
 pub struct App {

examples/demo2/colors.rs

@@ -1,11 +1,11 @@
-#![allow(dead_code)]
 use palette::{
     convert::{FromColorUnclamped, IntoColorUnclamped},
     Okhsv, Srgb,
 };
 use ratatui::{prelude::*, widgets::*};
 
-fn render_16_colors(area: Rect, buf: &mut Buffer) {
+#[allow(dead_code)]
+fn render_16_color_swatch(area: Rect, buf: &mut Buffer) {
     let sym = "██";
     Paragraph::new(vec![
         Line::from(vec![sym.black(), sym.red(), sym.green(), sym.yellow()]),
@@ -26,7 +26,8 @@ fn render_16_colors(area: Rect, buf: &mut Buffer) {
     .render(area, buf);
 }
 
-fn render_256_colors(area: Rect, buf: &mut Buffer) {
+#[allow(dead_code)]
+fn render_256_color_swatch(area: Rect, buf: &mut Buffer) {
     for (xi, x) in (16..52).zip(area.left()..area.right()) {
         for (yi, y) in (0..3).zip(area.top()..area.bottom()) {
             let fg = Color::Indexed(yi * 72 + xi);
@@ -38,7 +39,7 @@ fn render_256_colors(area: Rect, buf: &mut Buffer) {
     }
 }
 
-pub fn render_rgb_colors(area: Rect, buf: &mut Buffer) {
+pub fn render_rgb_swatch(area: Rect, buf: &mut Buffer) {
     for (xi, x) in (area.left()..area.right()).enumerate() {
         for (yi, y) in (area.top()..area.bottom()).enumerate() {
             let yi = area.height as usize - yi - 1;

examples/demo2/main.rs

@@ -1,12 +1,15 @@
 use anyhow::Result;
-use app::App;
+pub use app::*;
+pub use root::*;
+pub use term::*;
+pub use theme::*;
 
 mod app;
 mod colors;
 mod root;
-mod styles;
 mod tabs;
 mod term;
+mod theme;
 
 fn main() -> Result<()> {
     App::run()

examples/demo2/root.rs

@@ -1,6 +1,7 @@
+use itertools::Itertools;
 use ratatui::{prelude::*, widgets::*};
 
-use crate::{app::AppContext, styles, tabs::*, term};
+use crate::{layout, tabs::*, AppContext, THEME};
 
 pub struct Root<'a> {
     context: &'a AppContext,
@@ -14,8 +15,8 @@ impl<'a> Root<'a> {
 
 impl Widget for Root<'_> {
     fn render(self, area: Rect, buf: &mut Buffer) {
-        Block::new().bg(styles::APP_BACKGROUND).render(area, buf);
-        let area = term::layout(area, Direction::Vertical, vec![1, 0, 1]);
+        Block::new().style(THEME.root).render(area, buf);
+        let area = layout(area, Direction::Vertical, vec![1, 0, 1]);
         self.render_title_bar(area[0], buf);
         self.render_selected_tab(area[1], buf);
         self.render_bottom_bar(area[2], buf);
@@ -24,47 +25,50 @@ impl Widget for Root<'_> {
 
 impl Root<'_> {
     fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
-        let area = term::layout(area, Direction::Horizontal, vec![0, 43]);
+        let area = layout(area, Direction::Horizontal, vec![0, 53]);
 
-        Paragraph::new(Span::styled("Ratatui Demos ", styles::APP_TITLE)).render(area[0], buf);
-        let titles = vec!["About", "Email", "Traceroute", "Misc", "Recipe"];
+        Paragraph::new(Span::styled("Ratatui Demos ", THEME.app_title)).render(area[0], buf);
+        let titles = vec![" About ", " Email ", " Traceroute ", " Recipe ", " Misc "];
         Tabs::new(titles)
-            .style(styles::TABS)
-            .highlight_style(styles::TABS_SELECTED)
+            .style(THEME.tabs)
+            .highlight_style(THEME.tabs_selected)
             .select(self.context.tab_index)
             .render(area[1], buf);
     }
 
     fn render_selected_tab(&self, area: Rect, buf: &mut Buffer) {
+        let row_index = self.context.row_index;
         match self.context.tab_index {
-            0 => AboutTab::new().render(area, buf),
-            1 => EmailTab::new(self.context.row_index).render(area, buf),
-            2 => TracerouteTab::new(self.context.row_index).render(area, buf),
-            3 => MiscWidgetsTab::new().render(area, buf),
-            4 => RecipeTab::new(self.context.row_index).render(area, buf),
+            0 => AboutTab::new(row_index).render(area, buf),
+            1 => EmailTab::new(row_index).render(area, buf),
+            2 => TracerouteTab::new(row_index).render(area, buf),
+            3 => RecipeTab::new(row_index).render(area, buf),
+            4 => MiscWidgetsTab::new().render(area, buf),
             _ => unreachable!(),
         };
     }
 
     fn render_bottom_bar(&self, area: Rect, buf: &mut Buffer) {
-        let key_style = Style::new().fg(Color::Indexed(232)).bg(Color::Indexed(236));
-        Paragraph::new(Line::from(vec![
-            " Q/Esc ".set_style(key_style),
-            " Quit  ".into(),
-            " Tab ".set_style(key_style),
-            " Next Tab  ".into(),
-            " ←/h ".set_style(key_style),
-            " Left  ".into(),
-            " →/l ".set_style(key_style),
-            " Right  ".into(),
-            " ↑/k ".set_style(key_style),
-            " Up  ".into(),
-            " ↓/j ".set_style(key_style),
-            " Down".into(),
-        ]))
-        .alignment(Alignment::Center)
-        .fg(Color::Indexed(236))
-        .bg(Color::Indexed(232))
-        .render(area, buf);
+        let keys = [
+            ("Q/Esc", "Quit"),
+            ("Tab", "Next Tab"),
+            ("←/h", "Left"),
+            ("→/l", "Right"),
+            ("↑/k", "Up"),
+            ("↓/j", "Down"),
+        ];
+        let spans = keys
+            .iter()
+            .flat_map(|(key, desc)| {
+                let key = Span::styled(format!(" {} ", key), THEME.key_binding.key);
+                let desc = Span::styled(format!(" {} ", desc), THEME.key_binding.description);
+                [key, desc]
+            })
+            .collect_vec();
+        Paragraph::new(Line::from(spans))
+            .alignment(Alignment::Center)
+            .fg(Color::Indexed(236))
+            .bg(Color::Indexed(232))
+            .render(area, buf);
     }
 }

examples/demo2/tabs.rs

@@ -1,5 +1,3 @@
-use ratatui::prelude::*;
-
 mod about;
 mod email;
 mod misc;
@@ -11,9 +9,3 @@ pub use email::EmailTab;
 pub use misc::MiscWidgetsTab;
 pub use recipe::RecipeTab;
 pub use traceroute::TracerouteTab;
-
-pub trait Tab {
-    fn title(&self) -> String;
-    fn render(&self, area: Rect, buf: &mut Buffer);
-    fn select(&mut self, _row: usize) {}
-}