[tui] Add EditorTab widget.

+ This adds support for tabbed editors wrapped by EditorTab widgets.
+ The Explorer widget now opens new EditorTabs when a file is selected
  with Enter.
+ The same file may not be opened multiple times.
+ Tabs can be switched with ALT+h or ALT+l (or ALT+ arrow keys)
+ Tabs cannot yet be closed :)

Fixes #9

.gitignore

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

Cargo.toml

@@ -5,9 +5,19 @@ edition = "2024"
 
 [dependencies]
 cxx = "1.0.95"
-cxx-qt = "0.7"
-cxx-qt-lib = { version="0.7", features = ["qt_full"] }
+cxx-qt = "0.8.0"
+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,21 @@
 # CLIDE
 
-CLIDE is an IDE written in Rust that supports both full and headless Linux environments.
+CLIDE is a barebones but extendable IDE written in Rust using the Qt UI framework that supports both full and headless Linux environments.
+The core application will provide you with a text editor that can be extended with plugins written in Rust.
+
+The UI is written in QML and compiled to C++ using `cxx`, which is then linked into the Rust application.
+
+It's up to you to build your own development environment for your tools.
+This project is intended to be a light-weight core application with no language-specific tools or features.
+To add tools for your purposes, create a plugin that implements the `ClidePlugin` trait. (This is currently under development and not yet available.)
+Once you've created your plugin, you can submit a pull request to add your plugin to the final section in this README if you'd like to contribute.
+If this section becomes too large, we may explore other options to distribute plugins.
 
 The following packages must be installed before the application will build.
