Add basic TUI support (#1)

src/gui.rs

@@ -0,0 +1,28 @@
+use anyhow::Result;
+use cxx_qt_lib::QString;
+use log::trace;
+
+pub mod colors;
+pub mod filesystem;
+
+pub fn run(root_path: std::path::PathBuf) -> Result<()> {
+    trace!(target:"gui::run()", "Starting the GUI editor at {root_path:?}");
+
+    use cxx_qt_lib::{QGuiApplication, QQmlApplicationEngine, QUrl};
+
+    let mut app = QGuiApplication::new();
+    let mut engine = QQmlApplicationEngine::new();
+
+    if let Some(engine) = engine.as_mut() {
+        engine.add_import_path(&QString::from("qml/"));
+    }
+    if let Some(engine) = engine.as_mut() {
+        engine.load(&QUrl::from("qml/main.qml"));
+    }
+
+    if let Some(app) = app.as_mut() {
+        app.exec();
+    }
+
+    Ok(())
+}

src/gui/colors.rs

@@ -0,0 +1,92 @@
+#[cxx_qt::bridge]
+pub mod qobject {
+    unsafe extern "C++" {
+        include!("cxx-qt-lib/qcolor.h");
+        type QColor = cxx_qt_lib::QColor;
+    }
+
+    unsafe extern "RustQt" {
+        #[qobject]
+        #[qml_element]
+        #[qml_singleton]
+        #[qproperty(QColor, hovered)]
+        #[qproperty(QColor, unhovered)]
+        #[qproperty(QColor, pressed)]
+        #[qproperty(QColor, menubar)]
+        #[qproperty(QColor, menubar_border)]
+        #[qproperty(QColor, scrollbar)]
+        #[qproperty(QColor, scrollbar_active)]
+        #[qproperty(QColor, scrollbar_gutter)]
+        #[qproperty(QColor, linenumber)]
+        #[qproperty(QColor, active)]
+        #[qproperty(QColor, inactive)]
+        #[qproperty(QColor, editor_background)]
+        #[qproperty(QColor, editor_text)]
+        #[qproperty(QColor, editor_highlighted_text)]
+        #[qproperty(QColor, editor_highlight)]
+        #[qproperty(QColor, gutter)]
+        #[qproperty(QColor, explorer_hovered)]
+        #[qproperty(QColor, explorer_text)]
+        #[qproperty(QColor, explorer_text_selected)]
+        #[qproperty(QColor, explorer_background)]
+        #[qproperty(QColor, explorer_folder)]
+        #[qproperty(QColor, explorer_folder_open)]
+        type RustColors = super::RustColorsImpl;
+    }
+}
+
+use cxx_qt_lib::QColor;
+
+pub struct RustColorsImpl {
+    hovered: QColor,
+    unhovered: QColor,
+    pressed: QColor,
+    menubar: QColor,
+    menubar_border: QColor,
+    scrollbar: QColor,
+    scrollbar_active: QColor,
+    scrollbar_gutter: QColor,
+    linenumber: QColor,
+    active: QColor,
+    inactive: QColor,
+    editor_background: QColor,
+    editor_text: QColor,
+    editor_highlighted_text: QColor,
+    editor_highlight: QColor,
+    gutter: QColor,
+    explorer_hovered: QColor,
+    explorer_text: QColor,
+    explorer_text_selected: QColor,
+    explorer_background: QColor,
+    explorer_folder: QColor,
+    explorer_folder_open: QColor,
+}
+
+impl Default for RustColorsImpl {
+    fn default() -> Self {
+        Self {
+            hovered: QColor::try_from("#303234").unwrap(),
+            unhovered: QColor::try_from("#3c3f41").unwrap(),
+            pressed: QColor::try_from("#4b4f51").unwrap(),
+            menubar: QColor::try_from("#3c3f41").unwrap(),
+            menubar_border: QColor::try_from("#575757").unwrap(),
+            scrollbar: QColor::try_from("#4b4f51").unwrap(),
+            scrollbar_active: QColor::try_from("#4b4f51").unwrap(),
+            scrollbar_gutter: QColor::try_from("#3b3b3b").unwrap(),
+            linenumber: QColor::try_from("#94989b").unwrap(),
+            active: QColor::try_from("#a9acb0").unwrap(),
+            inactive: QColor::try_from("#FFF").unwrap(),
+            editor_background: QColor::try_from("#2b2b2b").unwrap(),
+            editor_text: QColor::try_from("#acaea3").unwrap(),
+            editor_highlighted_text: QColor::try_from("#ccced3").unwrap(),
+            editor_highlight: QColor::try_from("#ccced3").unwrap(),
+            gutter: QColor::try_from("#1e1f22").unwrap(),
+            explorer_hovered: QColor::try_from("#4c5053").unwrap(),
+            explorer_text: QColor::try_from("#3b3b3b").unwrap(),
+            explorer_text_selected: QColor::try_from("#8b8b8b").unwrap(),
+            explorer_background: QColor::try_from("#676c70").unwrap(),
+            explorer_folder: QColor::try_from("#54585b").unwrap(),
+            explorer_folder_open: QColor::try_from("#FFF").unwrap(),
+        }
+    }
+}

src/gui/filesystem.rs

@@ -0,0 +1,137 @@
+#[cxx_qt::bridge]
+pub mod qobject {
+    unsafe extern "C++" {
+        // Import Qt Types from C++
+        include!("cxx-qt-lib/qstring.h");
+        type QString = cxx_qt_lib::QString;
+        include!("cxx-qt-lib/qmodelindex.h");
+        type QModelIndex = cxx_qt_lib::QModelIndex;
+        include!(<QtGui/QFileSystemModel>);
+        type QFileSystemModel;
+    }
+
+    unsafe extern "RustQt" {
+        // Export QML Types from Rust
+        #[qobject]
+        #[base = QFileSystemModel]
+        #[qml_element]
+        #[qml_singleton]
+        #[qproperty(QString, file_path, cxx_name = "filePath")]
+        #[qproperty(QModelIndex, root_index, cxx_name = "rootIndex")]
+        type FileSystem = super::FileSystemImpl;
+
+        #[inherit]
+        #[cxx_name = "setRootPath"]
+        fn set_root_path(self: Pin<&mut FileSystem>, path: &QString) -> QModelIndex;
+
+        #[qinvokable]
+        #[cxx_override]
+        #[cxx_name = "columnCount"]
+        fn column_count(self: &FileSystem, _index: &QModelIndex) -> i32;
+
+        #[qinvokable]
+        #[cxx_name = "readFile"]
+        fn read_file(self: &FileSystem, path: &QString) -> QString;
+
+        #[qinvokable]
+        #[cxx_name = "setDirectory"]
+        fn set_directory(self: Pin<&mut FileSystem>, path: &QString) -> QModelIndex;
+    }
+}
+
+use cxx_qt_lib::{QModelIndex, QString};
+use dirs;
+use log::warn;
+use std::fs;
+use std::io::BufRead;
+use syntect::easy::HighlightFile;
+use syntect::highlighting::ThemeSet;
+use syntect::html::{
+    IncludeBackground, append_highlighted_html_for_styled_line, start_highlighted_html_snippet,
+};
+use syntect::parsing::SyntaxSet;
+
+// TODO: Impleent a provider for QFileSystemModel::setIconProvider for icons.
+pub struct FileSystemImpl {
+    file_path: QString,
+    root_index: QModelIndex,
+}
+
+// Default is explicit to make the editor open this source file initially.
+impl Default for FileSystemImpl {
+    fn default() -> Self {
+        Self {
+            file_path: QString::from(file!()),
+            root_index: Default::default(),
+        }
+    }
+}
+
+impl qobject::FileSystem {
+    fn read_file(&self, path: &QString) -> QString {
+        if path.is_empty() {
+            return QString::default();
+        }
+        if !fs::metadata(path.to_string())
+            .expect(format!("Failed to get file metadata {path:?}").as_str())
+            .is_file()
+        {
+            warn!(target:"FileSystem", "Attempted to open file {path:?} that is not a valid file");
+            return QString::default();
+        }
+        let ss = SyntaxSet::load_defaults_nonewlines();
+        let ts = ThemeSet::load_defaults();
+        let theme = &ts.themes["base16-ocean.dark"];
+
+        let mut highlighter =
+            HighlightFile::new(path.to_string(), &ss, theme).expect("Failed to create highlighter");
+        let (mut output, _bg) = start_highlighted_html_snippet(theme);
+        let mut line = String::new();
+        while highlighter
+            .reader
+            .read_line(&mut line)
+            .expect("Failed to read file.")
+            > 0
+        {
+            let regions = highlighter
+                .highlight_lines
+                .highlight_line(&line, &ss)
+                .expect("Failed to highlight");
+
+            append_highlighted_html_for_styled_line(
+                &regions[..],
+                IncludeBackground::Yes,
+                &mut output,
+            )
+            .expect("Failed to insert highlighted html");
+            line.clear();
+        }
+        output.push_str("</pre>\n");
+        QString::from(output)
+    }
+
+    // There will never be more than one column.
+    fn column_count(&self, _index: &QModelIndex) -> i32 {
+        1
+    }
+
+    fn set_directory(self: std::pin::Pin<&mut Self>, path: &QString) -> QModelIndex {
+        if !path.is_empty()
+            && fs::metadata(path.to_string())
+                .expect(format!("Failed to get metadata for path {path:?}").as_str())
+                .is_dir()
+        {
+            self.set_root_path(path)
+        } else {
+            // If the initial directory can't be opened, attempt to find the home directory.
+            self.set_root_path(&QString::from(
+                dirs::home_dir()
+                    .expect("Failed to get home directory")
+                    .as_path()
+                    .to_str()
+                    .unwrap()
+                    .to_string(),
+            ))
+        }
+    }
+}

src/main.rs

@@ -1,90 +1,65 @@
-// SPDX-FileCopyrightText: 2025 Klarälvdalens Datakonsult AB, a KDAB Group company <info@kdab.com>
-// SPDX-FileContributor: Leon Matthes <leon.matthes@kdab.com>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
+use crate::tui::Tui;
+use anyhow::{Context, Result};
+use clap::Parser;
+use log::{info, trace};
+use std::process::{Command, Stdio};
 
-#[cxx_qt::bridge]
-mod qobject {
-    unsafe extern "C++" {
-        include!("cxx-qt-lib/qstring.h");
-        type QString = cxx_qt_lib::QString;
-    }
+pub mod gui;
+pub mod tui;
+/// Extendable command-line driven development environment written in Rust using the Qt UI framework.
+/// If no flags are provided, the GUI editor is launched in a separate process.
+/// If no path is provided, the current directory is used.
+#[derive(Parser, Debug)]
+#[structopt(name = "clide", verbatim_doc_comment)]
+struct Cli {
+    /// The root directory for the project to open with the clide editor.
+    #[arg(value_parser = clap::value_parser!(std::path::PathBuf))]
+    pub path: Option<std::path::PathBuf>,
 
-    #[qenum(Greeter)]
-    pub enum Language {
-        English,
-        German,
-        French,
-    }
+    /// Run clide in headless mode.
+    #[arg(value_name = "tui", short, long)]
+    pub tui: bool,
 
-    #[qenum(Greeter)]
-    pub enum Greeting {
-        Hello,
-        Bye,
-    }
-
-    unsafe extern "RustQt" {
-        #[qobject]
-        #[qml_element]
-        #[qproperty(Greeting, greeting)]
-        #[qproperty(Language, language)]
-        type Greeter = super::GreeterRust;
-
-        #[qinvokable]
-        fn greet(self: &Greeter) -> QString;
-    }
+    /// Run the clide GUI in the current process, blocking the terminal and showing all output streams.
+    #[arg(value_name = "gui", short, long)]
+    pub gui: bool,
 }
 
-use qobject::*;
+fn main() -> Result<()> {
+    let args = Cli::parse();
 
-impl Greeting {
-    fn translate(&self, language: Language) -> String {
-        match (self, language) {
-            (&Greeting::Hello, Language::English) => "Hello, World!",
-            (&Greeting::Hello, Language::German) => "Hallo, Welt!",
-            (&Greeting::Hello, Language::French) => "Bonjour, le monde!",
-            (&Greeting::Bye, Language::English) => "Bye!",
-            (&Greeting::Bye, Language::German) => "Auf Wiedersehen!",
-            (&Greeting::Bye, Language::French) => "Au revoir!",
-            _ => "🤯",
+    let root_path = match args.path {
+        // If the CLI was provided a directory, convert it to absolute.
+        Some(path) => std::path::absolute(path)?,
+        // If no path was provided, use the current directory.
+        None => std::env::current_dir().unwrap_or(
+            // If we can't find the CWD, attempt to open the home directory.
+            dirs::home_dir().context("Failed to obtain home directory")?,
+        ),
+    };
+    info!(target:"main()", "Root path detected: {root_path:?}");
+
+    match args.gui {
+        true => {
+            trace!(target:"main()", "Starting GUI");
+            gui::run(root_path)
         }
-            .to_string()
-    }
-}
-
-pub struct GreeterRust {
-    greeting: Greeting,
-    language: Language,
-}
-
-impl Default for GreeterRust {
-    fn default() -> Self {
-        Self {
-            greeting: Greeting::Hello,
-            language: Language::English,
-        }
-    }
-}
-
-use cxx_qt_lib::QString;
-
-impl qobject::Greeter {
-    fn greet(&self) -> QString {
-        QString::from(self.greeting.translate(self.language))
-    }
-}
-
-fn main() {
-    use cxx_qt_lib::{QGuiApplication, QQmlApplicationEngine, QUrl};
-
-    let mut app = QGuiApplication::new();
-    let mut engine = QQmlApplicationEngine::new();
-
-    if let Some(engine) = engine.as_mut() {
-        engine.load(&QUrl::from("qml/main.qml"));
-    }
-
-    if let Some(app) = app.as_mut() {
-        app.exec();
+        false => match args.tui {
+            // Open the TUI editor if requested, otherwise use the QML GUI by default.
+            true => {
+                trace!(target:"main()", "Starting TUI");
+                Ok(Tui::new(root_path)?.start()?)
+            }
+            false => {
+                trace!(target:"main()", "Starting GUI in a new process");
+                Command::new(std::env::current_exe()?)
+                    .args(&["--gui", root_path.to_str().unwrap()])
+                    .stdout(Stdio::null())
+                    .stderr(Stdio::null())
+                    .stdin(Stdio::null())
+                    .spawn()?;
+                Ok(())
+            }
+        },
     }
 }

src/tui.rs

@@ -0,0 +1,88 @@
+mod about;
+mod app;
+mod component;
+mod editor;
+mod editor_tab;
+mod explorer;
+mod logger;
+mod menu_bar;
+
+use anyhow::{Context, Result};
+use log::{LevelFilter, debug, info, trace};
+use ratatui::Terminal;
+use ratatui::backend::CrosstermBackend;
+use ratatui::crossterm::event::{
+    DisableBracketedPaste, DisableMouseCapture, EnableBracketedPaste, EnableMouseCapture,
+};
+use ratatui::crossterm::terminal::{
+    EnterAlternateScreen, LeaveAlternateScreen, disable_raw_mode, enable_raw_mode,
+};
+use std::env;
+use std::io::{Stdout, stdout};
+use tui_logger::{
+    TuiLoggerFile, TuiLoggerLevelOutput, init_logger, set_default_level, set_log_file,
+};
+
+pub struct Tui {
+    terminal: Terminal<CrosstermBackend<Stdout>>,
+    root_path: std::path::PathBuf,
+}
+
+impl Tui {
+    pub fn id() -> &'static str {
+        "Tui"
+    }
+
+    pub fn new(root_path: std::path::PathBuf) -> Result<Self> {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        init_logger(LevelFilter::Trace)?;
+        set_default_level(LevelFilter::Trace);
+        debug!(target:Self::id(), "Logging initialized");
+
+        let mut dir = env::temp_dir();
+        dir.push("clide.log");
+        let file_options = TuiLoggerFile::new(
+            dir.to_str()
+                .context("Failed to set temp directory for file logging")?,
+        )
+        .output_level(Some(TuiLoggerLevelOutput::Abbreviated))
+        .output_file(false)
+        .output_separator(':');
+        set_log_file(file_options);
+        debug!(target:Self::id(), "Logging to file: {dir:?}");
+
+        Ok(Self {
+            terminal: Terminal::new(CrosstermBackend::new(stdout()))?,
+            root_path,
+        })
+    }
+
+    pub fn start(self) -> Result<()> {
+        info!(target:Self::id(), "Starting the TUI editor at {:?}", self.root_path);
+        ratatui::crossterm::execute!(
+            stdout(),
+            EnterAlternateScreen,
+            EnableMouseCapture,
+            EnableBracketedPaste
+        )?;
+        enable_raw_mode()?;
+
+        let app_result = app::App::new(self.root_path)?
+            .run(self.terminal)
+            .context("Failed to start the TUI editor.");
+        Self::stop()?;
+        app_result
+    }
+
+    fn stop() -> Result<()> {
+        info!(target:Self::id(), "Stopping the TUI editor");
+        disable_raw_mode()?;
+        ratatui::crossterm::execute!(
+            stdout(),
+            LeaveAlternateScreen,
+            DisableMouseCapture,
+            DisableBracketedPaste
+        )?;
+        Ok(())
+    }
+}

src/tui/about.rs

@@ -0,0 +1,138 @@
+use ratatui::buffer::Buffer;
+use ratatui::layout::{Constraint, Direction, Layout, Rect};
+use ratatui::style::{Modifier, Style};
+use ratatui::text::{Line, Span};
+use ratatui::widgets::{Block, Borders, Clear, Padding, Paragraph, Widget, Wrap};
+
+pub struct About {}
+
+impl About {
+    #[allow(unused)]
+    pub fn id() -> &'static str {
+        "About"
+    }
+
+    pub fn new() -> Self {
+        // trace!(target:Self::id(), "Building {}", Self::id());
+        Self {}
+    }
+}
+
+impl Widget for About {
+    fn render(self, area: Rect, buf: &mut Buffer)
+    where
+        Self: Sized,
+    {
+        Clear::default().render(area, buf);
+        // Split main area
+        let chunks = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Fill(2), // image column
+                Constraint::Fill(1), // image column
+                Constraint::Fill(2), // text column
+            ])
+            .split(area);
+
+        let top_chunks = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Fill(1),
+                Constraint::Fill(3),
+                Constraint::Fill(1),
+            ])
+            .split(chunks[1]);
+
+        let bottom_chunks = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Fill(1),
+                Constraint::Fill(3),
+                Constraint::Fill(1),
+            ])
+            .split(chunks[2]);
+
+        // ---------- IMAGE ----------
+        let kilroy_art = [
+            "                          *                                    ",
+            "                          |.===.                               ",
+            "                          {}o o{}                              ",
+            "-----------------------ooO--(_)--Ooo---------------------------",
+            "#                                                             #",
+            "#                     CLIDE WAS HERE                          #",
+            "#                                                             #",
+            "#          https://git.shaunreed.com/shaunred/clide           #",
+            "#          https://shaunreed.com/shaunred/clide               #",
+            "#                                                             #",
+        ];
+
+        let kilroy_lines: Vec<Line> = kilroy_art
+            .iter()
+            .map(|l| Line::from(Span::raw(*l)))
+            .collect();
+
+        Paragraph::new(kilroy_lines)
+            .block(
+                Block::default()
+                    .borders(Borders::NONE)
+                    .padding(Padding::bottom(0)),
+            )
+            .wrap(Wrap { trim: false })
+            .centered()
+            .render(top_chunks[1], buf);
+
+        // ---------- TEXT ----------
+        let about_text = vec![
+            Line::from(vec![Span::styled(
+                "clide\n",
+                Style::default().add_modifier(Modifier::BOLD),
+            )])
+            .centered(),
+            Line::from(""),
+            Line::from(vec![
+                Span::styled("Author: ", Style::default().add_modifier(Modifier::BOLD)),
+                Span::raw("Shaun Reed"),
+            ])
+            .left_aligned(),
+            Line::from(vec![
+                Span::styled("Email:  ", Style::default().add_modifier(Modifier::BOLD)),
+                Span::raw("shaunrd0@gmail.com"),
+            ])
+            .left_aligned(),
+            Line::from(vec![
+                Span::styled("URL:    ", Style::default().add_modifier(Modifier::BOLD)),
+                Span::raw("https://git.shaunreed.com/shaunrd0/clide"),
+            ])
+            .left_aligned(),
+            Line::from(vec![
+                Span::styled("Blog:   ", Style::default().add_modifier(Modifier::BOLD)),
+                Span::raw("https://shaunreed.com"),
+            ])
+            .left_aligned(),
+            Line::from(""),
+            Line::from(vec![Span::styled(
+                "Description\n",
+                Style::default().add_modifier(Modifier::BOLD),
+            )])
+            .left_aligned(),
+            Line::from(concat!(
+                "CLIDE is an extendable command-line driven development environment written in Rust using the Qt UI framework that supports both full and headless Linux environments. ",
+                "The GUI is written in QML compiled through Rust using the cxx-qt crate, while the TUI was implemented using the ratatui crate. ",
+            ))
+            .style(Style::default())
+            .left_aligned(),
+        ];
+        Block::bordered().render(area, buf);
+
+        let paragraph = Paragraph::new(about_text)
+            .block(
+                Block::default()
+                    .title("About")
+                    .borders(Borders::ALL)
+                    .padding(Padding::top(0)),
+            )
+            .wrap(Wrap { trim: true });
+
+        paragraph.render(bottom_chunks[1], buf);
+    }
+}

