WIP

README.md

@@ -107,8 +107,6 @@ cargo run
 clide
 ```
 
-![image](./resources/gui.png)
-
 ## Development
 
 It's recommended to use RustRover or Qt Creator for development.

build.rs

@@ -2,21 +2,20 @@ use cxx_qt_build::{CxxQtBuilder, QmlModule};
 
 fn main() {
     CxxQtBuilder::new_qml_module(QmlModule::new("clide.module").qml_files(&[
-        "qml/ClideApplicationView.qml",
-        "qml/ClideEditorView.qml",
-        "qml/ClideExplorerView.qml",
-        "qml/ClideTreeView.qml",
-        "qml/Components/ClideAboutWindow.qml",
-        "qml/Components/ClideBreadCrumbs.qml",
-        "qml/Components/ClideEditor.qml",
-        "qml/Components/ClideHandle.qml",
-        "qml/Components/ClideLogger.qml",
-        "qml/Components/ClideMenu.qml",
-        "qml/Components/ClideMenuBar.qml",
-        "qml/Components/ClideMenuItem.qml",
-        "qml/Components/ClideScrollBar.qml",
-        "qml/Logger/Logger.qml",
         "qml/main.qml",
+        "qml/ClideAboutWindow.qml",
+        "qml/ClideTreeView.qml",
+        "qml/ClideProjectView.qml",
+        "qml/ClideEditor.qml",
+        "qml/ClideEditorView.qml",
+        "qml/ClideMenuBar.qml",
+        "qml/ClideLogger.qml",
+        "qml/Components/ClideScrollBar.qml",
+        "qml/Components/ClideHandle.qml",
+        "qml/Components/ClideMenu.qml",
+        "qml/Components/ClideMenuItem.qml",
+        "qml/Components/ClideBreadCrumbs.qml",
+        "qml/Logger/Logger.qml",
     ]))
     // Link Qt's Network library
     // - Qt Core is always linked

qml/ClideApplicationView.qml

@@ -1,46 +0,0 @@
-// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
-//
-// SPDX-License-Identifier: GNU General Public License v3.0 or later
-
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-
-import clide.module 1.0
-import Logger 1.0
-
-SplitView {
-    id: root
-
-    // Path to the directory of the project opened in clide.
-    required property string projectDir
-
-    anchors.fill: parent
-
-    // Customized handle to drag between the Navigation and the Editor.
-    handle: ClideHandle {
-        hovered: SplitHandle.hovered
-        pressed: SplitHandle.pressed
-    }
-
-    ClideExplorerView {
-        SplitView.fillHeight: true
-        SplitView.preferredWidth: 200
-        projectDir: root.projectDir
-
-        // Open files when clicked in the explorer.
-        onFileClicked: path => {
-            Logger.trace("Setting editor path from ClideExplorerView signal: " + path)
-            clideEditorView.filePath = path;
-        }
-    }
-    ClideEditorView {
-        id: clideEditorView
-
-        SplitView.fillHeight: true
-        SplitView.fillWidth: true
-        // Provide a path to the file currently open in the text editor.
-        // Initialized using the Default trait in Rust QML singleton FileSystem.
-        filePath: FileSystem.filePath
-    }
-}

qml/ClideEditor.qml

@@ -0,0 +1,136 @@
+// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
+//
+// SPDX-License-Identifier: GNU General Public License v3.0 or later
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import clide.module 1.0
+import Logger 1.0
+
+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 {
+                    required property int index
+
+                    // Calculates the height of each line in the text area.
+                    height: textArea.contentHeight / textArea.lineCount
+                    width: parent.width
+
+                    // 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
+
+                        background: Rectangle {
+                            color: RustColors.terminal_background
+                        }
+                    }
+                    // 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: ClideScrollBar {
+        }
+        ScrollBar.vertical: ClideScrollBar {
+        }
+        TextArea.flickable: TextArea {
+            id: textArea
+
+            antialiasing: true
+            focus: true
+            persistentSelection: true
+            selectByMouse: true
+            selectedTextColor: RustColors.editor_highlighted_text
+            selectionColor: RustColors.editor_highlight
+            text: FileSystem.readFile(root.filePath)
+            textFormat: Qt.AutoText
+            wrapMode: TextArea.Wrap
+
+            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
+        }
+    }
+}

qml/ClideEditorView.qml

@@ -9,41 +9,38 @@ import QtQuick.Layouts
 import clide.module 1.0
 import Logger 1.0
 
-Rectangle {
+SplitView {
     id: root
 
     // The path to the file to show in the text editor.
-    // This is updated by a signal caught within ClideApplicationView.
+    // This is updated by a signal caught within ClideProjectView.
+    // Initialized by the Default trait for the Rust QML singleton FileSystem.
     required property string filePath
 
-    clip: true
-    color: "transparent"
-    radius: 20
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    orientation: Qt.Vertical
 
-    SplitView {
-        anchors.fill: parent
-        orientation: Qt.Vertical
-        spacing: 3
+    // Customized handle to drag between the Editor and the Console.
+    handle: ClideHandle {
+        pressed: SplitHandle.pressed
+        hovered: SplitHandle.hovered
+    }
 
-        // Customized handle to drag between the Editor and the Console.
-        handle: ClideHandle {
-            hovered: SplitHandle.hovered
-            pressed: SplitHandle.pressed
-        }
+    Component.onCompleted: {
+        // Show logging is working.
+        Logger.info("Info logs");
+        Logger.warn("Warning logs");
+        Logger.debug("Debug logs");
+        Logger.error("Error logs");
+        Logger.trace("Trace logs");
+    }
 
-        Component.onCompleted: {
-            // Show logging is working.
-            Logger.info("Info logs");
-            Logger.warn("Warning logs");
-            Logger.debug("Debug logs");
-            Logger.error("Error logs");
-            Logger.trace("Trace logs");
-        }
+    ClideEditor{
+        id: clideEditor
+    }
+    ClideLogger {
+        id: areaConsole
 
-        ClideEditor {
-            SplitView.preferredHeight: 650
-        }
-        ClideLogger {
-        }
     }
 }

qml/ClideExplorerView.qml

@@ -1,62 +0,0 @@
-// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
-//
-// SPDX-License-Identifier: GNU General Public License v3.0 or later
-
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-
-import clide.module 1.0
-import Logger 1.0
-
-Rectangle {
-    id: root
-
-    required property string projectDir
-
-    signal fileClicked(string path)
-
-    clip: true
-    color: RustColors.explorer_background
-    topLeftRadius: 10
-
-    ColumnLayout {
-        anchors.fill: parent
-        spacing: 5
-
-        ClideBreadCrumbs {
-            id: breadCrumb
-
-            Layout.fillWidth: true
-            Layout.leftMargin: 15
-            Layout.rightMargin: 15
-            Layout.topMargin: 10
-            path: clideTreeView.rootDirectory
-
-            onCrumbClicked: path => {
-                Logger.trace("Crumb clicked: " + path);
-                clideTreeView.rootDirectory = path;
-            }
-            onResetRoot: {
-                clideTreeView.rootDirectory = clideTreeView.originalRootDirectory;
-            }
-        }
-        ClideTreeView {
-            id: clideTreeView
-
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-
-            // Path to the directory opened in the file explorer.
-            originalRootDirectory: root.projectDir
-            rootDirectory: root.projectDir
-
-            // Pass the signal to the parent component using another signal.
-            onFileClicked: path => root.fileClicked(path)
-            onRootDirectoryChanged: {
-                Logger.log("Setting root directory: " + clideTreeView.rootDirectory);
-                breadCrumb.path = clideTreeView.rootDirectory;
-            }
-        }
-    }
-}

qml/ClideLogger.qml

@@ -8,14 +8,15 @@ import QtQuick.Controls
 import clide.module 1.0
 import Logger 1.0
 
-Rectangle {
-    color: RustColors.terminal_background
-    radius: 10
-
+Item {
     ListModel {
         id: model
 
     }
+    Rectangle {
+        anchors.fill: parent
+        color: "#111"
+    }
     ListView {
         id: listView
 
@@ -37,6 +38,7 @@ Rectangle {
         }
 
         anchors.fill: parent
+        clip: true
         model: model
 
         delegate: Text {

qml/ClideProjectView.qml

@@ -0,0 +1,91 @@
+// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
+//
+// SPDX-License-Identifier: GNU General Public License v3.0 or later
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import clide.module 1.0
+import Logger 1.0
+
+SplitView {
+    id: root
+
+    // Path to the directory of the project opened in clide.
+    required property string projectDir
+
+    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
+
+        SplitView.fillHeight: true
+        SplitView.maximumWidth: 250
+        SplitView.minimumWidth: 0
+        SplitView.preferredWidth: 200
+        color: RustColors.explorer_background
+
+        ColumnLayout {
+            spacing: 2
+
+            ClideBreadCrumbs {
+                id: breadCrumb
+
+                Layout.bottomMargin: 5
+                Layout.leftMargin: 15
+                Layout.topMargin: 5
+                path: clideTreeView.rootDirectory
+
+                onCrumbClicked: path => {
+                    Logger.trace("Crumb clicked: " + path);
+                    clideTreeView.rootDirectory = path;
+                }
+            }
+            ClideTreeView {
+                id: clideTreeView
+
+                height: navigationView.height
+
+                // Path to the directory opened in the file explorer.
+                originalRootDirectory: root.projectDir
+                rootDirectory: root.projectDir
+                width: navigationView.width
+
+                onFileClicked: path => clideEditor.filePath = path
+                onRootDirectoryChanged: {
+                    Logger.log("Setting root directory: " + clideTreeView.rootDirectory);
+                    breadCrumb.path = clideTreeView.rootDirectory;
+                }
+            }
+        }
+    }
+    ClideEditorView {
+        id: clideEditor
+
+        SplitView.fillWidth: true
+
+        // Provide a path to the file currently open in the text editor.
+        // Initialized using the Default trait in Rust QML singleton FileSystem.
+        filePath: FileSystem.filePath
+    }
+}

qml/ClideTreeView.qml

@@ -10,30 +10,38 @@ import clide.module 1.0
 import Logger 1.0
 
 TreeView {
-    id: root
+    id: fileSystemTreeView
 
     property int lastIndex: -1
     required property string originalRootDirectory
     property string rootDirectory
-    property int rootIndent: 25
 
     signal fileClicked(string filePath)
 
     boundsBehavior: Flickable.StopAtBounds
     boundsMovement: Flickable.StopAtBounds
     clip: true
-
-    // The model is implemented in filesystem.rs
+    leftMargin: 25
     model: FileSystem
-    // Set the root directory on the Rust model, returning the QModeIndex to use for the root of the tree view widget.
-    rootIndex: FileSystem.setDirectory(root.rootDirectory)
+    rootIndex: FileSystem.setDirectory(fileSystemTreeView.rootDirectory)
 
     // Provide our own custom ScrollIndicator for the TreeView.
-    ScrollBar.horizontal: ClideScrollBar {
-        sizeModifier: 3
-    }
-    ScrollBar.vertical: ClideScrollBar {
-        sizeModifier: 3
+    ScrollIndicator.vertical: ScrollIndicator {
+        active: true
+        implicitWidth: 15
+
+        contentItem: Rectangle {
+            color: RustColors.scrollbar
+            implicitHeight: 6
+            implicitWidth: 6
+            opacity: fileSystemTreeView.movingVertically ? 0.5 : 0.0
+
+            Behavior on opacity {
+                OpacityAnimator {
+                    duration: 500
+                }
+            }
+        }
     }
 
     // The delegate represents a single entry in the filesystem.
@@ -45,40 +53,38 @@ TreeView {
         required property int index
 
         implicitHeight: 25
-        implicitWidth: root.width
+        implicitWidth: fileSystemTreeView.width > 0 ? fileSystemTreeView.width : 250
         indentation: 12
 
         background: Rectangle {
             color: current ? RustColors.explorer_folder_open : "transparent"
-            radius: 20
-            width: root.width
+            radius: 2.5
         }
-        // Item name.
         contentItem: Text {
-            anchors.left: itemIcon.right
+            anchors.left: directoryIcon.right
             anchors.leftMargin: 5
             color: RustColors.explorer_text
             text: treeDelegate.fileName
         }
-        // Item Icon.
         indicator: Label {
-            id: itemIcon
+            id: directoryIcon
 
             anchors.verticalCenter: parent.verticalCenter
             antialiasing: true
-            enabled: false
-            focus: false
             font.family: localFont.font.family
             font.pixelSize: 18
             smooth: true
-            // Get the icon from Rust implementation.
-            text: root.model.icon(filePath)
-            x: root.rootIndent + (treeDelegate.depth * treeDelegate.indentation) + (carrotIndicator.visible ? carrotIndicator.width : 0)
+            text: fileSystemTreeView.model.icon(filePath)
+            x: treeDelegate.leftMargin + (treeDelegate.depth * treeDelegate.indentation) + (indicator.visible ? indicator.width : 0)
         }
 
-        // Directory carrot indicator.
+        FontLoader {
+            id: localFont
+
+            source: "qrc:/fonts/saucecodepro-xlight.ttf"
+        }
         Label {
-            id: carrotIndicator
+            id: indicator
 
             anchors.verticalCenter: parent.verticalCenter
             font.family: localFont.font.family
@@ -86,11 +92,12 @@ TreeView {
             font.weight: localFont.font.weight
             text: expanded ? "⮟" : "⮞"
             visible: isTreeNode && hasChildren
-            x: (root.rootIndent - implicitWidth) + (depth * indentation)
+            x: padding + (depth * indentation)
         }
-        // Apply colorization effects to the icon for the item.
         MultiEffect {
-            anchors.fill: itemIcon
+            id: iconOverlay
+
+            anchors.fill: directoryIcon
             brightness: 1.0
             colorization: 1.0
             colorizationColor: {
@@ -103,7 +110,7 @@ TreeView {
                 else
                     return RustColors.explorer_folder;
             }
-            source: itemIcon
+            source: directoryIcon
         }
         HoverHandler {
             id: hoverHandler
@@ -117,10 +124,10 @@ TreeView {
                 switch (button) {
                 case Qt.LeftButton:
                     if (treeDelegate.hasChildren) {
-                        root.toggleExpanded(treeDelegate.row);
+                        fileSystemTreeView.toggleExpanded(treeDelegate.row);
                     } else {
                         // If this model item doesn't have children, it means it's representing a file.
-                        root.fileClicked(treeDelegate.filePath);
+                        fileSystemTreeView.fileClicked(treeDelegate.filePath);
                     }
                     break;
                 case Qt.RightButton:
@@ -139,7 +146,7 @@ TreeView {
 
                     onTriggered: {
                         Logger.debug("Setting new root directory: " + treeDelegate.filePath);
-                        root.rootDirectory = treeDelegate.filePath;
+                        fileSystemTreeView.rootDirectory = treeDelegate.filePath;
                     }
                 }
             }
@@ -148,8 +155,8 @@ TreeView {
                     text: qsTr("Reset root")
 
                     onTriggered: {
-                        Logger.log("Resetting root directory: " + root.originalRootDirectory);
-                        root.rootDirectory = root.originalRootDirectory;
+                        Logger.log("Resetting root directory: " + fileSystemTreeView.originalRootDirectory);
+                        fileSystemTreeView.rootDirectory = fileSystemTreeView.originalRootDirectory;
                     }
                 }
             }
@@ -157,10 +164,4 @@ TreeView {
     }
     selectionModel: ItemSelectionModel {
     }
-
-    FontLoader {
-        id: localFont
-
-        source: "qrc:/fonts/saucecodepro-xlight.ttf"
-    }
 }

qml/Components/ClideBreadCrumbs.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
 import clide.module 1.0
 import Logger 1.0
 
-Rectangle {
+Item {
     id: root
 
     property var fullPaths: []
@@ -13,30 +13,36 @@ Rectangle {
     property var segments: []
 
     signal crumbClicked(string path)
-    signal resetRoot
 
-    function rebuildSegments(): string {
-        let cleaned = path;
+    function rebuildSegments() {
+        var cleaned = path;
         if (cleaned.endsWith("/"))
             cleaned = cleaned.slice(0, -1);
+        var parts = cleaned.split("/");
+        root.segments = [];
+        root.fullPaths = [];
+        var current = "";
         Logger.trace("Building segments for path: " + cleaned);
-        segments = ["/"];
-        fullPaths = ["/"];
-        let parts = cleaned.split("/");
-        let current = "";
-        // We already pushed the root `/` path during initialization, so skip index 0.
-        for (let i = 1; i < parts.length; ++i) {
-            current += "/" + parts[i];
-            Logger.trace("Pushing path: " + parts[i] + " Current: " + current);
-            segments.push(parts[i]);
-            fullPaths.push(current);
+        for (var i = 0; i < parts.length; ++i) {
+            if (parts[i] === "") {
+                current = "/";
+                root.segments.push("/");
+                root.fullPaths.push("/");
+            } else {
+                if (current === "/")
+                    current += parts[i];
+                else
+                    current += "/" + parts[i];
+                Logger.trace("Pushing path: " + parts[i] + " Current: " + current);
+                root.segments.push(parts[i]);
+                root.fullPaths.push(current);
+            }
         }
-        // Update the model used in the Repeater to show the new segments.
-        repeater.model = segments;
+        rep.model = root.segments;
     }
 
-    color: "transparent"
-    implicitHeight: breadcrumbRow.implicitHeight
+    anchors.leftMargin: 20
+    height: breadcrumbRow.implicitHeight
     width: parent.width
 
     Component.onCompleted: rebuildSegments()
@@ -45,32 +51,28 @@ Rectangle {
     Flow {
         id: breadcrumbRow
 
-        anchors.fill: parent
-        spacing: 2
-        width: parent.width
-
         Repeater {
-            id: repeater
+            id: rep
 
             model: root.segments
 
             delegate: Text {
-                required property int index
+                id: linkText
+
                 required property string modelData
 
-                function getText(): string {
+                function getText() {
                     if (modelData === "/") {
                         return modelData;
                     }
+                    Logger.trace("Getting valid text:" + modelData);
                     return modelData + "/";
                 }
 
-                // Show blue underlined hyperlink text if the mouse is hovering a segment.
                 color: mouseArea.containsMouse ? "#2a7fff" : RustColors.explorer_text
                 font.underline: mouseArea.containsMouse
                 text: getText()
 
-                // Click events for each path segment call signal so the parent can set the file explorer root path.
                 MouseArea {
                     id: mouseArea
 
@@ -78,8 +80,8 @@ Rectangle {
                     hoverEnabled: true
 
                     onClicked: {
-                        Logger.info(index + "] Breadcrumb clicked:" + root.fullPaths[index]);
-                        crumbClicked(root.fullPaths[index]);
+                        console.log("Breadcrumb clicked:", root.fullPaths[root.segments.indexOf(modelData)]);
+                        root.crumbClicked(root.fullPaths[root.segments.indexOf(modelData)]);
                     }
                 }
             }
@@ -88,7 +90,7 @@ Rectangle {
     TapHandler {
         acceptedButtons: Qt.RightButton
 
-        onSingleTapped: contextMenu.popup()
+        onSingleTapped: (eventPoint, button) => contextMenu.popup()
     }
     ClideMenu {
         id: contextMenu
@@ -98,8 +100,8 @@ Rectangle {
                 text: qsTr("Reset root")
 
                 onTriggered: {
-                    Logger.info("Resetting root directory from ClideBreadCrumbs");
-                    resetRoot();
+                    Logger.log("Resetting root directory: " + clideTreeView.originalRootDirectory);
+                    clideTreeView.rootDirectory = clideTreeView.originalRootDirectory;
                 }
             }
         }

qml/Components/ClideEditor.qml

@@ -1,116 +0,0 @@
-// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
-//
-// SPDX-License-Identifier: GNU General Public License v3.0 or later
-
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-
-import clide.module 1.0
-import Logger 1.0
-
-Rectangle {
-    color: RustColors.editor_background
-
-    RowLayout {
-        anchors.fill: parent
-
-        // 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 {
-                        required property int index
-
-                        // Calculates the height of each line in the text area.
-                        height: textArea.contentHeight / textArea.lineCount
-                        width: parent.width
-
-                        // 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 an 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: ClideScrollBar {
-            }
-            ScrollBar.vertical: ClideScrollBar {
-            }
-            TextArea.flickable: TextArea {
-                id: textArea
-
-                antialiasing: true
-                focus: true
-                persistentSelection: true
-                selectByMouse: true
-                selectedTextColor: RustColors.editor_highlighted_text
-                selectionColor: RustColors.editor_highlight
-                text: FileSystem.readFile(root.filePath)
-                textFormat: Qt.AutoText
-                wrapMode: TextArea.Wrap
-
-                onLinkActivated: function (link) {
-                    Qt.openUrlExternally(link);
-                }
-            }
-
-            FontMetrics {
-                id: fontMetrics
-
-                font: textArea.font
-            }
-        }
-    }
-}

qml/Components/ClideHandle.qml

@@ -16,7 +16,7 @@ Rectangle {
         } else if (hovered) {
             return RustColors.hovered;
         } else {
-            return "transparent";
+            return RustColors.gutter;
         }
     }
     required property bool hovered
@@ -25,7 +25,6 @@ Rectangle {
     border.color: currentColor
     color: currentColor
     implicitHeight: 8
-    implicitWidth: 8
     radius: 2.5
     opacity: root.hovered ? 1.0 : 0.0
 

qml/Components/ClideScrollBar.qml

@@ -11,10 +11,9 @@ ScrollBar {
     id: scrollBar
 
     // Height, opacitiy, width
-    property int h: scrollBar.interactive ? sizeModifier * 2 : sizeModifier
+    property int h: scrollBar.interactive ? 4 * 2 : 4
     property int o: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
-    property int sizeModifier: 4
-    property int w: scrollBar.interactive ? sizeModifier * 2 : sizeModifier
+    property int w: scrollBar.interactive ? 4 * 2 : 4
 
     // Scroll bar gutter
     background: Rectangle {
@@ -26,7 +25,6 @@ ScrollBar {
 
         // Fade the scrollbar gutter when inactive.
         opacity: scrollBar.o
-        radius: 20
 
         Behavior on opacity {
             OpacityAnimator {
@@ -57,7 +55,6 @@ ScrollBar {
 
         // Fade the scrollbar when inactive.
         opacity: scrollBar.o
-        radius: 20
 
         // Smooth transition between color changes based on the state above.
         Behavior on color {

qml/Components/qmldir

@@ -3,7 +3,3 @@ ClideHandle ClideHandle.qml
 ClideMenu ClideMenu.qml
 ClideMenuItem ClideMenuItem.qml
 ClideBreadCrumbs ClideBreadCrumbs.qml
-ClideAboutWindow ClideAboutWindow.qml
-ClideEditor ClideEditor.qml
-ClideLogger ClideLogger.qml
-ClideMenuBar ClideMenuBar.qml

qml/main.qml

@@ -15,29 +15,22 @@ ApplicationWindow {
     required property string appContextPath
 
     height: 800
-    title: "Clide"
+    title: "CLIDE"
     visible: true
     width: 1200
 
     menuBar: ClideMenuBar {
     }
 
-    Rectangle {
-        color: RustColors.menubar
-        width: appView.implicitWidth
-        height: appView.implicitHeight
+    MessageDialog {
+        id: errorDialog
 
-        ClideApplicationView {
-            id: appView
-            projectDir: appWindow.appContextPath
-            implicitHeight: appWindow.height
-            implicitWidth: appWindow.width
+        title: qsTr("Error")
+    }
+    ClideProjectView {
+        id: clideProjectView
 
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            anchors.leftMargin: 20
-            anchors.topMargin: 10
-        }
+        projectDir: appWindow.appContextPath
     }
 }
 

src/gui/colors.rs

@@ -93,7 +93,7 @@ impl Default for RustColorsImpl {
             linenumber: QColor::try_from("#94989b").unwrap(),
             active: QColor::try_from("#a9acb0").unwrap(),
             inactive: QColor::try_from("#FFF").unwrap(),
-            editor_background: QColor::try_from("#1E1F22").unwrap(),
+            editor_background: QColor::try_from("#111111").unwrap(),
             editor_text: QColor::try_from("#acaea3").unwrap(),
             editor_highlighted_text: QColor::try_from("#ccced3").unwrap(),
             editor_highlight: QColor::try_from("#ccced3").unwrap(),

src/gui/filesystem.rs

@@ -10,7 +10,9 @@ use std::fs;
 use std::path::Path;
 use syntect::easy::HighlightLines;
 use syntect::highlighting::ThemeSet;
-use syntect::html::{IncludeBackground, append_highlighted_html_for_styled_line};
+use syntect::html::{
+    IncludeBackground, append_highlighted_html_for_styled_line, start_highlighted_html_snippet,
+};
 use syntect::parsing::SyntaxSet;
 use syntect::util::LinesWithEndings;
 
@@ -57,6 +59,7 @@ pub mod qobject {
     }
 }
 
+// TODO: Implement a provider for QFileSystemModel::setIconProvider for icons.
 pub struct FileSystemImpl {
     file_path: QString,
 }
@@ -96,8 +99,7 @@ impl qobject::FileSystem {
                 )
                 .unwrap_or_else(|| ss.find_syntax_plain_text());
             let mut highlighter = HighlightLines::new(lang, theme);
-            // If you care about the background, see `start_highlighted_html_snippet(theme);`.
-            let mut output = String::from("<pre>\n");
+            let (mut output, _bg) = start_highlighted_html_snippet(theme);
             for line in LinesWithEndings::from(lines.as_str()) {
                 let regions = highlighter
                     .highlight_line(line, &ss)