+In the future, we may provide a minimal installation option that only includes dependencies for the headless TUI.
 
 ```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).
@@ -22,10 +32,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 {
-        uri: "test",
-        rust_files: &["src/main.rs"],
-        qml_files: &["qml/main.qml",
-            "qml/Menu/ClideMenu.qml",
-            "qml/Menu/ClideMenuBar.qml",
-            "qml/Menu/ClideMenuBarItem.qml"],
-        ..Default::default()
-      })
+    .qt_module("Gui")
+    .qt_module("Svg")
+    .qt_module("Xml")
+    .files(["src/gui/colors.rs", "src/gui/filesystem.rs"])
     .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>
-// SPDX-FileContributor: Leon Matthes <leon.matthes@kdab.com>
-//
-// SPDX-License-Identifier: MIT OR Apache-2.0
+use crate::tui::Tui;
+use anyhow::{Context, Result};
+use clap::Parser;
+use log::{info, trace};
+use std::process::{Command, Stdio};
 
-#[cxx_qt::bridge]
-mod qobject {
-    unsafe extern "C++" {
-        include!("cxx-qt-lib/qstring.h");
-        type QString = cxx_qt_lib::QString;
-    }
+pub mod gui;
+pub mod tui;
+/// Command line interface IDE with full GUI and headless modes.
+/// If no flags are provided, the GUI editor is launched in a separate process.
+/// If no path is provided, the current directory is used.
+#[derive(Parser, Debug)]
+#[structopt(name = "clide", verbatim_doc_comment)]
+struct Cli {
+    /// The root directory for the project to open with the clide editor.
+    #[arg(value_parser = clap::value_parser!(std::path::PathBuf))]
+    pub path: Option<std::path::PathBuf>,
 
-    #[qenum(Greeter)]
-    pub enum Language {
-        English,
-        German,
-        French,
-    }
+    /// Run clide in headless mode.
+    #[arg(value_name = "tui", short, long)]
+    pub tui: bool,
 
-    #[qenum(Greeter)]
-    pub enum Greeting {
-        Hello,
-        Bye,
-    }
-
-    unsafe extern "RustQt" {
-        #[qobject]
-        #[qml_element]
-        #[qproperty(Greeting, greeting)]
-        #[qproperty(Language, language)]
-        type Greeter = super::GreeterRust;
-
-        #[qinvokable]
-        fn greet(self: &Greeter) -> QString;
-    }
+    /// Run the clide GUI in the current process, blocking the terminal and showing all output streams.
+    #[arg(value_name = "gui", short, long)]
+    pub gui: bool,
 }
 
-use qobject::*;
+fn main() -> Result<()> {
+    let args = Cli::parse();
 
-impl Greeting {
-    fn translate(&self, language: Language) -> String {
-        match (self, language) {
-            (&Greeting::Hello, Language::English) => "Hello, World!",
-            (&Greeting::Hello, Language::German) => "Hallo, Welt!",
-            (&Greeting::Hello, Language::French) => "Bonjour, le monde!",
-            (&Greeting::Bye, Language::English) => "Bye!",
-            (&Greeting::Bye, Language::German) => "Auf Wiedersehen!",
-            (&Greeting::Bye, Language::French) => "Au revoir!",
-            _ => "🤯",
+    let root_path = match args.path {
+        // If the CLI was provided a directory, convert it to absolute.
+        Some(path) => std::path::absolute(path)?,
+        // If no path was provided, use the current directory.
+        None => std::env::current_dir().unwrap_or(
+            // If we can't find the CWD, attempt to open the home directory.
+            dirs::home_dir().context("Failed to obtain home directory")?,
+        ),
+    };
+    info!(target:"main()", "Root path detected: {root_path:?}");
+
+    match args.gui {
+        true => {
+            trace!(target:"main()", "Starting GUI");
+            gui::run(root_path)
         }
-            .to_string()
-    }
-}
-
-pub struct GreeterRust {
-    greeting: Greeting,
-    language: Language,
-}
-
-impl Default for GreeterRust {
-    fn default() -> Self {
-        Self {
-            greeting: Greeting::Hello,
-            language: Language::English,
-        }
-    }
-}
-
-use cxx_qt_lib::QString;
-
-impl qobject::Greeter {
-    fn greet(&self) -> QString {
-        QString::from(self.greeting.translate(self.language))
-    }
-}
-
-fn main() {
-    use cxx_qt_lib::{QGuiApplication, QQmlApplicationEngine, QUrl};
-
-    let mut app = QGuiApplication::new();
-    let mut engine = QQmlApplicationEngine::new();
-
-    if let Some(engine) = engine.as_mut() {
-        engine.load(&QUrl::from("qml/main.qml"));
-    }
-
-    if let Some(app) = app.as_mut() {
-        app.exec();
+        false => match args.tui {
+            // Open the TUI editor if requested, otherwise use the QML GUI by default.
+            true => {
+                trace!(target:"main()", "Starting TUI");
+                Ok(Tui::new(root_path)?.start()?)
+            }
+            false => {
+                trace!(target:"main()", "Starting GUI in a new process");
+                Command::new(std::env::current_exe()?)
+                    .args(&["--gui", root_path.to_str().unwrap()])
+                    .stdout(Stdio::null())
+                    .stderr(Stdio::null())
+                    .stdin(Stdio::null())
+                    .spawn()?;
+                Ok(())
+            }
+        },
     }
 }

src/tui.rs

@@ -0,0 +1,82 @@
+mod app;
+mod component;
+mod editor;
+mod editor_tab;
+mod explorer;
+mod logger;
+mod menu_bar;
+
+use anyhow::{Context, Result};
+use log::{LevelFilter, debug, info};
+use 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 new(root_path: std::path::PathBuf) -> Result<Self> {
+        init_logger(LevelFilter::Trace)?;
+        set_default_level(LevelFilter::Trace);
+        debug!(target:"Tui", "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:"Tui", "Logging to file: {dir:?}");
+
+        Ok(Self {
+            terminal: Terminal::new(CrosstermBackend::new(stdout()))?,
+            root_path,
+        })
+    }
+
+    pub fn start(self) -> Result<()> {
+        info!(target:"Tui", "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:"Tui", "Stopping the TUI editor");
+        disable_raw_mode()?;
+        ratatui::crossterm::execute!(
+            stdout(),
+            LeaveAlternateScreen,
+            DisableMouseCapture,
+            DisableBracketedPaste
+        )?;
+        Ok(())
+    }
+}

src/tui/app.rs

@@ -0,0 +1,311 @@
+use crate::tui::app::AppComponent::{AppEditor, AppExplorer, AppLogger};
+use crate::tui::component::{Action, Component, Focus, FocusState};
+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;
+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;
+
+// TODO: Need a way to dynamically run Widget::render on all widgets.
+// TODO: + Need a way to map Rect to Component::id() to position each widget?
+// TODO: Need a good way to dynamically run Component methods on all widgets.
+#[derive(PartialEq)]
+pub enum AppComponent {
+    AppEditor,
+    AppExplorer,
+    AppLogger,
+    AppMenuBar,
+}
+
+pub struct App<'a> {
+    editor_tabs: EditorTab,
+    explorer: Explorer<'a>,
+    logger: Logger,
+    menu_bar: MenuBar,
+    last_active: AppComponent,
+}
+
+impl<'a> App<'a> {
+    pub fn id() -> &'static str {
+        "App"
+    }
+
+    pub fn new(root_path: PathBuf) -> Result<Self> {
+        let app = Self {
+            editor_tabs: EditorTab::new(&root_path),
+            explorer: Explorer::new(&root_path)?,
+            logger: Logger::new(),
+            menu_bar: MenuBar::new(),
+            last_active: AppEditor,
+        };
+        Ok(app)
+    }
+
+    /// Logic that should be executed once on application startup.
+    pub fn start(&mut self) -> Result<()> {
+        let root_path = self.explorer.root_path.clone();
+        let editor = self
+            .editor_tabs
+            .current_editor_mut()
+            .context("Failed to get current editor in App::start")?;
+        editor
+            .set_contents(&root_path.join("src/tui/app.rs"))
+            .context(format!(
+                "Failed to initialize editor contents to path: {root_path:?}"
+            ))?;
+        editor.component_state.set_focus(Focus::Active);
+        Ok(())
+    }
+
+    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        self.start()?;
+        loop {
+            self.refresh_editor_contents()
+                .context("Failed to refresh editor contents.")?;
+
+            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 => {
+                    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 change_focus(&mut self, focus: AppComponent) {
+        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.
+    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 = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Length(3),      // top status bar
+                Constraint::Percentage(70), // horizontal layout
+                Constraint::Percentage(30), // terminal
+                Constraint::Length(3),      // bottom status bar
+            ])
+            .split(area);
+
+        let horizontal = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Max(30), // File explorer with a max width of 30 characters.
+                Constraint::Fill(1), // Editor fills the remaining space.
+            ])
+            .split(vertical[1]);
+
+        let editor_layout = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Length(1), // Editor tabs.
+                Constraint::Fill(1),   // Editor contents.
+            ])
+            .split(horizontal[1]);
+
+        self.draw_bottom_status(vertical[3], buf);
+        self.editor_tabs
+            .render(editor_layout[0], editor_layout[1], buf);
+        self.explorer.render(horizontal[0], buf);
+        self.logger.render(vertical[2], buf);
+
+        // The title bar is rendered last to overlay any popups created for drop-down menus.
+        self.menu_bar.render(vertical[0], buf);
+    }
+}
+
+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())?,
+        };
+
+        let editor = self
+            .editor_tabs
+            .current_editor_mut()
+            .context("Failed to get current editor while handling App events")?;
+        // Components should always handle mouse events for click interaction.
+        if let Some(mouse) = event.as_mouse_event() {
+            if mouse.kind == MouseEventKind::Down(MouseButton::Left) {
+                editor.handle_mouse_events(mouse)?;
+                self.explorer.handle_mouse_events(mouse)?;
+                self.logger.handle_mouse_events(mouse)?;
+            }
+        }
+
+        match action {
+            Action::Quit | Action::Handled => Ok(action),
+            Action::Save => match editor.save() {
+                Ok(_) => Ok(Action::Handled),
+                Err(_) => {
+                    error!(target:Self::id(), "Failed to save editor contents");
+                    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)
+                }
+            }
+            _ => Ok(Action::Noop),
+        }
+    }
+
+    /// Handles key events for the App Component only.
+    fn handle_key_events(&mut self, key: KeyEvent) -> Result<Action> {
+        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,102 @@
+#![allow(dead_code, unused_variables)]
+
+use anyhow::Result;
+use ratatui::crossterm::event::{Event, KeyEvent, MouseEvent};
+
+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,
+}
+
+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) help_text: String,
+}
+
+impl ComponentState {
+    fn new() -> Self {
+        Self {
+            focus: Focus::Active,
+            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,
+}
+
+pub trait FocusState {
+    fn with_focus(self, focus: Focus) -> Self;
+    fn set_focus(&mut self, focus: Focus);
+    fn toggle_focus(&mut self);
+}
+
+impl FocusState for ComponentState {
+    fn with_focus(self, focus: Focus) -> Self {
+        Self {
+            focus,
+            help_text: self.help_text,
+        }
+    }
+
+    fn set_focus(&mut self, focus: Focus) {
+        self.focus = focus;
+    }
+
+    fn toggle_focus(&mut self) {
+        match self.focus {
+            Focus::Active => self.set_focus(Focus::Inactive),
+            Focus::Inactive => self.set_focus(Focus::Active),
+        }
+    }
+}

src/tui/editor.rs

@@ -0,0 +1,128 @@
+use crate::tui::component::{Action, Component, ComponentState, Focus};
+use anyhow::{Context, Result, bail};
+use edtui::{
+    EditorEventHandler, EditorState, EditorTheme, EditorView, LineNumbers, Lines, SyntaxHighlighter,
+};
+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"
+    }
+
+    // TODO: You shouldnt be able to construct the editor without a path?
+    pub fn new() -> Self {
+        Editor {
+            state: EditorState::default(),
+            event_handler: EditorEventHandler::default(),
+            file_path: None,
+            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 set_contents(&mut self, path: &std::path::PathBuf) -> Result<()> {
+        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 {
+            return std::fs::write(path, self.state.lines.to_string()).map_err(|e| e.into());
+        };
+        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)),
+                ),
+            )
+            .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/explorer.rs

@@ -0,0 +1,188 @@
+use crate::tui::component::{Action, Component, ComponentState, Focus};
+use anyhow::{Context, Result, bail};
+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> {
+        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 |",
+                " Enter: Open 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.style(Style::default())
+                    .block(
+                        Block::default()
+                            .borders(Borders::ALL)
+                            .title(file_name.to_string_lossy())
+                            .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);
+                }
+            }
+            return Ok(Action::Noop);
+        }
+
+        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::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,87 @@
+use crate::tui::component::{Action, Component, ComponentState, Focus};
+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 {
+        let state = TuiWidgetState::new();
+        state.transition(TuiWidgetEvent::HideKey);
+        Self {
+            state,
+            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()
+            .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,225 @@
+use crate::tui::component::{Action, Component, ComponentState};
+use crate::tui::menu_bar::MenuBarItemOption::{
+    About, Exit, Reload, Save, ShowHideExplorer, ShowHideLogger,
+};
+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,
+    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",
+        }
+    }
+}
+
+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, 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 {
+    const DEFAULT_HELP: &str = "(←/h)/(→/l): Select option | Enter: Choose selection";
+    pub fn new() -> Self {
+        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))
+            .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 {
+        // TODO: X offset for item option? It's fine as-is, but it might look nicer.
+        Rect {
+            x: anchor.x,
+            y: anchor.y + anchor.height,
+            width: width.min(area.width),
+            height,
+        }
+    }
+}
+
+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 seletion = self.selected.options()[selected];
+                        return match seletion {
+                            Save => Ok(Action::Save),
+                            Exit => Ok(Action::Quit),
+                            Reload => Ok(Action::Noop),           // TODO
+                            ShowHideExplorer => Ok(Action::Noop), // TODO
+                            ShowHideLogger => Ok(Action::Noop),   // TODO
+                            About => Ok(Action::Noop),            // TODO
+                        };
+                    }
+                    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),
+            }
+        }
+    }
+}