Split basic components for reuse.

build.rs

@@ -9,6 +9,8 @@ fn main() {
         "qml/ClideEditor.qml",
         "qml/ClideMenuBar.qml",
         "qml/ClideLogger.qml",
+        "qml/Components/ClideScrollBar.qml",
+        "qml/Components/ClideHandle.qml",
         "qml/Logger/Logger.qml",
     ]))
     // Link Qt's Network library

qml/ClideEditor.qml

@@ -22,18 +22,9 @@ SplitView {
     orientation: Qt.Vertical
 
     // Customized handle to drag between the Editor and the Console.
-    handle: Rectangle {
+    handle: ClideHandle {
-        border.color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
+        pressed: SplitHandle.pressed
-        color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
+        hovered: SplitHandle.hovered
-        implicitHeight: 8
-        radius: 2.5
-
-        // Execute these behaviors when the color is changed.
-        Behavior on color {
-            ColorAnimation {
-                duration: 400
-            }
-        }
     }
 
     Component.onCompleted: {
@@ -119,9 +110,9 @@ SplitView {
             boundsBehavior: Flickable.StopAtBounds
             height: 650
 
-            ScrollBar.horizontal: MyScrollBar {
+            ScrollBar.horizontal: ClideScrollBar {
             }
-            ScrollBar.vertical: MyScrollBar {
+            ScrollBar.vertical: ClideScrollBar {
             }
             TextArea.flickable: TextArea {
                 id: textArea
@@ -174,50 +165,4 @@ SplitView {
         id: areaConsole
 
     }
-
-    // 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 {
-            color: RustColors.scrollbar_gutter
-            implicitHeight: scrollBar.interactive ? 8 : 4
-            implicitWidth: scrollBar.interactive ? 8 : 4
-
-            // Fade the scrollbar gutter when inactive.
-            opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
-
-            Behavior on opacity {
-                OpacityAnimator {
-                    duration: 500
-                }
-            }
-        }
-
-        // Scroll bar
-        contentItem: Rectangle {
-
-            // 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
-            implicitHeight: scrollBar.interactive ? 8 : 4
-            implicitWidth: scrollBar.interactive ? 8 : 4
-            // Fade the scrollbar when inactive.
-            opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0
-
-            // Smooth transition between color changes based on the state above.
-            Behavior on color {
-                ColorAnimation {
-                    duration: 1000
-                }
-            }
-            Behavior on opacity {
-                OpacityAnimator {
-                    duration: 1000
-                }
-            }
-        }
-    }
 }

qml/Components/ClideHandle.qml

@@ -0,0 +1,25 @@
+// 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 clide.module 1.0
+
+Rectangle {
+    required property bool hovered
+    required property bool pressed
+
+    border.color: pressed ? RustColors.pressed : hovered ? RustColors.hovered : RustColors.gutter
+    color: pressed ? RustColors.pressed : hovered ? RustColors.hovered : RustColors.gutter
+    implicitHeight: 8
+    radius: 2.5
+
+    // Execute these behaviors when the color is changed.
+    Behavior on color {
+        ColorAnimation {
+            duration: 400
+        }
+    }
+}

qml/Components/ClideScrollBar.qml

@@ -0,0 +1,52 @@
+// 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 clide.module 1.0
+
+ScrollBar {
+    id: scrollBar
+
+    // Scroll bar gutter
+    background: Rectangle {
+        color: RustColors.scrollbar_gutter
+        implicitHeight: scrollBar.interactive ? 8 : 4
+        implicitWidth: scrollBar.interactive ? 8 : 4
+
+        // Fade the scrollbar gutter when inactive.
+        opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
+
+        Behavior on opacity {
+            OpacityAnimator {
+                duration: 500
+            }
+        }
+    }
+
+    // Scroll bar
+    contentItem: Rectangle {
+
+        // 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
+        implicitHeight: scrollBar.interactive ? 8 : 4
+        implicitWidth: scrollBar.interactive ? 8 : 4
+        // Fade the scrollbar when inactive.
+        opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0
+
+        // Smooth transition between color changes based on the state above.
+        Behavior on color {
+            ColorAnimation {
+                duration: 1000
+            }
+        }
+        Behavior on opacity {
+            OpacityAnimator {
+                duration: 1000
+            }
+        }
+    }
+}

qml/Components/qmldir

@@ -0,0 +1,2 @@
+ClideScrollBar ClideScrollBar.qml
+ClideHandle ClideHandle.qml