src/tui/app.rs

@@ -0,0 +1,415 @@
+use crate::tui::about::About;
+use crate::tui::app::AppComponent::{AppEditor, AppExplorer, AppLogger};
+use crate::tui::component::{Action, Component, Focus, FocusState, Visibility, VisibleState};
+use crate::tui::editor_tab::EditorTab;
+use crate::tui::explorer::Explorer;
+use crate::tui::logger::Logger;
+use crate::tui::menu_bar::MenuBar;
+use AppComponent::AppMenuBar;
+use anyhow::{Context, Result};
+use log::{error, info, trace};
+use ratatui::DefaultTerminal;
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event;
+use ratatui::crossterm::event::{
+    Event, KeyCode, KeyEvent, KeyEventKind, KeyModifiers, MouseButton, MouseEventKind,
+};
+use ratatui::layout::{Constraint, Direction, Layout, Rect};
+use ratatui::prelude::{Color, Widget};
+use ratatui::widgets::{Paragraph, Wrap};
+use std::path::PathBuf;
+use std::time::Duration;
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum AppComponent {
+    AppEditor,
+    AppExplorer,
+    AppLogger,
+    AppMenuBar,
+}
+
+pub struct App<'a> {
+    editor_tabs: EditorTab,
+    explorer: Explorer<'a>,
+    logger: Logger,
+    menu_bar: MenuBar,
+    last_active: AppComponent,
+    about: bool,
+}
+
+impl<'a> App<'a> {
+    pub fn id() -> &'static str {
+        "App"
+    }
+
+    pub fn new(root_path: PathBuf) -> Result<Self> {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        let app = Self {
+            editor_tabs: EditorTab::new(None),
+            explorer: Explorer::new(&root_path)?,
+            logger: Logger::new(),
+            menu_bar: MenuBar::new(),
+            last_active: AppEditor,
+            about: false,
+        };
+        Ok(app)
+    }
+
+    /// Logic that should be executed once on application startup.
+    pub fn start(&mut self) -> Result<()> {
+        trace!(target:Self::id(), "Starting App");
+        Ok(())
+    }
+
+    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        self.start()?;
+        trace!(target:Self::id(), "Entering App run loop");
+        loop {
+            terminal.draw(|f| {
+                f.render_widget(&mut self, f.area());
+            })?;
+
+            if event::poll(Duration::from_millis(250)).context("event poll failed")? {
+                match self.handle_event(event::read()?)? {
+                    Action::Quit => break,
+                    Action::Handled => {}
+                    _ => {
+                        // bail!("Unhandled event: {:?}", event);
+                    }
+                }
+            }
+        }
+        Ok(())
+    }
+
+    fn draw_bottom_status(&self, area: Rect, buf: &mut Buffer) {
+        // Determine help text from the most recently focused component.
+        let help = match self.last_active {
+            AppEditor => match self.editor_tabs.current_editor() {
+                Some(editor) => editor.component_state.help_text.clone(),
+                None => {
+                    if !self.editor_tabs.is_empty() {
+                        error!(target:Self::id(), "Failed to get Editor while drawing bottom status bar");
+                    }
+                    "Failed to get current Editor while getting widget help text".to_string()
+                }
+            },
+            AppExplorer => self.explorer.component_state.help_text.clone(),
+            AppLogger => self.logger.component_state.help_text.clone(),
+            AppMenuBar => self.menu_bar.component_state.help_text.clone(),
+        };
+        Paragraph::new(
+            concat!(
+                "ALT+Q: Focus project explorer | ALT+W: Focus editor | ALT+E: Focus logger |",
+                " ALT+R: Focus menu bar | CTRL+C: Quit\n"
+            )
+            .to_string()
+                + help.as_str(),
+        )
+        .style(Color::Gray)
+        .wrap(Wrap { trim: false })
+        .centered()
+        .render(area, buf);
+    }
+
+    fn clear_focus(&mut self) {
+        info!(target:Self::id(), "Clearing all widget focus");
+        self.explorer.component_state.set_focus(Focus::Inactive);
+        self.explorer.component_state.set_focus(Focus::Inactive);
+        self.logger.component_state.set_focus(Focus::Inactive);
+        self.menu_bar.component_state.set_focus(Focus::Inactive);
+        match self.editor_tabs.current_editor_mut() {
+            None => {
+                error!(target:Self::id(), "Failed to get current Editor while clearing focus")
+            }
+            Some(editor) => editor.component_state.set_focus(Focus::Inactive),
+        }
+    }
+
+    fn change_focus(&mut self, focus: AppComponent) {
+        info!(target:Self::id(), "Changing widget focus to {:?}", focus);
+        self.clear_focus();
+        match focus {
+            AppEditor => match self.editor_tabs.current_editor_mut() {
+                None => {
+                    error!(target:Self::id(), "Failed to get current Editor while changing focus")
+                }
+                Some(editor) => editor.component_state.set_focus(Focus::Active),
+            },
+            AppExplorer => self.explorer.component_state.set_focus(Focus::Active),
+            AppLogger => self.logger.component_state.set_focus(Focus::Active),
+            AppMenuBar => self.menu_bar.component_state.set_focus(Focus::Active),
+        }
+        self.last_active = focus;
+    }
+
+    /// Refresh the contents of the editor to match the selected TreeItem in the file Explorer.
+    /// If the selected item is not a file, this does nothing.
+    #[allow(unused)]
+    fn refresh_editor_contents(&mut self) -> Result<()> {
+        // TODO: This may be useful for a preview mode of the selected file prior to opening a tab.
+        // Use the currently selected TreeItem or get an absolute path to this source file.
+        // let selected_pathbuf = match self.explorer.selected() {
+        //     Ok(path) => PathBuf::from(path),
+        //     Err(_) => PathBuf::from(std::path::absolute(file!())?.to_string_lossy().to_string()),
+        // };
+        // match self.editor_tabs.current_editor_mut() {
+        //     None => bail!("Failed to get current Editor while refreshing editor contents"),
+        //     Some(editor) => {
+        //         let current_file_path = editor
+        //             .file_path
+        //             .clone()
+        //             .context("Failed to get Editor current file_path")?;
+        //         if selected_pathbuf == current_file_path || !selected_pathbuf.is_file() {
+        //             return Ok(());
+        //         }
+        //         editor.set_contents(&selected_pathbuf)
+        //     }
+        // }
+        Ok(())
+    }
+}
+
+impl<'a> Widget for &mut App<'a> {
+    fn render(self, area: Rect, buf: &mut Buffer)
+    where
+        Self: Sized,
+    {
+        let vertical_constraints = match self.logger.component_state.vis {
+            Visibility::Visible => {
+                vec![
+                    Constraint::Length(3),      // top status bar
+                    Constraint::Percentage(70), // horizontal layout
+                    Constraint::Fill(1),        // terminal
+                    Constraint::Length(3),      // bottom status bar
+                ]
+            }
+            Visibility::Hidden => {
+                vec![
+                    Constraint::Length(3), // top status bar
+                    Constraint::Fill(1),   // horizontal layout
+                    Constraint::Length(3), // bottom status bar
+                ]
+            }
+        };
+        let vertical = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints(vertical_constraints)
+            .split(area);
+
+        let horizontal_constraints = match self.explorer.component_state.vis {
+            Visibility::Visible => {
+                vec![
+                    Constraint::Max(30), // File explorer with a max width of 30 characters.
+                    Constraint::Fill(1), // Editor fills the remaining space.
+                ]
+            }
+            Visibility::Hidden => {
+                vec![
+                    Constraint::Fill(1), // Editor fills the remaining space.
+                ]
+            }
+        };
+
+        // The index used for vertical here does not care if the Logger is Visible or not.
+        let horizontal = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints(horizontal_constraints)
+            .split(vertical[1]);
+        match self.explorer.component_state.vis {
+            Visibility::Visible => {
+                let editor_layout = Layout::default()
+                    .direction(Direction::Vertical)
+                    .constraints([
+                        Constraint::Length(1), // Editor tabs.
+                        Constraint::Fill(1),   // Editor contents.
+                    ])
+                    .split(horizontal[1]);
+                self.editor_tabs
+                    .render(editor_layout[0], editor_layout[1], buf);
+                self.explorer.render(horizontal[0], buf);
+            }
+            Visibility::Hidden => {
+                let editor_layout = Layout::default()
+                    .direction(Direction::Vertical)
+                    .constraints([
+                        Constraint::Length(1), // Editor tabs.
+                        Constraint::Fill(1),   // Editor contents.
+                    ])
+                    .split(horizontal[0]);
+                self.editor_tabs
+                    .render(editor_layout[0], editor_layout[1], buf);
+            }
+        }
+
+        match self.logger.component_state.vis {
+            // Index 1 of vertical is rendered with the horizontal layout above.
+            Visibility::Visible => {
+                self.logger.render(vertical[2], buf);
+                self.draw_bottom_status(vertical[3], buf);
+                // The title bar is rendered last to overlay any popups created for drop-down menus.
+                self.menu_bar.render(vertical[0], buf);
+            }
+            Visibility::Hidden => {
+                self.draw_bottom_status(vertical[2], buf);
+                // The title bar is rendered last to overlay any popups created for drop-down menus.
+                self.menu_bar.render(vertical[0], buf);
+            }
+        }
+
+        if self.about {
+            let about_area = area.centered(Constraint::Percentage(50), Constraint::Percentage(45));
+            About::new().render(about_area, buf);
+        }
+    }
+}
+
+impl<'a> Component for App<'a> {
+    /// Handles events for the App and delegates to attached Components.
+    fn handle_event(&mut self, event: Event) -> Result<Action> {
+        // Handle events in the primary application.
+        if let Some(key_event) = event.as_key_event() {
+            let res = self
+                .handle_key_events(key_event)
+                .context("Failed to handle key events for primary App Component.");
+            match res {
+                Ok(Action::Quit) | Ok(Action::Handled) => return res,
+                _ => {}
+            }
+        }
+        // Handle events for all components.
+        let action = match self.last_active {
+            AppEditor => self.editor_tabs.handle_event(event.clone())?,
+            AppExplorer => self.explorer.handle_event(event.clone())?,
+            AppLogger => self.logger.handle_event(event.clone())?,
+            AppMenuBar => self.menu_bar.handle_event(event.clone())?,
+        };
+
+        // Components should always handle mouse events for click interaction.
+        if let Some(mouse) = event.as_mouse_event() {
+            if mouse.kind == MouseEventKind::Down(MouseButton::Left) {
+                if let Some(editor) = self.editor_tabs.current_editor_mut() {
+                    editor.handle_mouse_events(mouse)?;
+                }
+                self.explorer.handle_mouse_events(mouse)?;
+                self.logger.handle_mouse_events(mouse)?;
+            }
+        }
+
+        // Handle actions returned from widgets that may need context on other widgets or app state.
+        match action {
+            Action::Quit | Action::Handled => Ok(action),
+            Action::Save => match self.editor_tabs.current_editor_mut() {
+                None => {
+                    error!(target:Self::id(), "Failed to get current editor while handling App Action::Save");
+                    Ok(Action::Noop)
+                }
+                Some(editor) => match editor.save() {
+                    Ok(_) => Ok(Action::Handled),
+                    Err(e) => {
+                        error!(target:Self::id(), "Failed to save editor contents: {e}");
+                        Ok(Action::Noop)
+                    }
+                },
+            },
+            Action::OpenTab => {
+                if let Ok(path) = self.explorer.selected() {
+                    let path_buf = PathBuf::from(path);
+                    self.editor_tabs.open_tab(&path_buf)?;
+                    Ok(Action::Handled)
+                } else {
+                    Ok(Action::Noop)
+                }
+            }
+            Action::CloseTab => match self.editor_tabs.close_current_tab() {
+                Ok(_) => Ok(Action::Handled),
+                Err(_) => Ok(Action::Noop),
+            },
+            Action::ReloadFile => {
+                trace!(target:Self::id(), "Reloading file for current editor");
+                if let Some(editor) = self.editor_tabs.current_editor_mut() {
+                    editor
+                        .reload_contents()
+                        .map(|_| Action::Handled)
+                        .context("Failed to handle Action::ReloadFile")
+                } else {
+                    error!(target:Self::id(), "Failed to get current editor while handling App Action::ReloadFile");
+                    Ok(Action::Noop)
+                }
+            }
+            Action::ShowHideLogger => {
+                self.logger.component_state.togget_visible();
+                Ok(Action::Handled)
+            }
+            Action::ShowHideExplorer => {
+                self.explorer.component_state.togget_visible();
+                Ok(Action::Handled)
+            }
+            Action::ShowHideAbout => {
+                self.about = !self.about;
+                Ok(Action::Handled)
+            }
+            _ => Ok(Action::Noop),
+        }
+    }
+
+    /// Handles key events for the App Component only.
+    fn handle_key_events(&mut self, key: KeyEvent) -> Result<Action> {
+        match key.code {
+            // If the ESC key is pressed with the About page open, hide it.
+            KeyCode::Esc | KeyCode::Char('q') => {
+                if self.about {
+                    self.about = false;
+                    return Ok(Action::Handled);
+                }
+            }
+            _ => {}
+        }
+
+        match key {
+            KeyEvent {
+                code: KeyCode::Char('q'),
+                modifiers: KeyModifiers::ALT,
+                kind: KeyEventKind::Press,
+                state: _state,
+            } => {
+                self.change_focus(AppExplorer);
+                Ok(Action::Handled)
+            }
+            KeyEvent {
+                code: KeyCode::Char('w'),
+                modifiers: KeyModifiers::ALT,
+                kind: KeyEventKind::Press,
+                state: _state,
+            } => {
+                self.change_focus(AppEditor);
+                Ok(Action::Handled)
+            }
+            KeyEvent {
+                code: KeyCode::Char('e'),
+                modifiers: KeyModifiers::ALT,
+                kind: KeyEventKind::Press,
+                state: _state,
+            } => {
+                self.change_focus(AppLogger);
+                Ok(Action::Handled)
+            }
+            KeyEvent {
+                code: KeyCode::Char('r'),
+                modifiers: KeyModifiers::ALT,
+                kind: KeyEventKind::Press,
+                state: _state,
+            } => {
+                self.change_focus(AppMenuBar);
+                Ok(Action::Handled)
+            }
+            KeyEvent {
+                code: KeyCode::Char('c'),
+                modifiers: KeyModifiers::CONTROL,
+                kind: KeyEventKind::Press,
+                state: _state,
+            } => Ok(Action::Quit),
+            _ => Ok(Action::Noop),
+        }
+    }
+}

