bar groups: auto separator lines between modules

modules/BarGroup.qml

@@ -5,15 +5,17 @@ import "." as M
 Item {
     id: root
 
-    default property alias content: row.children
+    default property alias content: layout.children
     property color borderColor: M.Theme.base02
 
-    visible: row.visibleChildren.length > 0
+    visible: layout.visibleChildren.length > 0
 
-    implicitWidth: row.implicitWidth + _pad * 2
+    implicitWidth: layout.implicitWidth + _pad * 2
-    implicitHeight: row.implicitHeight + _pad * 2
+    implicitHeight: layout.implicitHeight + _pad * 2
 
     readonly property int _pad: 6
+    readonly property int _spacing: M.Theme.moduleSpacing + 2
+    readonly property int _sepWidth: 1
 
     // Shadow source — rendered offscreen, only its glow is visible
     Rectangle {
@@ -36,7 +38,7 @@ Item {
         shadowHorizontalOffset: 0
     }
 
-    // Background gradient — accent color fading down, connects to bar's top gradient
+    // Background gradient
     Rectangle {
         anchors.fill: parent
         radius: M.Theme.radius
@@ -46,7 +48,7 @@ Item {
         }
     }
 
-    // Visible border (on top of the glow)
+    // Visible border
     Rectangle {
         anchors.fill: parent
         color: "transparent"
@@ -55,9 +57,69 @@ Item {
         radius: M.Theme.radius
     }
 
-    Row {
+    // Separator container — thin lines drawn between visible modules
-        id: row
+    Item {
+        id: sepContainer
+        anchors.fill: layout
+    }
+
+    // Layout container — children are positioned horizontally with separators between them
+    Item {
+        id: layout
         anchors.centerIn: parent
-        spacing: M.Theme.moduleSpacing + 2
+
+        onChildrenChanged: Qt.callLater(root._relayout)
+        onVisibleChildrenChanged: Qt.callLater(root._relayout)
+
+        // Also watch individual child width changes
+        Component.onCompleted: Qt.callLater(root._relayout)
+    }
+
+    function _relayout() {
+        // Remove old separators
+        for (let i = sepContainer.children.length - 1; i >= 0; i--)
+            sepContainer.children[i].destroy();
+
+        // Position visible children horizontally, insert separators
+        let x = 0;
+        let first = true;
+        const visible = [];
+        for (let i = 0; i < layout.children.length; i++) {
+            const child = layout.children[i];
+            if (!child.visible || child.width <= 0) continue;
+            visible.push(child);
+        }
+
+        for (let i = 0; i < visible.length; i++) {
+            const child = visible[i];
+            if (!first) {
+                // Add separator
+                const sep = _sepComp.createObject(sepContainer, {
+                    x: x + _spacing / 2 - _sepWidth / 2,
+                    height: Qt.binding(() => layout.implicitHeight * 0.6),
+                    y: Qt.binding(() => layout.implicitHeight * 0.2)
+                });
+                x += _spacing;
+            }
+            child.x = x;
+            child.y = Qt.binding(function() { return (layout.implicitHeight - child.height) / 2; });
+            x += child.width;
+            first = false;
+        }
+
+        layout.implicitWidth = x;
+        layout.implicitHeight = 0;
+        for (let i = 0; i < visible.length; i++) {
+            if (visible[i].height > layout.implicitHeight)
+                layout.implicitHeight = visible[i].height;
+        }
+    }
+
+    Component {
+        id: _sepComp
+        Rectangle {
+            width: root._sepWidth
+            color: Qt.rgba(root.borderColor.r, root.borderColor.g, root.borderColor.b, 0.4)
+        }
     }
 }