Add placeholders for side panel and console.

README.md

@@ -5,7 +5,7 @@ CLIDE is an IDE written in Rust that supports both full and headless Linux envir
 The following packages must be installed before the application will build.
 
 ```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
 ```
 
 And of course, [Rust](https://www.rust-lang.org/tools/install).

qml/Menu/ClideMenu.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls
 Menu {
     background: Rectangle {
         color: "#3c3f41"
-        implicitWidth: 200
+        implicitWidth: 100
         radius: 2
     }
 }

qml/Menu/ClideMenuBar.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 
 MenuBar {
     background: Rectangle {
-        color: "#3b3e40"  // Dark background like CLion
+        color: "#3c3f41"
     }
 
     Action {
@@ -25,6 +25,7 @@ MenuBar {
         id: actionExit
 
         text: qsTr("&Exit")
+
         onTriggered: Qt.quit()
     }
     ClideMenu {

qml/Menu/ClideMenuBarItem.qml

@@ -9,7 +9,7 @@ MenuItem {
         radius: 2.5
     }
     contentItem: IconLabel {
-        color: "white"
+        color: "black"
         font.family: "Helvetica"
         text: root.text
     }

qml/Menu/ClideMenuBarItem.qml.autosave

@@ -0,0 +1,16 @@
+import QtQuick
+import QtQuick.Controls
+
+MenuItem {
+    id: root
+
+    background: Rectangle {
+        color: root.hovered ? "#4b4f51" : "#3c3f41"  // Hover effect
+        radius: 2.5
+    }
+    contentItem: IconLabel {
+        color: "black"
+        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"
 
 ApplicationWindow {
+    id: appWindow
+
     height: 800
     title: "CLIDE"
     visible: true
@@ -15,6 +18,146 @@ ApplicationWindow {
 
     Rectangle {
         anchors.fill: parent
-        color: "#1e1f22"  // Dark background
+        color: "#1e1f22"
+    }
+    MessageDialog {
+        id: errorDialog
+
+        title: qsTr("Error")
+    }
+    RowLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        SplitView {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            // Customized handle to drag between the Navigation and the Editor.
+            handle: Rectangle {
+                border.color: SplitHandle.hovered ? "#303234" : "#3c3f41"
+                color: SplitHandle.pressed ? "#4b4f51" : "#3c3f41"
+                implicitWidth: 8
+                opacity: SplitHandle.hovered || navigationView.width < 15 ? 1.0 : 0.0
+
+                Behavior on opacity {
+                    OpacityAnimator {
+                        duration: 1400
+                    }
+                }
+            }
+
+            Rectangle {
+                id: navigationView
+
+                SplitView.fillHeight: true
+                SplitView.preferredWidth: 250
+                color: "#303234"
+
+                StackLayout {
+                    anchors.fill: parent
+
+                    // Shows the help text.
+                    Text {
+                        color: "white"
+                        text: qsTr("File system view placeholder")
+                        wrapMode: TextArea.Wrap
+                    }
+
+                    // TODO: Shows the files on the file system.
+                    // ClideProjectView {
+                    //     id: fileSystemView
+                    //     color: Colors.surface1
+                    //     onFileClicked: path => root.currentFilePath = path
+                    // }
+                }
+            }
+            SplitView {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                orientation: Qt.Vertical
+
+                // Customized handle to drag between the Navigation and the Editor.
+                handle: Rectangle {
+                    border.color: SplitHandle.hovered ? "#2b2b2b" : "#3c3f41"
+                    color: SplitHandle.pressed ? "#4b4f51" : "#3c3f41"
+                    implicitHeight: 8
+                    opacity: SplitHandle.hovered || navigationView.width < 15 ? 1.0 : 0.0
+
+                    Behavior on opacity {
+                        OpacityAnimator {
+                            duration: 1400
+                        }
+                    }
+                }
+
+                TextArea {
+                    id: areaText
+
+                    color: "#ccced3"
+                    focus: true
+                    persistentSelection: true
+                    selectByMouse: true
+                    // selectedTextColor: control.palette.highlightedText
+                    // selectionColor: control.palette.highlight
+                    textFormat: Qt.AutoText
+                    wrapMode: TextArea.Wrap
+
+                    background: Rectangle {
+                        color: "#2b2b2b"
+                        implicitHeight: 650
+                    }
+
+                    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()
+                    //     }
+                    // }
+                }
+                TextArea {
+                    id: areaConsole
+
+                    bottomPadding: 0
+                    leftPadding: 6
+                    persistentSelection: true
+                    placeholderText: qsTr("Placeholder for bash terminal.")
+                    placeholderTextColor: "gray"
+                    readOnly: true
+                    rightPadding: 6
+                    selectByMouse: true
+                    // selectedTextColor: control.palette.highlightedText
+                    // selectionColor: control.palette.highlight
+                    textFormat: Qt.AutoText
+                    topPadding: 6
+                    wrapMode: TextArea.Wrap
+
+                    background: Rectangle {
+                        color: "#2b2b2b"
+                        implicitHeight: 20
+                        // border.color: control.enabled ? "#21be2b" : "transparent"
+                    }
+                }
+            }
+        }
     }
 }