[tui] Add ComponentOf trait.

I think it will help with fetching a component by type from the
Components vector attached to App?

.gitignore

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

Cargo.toml

@@ -5,9 +5,18 @@ 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"
 
 [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 {
+    .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,27 @@
+use anyhow::Result;
+use cxx_qt_lib::QString;
+
+pub mod colors;
+pub mod filesystem;
+
+pub fn run(root_path: std::path::PathBuf) -> Result<()> {
+    println!("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!("Attempted to open file {} that is not a valid file", path);
+            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,60 @@
-// SPDX-FileCopyrightText: 2025 Klarälvdalens Datakonsult AB, a KDAB Group company <info@kdab.com>
+use anyhow::{Context, Result};
-// SPDX-FileContributor: Leon Matthes <leon.matthes@kdab.com>
+use clap::Parser;
-//
+use ratatui::Terminal;
-// SPDX-License-Identifier: MIT OR Apache-2.0
+use ratatui::backend::CrosstermBackend;
+use std::io::stdout;
+use std::process::{Command, Stdio};
+use crate::tui::Tui;
 
-#[cxx_qt::bridge]
+pub mod gui;
-mod qobject {
+pub mod tui;
-    unsafe extern "C++" {
+/// Command line interface IDE with full GUI and headless modes.
-        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")?,
+        ),
+    };
 
-    unsafe extern "RustQt" {
+    match args.gui {
-        #[qobject]
+        true => gui::run(root_path),
-        #[qml_element]
+        false => match args.tui {
-        #[qproperty(Greeting, greeting)]
+            // Open the TUI editor if requested, otherwise use the QML GUI by default.
-        #[qproperty(Language, language)]
+            true => Ok(Tui::new(root_path)?.start()?),
-        type Greeter = super::GreeterRust;
+            false => {
-
+                // Relaunch the CLIDE GUI in a separate process.
-        #[qinvokable]
+                Command::new(std::env::current_exe()?)
-        fn greet(self: &Greeter) -> QString;
+                    .args(&["--gui", root_path.to_str().unwrap()])
-    }
+                    .stdout(Stdio::null())
-}
+                    .stderr(Stdio::null())
-
+                    .stdin(Stdio::null())
-use qobject::*;
+                    .spawn()?;
-
+                Ok(())
-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!",
-            _ => "🤯",
-        }
-            .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,76 @@
+mod app;
+mod component;
+mod editor;
+mod explorer;
+mod logger;
+
+use anyhow::{Context, Result};
+use log::{LevelFilter, debug};
+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().unwrap())
+            .output_level(Some(TuiLoggerLevelOutput::Abbreviated))
+            .output_file(false)
+            .output_separator(':');
+        set_log_file(file_options);
+        debug!(target:"Tui", "Logging to file: {}", dir.to_str().unwrap());
+
+        Ok(Self {
+            terminal: Terminal::new(CrosstermBackend::new(stdout()))?,
+            root_path,
+        })
+    }
+
+    pub fn start(self) -> Result<()> {
+        println!("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<()> {
+        disable_raw_mode()?;
+        ratatui::crossterm::execute!(
+            stdout(),
+            LeaveAlternateScreen,
+            DisableMouseCapture,
+            DisableBracketedPaste
+        )?;
+        Ok(())
+    }
+}

src/tui/app.rs

@@ -0,0 +1,309 @@
+use crate::tui::component::{Action, Component};
+use crate::tui::editor::Editor;
+use crate::tui::explorer::Explorer;
+use crate::tui::logger::Logger;
+use anyhow::{Context, Result, anyhow, bail};
+use log::{debug, error, info, trace, warn};
+use ratatui::buffer::Buffer;
+use ratatui::crossterm::event;
+use ratatui::crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind, KeyModifiers};
+use ratatui::layout::{Constraint, Direction, Layout, Rect};
+use ratatui::prelude::{Color, Style, Widget};
+use ratatui::widgets::{Block, Borders, Padding, Paragraph, Tabs, Wrap};
+use ratatui::{DefaultTerminal, symbols};
+use std::path::PathBuf;
+use std::time::Duration;
+
+// TODO: Need a way to dynamically run Widget::render on all widgets.
+// TODO: + Need a way to map Rect to Component::id() to position each widget?
+// TODO: Need a way to dynamically run Component methods on all widgets.
+pub enum AppComponents<'a> {
+    AppEditor(Editor),
+    AppExplorer(Explorer<'a>),
+    AppLogger(Logger),
+    AppComponent(Box<dyn Component>),
+}
+
+/// Usage: get_component_mut::<Editor>() OR get_component::<Editor>()
+///
+/// Implementing this trait for each AppComponent allows for easy lookup in the vector.
+trait ComponentOf<T> {
+    fn as_ref(&self) -> Option<&T>;
+    fn as_mut(&mut self) -> Option<&mut T>;
+}
+
+impl<'a> ComponentOf<Logger> for AppComponents<'a> {
+    fn as_ref(&self) -> Option<&Logger> {
+        if let AppComponents::AppLogger(ref e) = *self {
+            return Some(e);
+        }
+        None
+    }
+    fn as_mut(&mut self) -> Option<&mut Logger> {
+        if let AppComponents::AppLogger(ref mut e) = *self {
+            return Some(e);
+        }
+        None
+    }
+}
+
+impl<'a> ComponentOf<Editor> for AppComponents<'a> {
+    fn as_ref(&self) -> Option<&Editor> {
+        if let AppComponents::AppEditor(ref e) = *self {
+            return Some(e);
+        }
+        None
+    }
+    fn as_mut(&mut self) -> Option<&mut Editor> {
+        if let AppComponents::AppEditor(ref mut e) = *self {
+            return Some(e);
+        }
+        None
+    }
+}
+
+impl<'a> ComponentOf<Explorer<'a>> for AppComponents<'a> {
+    fn as_ref(&self) -> Option<&Explorer<'a>> {
+        if let AppComponents::AppExplorer(ref e) = *self {
+            return Some(e);
+        }
+        None
+    }
+    fn as_mut(&mut self) -> Option<&mut Explorer<'a>> {
+        if let AppComponents::AppExplorer(ref mut e) = *self {
+            return Some(e);
+        }
+        None
+    }
+}
+
+pub struct App<'a> {
+    components: Vec<AppComponents<'a>>,
+}
+
+impl<'a> App<'a> {
+    pub fn new(root_path: PathBuf) -> Result<Self> {
+        let mut app = Self {
+            components: vec![
+                AppComponents::AppExplorer(Explorer::new(&root_path)?),
+                AppComponents::AppEditor(Editor::new()),
+                AppComponents::AppLogger(Logger::new()),
+            ],
+        };
+        app.get_component_mut::<Editor>()
+            .unwrap()
+            .set_contents(&root_path.join("src/tui/app.rs"))
+            .context(format!(
+                "Failed to initialize editor contents to path: {}",
+                root_path.to_string_lossy()
+            ))?;
+        Ok(app)
+    }
+
+    fn get_component<T>(&self) -> Option<&T>
+    where
+        AppComponents<'a>: ComponentOf<T>,
+    {
+        self.components.iter().find_map(|c| c.as_ref())
+    }
+
+    fn get_component_mut<T>(&mut self) -> Option<&mut T>
+    where
+        AppComponents<'a>: ComponentOf<T>,
+    {
+        self.components.iter_mut().find_map(|c| c.as_mut())
+    }
+
+    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        loop {
+            self.refresh_editor_contents()
+                .context("Failed to refresh editor contents.")?;
+
+            terminal.draw(|f| {
+                f.render_widget(&mut self, f.area());
+            })?;
+
+            // TODO: Handle events based on which component is active.
+            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_status(&self, area: Rect, buf: &mut Buffer) {
+        // TODO: Status bar should have drop down menus
+        Tabs::new(["File", "Edit", "View", "Help"])
+            .style(Style::default())
+            .block(Block::default().borders(Borders::ALL))
+            .render(area, buf);
+    }
+
+    fn draw_tabs(&self, area: Rect, buf: &mut Buffer) {
+        // Determine the tab title from the current file (or use a fallback).
+        let mut title: Option<&str> = None;
+        if let Some(editor) = self.get_component::<Editor>() {
+            title = editor
+                .file_path
+                .as_ref()
+                .and_then(|p| p.file_name())
+                .and_then(|s| s.to_str())
+        }
+
+        Tabs::new(vec![title.unwrap_or("Unknown")])
+            .divider(symbols::DOT)
+            .block(
+                Block::default()
+                    .borders(Borders::NONE)
+                    .padding(Padding::new(0, 0, 0, 0)),
+            )
+            .highlight_style(Style::default().fg(Color::LightRed))
+            .render(area, buf);
+    }
+
+    /// 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<()> {
+        // Use the currently selected TreeItem or get an absolute path to this source file.
+        let selected_pathbuf = match self.get_component::<Explorer>().unwrap().selected() {
+            Ok(path) => PathBuf::from(path),
+            Err(_) => PathBuf::from(std::path::absolute(file!())?.to_string_lossy().to_string()),
+        };
+        let editor = self
+            .get_component_mut::<Editor>()
+            .context("Failed to get active editor while refreshing contents.")?;
+        if let Some(current_file_path) = editor.file_path.clone() {
+            if selected_pathbuf == current_file_path || !selected_pathbuf.is_file() {
+                return Ok(());
+            }
+            return editor.set_contents(&selected_pathbuf);
+        }
+        bail!("Failed to refresh editor contents")
+    }
+}
+
+// TODO: Separate complex components into their own widgets.
+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),      // status bar
+                Constraint::Percentage(70), // horizontal layout
+                Constraint::Percentage(30), // terminal
+            ])
+            .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_status(vertical[0], buf);
+        self.draw_tabs(editor_layout[0], buf);
+        let id = self.id().to_string();
+        for component in &mut self.components {
+            match component {
+                AppComponents::AppEditor(editor) => editor.render(editor_layout[1], buf),
+                AppComponents::AppExplorer(explorer) => {
+                    explorer
+                        .render(horizontal[0], buf)
+                        .context("Failed to render Explorer")
+                        .unwrap_or_else(|e| error!(target:id.as_str(), "{}", e));
+                }
+                AppComponents::AppLogger(logger) => logger.render(vertical[2], buf),
+                AppComponents::AppComponent(_) => {}
+            }
+        }
+    }
+}
+
+impl<'a> Component for App<'a> {
+    fn id(&self) -> &str {
+        "App"
+    }
+
+    /// TODO: Get active widget with some Component trait function helper?
+    /// trait Component { fn get_state() -> ComponentState; }
+    /// if component.get_state() = ComponentState::Active { component.handle_event(); }
+    ///
+    /// App could then provide helpers for altering Component state based on TUI grouping..
+    ///    (such as editor tabs, file explorer, status bars, etc..)
+    ///
+    /// 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.
+        for component in &mut self.components {
+            let action = match component {
+                AppComponents::AppEditor(editor) => editor.handle_event(event.clone())?,
+                AppComponents::AppExplorer(explorer) => explorer.handle_event(event.clone())?,
+                AppComponents::AppComponent(comp) => comp.handle_event(event.clone())?,
+                AppComponents::AppLogger(logger) => logger.handle_event(event.clone())?,
+            };
+            // Actions returned here abort the input handling iteration.
+            match action {
+                Action::Quit | Action::Handled => return Ok(action),
+                _ => {}
+            }
+        }
+        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('l'),
+                modifiers: KeyModifiers::CONTROL,
+                kind: KeyEventKind::Press,
+                state: _state,
+            } => {
+                // Some example logs for testing.
+                error!(target:self.id(), "an error");
+                warn!(target:self.id(), "a warning");
+                info!(target:self.id(), "a two line info\nsecond line");
+                debug!(target:self.id(), "a debug");
+                trace!(target:self.id(), "a trace");
+                Ok(Action::Noop)
+            }
+            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,47 @@
+#![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,
+}
+
+pub trait Component {
+    /// Returns a unique identifier for the component.
+    /// This is used for lookup in a container of Components.
+    fn id(&self) -> &str;
+
+    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)
+    }
+}

