.cargo/config.toml

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

.gitignore

@@ -1,3 +1,4 @@
-/target
+**/target/**
-.qtcreator
+**/.qtcreator/**
-.idea
+**/.idea/**
+**/*.autosave/**

Cargo.toml

@@ -5,9 +5,19 @@ edition = "2024"
 
 [dependencies]
 cxx = "1.0.95"
-cxx-qt = "0.7"
+cxx-qt = "0.8.0"
-cxx-qt-lib = { version="0.7", features = ["qt_full"] }
+cxx-qt-lib = { version = "0.8.0", features = ["qt_full", "qt_gui", "qt_qml"] }
+log = { version = "0.4.27", features = [] }
+dirs = "6.0.0"
+syntect = "5.2.0"
+clap = { version = "4.5.54", features = ["derive"] }
+ratatui = "0.30.0"
+anyhow = "1.0.100"
+tui-tree-widget = "0.24.0"
+tui-logger = "0.18.1"
+edtui = "0.11.1"
+strum = "0.27.2"
 
 [build-dependencies]
 # The link_qt_object_files feature is required for statically linking Qt 6.
-cxx-qt-build = { version = "0.7", features = [ "link_qt_object_files" ] }
+cxx-qt-build = { version = "0.8.0", features = ["link_qt_object_files"] }

README.md

@@ -1,11 +1,16 @@
 # CLIDE
 
-CLIDE is an IDE written in Rust 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 GUI is written in QML compiled through Rust using the cxx-qt crate, while the TUI was implemented using the ratatui crate.
+
+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.
 
 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.
 
 ```bash
-sudo apt install qt6-base-dev qt6-declarative-dev qt6-tools-dev qml6-module-qtquick-controls qml6-module-qtquick-layouts qml6-module-qtquick-window qml6-module-qtqml-workerscript qml6-module-qtquick-templates qml6-module-qtquick
+sudo apt install qt6-base-dev qt6-declarative-dev qt6-tools-dev qml6-module-qtquick-controls qml6-module-qtquick-layouts qml6-module-qtquick-window qml6-module-qtqml-workerscript qml6-module-qtquick-templates qml6-module-qtquick qml6-module-qtquick-dialogs qt6-svg-dev
 ```
 
 And of course, [Rust](https://www.rust-lang.org/tools/install).
@@ -14,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.
@@ -22,10 +89,44 @@ The [Qt Installer](https://www.qt.io/download-qt-installer) will provide the lat
 If using RustRover be sure to set your QML binaries path in the settings menu.
 If Qt was installed to its default directory this will be `$HOME/Qt/6.8.3/gcc_64/bin/`.
 
+Viewing documentation in the web browser is possible, but using Qt Assistant is recommended. 
+It comes with Qt6 when installed. Run the following command to start it.
+
+```bash
+nohup $HOME/Qt/6.8.3/gcc_64/bin/assistant > /dev/null 2>&1 &
+```
+
+If you are looking for an include path from Qt
+
+```bash
+find /usr/include/x86_64-linux-gnu/qt6/ -name QFile*
+
+/usr/include/x86_64-linux-gnu/qt6/QtWidgets/QFileIconProvider
+/usr/include/x86_64-linux-gnu/qt6/QtWidgets/QFileDialog
+/usr/include/x86_64-linux-gnu/qt6/QtGui/QFileSystemModel
+/usr/include/x86_64-linux-gnu/qt6/QtGui/QFileOpenEvent
+/usr/include/x86_64-linux-gnu/qt6/QtCore/QFile
+/usr/include/x86_64-linux-gnu/qt6/QtCore/QFileDevice
+/usr/include/x86_64-linux-gnu/qt6/QtCore/QFileSystemWatcher
+/usr/include/x86_64-linux-gnu/qt6/QtCore/QFileInfoList
+/usr/include/x86_64-linux-gnu/qt6/QtCore/QFileInfo
+/usr/include/x86_64-linux-gnu/qt6/QtCore/QFileSelector
+```
+
+This helped find that QFileSystemModel is in QtGui and not QtCore.
+
 ### Resources
 
 Some helpful links for reading up on QML if you're just getting started.
 
+* [Rust Crates - cxx-qt](https://docs.rs/releases/search?query=cxx_qt)
 * [QML Reference](https://doc.qt.io/qt-6/qmlreference.html)
 * [QML Coding Conventions](https://doc.qt.io/qt-6/qml-codingconventions.html)
 * [All QML Controls Types](https://doc.qt.io/qt-6/qtquick-controls-qmlmodule.html)
+* [KDAB CXX-Qt Book](https://kdab.github.io/cxx-qt/book/)
+* [github.com/KDAB/cxx-qt](https://github.com/KDAB/cxx-qt)
+
+
+### Plugins
+
+TODO: Add a list of plugins here. The first example will be C++ with CMake functionality.

build.rs

@@ -1,21 +1,23 @@
 use cxx_qt_build::{CxxQtBuilder, QmlModule};
 
 fn main() {
-  CxxQtBuilder::new()
+    CxxQtBuilder::new_qml_module(QmlModule::new("clide.module").qml_files(&[
+        "qml/main.qml",
+        "qml/ClideAboutWindow.qml",
+        "qml/ClideTreeView.qml",
+        "qml/ClideProjectView.qml",
+        "qml/ClideEditor.qml",
+        "qml/ClideMenuBar.qml",
+    ]))
     // Link Qt's Network library
     // - Qt Core is always linked
     // - Qt Gui is linked by enabling the qt_gui Cargo feature of cxx-qt-lib.
     // - Qt Qml is linked by enabling the qt_qml Cargo feature of cxx-qt-lib.
     // - Qt Qml requires linking Qt Network on macOS
     .qt_module("Network")
-      .qml_module(QmlModule {
+    .qt_module("Gui")
-        uri: "test",
+    .qt_module("Svg")
-        rust_files: &["src/main.rs"],
+    .qt_module("Xml")
-        qml_files: &["qml/main.qml",
+    .files(["src/gui/colors.rs", "src/gui/filesystem.rs"])
-            "qml/Menu/ClideMenu.qml",
-            "qml/Menu/ClideMenuBar.qml",
-            "qml/Menu/ClideMenuBarItem.qml"],
-        ..Default::default()
-      })
     .build();
 }

qml/ClideAboutWindow.qml

@@ -0,0 +1,73 @@
+// TODO: Header
+
+import QtQuick
+import QtQuick.Controls.Basic
+
+import clide.module 1.0
+
+ApplicationWindow {
+    id: root
+    width: 450
+    height: 350
+    // Create the window with no frame and keep it on top.
+    flags: Qt.Window | Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
+    color: RustColors.gutter
+
+    // Hide the window when it loses focus.
+    onActiveChanged: {
+        if (!active) {
+            root.visible = false;
+        }
+    }
+
+    // Kilroy logo.
+    Image {
+        id: logo
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: 20
+
+        source: "../icons/kilroy-256.png"
+        sourceSize.width: 80
+        sourceSize.height: 80
+        fillMode: Image.PreserveAspectFit
+
+        smooth: true
+        antialiasing: true
+        asynchronous: true
+    }
+
+    ScrollView {
+        anchors.top: logo.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 20
+
+        TextArea {
+            selectedTextColor: RustColors.editor_highlighted_text
+            selectionColor: RustColors.editor_highlight
+            horizontalAlignment: Text.AlignHCenter
+            textFormat: Text.RichText
+
+            text: qsTr("<h3>About CLIDE</h3>"
+                + "<p>A simple text editor written in Rust and QML using CXX-Qt.</p>"
+                + "<p>Personal website <a href=\"http://shaunreed.com\">shaunreed.com</a></p>"
+                + "<p>Project notes <a href=\"http://knoats.com\">knoats.com</a></p>"
+                + "<p>This project is developed at <a href=\"http://git.shaunreed.com/shaunrd0/clide\">git.shaunreed.com</a></p>"
+                + "<p><a href=\"https://github.com/KDAB/cxx-qt\">KDAB CXX-Qt repository</a></p>"
+                + "<p>Copyright (C) 2025 Shaun Reed, all rights reserved.</p>")
+            color: RustColors.editor_text
+            wrapMode: Text.WordWrap
+            readOnly: true
+            antialiasing: true
+            background: null
+
+            onLinkActivated: function (link) {
+                Qt.openUrlExternally(link)
+            }
+        }
+    }
+}

qml/ClideEditor.qml

@@ -0,0 +1,206 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import clide.module 1.0
+
+SplitView {
+    id: root
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    orientation: Qt.Vertical
+
+    // The path to the file to show in the text editor.
+    // This is updated by a signal caught within ClideProjectView.
+    // Initialized by the Default trait for the Rust QML singleton FileSystem.
+    required property string filePath;
+
+    // Customized handle to drag between the Editor and the Console.
+    handle: Rectangle {
+        border.color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
+        color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
+        implicitHeight: 8
+        radius: 2.5
+
+        // Execute these behaviors when the color is changed.
+        Behavior on color {
+            ColorAnimation {
+                duration: 400
+            }
+        }
+    }
+    RowLayout {
+        // We use a flickable to synchronize the position of the editor and
+        // the line numbers. This is necessary because the line numbers can
+        // extend the available height.
+        Flickable {
+            id: lineNumbers
+            Layout.fillHeight: true
+            Layout.fillWidth: false
+            // Calculating the width correctly is important as the number grows.
+            // We need to ensure space required to show N line number digits.
+            // We use log10 to find how many digits are needed in a line number.
+            // log10(9) ~= .95; log10(10) = 1.0; log10(100) = 2.0  ...etc
+            // We +1 to ensure space for at least 1 digit, as floor(1.95) = 1.
+            // The +10 is additional spacing and can be adjusted.
+            Layout.preferredWidth: fontMetrics.averageCharacterWidth * (Math.floor(Math.log10(textArea.lineCount)) + 1) + 10
+            contentY: editorFlickable.contentY
+            interactive: false
+
+            Column {
+                anchors.fill: parent
+                topPadding: textArea.topPadding
+
+                Repeater {
+                    id: repeatedLineNumbers
+                    // TODO: Bug where text wrapping shows as new line number.
+                    model: textArea.lineCount
+
+                    // This Item is used for each line number in the gutter.
+                    delegate: Item {
+                        // Calculates the height of each line in the text area.
+                        height: textArea.contentHeight / textArea.lineCount
+                        width: parent.width
+
+                        required property int index
+
+                        // Show the line number.
+                        Label {
+                            id: numbers
+                            color: RustColors.linenumber
+                            font: textArea.font
+                            height: parent.height
+                            horizontalAlignment: Text.AlignLeft
+                            text: parent.index + 1
+                            verticalAlignment: Text.AlignVCenter
+                            width: parent.width - indicator.width
+                        }
+                        // Draw edge along the right side of the line number.
+                        Rectangle {
+                            id: indicator
+                            anchors.left: numbers.right
+                            color: RustColors.linenumber
+                            height: parent.height
+                            width: 1
+                        }
+                    }
+                }
+            }
+        }
+        Flickable {
+            id: editorFlickable
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            boundsBehavior: Flickable.StopAtBounds
+            height: 650
+
+            ScrollBar.horizontal: MyScrollBar {
+            }
+            ScrollBar.vertical: MyScrollBar {
+            }
+
+            TextArea.flickable: TextArea {
+                id: textArea
+                focus: true
+                persistentSelection: true
+                antialiasing: true
+                selectByMouse: true
+                selectionColor: RustColors.editor_highlight
+                selectedTextColor: RustColors.editor_highlighted_text
+                textFormat: Qt.AutoText
+                wrapMode: TextArea.Wrap
+                text: FileSystem.readFile(root.filePath)
+
+                onLinkActivated: function (link) {
+                    Qt.openUrlExternally(link);
+                }
+
+                // TODO: Handle saving
+                // Component.onCompleted: {
+                //     if (Qt.application.arguments.length === 2)
+                //         textDocument.source = "file:" + Qt.application.arguments[1]
+                //     else
+                //         textDocument.source = "qrc:/texteditor.html"
+                // }
+                // textDocument.onStatusChanged: {
+                //     // a message lookup table using computed properties:
+                //     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
+                //     const statusMessages = {
+                //         [ TextDocument.ReadError ]: qsTr("Failed to load “%1”"),
+                //         [ TextDocument.WriteError ]: qsTr("Failed to save “%1”"),
+                //         [ TextDocument.NonLocalFileError ]: qsTr("Not a local file: “%1”"),
+                //     }
+                //     const err = statusMessages[textDocument.status]
+                //     if (err) {
+                //         errorDialog.text = err.arg(textDocument.source)
+                //         errorDialog.open()
+                //     }
+                // }
+            }
+
+            FontMetrics {
+                id: fontMetrics
+
+                font: textArea.font
+            }
+        }
+    }
+    TextArea {
+        id: areaConsole
+
+        height: 100
+        placeholderText: qsTr("Placeholder for bash terminal.")
+        placeholderTextColor: "white"
+        readOnly: true
+        wrapMode: TextArea.Wrap
+        background: Rectangle {
+            color: RustColors.editor_background
+            implicitHeight: 100
+            // border.color: control.enabled ? RustColors.active : RustColors.inactive
+        }
+    }
+
+    // We use an inline component to customize the horizontal and vertical
+    // scroll-bars. This is convenient when the component is only used in one file.
+    component MyScrollBar: ScrollBar {
+        id: scrollBar
+
+        // Scroll bar gutter
+        background: Rectangle {
+            implicitHeight: scrollBar.interactive ? 8 : 4
+            implicitWidth: scrollBar.interactive ? 8 : 4
+            color: RustColors.scrollbar_gutter
+
+            // Fade the scrollbar gutter when inactive.
+            opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.2
+            Behavior on opacity {
+                OpacityAnimator {
+                    duration: 500
+                }
+            }
+        }
+
+        // Scroll bar
+        contentItem: Rectangle {
+            implicitHeight: scrollBar.interactive ? 8 : 4
+            implicitWidth: scrollBar.interactive ? 8 : 4
+
+            // If we don't need a scrollbar, fallback to the gutter color.
+            // If the scrollbar is required change it's color based on activity.
+            color: scrollBar.size < 1.0 ? scrollBar.active ? RustColors.scrollbar_active : RustColors.scrollbar : RustColors.scrollbar_gutter
+            // Smooth transition between color changes based on the state above.
+            Behavior on color {
+                ColorAnimation {
+                    duration: 1000
+                }
+            }
+            // Fade the scrollbar when inactive.
+            opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.35
+            Behavior on opacity {
+                OpacityAnimator {
+                    duration: 500
+                }
+            }
+        }
+    }
+}

qml/ClideMenuBar.qml

@@ -1,11 +1,42 @@
 import QtQuick
 import QtQuick.Controls
 
+import clide.module 1.0
+
 MenuBar {
+    // Base settings for each Menu.
+    component ClideMenu : Menu {
         background: Rectangle {
-        color: "#3b3e40"  // Dark background like CLion
+            color: RustColors.menubar
+            implicitWidth: 100
+            radius: 2
+        }
     }
 
+    // Base settings for each MenuItem.
+    component ClideMenuItem : MenuItem {
+        id: root
+
+        background: Rectangle {
+            color: root.hovered ? RustColors.hovered : RustColors.unhovered
+            radius: 2.5
+        }
+        contentItem: IconLabel {
+            color: "black"
+            font.family: "Helvetica"
+            text: root.text
+        }
+    }
+
+    // Background for this MenuBar.
+    background: Rectangle {
+        color: RustColors.menubar
+        border.color: RustColors.menubar_border
+    }
+
+
+    //
+    // File Menu
     Action {
         id: actionNewProject
 
@@ -25,32 +56,37 @@ MenuBar {
         id: actionExit
 
         text: qsTr("&Exit")
+
         onTriggered: Qt.quit()
     }
     ClideMenu {
         title: qsTr("&File")
 
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionNewProject
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionOpen
+            onTriggered: FileSystem.setDirectory(FileSystem.filePath)
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionSave
         }
         MenuSeparator {
             background: Rectangle {
                 border.color: color
-                color: "#3c3f41"
+                color: RustColors.menubar_border
                 implicitHeight: 3
                 implicitWidth: 200
             }
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionExit
         }
     }
+
+    //
+    // Edit Menu
     Action {
         id: actionUndo
 
@@ -79,22 +115,25 @@ MenuBar {
     ClideMenu {
         title: qsTr("&Edit")
 
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionUndo
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionRedo
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionCut
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionCopy
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionPaste
         }
     }
+
+    //
+    // View Menu
     Action {
         id: actionToolWindows
 
@@ -108,13 +147,20 @@ MenuBar {
     ClideMenu {
         title: qsTr("&View")
 
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionToolWindows
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionAppearance
         }
     }
+
+    //
+    // Help Menu
+    ClideAboutWindow {
+        id: clideAbout
+    }
+
     Action {
         id: actionDocumentation
 
@@ -122,16 +168,18 @@ MenuBar {
     }
     Action {
         id: actionAbout
+        // Toggle the about window with the menu item is clicked.
+        onTriggered: clideAbout.visible = !clideAbout.visible
 
         text: qsTr("&About")
     }
     ClideMenu {
         title: qsTr("&Help")
 
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionDocumentation
         }
-        ClideMenuBarItem {
+        ClideMenuItem {
             action: actionAbout
         }
     }

qml/ClideProjectView.qml

@@ -0,0 +1,55 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import clide.module 1.0
+
+SplitView {
+    id: root
+
+    // Path to the file selected in the tree view.
+    default property string selectedFilePath: FileSystem.filePath;
+
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    anchors.fill: parent
+
+    // Customized handle to drag between the Navigation and the Editor.
+    handle: Rectangle {
+        id: verticalSplitHandle
+        border.color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
+        color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
+        implicitWidth: 8
+        radius: 2.5
+
+        // Execute these behaviors when the color is changed.
+        Behavior on color {
+            ColorAnimation {
+                duration: 400
+            }
+        }
+    }
+
+    Rectangle {
+        id: navigationView
+        color: RustColors.explorer_background
+
+        SplitView.fillHeight: true
+        SplitView.minimumWidth: 0
+        SplitView.preferredWidth: 200
+        SplitView.maximumWidth: 250
+
+        StackLayout {
+            anchors.fill: parent
+            ClideTreeView {
+                id: clideTreeView
+                onFileClicked: path => root.selectedFilePath = path
+            }
+        }
+    }
+    ClideEditor {
+        SplitView.fillWidth: true
+        // Initialize using the Default trait in Rust QML singleton FileSystem.
+        filePath: root.selectedFilePath
+    }
+}

qml/ClideTreeView.qml

@@ -0,0 +1,150 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import clide.module 1.0
+
+Rectangle {
+    id: root
+    color: RustColors.explorer_background
+
+    signal fileClicked(string filePath)
+
+    TreeView {
+        id: fileSystemTreeView
+        anchors.margins: 15
+
+        // rootIndex: FileSystem.rootIndex
+        property int lastIndex: -1
+
+        model: FileSystem
+        anchors.fill: parent
+        boundsBehavior: Flickable.StopAtBounds
+        boundsMovement: Flickable.StopAtBounds
+        clip: true
+
+        Component.onCompleted: {
+            FileSystem.setDirectory(FileSystem.filePath)
+            fileSystemTreeView.expandRecursively(0, 4)
+        }
+
+        // The delegate represents a single entry in the filesystem.
+        delegate: TreeViewDelegate {
+            id: treeDelegate
+            indentation: 8
+            implicitWidth: fileSystemTreeView.width > 0 ? fileSystemTreeView.width : 250
+            implicitHeight: 25
+
+            required property int index
+            required property url filePath
+            required property string fileName
+
+            indicator: Image {
+                id: directoryIcon
+
+                x: treeDelegate.leftMargin + (treeDelegate.depth * treeDelegate.indentation)
+                anchors.verticalCenter: parent.verticalCenter
+                source: {
+                    let folderOpen = "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z\"/></svg>";
+                    let folderClosed = "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z\"/></svg>";
+                    let file = "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 288c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128z\"/></svg>";
+                    // If the item has children, it's a directory.
+                    if (treeDelegate.hasChildren) {
+                        return treeDelegate.expanded ?
+                            folderOpen : folderClosed;
+                    } else {
+                        return file
+                    }
+                }
+                sourceSize.width: 15
+                sourceSize.height: 15
+                fillMode: Image.PreserveAspectFit
+
+                smooth: true
+                antialiasing: true
+                asynchronous: true
+            }
+
+            contentItem: Text {
+                text: treeDelegate.fileName
+                color: RustColors.explorer_text
+            }
+
+            background: Rectangle {
+                // TODO: Fix flickering from color transition on states here.
+                color: (treeDelegate.index === fileSystemTreeView.lastIndex)
+                    ? RustColors.explorer_text_selected
+                    : (hoverHandler.hovered ? RustColors.explorer_hovered : "transparent")
+                radius: 2.5
+                opacity: hoverHandler.hovered ? 0.75 : 1.0
+
+                Behavior on color {
+                    ColorAnimation {
+                        duration: 300
+                    }
+                }
+            }
+
+            HoverHandler {
+                id: hoverHandler
+            }
+
+            TapHandler {
+                acceptedButtons: Qt.LeftButton | Qt.RightButton
+                onSingleTapped: (eventPoint, button) => {
+                    switch (button) {
+                        case Qt.LeftButton:
+                            fileSystemTreeView.toggleExpanded(treeDelegate.row)
+                            fileSystemTreeView.lastIndex = treeDelegate.index
+                            // If this model item doesn't have children, it means it's
+                            // representing a file.
+                            if (!treeDelegate.hasChildren)
+                                root.fileClicked(treeDelegate.filePath)
+                            break;
+                        case Qt.RightButton:
+                            if (treeDelegate.hasChildren)
+                                contextMenu.popup();
+                            break;
+                    }
+                }
+            }
+
+            Menu {
+                id: contextMenu
+                Action {
+                    text: qsTr("Set as root index")
+                    onTriggered: {
+                        console.log("Setting directory: " + treeDelegate.filePath)
+                        FileSystem.setDirectory(treeDelegate.filePath)
+                    }
+                }
+                Action {
+                    text: qsTr("Reset root index")
+                    onTriggered: {
+                        FileSystem.setDirectory("")
+                    }
+                }
+            }
+        }
+
+        // Provide our own custom ScrollIndicator for the TreeView.
+        ScrollIndicator.vertical: ScrollIndicator {
+            active: true
+            implicitWidth: 15
+
+            contentItem: Rectangle {
+                implicitWidth: 6
+                implicitHeight: 6
+
+                color: RustColors.scrollbar
+                opacity: fileSystemTreeView.movingVertically ? 0.5 : 0.0
+
+                Behavior on opacity {
+                    OpacityAnimator {
+                        duration: 500
+                    }
+                }
+            }
+        }
+    }
+}

qml/Menu/ClideMenu.qml

@@ -1,10 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-
-Menu {
-    background: Rectangle {
-        color: "#3c3f41"
-        implicitWidth: 200
-        radius: 2
-    }
-}

qml/Menu/ClideMenuBarItem.qml

@@ -1,16 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-
-MenuItem {
-    id: root
-
-    background: Rectangle {
-        color: root.hovered ? "#4b4f51" : "#3c3f41"  // Hover effect
-        radius: 2.5
-    }
-    contentItem: IconLabel {
-        color: "white"
-        font.family: "Helvetica"
-        text: root.text
-    }
-}

qml/main.qml

@@ -1,10 +1,13 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Dialogs
 
-import "Menu"
+import clide.module 1.0
 
 ApplicationWindow {
+    id: appWindow
+
     height: 800
     title: "CLIDE"
     visible: true
@@ -15,6 +18,15 @@ ApplicationWindow {
 
     Rectangle {
         anchors.fill: parent
-        color: "#1e1f22"  // Dark background
+        color: RustColors.gutter
+    }
+
+    MessageDialog {
+        id: errorDialog
+
+        title: qsTr("Error")
+    }
+    ClideProjectView {
     }
 }
+

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>
+use crate::tui::Tui;
-// SPDX-FileContributor: Leon Matthes <leon.matthes@kdab.com>
+use anyhow::{Context, Result};
-//
+use clap::Parser;
-// SPDX-License-Identifier: MIT OR Apache-2.0
+use log::{info, trace};
+use std::process::{Command, Stdio};
 
-#[cxx_qt::bridge]
+pub mod gui;
-mod qobject {
+pub mod tui;
-    unsafe extern "C++" {
+/// Extendable command-line driven development environment written in Rust using the Qt UI framework.
-        include!("cxx-qt-lib/qstring.h");
+/// If no flags are provided, the GUI editor is launched in a separate process.
-        type QString = cxx_qt_lib::QString;
+/// 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>,
+
+    /// Run clide in headless mode.
+    #[arg(value_name = "tui", short, long)]
+    pub tui: bool,
+
+    /// 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,
 }
 
-    #[qenum(Greeter)]
+fn main() -> Result<()> {
-    pub enum Language {
+    let args = Cli::parse();
-        English,
-        German,
-        French,
-    }
 
-    #[qenum(Greeter)]
+    let root_path = match args.path {
-    pub enum Greeting {
+        // If the CLI was provided a directory, convert it to absolute.
-        Hello,
+        Some(path) => std::path::absolute(path)?,
-        Bye,
+        // 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:?}");
 
-    unsafe extern "RustQt" {
+    match args.gui {
-        #[qobject]
+        true => {
-        #[qml_element]
+            trace!(target:"main()", "Starting GUI");
-        #[qproperty(Greeting, greeting)]
+            gui::run(root_path)
-        #[qproperty(Language, language)]
+        }
-        type Greeter = super::GreeterRust;
+        false => match args.tui {
-
+            // Open the TUI editor if requested, otherwise use the QML GUI by default.
-        #[qinvokable]
+            true => {
-        fn greet(self: &Greeter) -> QString;
+                trace!(target:"main()", "Starting TUI");
-    }
+                Ok(Tui::new(root_path)?.start()?)
-}
+            }
-
+            false => {
-use qobject::*;
+                trace!(target:"main()", "Starting GUI in a new process");
-
+                Command::new(std::env::current_exe()?)
-impl Greeting {
+                    .args(&["--gui", root_path.to_str().unwrap()])
-    fn translate(&self, language: Language) -> String {
+                    .stdout(Stdio::null())
-        match (self, language) {
+                    .stderr(Stdio::null())
-            (&Greeting::Hello, Language::English) => "Hello, World!",
+                    .stdin(Stdio::null())
-            (&Greeting::Hello, Language::German) => "Hallo, Welt!",
+                    .spawn()?;
-            (&Greeting::Hello, Language::French) => "Bonjour, le monde!",
+                Ok(())
-            (&Greeting::Bye, Language::English) => "Bye!",
+            }
-            (&Greeting::Bye, Language::German) => "Auf Wiedersehen!",
+        },
-            (&Greeting::Bye, Language::French) => "Au revoir!",
-            _ => "🤯",
-        }
-            .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();
     }
 }

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),
+            }
+        }
+    }
+}