src/tui/component.rs

@@ -0,0 +1,167 @@
+#![allow(dead_code, unused_variables)]
+
+use crate::tui::component::Focus::Inactive;
+use Focus::Active;
+use anyhow::Result;
+use log::trace;
+use ratatui::crossterm::event::{Event, KeyEvent, MouseEvent};
+use ratatui::style::Color;
+
+pub enum Action {
+    /// Exit the application.
+    Quit,
+
+    /// The input was checked by the Component and had no effect.
+    Noop,
+
+    /// Pass input to another component or external handler.
+    /// Similar to Noop with the added context that externally handled input may have had an impact.
+    Pass,
+
+    /// Save the current file.
+    Save,
+
+    /// The input was handled by a Component and should not be passed to the next component.
+    Handled,
+    OpenTab,
+    ReloadFile,
+    ShowHideExplorer,
+    ShowHideLogger,
+    ShowHideAbout,
+    CloseTab,
+}
+
+pub trait Component {
+    fn handle_event(&mut self, event: Event) -> Result<Action> {
+        match event {
+            Event::Key(key_event) => self.handle_key_events(key_event),
+            _ => Ok(Action::Noop),
+        }
+    }
+
+    fn handle_key_events(&mut self, key: KeyEvent) -> Result<Action> {
+        Ok(Action::Noop)
+    }
+
+    fn handle_mouse_events(&mut self, mouse: MouseEvent) -> Result<Action> {
+        Ok(Action::Noop)
+    }
+
+    fn update(&mut self, action: Action) -> Result<Action> {
+        Ok(Action::Noop)
+    }
+
+    /// Override this method for creating components that conditionally handle input.
+    fn is_active(&self) -> bool {
+        true
+    }
+}
+
+#[derive(Debug, Clone, Default)]
+pub struct ComponentState {
+    pub(crate) focus: Focus,
+    pub(crate) vis: Visibility,
+    pub(crate) help_text: String,
+}
+
+impl ComponentState {
+    pub fn id() -> &'static str {
+        "ComponentState"
+    }
+
+    fn new() -> Self {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        Self {
+            focus: Active,
+            vis: Visibility::Visible,
+            help_text: String::new(),
+        }
+    }
+
+    pub(crate) fn with_help_text(mut self, help_text: &str) -> Self {
+        self.help_text = help_text.into();
+        self
+    }
+}
+
+#[derive(Debug, Clone, Copy, Default, PartialEq)]
+pub enum Focus {
+    Active,
+    #[default]
+    Inactive,
+}
+
+impl Focus {
+    pub(crate) fn get_active_color(&self) -> Color {
+        match self {
+            Active => Color::LightYellow,
+            Inactive => Color::White,
+        }
+    }
+}
+
+pub trait FocusState {
+    fn with_focus(self, focus: Focus) -> Self;
+    fn set_focus(&mut self, focus: Focus);
+    fn toggle_focus(&mut self);
+    fn get_active_color(&self) -> Color;
+}
+
+impl FocusState for ComponentState {
+    fn with_focus(self, focus: Focus) -> Self {
+        Self {
+            focus,
+            vis: Visibility::Visible,
+            help_text: self.help_text,
+        }
+    }
+
+    fn set_focus(&mut self, focus: Focus) {
+        self.focus = focus;
+    }
+
+    fn toggle_focus(&mut self) {
+        match self.focus {
+            Active => self.set_focus(Inactive),
+            Inactive => self.set_focus(Active),
+        }
+    }
+
+    fn get_active_color(&self) -> Color {
+        self.focus.get_active_color()
+    }
+}
+
+#[derive(Debug, Default, Copy, Clone, PartialEq, Eq)]
+pub enum Visibility {
+    #[default]
+    Visible,
+    Hidden,
+}
+
+pub trait VisibleState {
+    fn with_visible(self, vis: Visibility) -> Self;
+    fn set_visible(&mut self, vis: Visibility);
+    fn togget_visible(&mut self);
+}
+
+impl VisibleState for ComponentState {
+    fn with_visible(self, vis: Visibility) -> Self {
+        Self {
+            focus: self.focus,
+            vis,
+            help_text: self.help_text,
+        }
+    }
+
+    fn set_visible(&mut self, vis: Visibility) {
+        self.vis = vis;
+    }
+
+    fn togget_visible(&mut self) {
+        match self.vis {
+            Visibility::Visible => self.set_visible(Visibility::Hidden),
+            Visibility::Hidden => self.set_visible(Visibility::Visible),
+        }
+    }
+}