src/tui/editor.rs

@@ -0,0 +1,121 @@
+use crate::tui::component::{Action, Component};
+
+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;
+
+// TODO: Consider using editor-command https://docs.rs/editor-command/latest/editor_command/
+// TODO: Title should be detected programming language name
+// TODO: Content should be file contents
+// TODO: Vimrc should be used
+pub struct Editor {
+    pub state: EditorState,
+    pub event_handler: EditorEventHandler,
+    pub file_path: Option<std::path::PathBuf>,
+    syntax_set: SyntaxSet,
+}
+
+impl Editor {
+    pub fn new() -> Self {
+        Editor {
+            state: EditorState::default(),
+            event_handler: EditorEventHandler::default(),
+            file_path: None,
+            syntax_set: SyntaxSet::load_defaults_nonewlines(),
+        }
+    }
+
+    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);
+        }
+        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 id(&self) -> &str {
+        "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),
+        }
+    }
+}

src/tui/explorer.rs

@@ -0,0 +1,168 @@
+use crate::tui::component::{Action, Component};
+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};
+use std::fs;
+use tui_tree_widget::{Tree, TreeItem, TreeState};
+
+#[derive(Debug)]
+pub struct Explorer<'a> {
+    root_path: std::path::PathBuf,
+    tree_items: TreeItem<'a, String>,
+    tree_state: TreeState<String>,
+}
+
+impl<'a> Explorer<'a> {
+    pub fn new(path: &std::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(),
+        };
+        Ok(explorer)
+    }
+
+    fn build_tree_from_path(path: std::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 render(&mut self, area: Rect, buf: &mut Buffer) -> Result<()> {
+        StatefulWidget::render(
+            Tree::new(&self.tree_items.children())
+                .context("Failed to build file Explorer Tree.")?
+                .style(Style::default())
+                .block(
+                    Block::default()
+                        .borders(Borders::ALL)
+                        .title(
+                            self.root_path
+                                .file_name()
+                                .context("Failed to get file name from path.")?
+                                .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,
+        );
+        Ok(())
+    }
+
+    pub fn selected(&self) -> Result<String> {
+        if let Some(path) = self.tree_state.selected().last() {
+            return Ok(std::path::absolute(path)?.to_str().unwrap().to_string());
+        }
+        bail!("Failed to get selected TreeItem")
+    }
+}
+
+impl<'a> Component for Explorer<'a> {
+    fn id(&self) -> &str {
+        "Explorer"
+    }
+    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),
+                _ => {}
+            }
+        }
+        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> {
+        let changed = match key.code {
+            KeyCode::Up => self.tree_state.key_up(),
+            KeyCode::Char('k') => self.tree_state.key_up(),
+            KeyCode::Down => self.tree_state.key_down(),
+            KeyCode::Char('j') => self.tree_state.key_down(),
+            KeyCode::Left => self.tree_state.key_left(),
+            KeyCode::Char('h') => self.tree_state.key_left(),
+            KeyCode::Right => self.tree_state.key_right(),
+            KeyCode::Char('l') => self.tree_state.key_right(),
+            KeyCode::Enter => self.tree_state.toggle_selected(),
+            _ => 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)
+    }
+}