Update README.

The explorer can be used to open the first tab.

.cargo/config.toml

@@ -0,0 +1,3 @@
+
+[build]
+rustflags = [ "-C", "link-arg=-fuse-ld=lld", ]

README.md

@@ -1,15 +1,10 @@
 # CLIDE
 
-CLIDE is a barebones but extendable IDE written in Rust using the Qt UI framework that supports both full and headless Linux environments.
+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 core application will provide you with a text editor that can be extended with plugins written in Rust.
+The GUI is written in QML compiled through Rust using the cxx-qt crate, while the TUI was implemented using the ratatui crate.
 
-The UI is written in QML and compiled to C++ using `cxx`, which is then linked into the Rust application.
+It's up to you to build your own development environment for your tools. Plugins are planned to be supported in the future for bringing your own language-specific tools or features.
-
+Once you've created your plugin, you can submit a pull request to add a link to the git repository for your plugin to the final section in this README if you'd like to contribute.
-It's up to you to build your own development environment for your tools.
-This project is intended to be a light-weight core application with no language-specific tools or features.
-To add tools for your purposes, create a plugin that implements the `ClidePlugin` trait. (This is currently under development and not yet available.)
-Once you've created your plugin, you can submit a pull request to add your plugin to the final section in this README if you'd like to contribute.
-If this section becomes too large, we may explore other options to distribute plugins.
 
 The following packages must be installed before the application will build.
 In the future, we may provide a minimal installation option that only includes dependencies for the headless TUI.