src/tui/editor.rs

@@ -0,0 +1,144 @@
+use crate::tui::component::{Action, Component, ComponentState, Focus, FocusState};
+use anyhow::{Context, Result, bail};
+use edtui::{
+    EditorEventHandler, EditorState, EditorTheme, EditorView, LineNumbers, Lines, SyntaxHighlighter,
+};
+use log::{error, trace};
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event::{Event, KeyCode, KeyEvent, KeyModifiers};
+use ratatui::layout::{Alignment, Rect};
+use ratatui::prelude::{Color, Style};
+use ratatui::widgets::{Block, Borders, Padding, Widget};
+use syntect::parsing::SyntaxSet;
+
+pub struct Editor {
+    pub state: EditorState,
+    pub event_handler: EditorEventHandler,
+    pub file_path: Option<std::path::PathBuf>,
+    syntax_set: SyntaxSet,
+    pub(crate) component_state: ComponentState,
+}
+
+impl Editor {
+    pub fn id() -> &'static str {
+        "Editor"
+    }
+
+    pub fn new(path: &std::path::PathBuf) -> Self {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        Editor {
+            state: EditorState::default(),
+            event_handler: EditorEventHandler::default(),
+            file_path: Some(path.to_owned()),
+            syntax_set: SyntaxSet::load_defaults_nonewlines(),
+            component_state: ComponentState::default().with_help_text(concat!(
+                "CTRL+S: Save file | ALT+(←/h): Previous tab | ALT+(l/→): Next tab |",
+                " All other input is handled by vim"
+            )),
+        }
+    }
+
+    pub fn reload_contents(&mut self) -> Result<()> {
+        trace!(target:Self::id(), "Reloading editor file contents {:?}", self.file_path);
+        match self.file_path.clone() {
+            None => {
+                error!(target:Self::id(), "Failed to reload editor contents with None file_path");
+                bail!("Failed to reload editor contents with None file_path")
+            }
+            Some(path) => self.set_contents(&path),
+        }
+    }
+
+    pub fn set_contents(&mut self, path: &std::path::PathBuf) -> Result<()> {
+        trace!(target:Self::id(), "Setting Editor contents from path {:?}", path);
+        if let Ok(contents) = std::fs::read_to_string(path) {
+            let lines: Vec<_> = contents
+                .lines()
+                .map(|line| line.chars().collect::<Vec<char>>())
+                .collect();
+            self.file_path = Some(path.clone());
+            self.state.lines = Lines::new(lines);
+            self.state.cursor.row = 0;
+            self.state.cursor.col = 0;
+        }
+        Ok(())
+    }
+
+    pub fn save(&self) -> Result<()> {
+        if let Some(path) = &self.file_path {
+            trace!(target:Self::id(), "Saving Editor contents {:?}", path);
+            return std::fs::write(path, self.state.lines.to_string()).map_err(|e| e.into());
+        };
+        error!(target:Self::id(), "Failed saving Editor contents; file_path was None");
+        bail!("File not saved. No file path set.")
+    }
+}
+
+impl Widget for &mut Editor {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let lang = self
+            .file_path
+            .as_ref()
+            .and_then(|p| p.extension())
+            .map(|e| e.to_str().unwrap_or("md"))
+            .unwrap_or("md");
+        let lang_name = self
+            .syntax_set
+            .find_syntax_by_extension(lang)
+            .map(|s| s.name.to_string())
+            .unwrap_or("Unknown".to_string());
+
+        EditorView::new(&mut self.state)
+            .wrap(true)
+            .theme(
+                EditorTheme::default().block(
+                    Block::default()
+                        .title(lang_name.to_owned())
+                        .title_style(Style::default().fg(Color::Yellow))
+                        .title_alignment(Alignment::Right)
+                        .borders(Borders::ALL)
+                        .padding(Padding::new(0, 0, 0, 1))
+                        .style(Style::default().fg(self.component_state.get_active_color())),
+                ),
+            )
+            .syntax_highlighter(SyntaxHighlighter::new("dracula", lang).ok())
+            .tab_width(2)
+            .line_numbers(LineNumbers::Absolute)
+            .render(area, buf);
+    }
+}
+
+impl Component for Editor {
+    fn handle_event(&mut self, event: Event) -> Result<Action> {
+        if let Some(key_event) = event.as_key_event() {
+            // Handle events here that should not be passed on to the vim emulation handler.
+            match self.handle_key_events(key_event)? {
+                Action::Handled => return Ok(Action::Handled),
+                _ => {}
+            }
+        }
+        self.event_handler.on_event(event, &mut self.state);
+        Ok(Action::Pass)
+    }
+
+    /// The events for the vim emulation should be handled by EditorEventHandler::on_event.
+    /// These events are custom to the clide application.
+    fn handle_key_events(&mut self, key: KeyEvent) -> Result<Action> {
+        match key {
+            KeyEvent {
+                code: KeyCode::Char('s'),
+                modifiers: KeyModifiers::CONTROL,
+                ..
+            } => {
+                self.save().context("Failed to save file.")?;
+                Ok(Action::Handled)
+            }
+            // For other events not handled here, pass to the vim emulation handler.
+            _ => Ok(Action::Noop),
+        }
+    }
+
+    fn is_active(&self) -> bool {
+        self.component_state.focus == Focus::Active
+    }
+}

