Clean up GUI.

qml/Components/ClideBreadCrumbs.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
 import clide.module 1.0
 import Logger 1.0
 
-Item {
+Rectangle {
     id: root
 
     property var fullPaths: []
@@ -13,36 +13,32 @@ Item {
     property var segments: []
 
     signal crumbClicked(string path)
+    signal resetRoot
 
-    function rebuildSegments() {
-        var cleaned = path;
+    function rebuildSegments(): string {
+        let 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);
-        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);
-            }
+        segments = [];
+        fullPaths = [];
+        segments.push("/");
+        fullPaths.push("/");
+        let parts = cleaned.split("/");
+        let current = "";
+        // We already pushed the root `/` path above, 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);
         }
-        rep.model = root.segments;
+        // Update the model used in the Repeater to show the new segments.
+        repeater.model = segments;
     }
 
-    anchors.leftMargin: 20
-    height: breadcrumbRow.implicitHeight
+    color: "transparent"
+    implicitHeight: breadcrumbRow.implicitHeight
     width: parent.width
 
     Component.onCompleted: rebuildSegments()
@@ -51,28 +47,32 @@ Item {
     Flow {
         id: breadcrumbRow
 
+        anchors.fill: parent
+        spacing: 2
+        width: parent.width
+
         Repeater {
-            id: rep
+            id: repeater
 
             model: root.segments
 
             delegate: Text {
-                id: linkText
-
+                required property int index
                 required property string modelData
 
-                function getText() {
+                function getText(): string {
                     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
 
@@ -80,8 +80,8 @@ Item {
                     hoverEnabled: true
 
                     onClicked: {
-                        console.log("Breadcrumb clicked:", root.fullPaths[root.segments.indexOf(modelData)]);
-                        root.crumbClicked(root.fullPaths[root.segments.indexOf(modelData)]);
+                        Logger.info(index + "] Breadcrumb clicked:" + root.fullPaths[index]);
+                        crumbClicked(root.fullPaths[index]);
                     }
                 }
             }
@@ -90,7 +90,7 @@ Item {
     TapHandler {
         acceptedButtons: Qt.RightButton
 
-        onSingleTapped: (eventPoint, button) => contextMenu.popup()
+        onSingleTapped: contextMenu.popup()
     }
     ClideMenu {
         id: contextMenu
@@ -100,8 +100,8 @@ Item {
                 text: qsTr("Reset root")
 
                 onTriggered: {
-                    Logger.log("Resetting root directory: " + clideTreeView.originalRootDirectory);
-                    clideTreeView.rootDirectory = clideTreeView.originalRootDirectory;
+                    Logger.info("Resetting root directory from ClideBreadCrumbs");
+                    resetRoot();
                 }
             }
         }

qml/Components/ClideScrollBar.qml

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