@@ -24,6 +19,68 @@ And of course, [Rust](https://www.rust-lang.org/tools/install).
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
 ```
 
+## Usage 
+
+To install and run clide
+
+```bash
+git clone https://git.shaunreed.com/shaunrd0/clide
+cd clide
+cargo install --path .
+```
+
+After installation `clide` can be used directly
+
+```bash
+clide --help
+
+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.
+
+Usage: clide [OPTIONS] [PATH]
+
+Arguments:
+  [PATH]  The root directory for the project to open with the clide editor
+
+Options:
+  -t, --tui   Run clide in headless mode
+  -g, --gui   Run the clide GUI in the current process, blocking the terminal and showing all output streams
+  -h, --help  Print help
+```
+
+### TUI
+
+The TUI is implemented using the ratatui crate and has the typical features you would expect from a text editor.
+You can browse your project tree, open / close new editor tabs, and save / reload files.
+Controls for the TUI are listed at the bottom of the window, and update depending on which widget you have focused.
+For now, there are no language-specific features or plugins available for the TUI – it is only a text editor.
+
+To run the TUI, pass the `-t` or `--tui` flags.
+
+```bash
+# With cargo from the project root
+cargo run -- -t
+# Or via clide directly after installation
+clide -t
+```
+
+![image](./resources/tui.png)
+
+### GUI
+
+The GUI is still in development. It is at this point a text viewer, instead of a text editor.
+There are many placeholder buttons and features in the GUI that do nothing when used.
+
+The GUI is run by default when executing the `clide` application.
+
+```bash
+# With cargo from the project root
+cargo run
+# Or via clide directly after installation
+clide
+```
+
 ## Development
 
 It's recommended to use RustRover or Qt Creator for development.

src/main.rs

@@ -6,7 +6,7 @@ use std::process::{Command, Stdio};
 
 pub mod gui;
 pub mod tui;
-/// Command line interface IDE with full GUI and headless modes.
+/// 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)]

src/tui.rs

@@ -1,12 +1,14 @@
+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};
+use log::{LevelFilter, debug, info, trace};
 use ratatui::Terminal;
 use ratatui::backend::CrosstermBackend;
 use ratatui::crossterm::event::{
@@ -27,10 +29,15 @@ pub struct Tui {
 }
 
 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:"Tui", "Logging initialized");
+        debug!(target:Self::id(), "Logging initialized");
 
         let mut dir = env::temp_dir();
         dir.push("clide.log");
@@ -42,7 +49,7 @@ impl Tui {
         .output_file(false)
         .output_separator(':');
         set_log_file(file_options);
-        debug!(target:"Tui", "Logging to file: {dir:?}");
+        debug!(target:Self::id(), "Logging to file: {dir:?}");
 
         Ok(Self {
             terminal: Terminal::new(CrosstermBackend::new(stdout()))?,
@@ -51,7 +58,7 @@ impl Tui {
     }
 
     pub fn start(self) -> Result<()> {
-        info!(target:"Tui", "Starting the TUI editor at {:?}", self.root_path);
+        info!(target:Self::id(), "Starting the TUI editor at {:?}", self.root_path);
         ratatui::crossterm::execute!(
             stdout(),
             EnterAlternateScreen,
@@ -68,7 +75,7 @@ impl Tui {
     }
 
     fn stop() -> Result<()> {
-        info!(target:"Tui", "Stopping the TUI editor");
+        info!(target:Self::id(), "Stopping the TUI editor");
         disable_raw_mode()?;
         ratatui::crossterm::execute!(
             stdout(),

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

@@ -1,28 +1,26 @@
+use crate::tui::about::About;
 use crate::tui::app::AppComponent::{AppEditor, AppExplorer, AppLogger};
-use crate::tui::component::{Action, Component, Focus, FocusState};
+use crate::tui::component::{Action, Component, Focus, FocusState, Visibility, VisibleState};
-use crate::tui::editor::Editor;
+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::{debug, error, info, trace, warn};
+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, Style, Widget};
+use ratatui::prelude::{Color, Widget};
-use ratatui::widgets::{Block, Borders, Padding, Paragraph, Tabs, Wrap};
+use ratatui::widgets::{Paragraph, Wrap};
-use ratatui::{DefaultTerminal, symbols};
 use std::path::PathBuf;
 use std::time::Duration;
 
-// TODO: Need a way to dynamically run Widget::render on all widgets.
+#[derive(Debug, Clone, Copy, PartialEq)]
-// TODO: + Need a way to map Rect to Component::id() to position each widget?
-// TODO: Need a good way to dynamically run Component methods on all widgets.
-#[derive(PartialEq)]
 pub enum AppComponent {
     AppEditor,
     AppExplorer,
@@ -31,11 +29,12 @@ pub enum AppComponent {
 }
 
 pub struct App<'a> {
-    editor: Editor,
+    editor_tabs: EditorTab,
     explorer: Explorer<'a>,
     logger: Logger,
     menu_bar: MenuBar,
     last_active: AppComponent,
+    about: bool,
 }
 
 impl<'a> App<'a> {
@@ -44,34 +43,28 @@ impl<'a> App<'a> {
     }
 
     pub fn new(root_path: PathBuf) -> Result<Self> {
+        trace!(target:Self::id(), "Building {}", Self::id());
         let app = Self {
-            editor: Editor::new(),
+            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<()> {
-        let root_path = self.explorer.root_path.clone();
+        trace!(target:Self::id(), "Starting App");
-        self.editor
-            .set_contents(&root_path.join("src/tui/app.rs"))
-            .context(format!(
-                "Failed to initialize editor contents to path: {root_path:?}"
-            ))?;
-        self.editor.component_state.set_focus(Focus::Active);
         Ok(())
     }
 
     pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
         self.start()?;
+        trace!(target:Self::id(), "Entering App run loop");
         loop {
-            self.refresh_editor_contents()
-                .context("Failed to refresh editor contents.")?;
-
             terminal.draw(|f| {
                 f.render_widget(&mut self, f.area());
             })?;
@@ -92,7 +85,15 @@ impl<'a> App<'a> {
     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 => self.editor.component_state.help_text.clone(),
+            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(),
@@ -111,32 +112,30 @@ impl<'a> App<'a> {
         .render(area, buf);
     }
 
-    fn draw_tabs(&self, area: Rect, buf: &mut Buffer) {
+    fn clear_focus(&mut self) {
-        // Determine the tab title from the current file (or use a fallback).
+        info!(target:Self::id(), "Clearing all widget focus");
-        if let Some(title) = self.editor.file_path.clone() {
+        self.explorer.component_state.set_focus(Focus::Inactive);
-            Tabs::new(vec![
+        self.explorer.component_state.set_focus(Focus::Inactive);
-                title
+        self.logger.component_state.set_focus(Focus::Inactive);
-                    .file_name()
+        self.menu_bar.component_state.set_focus(Focus::Inactive);
-                    .map(|f| f.to_str())
+        match self.editor_tabs.current_editor_mut() {
-                    .unwrap_or(Some("Unknown"))
+            None => {
-                    .unwrap(),
+                error!(target:Self::id(), "Failed to get current Editor while clearing focus")
-            ])
+            }
-            .divider(symbols::DOT)
+            Some(editor) => editor.component_state.set_focus(Focus::Inactive),
-            .block(
-                Block::default()
-                    .borders(Borders::NONE)
-                    .padding(Padding::new(0, 0, 0, 0)),
-            )
-            .highlight_style(Style::default().fg(Color::LightRed))
-            .render(area, buf);
-        } else {
-            error!(target:Self::id(), "Failed to get Editor file_path while drawing Tabs widget.");
         }
     }
 
     fn change_focus(&mut self, focus: AppComponent) {
+        info!(target:Self::id(), "Changing widget focus to {:?}", focus);
+        self.clear_focus();
         match focus {
-            AppEditor => self.editor.component_state.set_focus(Focus::Active),
+            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),
@@ -146,21 +145,28 @@ impl<'a> App<'a> {
 
     /// 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() {
+        // let selected_pathbuf = match self.explorer.selected() {
-            Ok(path) => PathBuf::from(path),
+        //     Ok(path) => PathBuf::from(path),
-            Err(_) => PathBuf::from(std::path::absolute(file!())?.to_string_lossy().to_string()),
+        //     Err(_) => PathBuf::from(std::path::absolute(file!())?.to_string_lossy().to_string()),
-        };
+        // };
-        let current_file_path = self
+        // match self.editor_tabs.current_editor_mut() {
-            .editor
+        //     None => bail!("Failed to get current Editor while refreshing editor contents"),
-            .file_path
+        //     Some(editor) => {
-            .clone()
+        //         let current_file_path = editor
-            .context("Failed to get Editor current file_path")?;
+        //             .file_path
-        if selected_pathbuf == current_file_path || !selected_pathbuf.is_file() {
+        //             .clone()
-            return Ok(());
+        //             .context("Failed to get Editor current file_path")?;
-        }
+        //         if selected_pathbuf == current_file_path || !selected_pathbuf.is_file() {
-        self.editor.set_contents(&selected_pathbuf)
+        //             return Ok(());
+        //         }
+        //         editor.set_contents(&selected_pathbuf)
+        //     }
+        // }
+        Ok(())
     }
 }
 
@@ -169,41 +175,92 @@ impl<'a> Widget for &mut App<'a> {
     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([
+            .constraints(vertical_constraints)
-                Constraint::Length(3),      // top status bar
-                Constraint::Percentage(70), // horizontal layout
-                Constraint::Percentage(30), // terminal
-                Constraint::Length(3),      // bottom status bar
-            ])
             .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([
+            .constraints(horizontal_constraints)
-                Constraint::Max(30), // File explorer with a max width of 30 characters.
-                Constraint::Fill(1), // Editor fills the remaining space.
-            ])
             .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);
+            }
+        }
 
-        let editor_layout = Layout::default()
+        match self.logger.component_state.vis {
-            .direction(Direction::Vertical)
+            // Index 1 of vertical is rendered with the horizontal layout above.
-            .constraints([
+            Visibility::Visible => {
-                Constraint::Length(1), // Editor tabs.
+                self.logger.render(vertical[2], buf);
-                Constraint::Fill(1),   // Editor contents.
+                self.draw_bottom_status(vertical[3], buf);
-            ])
+                // The title bar is rendered last to overlay any popups created for drop-down menus.
-            .split(horizontal[1]);
+                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);
+            }
+        }
 
-        self.draw_bottom_status(vertical[3], buf);
+        if self.about {
-        self.draw_tabs(editor_layout[0], buf);
+            let about_area = area.centered(Constraint::Percentage(50), Constraint::Percentage(45));
-        let id = App::id().to_string();
+            About::new().render(about_area, buf);
-        self.editor.render(editor_layout[1], buf);
+        }
-        self.explorer.render(horizontal[0], buf);
-        self.logger.render(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);
     }
 }
 
@@ -220,32 +277,95 @@ impl<'a> Component for App<'a> {
                 _ => {}
             }
         }
+        // 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) {
-                self.editor.handle_mouse_events(mouse)?;
+                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 events for all components.
+        // Handle actions returned from widgets that may need context on other widgets or app state.
-        let action = match self.last_active {
-            AppEditor => self.editor.handle_event(event)?,
-            AppExplorer => self.explorer.handle_event(event)?,
-            AppLogger => self.logger.handle_event(event)?,
-            AppMenuBar => self.menu_bar.handle_event(event)?,
-        };
         match action {
-            Action::Quit | Action::Handled => return Ok(action),
+            Action::Quit | Action::Handled => Ok(action),
-            Action::Save => self.editor.save()?,
+            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),
         }
-        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'),
@@ -283,19 +403,6 @@ impl<'a> Component for App<'a> {
                 self.change_focus(AppMenuBar);
                 Ok(Action::Handled)
             }
-            KeyEvent {
-                code: KeyCode::Char('l'),
-                modifiers: KeyModifiers::ALT,
-                kind: KeyEventKind::Press,
-                state: _state,
-            } => {
-                error!(target:App::id(), "an error");
-                warn!(target:App::id(), "a warning");
-                info!(target:App::id(), "a two line info\nsecond line");
-                debug!(target:App::id(), "a debug");
-                trace!(target:App::id(), "a trace");
-                Ok(Action::Handled)
-            }
             KeyEvent {
                 code: KeyCode::Char('c'),
                 modifiers: KeyModifiers::CONTROL,

src/tui/component.rs

@@ -1,7 +1,11 @@
 #![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.
@@ -19,6 +23,12 @@ pub enum Action {
 
     /// 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 {
@@ -50,13 +60,20 @@ pub trait Component {
 #[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: Focus::Active,
+            focus: Active,
+            vis: Visibility::Visible,
             help_text: String::new(),
         }
     }
@@ -74,16 +91,27 @@ pub enum Focus {
     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,
         }
     }
@@ -94,8 +122,46 @@ impl FocusState for ComponentState {
 
     fn toggle_focus(&mut self) {
         match self.focus {
-            Focus::Active => self.set_focus(Focus::Inactive),
+            Active => self.set_focus(Inactive),
-            Focus::Inactive => self.set_focus(Focus::Active),
+            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

@@ -1,8 +1,9 @@
-use crate::tui::component::{Action, Component, ComponentState, Focus};
+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};
@@ -23,18 +24,33 @@ impl Editor {
         "Editor"
     }
 
-    pub fn new() -> Self {
+    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: None,
+            file_path: Some(path.to_owned()),
             syntax_set: SyntaxSet::load_defaults_nonewlines(),
-            component_state: ComponentState::default()
+            component_state: ComponentState::default().with_help_text(concat!(
-                .with_help_text("CTRL+S: Save file | Any other input is handled by vim"),
+                "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()
@@ -50,8 +66,10 @@ impl Editor {
 
     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.")
     }
 }
@@ -79,7 +97,8 @@ impl Widget for &mut Editor {
                         .title_style(Style::default().fg(Color::Yellow))
                         .title_alignment(Alignment::Right)
                         .borders(Borders::ALL)
-                        .padding(Padding::new(0, 0, 0, 1)),
+                        .padding(Padding::new(0, 0, 0, 1))
+                        .style(Style::default().fg(self.component_state.get_active_color())),
                 ),
             )
             .syntax_highlighter(SyntaxHighlighter::new("dracula", lang).ok())

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

@@ -1,5 +1,6 @@
-use crate::tui::component::{Action, Component, ComponentState, Focus};
+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};
@@ -23,19 +24,21 @@ impl<'a> Explorer<'a> {
         "Explorer"
     }
 
-    pub fn new(path: &std::path::PathBuf) -> Result<Self> {
+    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(
+            component_state: ComponentState::default().with_help_text(concat!(
-                "(↑/k)/(↓/j): Select item | ←/h: Close folder | →/l/Enter: Open folder",
+                "(↑/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: std::path::PathBuf) -> Result<TreeItem<'static, String>> {
+    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
@@ -98,20 +101,20 @@ impl<'a> Widget for &mut Explorer<'a> {
         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.style(Style::default())
+                tree.block(
-                    .block(
+                    Block::default()
-                        Block::default()
+                        .borders(Borders::ALL)
-                            .borders(Borders::ALL)
+                        .title(file_name.to_string_lossy())
-                            .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_style(Style::default().fg(Color::Green))
-                            .title_alignment(Alignment::Center),
+                        .title_alignment(Alignment::Center),
-                    )
+                )
-                    .highlight_style(
+                .highlight_style(
-                        Style::new()
+                    Style::new()
-                            .fg(Color::Black)
+                        .fg(Color::Black)
-                            .bg(Color::Rgb(57, 59, 64))
+                        .bg(Color::Rgb(57, 59, 64))
-                            .add_modifier(Modifier::BOLD),
+                        .add_modifier(Modifier::BOLD),
-                    ),
+                ),
                 area,
                 buf,
                 &mut self.tree_state,
@@ -126,6 +129,7 @@ impl<'a> Component for Explorer<'a> {
             // 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),
                 _ => {}
             }
         }
@@ -139,6 +143,15 @@ impl<'a> Component for Explorer<'a> {
     }
 
     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(),
@@ -147,8 +160,10 @@ impl<'a> Component for Explorer<'a> {
                 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(),
-            KeyCode::Enter => self.tree_state.toggle_selected(),
             _ => false,
         };
         if changed {

src/tui/logger.rs

@@ -1,4 +1,5 @@
-use crate::tui::component::{Action, Component, ComponentState, Focus};
+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;
@@ -19,10 +20,13 @@ impl Logger {
     }
 
     pub fn new() -> Self {
+        trace!(target:Self::id(), "Building {}", Self::id());
         let state = TuiWidgetState::new();
         state.transition(TuiWidgetEvent::HideKey);
         Self {
-            state,
+            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 |",
@@ -38,6 +42,7 @@ impl Widget for &Logger {
         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))

src/tui/menu_bar.rs

@@ -1,8 +1,8 @@
-use crate::tui::component::Action::Pass;
+use crate::tui::component::{Action, Component, ComponentState, FocusState};
-use crate::tui::component::{Action, Component, ComponentState};
 use crate::tui::menu_bar::MenuBarItemOption::{
-    About, Exit, Reload, Save, ShowHideExplorer, ShowHideLogger,
+    About, CloseTab, Exit, Reload, Save, ShowHideExplorer, ShowHideLogger,
 };
+use log::trace;
 use ratatui::buffer::Buffer;
 use ratatui::crossterm::event::{KeyCode, KeyEvent};
 use ratatui::layout::Rect;
@@ -23,6 +23,7 @@ enum MenuBarItem {
 #[derive(Debug, Clone, Copy, PartialEq, Eq, FromRepr, EnumIter)]
 enum MenuBarItemOption {
     Save,
+    CloseTab,
     Reload,
     Exit,
     ShowHideExplorer,
@@ -33,12 +34,13 @@ enum MenuBarItemOption {
 impl MenuBarItemOption {
     fn id(&self) -> &str {
         match self {
-            MenuBarItemOption::Save => "Save",
+            Save => "Save",
-            MenuBarItemOption::Reload => "Reload",
+            Reload => "Reload",
-            MenuBarItemOption::Exit => "Exit",
+            Exit => "Exit",
-            MenuBarItemOption::ShowHideExplorer => "Show / hide explorer",
+            ShowHideExplorer => "Show / hide explorer",
-            MenuBarItemOption::ShowHideLogger => "Show / hide logger",
+            ShowHideLogger => "Show / hide logger",
-            MenuBarItemOption::About => "About",
+            About => "About",
+            CloseTab => "Close tab",
         }
     }
 }
@@ -66,7 +68,7 @@ impl MenuBarItem {
 
     pub fn options(&self) -> &[MenuBarItemOption] {
         match self {
-            MenuBarItem::File => &[Save, Reload, Exit],
+            MenuBarItem::File => &[Save, CloseTab, Reload, Exit],
             MenuBarItem::View => &[ShowHideExplorer, ShowHideLogger],
             MenuBarItem::Help => &[About],
         }
@@ -81,8 +83,13 @@ pub struct MenuBar {
 }
 
 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,
@@ -103,7 +110,11 @@ impl MenuBar {
         };
         Tabs::new(titles)
             .style(tabs_style)
-            .block(Block::default().borders(Borders::ALL))
+            .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);
@@ -116,7 +127,7 @@ impl MenuBar {
         buf: &mut Buffer,
         opened: MenuBarItem,
     ) {
-        let popup_area = Self::rect_under_option(title_bar_anchor, area, 40, 10);
+        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(
@@ -136,13 +147,15 @@ impl MenuBar {
     }
 
     fn rect_under_option(anchor: Rect, area: Rect, width: u16, height: u16) -> Rect {
-        // TODO: X offset for item option? It's fine as-is, but it might look nicer.
+        let rect = 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
     }
 }
 
@@ -179,14 +192,15 @@ impl Component for MenuBar {
                 }
                 KeyCode::Enter => {
                     if let Some(selected) = self.list_state.selected() {
-                        let seletion = self.selected.options()[selected];
+                        let selection = self.selected.options()[selected];
-                        return match seletion {
+                        return match selection {
                             Save => Ok(Action::Save),
                             Exit => Ok(Action::Quit),
-                            Reload => Ok(Action::Noop),           // TODO
+                            Reload => Ok(Action::ReloadFile),
-                            ShowHideExplorer => Ok(Action::Noop), // TODO
+                            ShowHideExplorer => Ok(Action::ShowHideExplorer),
-                            ShowHideLogger => Ok(Action::Noop),   // TODO
+                            ShowHideLogger => Ok(Action::ShowHideLogger),
-                            About => Ok(Action::Noop),            // TODO
+                            About => Ok(Action::ShowHideAbout),
+                            CloseTab => Ok(Action::CloseTab),
                         };
                     }
                     Ok(Action::Noop)