src/tui/editor_tab.rs

@@ -0,0 +1,250 @@
+use crate::tui::component::{Action, Component, Focus, FocusState};
+use crate::tui::editor::Editor;
+use anyhow::{Context, Result, anyhow};
+use log::{error, info, trace, warn};
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event::{Event, KeyCode, KeyEvent, KeyModifiers};
+use ratatui::layout::Rect;
+use ratatui::prelude::{Color, Style};
+use ratatui::widgets::{Block, Borders, Padding, Tabs, Widget};
+use std::collections::HashMap;
+
+// Render the tabs with keys as titles
+// Tab keys can be file names.
+// Render the editor using the key as a reference for lookup
+pub struct EditorTab {
+    pub(crate) editors: HashMap<String, Editor>,
+    tab_order: Vec<String>,
+    current_editor: usize,
+}
+
+impl EditorTab {
+    fn id() -> &'static str {
+        "EditorTab"
+    }
+
+    pub fn new(path: Option<&std::path::PathBuf>) -> Self {
+        trace!(target:Self::id(), "Building EditorTab with path {path:?}");
+        match path {
+            None => Self {
+                editors: HashMap::new(),
+                tab_order: Vec::new(),
+                current_editor: 0,
+            },
+            Some(path) => {
+                let tab_order = vec![path.to_string_lossy().to_string()];
+                Self {
+                    editors: HashMap::from([(
+                        tab_order.first().unwrap().to_owned(),
+                        Editor::new(path),
+                    )]),
+                    tab_order,
+                    current_editor: 0,
+                }
+            }
+        }
+    }
+
+    pub fn next_editor(&mut self) {
+        let next = (self.current_editor + 1) % self.tab_order.len();
+        trace!(target:Self::id(), "Moving from {} to next editor tab at {}", self.current_editor, next);
+        self.set_tab_focus(Focus::Active, next);
+        self.current_editor = next;
+    }
+
+    pub fn prev_editor(&mut self) {
+        let prev = self
+            .current_editor
+            .checked_sub(1)
+            .unwrap_or(self.tab_order.len() - 1);
+        trace!(target:Self::id(), "Moving from {} to previous editor tab at {}", self.current_editor, prev);
+        self.set_tab_focus(Focus::Active, prev);
+        self.current_editor = prev;
+    }
+
+    pub fn get_editor_key(&self, index: usize) -> Option<String> {
+        match self.tab_order.get(index) {
+            None => {
+                if !self.tab_order.is_empty() {
+                    error!(target:Self::id(), "Failed to get editor tab key with invalid index {index}");
+                }
+                None
+            }
+            Some(key) => Some(key.to_owned()),
+        }
+    }
+
+    pub fn current_editor(&self) -> Option<&Editor> {
+        self.editors.get(&self.get_editor_key(self.current_editor)?)
+    }
+
+    pub fn current_editor_mut(&mut self) -> Option<&mut Editor> {
+        self.editors
+            .get_mut(&self.get_editor_key(self.current_editor)?)
+    }
+
+    pub fn set_current_tab_focus(&mut self, focus: Focus) {
+        trace!(target:Self::id(), "Setting current tab {} focus to {:?}", self.current_editor, focus);
+        self.set_tab_focus(focus, self.current_editor)
+    }
+
+    pub fn set_tab_focus(&mut self, focus: Focus, index: usize) {
+        trace!(target:Self::id(), "Setting tab {} focus to {:?}", index, focus);
+        if focus == Focus::Active && index != self.current_editor {
+            // If we are setting another tab to active, disable the current one.
+            trace!(
+                target:Self::id(),
+                "New tab {} focus set to Active; Setting current tab {} to Inactive",
+                index,
+                self.current_editor
+            );
+            self.set_current_tab_focus(Focus::Inactive);
+        }
+        match self.get_editor_key(index) {
+            None => {
+                error!(target:Self::id(), "Failed setting tab focus for invalid key {index}");
+            }
+            Some(key) => match self.editors.get_mut(&key) {
+                None => {
+                    error!(
+                        target:Self::id(),
+                        "Failed to update tab focus at index {} with invalid key: {}",
+                        self.current_editor,
+                        self.tab_order[self.current_editor]
+                    )
+                }
+                Some(editor) => editor.component_state.set_focus(focus),
+            },
+        }
+    }
+
+    pub fn open_tab(&mut self, path: &std::path::PathBuf) -> Result<()> {
+        trace!(target:Self::id(), "Opening new EditorTab with path {:?}", path);
+        if self
+            .editors
+            .contains_key(&path.to_string_lossy().to_string())
+        {
+            warn!(target:Self::id(), "EditorTab already opened with this file");
+            return Ok(());
+        }
+
+        let path_str = path.to_string_lossy().to_string();
+        self.tab_order.push(path_str.clone());
+        let mut editor = Editor::new(path);
+        editor.set_contents(path).context("Failed to open tab")?;
+        self.editors.insert(path_str, editor);
+        self.current_editor = self.tab_order.len() - 1;
+        Ok(())
+    }
+
+    pub fn close_current_tab(&mut self) -> Result<()> {
+        self.close_tab(self.current_editor)
+    }
+
+    pub fn close_tab(&mut self, index: usize) -> Result<()> {
+        let key = self
+            .tab_order
+            .get(index)
+            .ok_or(anyhow!(
+                "Failed to get tab order with invalid index {index}"
+            ))?
+            .to_owned();
+        match self.editors.remove(&key) {
+            None => {
+                error!(target:Self::id(), "Failed to remove editor tab {key} with invalid index {index}")
+            }
+            Some(_) => {
+                self.prev_editor();
+                self.tab_order.remove(index);
+                info!(target:Self::id(), "Closed editor tab {key} at index {index}")
+            }
+        }
+        Ok(())
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.editors.is_empty()
+    }
+
+    pub fn render(&mut self, tabs_area: Rect, editor_area: Rect, buf: &mut Buffer) {
+        // TODO: Only file name is displayed in tab title, so files with the same name in different
+        //    directories will appear confusing.
+        let tab_titles = self.tab_order.iter().map(|t| {
+            std::path::PathBuf::from(t)
+                .file_name()
+                .map(|f| f.to_string_lossy().to_string())
+                .unwrap_or("Unknown".to_string())
+        });
+        // Don't set border color based on ComponentState::focus, the Editor renders the border.
+        Tabs::new(tab_titles)
+            .select(self.current_editor)
+            .divider("|")
+            .block(
+                Block::default()
+                    .borders(Borders::NONE)
+                    .padding(Padding::new(0, 0, 0, 0)),
+            )
+            .highlight_style(Style::default().fg(Color::LightRed))
+            .render(tabs_area, buf);
+        Widget::render(self, editor_area, buf);
+    }
+}
+
+impl Widget for &mut EditorTab {
+    fn render(self, area: Rect, buf: &mut Buffer)
+    where
+        Self: Sized,
+    {
+        if let Some(editor) = self.current_editor_mut() {
+            editor.render(area, buf);
+        }
+    }
+}
+
+impl Component for EditorTab {
+    fn handle_event(&mut self, event: Event) -> Result<Action> {
+        if let Some(key) = event.as_key_event() {
+            let action = self.handle_key_events(key)?;
+            match action {
+                Action::Quit | Action::Handled => return Ok(action),
+                _ => {}
+            }
+        }
+        if let Some(editor) = self.current_editor_mut() {
+            return editor.handle_event(event);
+        }
+        Ok(Action::Noop)
+    }
+
+    fn handle_key_events(&mut self, key: KeyEvent) -> Result<Action> {
+        match key {
+            KeyEvent {
+                code: KeyCode::Char('h'),
+                modifiers: KeyModifiers::ALT,
+                ..
+            }
+            | KeyEvent {
+                code: KeyCode::Left,
+                modifiers: KeyModifiers::ALT,
+                ..
+            } => {
+                self.prev_editor();
+                Ok(Action::Handled)
+            }
+            KeyEvent {
+                code: KeyCode::Char('l'),
+                modifiers: KeyModifiers::ALT,
+                ..
+            }
+            | KeyEvent {
+                code: KeyCode::Right,
+                modifiers: KeyModifiers::ALT,
+                ..
+            } => {
+                self.next_editor();
+                Ok(Action::Handled)
+            }
+            _ => Ok(Action::Noop),
+        }
+    }
+}

src/tui/explorer.rs

@@ -0,0 +1,193 @@
+use crate::tui::component::{Action, Component, ComponentState, Focus, FocusState};
+use anyhow::{Context, Result, bail};
+use log::trace;
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event::{Event, KeyCode, KeyEvent, MouseEvent, MouseEventKind};
+use ratatui::layout::{Alignment, Position, Rect};
+use ratatui::prelude::Style;
+use ratatui::style::{Color, Modifier};
+use ratatui::widgets::{Block, Borders, StatefulWidget, Widget};
+use std::fs;
+use std::path::PathBuf;
+use tui_tree_widget::{Tree, TreeItem, TreeState};
+
+#[derive(Debug)]
+pub struct Explorer<'a> {
+    pub(crate) root_path: PathBuf,
+    tree_items: TreeItem<'a, String>,
+    tree_state: TreeState<String>,
+    pub(crate) component_state: ComponentState,
+}
+
+impl<'a> Explorer<'a> {
+    pub fn id() -> &'static str {
+        "Explorer"
+    }
+
+    pub fn new(path: &PathBuf) -> Result<Self> {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        let explorer = Explorer {
+            root_path: path.to_owned(),
+            tree_items: Self::build_tree_from_path(path.to_owned())?,
+            tree_state: TreeState::default(),
+            component_state: ComponentState::default().with_help_text(concat!(
+                "(↑/k)/(↓/j): Select item | ←/h: Close folder | →/l: Open folder |",
+                " Space: Open / close folder | Enter: Open file in new editor tab"
+            )),
+        };
+        Ok(explorer)
+    }
+
+    fn build_tree_from_path(path: PathBuf) -> Result<TreeItem<'static, String>> {
+        let mut children = vec![];
+        if let Ok(entries) = fs::read_dir(&path) {
+            let mut paths = entries
+                .map(|res| res.map(|e| e.path()))
+                .collect::<Result<Vec<_>, std::io::Error>>()
+                .context(format!(
+                    "Failed to build vector of paths under directory: {:?}",
+                    path
+                ))?;
+            paths.sort();
+            for path in paths {
+                if path.is_dir() {
+                    children.push(Self::build_tree_from_path(path)?);
+                } else {
+                    if let Ok(path) = std::path::absolute(&path) {
+                        let path_str = path.to_string_lossy().to_string();
+                        children.push(TreeItem::new_leaf(
+                            path_str,
+                            path.file_name()
+                                .context("Failed to get file name from path.")?
+                                .to_string_lossy()
+                                .to_string(),
+                        ));
+                    }
+                }
+            }
+        }
+
+        let abs = std::path::absolute(&path)
+            .context(format!(
+                "Failed to find absolute path for TreeItem: {:?}",
+                path
+            ))?
+            .to_string_lossy()
+            .to_string();
+        TreeItem::new(
+            abs,
+            path.file_name()
+                .expect("Failed to get file name from path.")
+                .to_string_lossy()
+                .to_string(),
+            children,
+        )
+        .context("Failed to build tree from path.")
+    }
+
+    pub fn selected(&self) -> Result<String> {
+        if let Some(path) = self.tree_state.selected().last() {
+            return Ok(std::path::absolute(path)?
+                .to_str()
+                .context("Failed to get absolute path to selected TreeItem")?
+                .to_string());
+        }
+        bail!("Failed to get selected TreeItem")
+    }
+}
+
+impl<'a> Widget for &mut Explorer<'a> {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        if let Ok(tree) = Tree::new(&self.tree_items.children()) {
+            let file_name = self.root_path.file_name().unwrap_or("Unknown".as_ref());
+            StatefulWidget::render(
+                tree.block(
+                    Block::default()
+                        .borders(Borders::ALL)
+                        .title(file_name.to_string_lossy())
+                        .border_style(Style::default().fg(self.component_state.get_active_color()))
+                        .title_style(Style::default().fg(Color::Green))
+                        .title_alignment(Alignment::Center),
+                )
+                .highlight_style(
+                    Style::new()
+                        .fg(Color::Black)
+                        .bg(Color::Rgb(57, 59, 64))
+                        .add_modifier(Modifier::BOLD),
+                ),
+                area,
+                buf,
+                &mut self.tree_state,
+            );
+        }
+    }
+}
+
+impl<'a> Component for Explorer<'a> {
+    fn handle_event(&mut self, event: Event) -> Result<Action> {
+        if let Some(key_event) = event.as_key_event() {
+            // Handle events here that should not be passed on to the vim emulation handler.
+            match self.handle_key_events(key_event)? {
+                Action::Handled => return Ok(Action::Handled),
+                Action::OpenTab => return Ok(Action::OpenTab),
+                _ => {}
+            }
+        }
+        if let Some(mouse_event) = event.as_mouse_event() {
+            match self.handle_mouse_events(mouse_event)? {
+                Action::Handled => return Ok(Action::Handled),
+                _ => {}
+            }
+        }
+        Ok(Action::Pass)
+    }
+
+    fn handle_key_events(&mut self, key: KeyEvent) -> Result<Action> {
+        if key.code == KeyCode::Enter {
+            if let Ok(selected) = self.selected() {
+                if PathBuf::from(&selected).is_file() {
+                    return Ok(Action::OpenTab);
+                }
+            }
+            // Otherwise fall through and handle Enter in the next match case.
+        }
+
+        let changed = match key.code {
+            KeyCode::Up | KeyCode::Char('k') => self.tree_state.key_up(),
+            KeyCode::Down | KeyCode::Char('j') => self.tree_state.key_down(),
+            KeyCode::Left | KeyCode::Char('h') => {
+                // Do not call key_left(); Calling it on a closed folder clears the selection.
+                let key = self.tree_state.selected().to_owned();
+                self.tree_state.close(key.as_ref())
+            }
+            KeyCode::Char(' ') | KeyCode::Enter => self
+                .tree_state
+                .toggle(self.tree_state.selected().to_owned()),
+            KeyCode::Right | KeyCode::Char('l') => self.tree_state.key_right(),
+            _ => false,
+        };
+        if changed {
+            return Ok(Action::Handled);
+        }
+        Ok(Action::Noop)
+    }
+
+    fn handle_mouse_events(&mut self, mouse: MouseEvent) -> Result<Action> {
+        let changed = match mouse.kind {
+            MouseEventKind::ScrollDown => self.tree_state.scroll_down(1),
+            MouseEventKind::ScrollUp => self.tree_state.scroll_up(1),
+            MouseEventKind::Down(_button) => self
+                .tree_state
+                .click_at(Position::new(mouse.column, mouse.row)),
+            _ => false,
+        };
+        if changed {
+            return Ok(Action::Handled);
+        }
+        Ok(Action::Noop)
+    }
+
+    fn is_active(&self) -> bool {
+        self.component_state.focus == Focus::Active
+    }
+}

src/tui/logger.rs

@@ -0,0 +1,92 @@
+use crate::tui::component::{Action, Component, ComponentState, Focus, FocusState};
+use log::{LevelFilter, trace};
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event::{Event, KeyCode, KeyEvent};
+use ratatui::layout::Rect;
+use ratatui::style::{Color, Style};
+use ratatui::widgets::Widget;
+use tui_logger::{TuiLoggerLevelOutput, TuiLoggerSmartWidget, TuiWidgetEvent, TuiWidgetState};
+
+/// Any log written as info!(target:self.id(), "message") will work with this logger.
+/// The logger is bound to info!, debug!, error!, trace! macros within Tui::new().
+pub struct Logger {
+    state: TuiWidgetState,
+    pub(crate) component_state: ComponentState,
+}
+
+impl Logger {
+    pub fn id() -> &'static str {
+        "Logger"
+    }
+
+    pub fn new() -> Self {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        let state = TuiWidgetState::new();
+        state.transition(TuiWidgetEvent::HideKey);
+        Self {
+            state: state
+                .set_level_for_target("arboard::platform::linux::x11", LevelFilter::Off)
+                .set_level_for_target("mio::poll", LevelFilter::Off),
+            component_state: ComponentState::default().with_help_text(concat!(
+                "Space: Hide/show logging target selector panel | (↑/k)/(↓/j): Select target |",
+                " (←/h)/(→/l): Display level | f: Focus target | +/-: Filter level |",
+                " v: Toggle filtered targets visibility | PageUp/Down: Scroll | Esc: Cancel scroll"
+            )),
+        }
+    }
+}
+
+impl Widget for &Logger {
+    fn render(self, area: Rect, buf: &mut Buffer)
+    where
+        Self: Sized,
+    {
+        TuiLoggerSmartWidget::default()
+            .border_style(Style::default().fg(self.component_state.get_active_color()))
+            .style_error(Style::default().fg(Color::Red))
+            .style_debug(Style::default().fg(Color::Green))
+            .style_warn(Style::default().fg(Color::Yellow))
+            .style_trace(Style::default().fg(Color::Magenta))
+            .style_info(Style::default().fg(Color::Cyan))
+            .output_separator(':')
+            .output_timestamp(Some("%H:%M:%S".to_string()))
+            .output_level(Some(TuiLoggerLevelOutput::Abbreviated))
+            .output_target(true)
+            .output_file(true)
+            .output_line(true)
+            .state(&self.state)
+            .render(area, buf);
+    }
+}
+
+impl Component for Logger {
+    fn handle_event(&mut self, event: Event) -> anyhow::Result<Action> {
+        if let Some(key_event) = event.as_key_event() {
+            return self.handle_key_events(key_event);
+        }
+        Ok(Action::Noop)
+    }
+
+    fn handle_key_events(&mut self, key: KeyEvent) -> anyhow::Result<Action> {
+        match key.code {
+            KeyCode::Char('v') => self.state.transition(TuiWidgetEvent::SpaceKey),
+            KeyCode::Esc => self.state.transition(TuiWidgetEvent::EscapeKey),
+            KeyCode::PageUp => self.state.transition(TuiWidgetEvent::PrevPageKey),
+            KeyCode::PageDown => self.state.transition(TuiWidgetEvent::NextPageKey),
+            KeyCode::Up | KeyCode::Char('k') => self.state.transition(TuiWidgetEvent::UpKey),
+            KeyCode::Down | KeyCode::Char('j') => self.state.transition(TuiWidgetEvent::DownKey),
+            KeyCode::Left | KeyCode::Char('h') => self.state.transition(TuiWidgetEvent::LeftKey),
+            KeyCode::Right | KeyCode::Char('l') => self.state.transition(TuiWidgetEvent::RightKey),
+            KeyCode::Char('+') => self.state.transition(TuiWidgetEvent::PlusKey),
+            KeyCode::Char('-') => self.state.transition(TuiWidgetEvent::MinusKey),
+            KeyCode::Char(' ') => self.state.transition(TuiWidgetEvent::HideKey),
+            KeyCode::Char('f') => self.state.transition(TuiWidgetEvent::FocusKey),
+            _ => (),
+        }
+        Ok(Action::Pass)
+    }
+
+    fn is_active(&self) -> bool {
+        self.component_state.focus == Focus::Active
+    }
+}

src/tui/menu_bar.rs

@@ -0,0 +1,240 @@
+use crate::tui::component::{Action, Component, ComponentState, FocusState};
+use crate::tui::menu_bar::MenuBarItemOption::{
+    About, CloseTab, Exit, Reload, Save, ShowHideExplorer, ShowHideLogger,
+};
+use log::trace;
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event::{KeyCode, KeyEvent};
+use ratatui::layout::Rect;
+use ratatui::style::{Color, Modifier, Style};
+use ratatui::text::Line;
+use ratatui::widgets::{
+    Block, Borders, Clear, List, ListItem, ListState, StatefulWidget, Tabs, Widget,
+};
+use strum::{EnumIter, FromRepr, IntoEnumIterator};
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, FromRepr, EnumIter)]
+enum MenuBarItem {
+    File,
+    View,
+    Help,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, FromRepr, EnumIter)]
+enum MenuBarItemOption {
+    Save,
+    CloseTab,
+    Reload,
+    Exit,
+    ShowHideExplorer,
+    ShowHideLogger,
+    About,
+}
+
+impl MenuBarItemOption {
+    fn id(&self) -> &str {
+        match self {
+            Save => "Save",
+            Reload => "Reload",
+            Exit => "Exit",
+            ShowHideExplorer => "Show / hide explorer",
+            ShowHideLogger => "Show / hide logger",
+            About => "About",
+            CloseTab => "Close tab",
+        }
+    }
+}
+
+impl MenuBarItem {
+    pub fn next(self) -> Self {
+        let cur = self as usize;
+        let next = cur.saturating_add(1);
+        Self::from_repr(next).unwrap_or(self)
+    }
+
+    pub fn prev(self) -> Self {
+        let cur = self as usize;
+        let prev = cur.saturating_sub(1);
+        Self::from_repr(prev).unwrap_or(self)
+    }
+
+    pub fn id(&self) -> &str {
+        match self {
+            MenuBarItem::File => "File",
+            MenuBarItem::View => "View",
+            MenuBarItem::Help => "Help",
+        }
+    }
+
+    pub fn options(&self) -> &[MenuBarItemOption] {
+        match self {
+            MenuBarItem::File => &[Save, CloseTab, Reload, Exit],
+            MenuBarItem::View => &[ShowHideExplorer, ShowHideLogger],
+            MenuBarItem::Help => &[About],
+        }
+    }
+}
+
+pub struct MenuBar {
+    selected: MenuBarItem,
+    opened: Option<MenuBarItem>,
+    pub(crate) component_state: ComponentState,
+    list_state: ListState,
+}
+
+impl MenuBar {
+    pub fn id() -> &'static str {
+        "MenuBar"
+    }
+
+    const DEFAULT_HELP: &str = "(←/h)/(→/l): Select option | Enter: Choose selection";
+    pub fn new() -> Self {
+        trace!(target:Self::id(), "Building {}", Self::id());
+        Self {
+            selected: MenuBarItem::File,
+            opened: None,
+            component_state: ComponentState::default().with_help_text(Self::DEFAULT_HELP),
+            list_state: ListState::default().with_selected(Some(0)),
+        }
+    }
+
+    fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
+        let titles: Vec<Line> = MenuBarItem::iter()
+            .map(|item| Line::from(item.id().to_owned()))
+            .collect();
+        let tabs_style = Style::default();
+        let highlight_style = if self.opened.is_some() {
+            Style::default().bg(Color::Blue).fg(Color::White)
+        } else {
+            Style::default().bg(Color::Cyan).fg(Color::Black)
+        };
+        Tabs::new(titles)
+            .style(tabs_style)
+            .block(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_style(Style::default().fg(self.component_state.get_active_color())),
+            )
+            .highlight_style(highlight_style)
+            .select(self.selected as usize)
+            .render(area, buf);
+    }
+
+    fn render_drop_down(
+        &mut self,
+        title_bar_anchor: Rect,
+        area: Rect,
+        buf: &mut Buffer,
+        opened: MenuBarItem,
+    ) {
+        let popup_area = Self::rect_under_option(title_bar_anchor, area, 27, 10);
+        Clear::default().render(popup_area, buf);
+        let options = opened.options().iter().map(|i| ListItem::new(i.id()));
+        StatefulWidget::render(
+            List::new(options)
+                .block(Block::bordered().title(self.selected.id()))
+                .highlight_style(
+                    Style::default()
+                        .bg(Color::Blue)
+                        .fg(Color::White)
+                        .add_modifier(Modifier::BOLD),
+                )
+                .highlight_symbol(">> "),
+            popup_area,
+            buf,
+            &mut self.list_state,
+        );
+    }
+
+    fn rect_under_option(anchor: Rect, area: Rect, width: u16, height: u16) -> Rect {
+        let rect = Rect {
+            x: anchor.x,
+            y: anchor.y + anchor.height,
+            width: width.min(area.width),
+            height,
+        };
+        // TODO: X offset for item option? It's fine as-is, but it might look nicer.
+        // trace!(target:Self::id(), "Building Rect under MenuBar popup {}", rect);
+        rect
+    }
+}
+
+impl Widget for &mut MenuBar {
+    fn render(self, area: Rect, buf: &mut Buffer)
+    where
+        Self: Sized,
+    {
+        let title_bar_area = Rect {
+            x: area.x,
+            y: area.y,
+            width: area.width,
+            height: 3,
+        };
+        self.render_title_bar(title_bar_area, buf);
+        if let Some(opened) = self.opened {
+            self.render_drop_down(title_bar_area, area, buf, opened);
+        }
+    }
+}
+
+impl Component for MenuBar {
+    fn handle_key_events(&mut self, key: KeyEvent) -> anyhow::Result<Action> {
+        if self.opened.is_some() {
+            // Keybinds for popup menu.
+            match key.code {
+                KeyCode::Up | KeyCode::Char('k') => {
+                    self.list_state.select_previous();
+                    Ok(Action::Handled)
+                }
+                KeyCode::Down | KeyCode::Char('j') => {
+                    self.list_state.select_next();
+                    Ok(Action::Handled)
+                }
+                KeyCode::Enter => {
+                    if let Some(selected) = self.list_state.selected() {
+                        let selection = self.selected.options()[selected];
+                        return match selection {
+                            Save => Ok(Action::Save),
+                            Exit => Ok(Action::Quit),
+                            Reload => Ok(Action::ReloadFile),
+                            ShowHideExplorer => Ok(Action::ShowHideExplorer),
+                            ShowHideLogger => Ok(Action::ShowHideLogger),
+                            About => Ok(Action::ShowHideAbout),
+                            CloseTab => Ok(Action::CloseTab),
+                        };
+                    }
+                    Ok(Action::Noop)
+                }
+                KeyCode::Esc | KeyCode::Char('q') => {
+                    self.opened = None;
+                    self.component_state.help_text = Self::DEFAULT_HELP.to_string();
+                    self.list_state.select_first();
+                    Ok(Action::Handled)
+                }
+                _ => Ok(Action::Noop),
+            }
+        } else {
+            // Keybinds for title bar.
+            match key.code {
+                KeyCode::Left | KeyCode::Char('h') => {
+                    self.selected = self.selected.prev();
+                    Ok(Action::Handled)
+                }
+                KeyCode::Right | KeyCode::Char('l') => {
+                    self.selected = self.selected.next();
+                    Ok(Action::Handled)
+                }
+                KeyCode::Enter => {
+                    self.opened = Some(self.selected);
+                    self.component_state.help_text = concat!(
+                        "(↑/k)/(↓/j): Select option | Enter: Choose selection |",
+                        " ESC/Q: Close drop-down menu"
+                    )
+                    .to_string();
+                    Ok(Action::Handled)
+                }
+                _ => Ok(Action::Noop),
+            }
+        }
+    }
+}