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
-    implicitHeight: row.implicitHeight + _pad * 2
+    implicitWidth: layout.implicitWidth + _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 {
@@ -55,26 +57,68 @@ Item {
         radius: M.Theme.radius
     }
 
-    Row {
-        id: row
-        anchors.centerIn: parent
-        spacing: M.Theme.moduleSpacing + 2
+    // Separator container — thin lines drawn between visible modules
+    Item {
+        id: sepContainer
+        anchors.fill: layout
     }
 
-    // Separator lines overlaid between visible row children
-    Repeater {
-        model: row.visibleChildren.length > 1 ? row.visibleChildren.length - 1 : 0
+    // Layout container — children are positioned horizontally with separators between them
+    Item {
+        id: layout
+        anchors.centerIn: parent
 
-        delegate: Rectangle {
-            required property int index
+        onChildrenChanged: Qt.callLater(root._relayout)
+        onVisibleChildrenChanged: Qt.callLater(root._relayout)
 
-            readonly property Item _left: row.visibleChildren[index]
-            readonly property real _rightEdge: _left ? _left.x + _left.width : 0
+        // Also watch individual child width changes
+        Component.onCompleted: Qt.callLater(root._relayout)
+    }
 
-            x: row.x + _rightEdge + row.spacing / 2
-            y: root._pad + row.implicitHeight * 0.2
-            width: 1
-            height: row.implicitHeight * 0.6
+    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)
         }
     }

modules/BarIcon.qml

@@ -8,26 +8,8 @@ Text {
     property string icon: ""
     property string tooltip: ""
     property bool _hovered: false
-    property string _displayIcon: icon
-    property string _pendingIcon: ""
 
-    text: _displayIcon
-
-    onIconChanged: {
-        if (_crossfade.running) {
-            _pendingIcon = icon;
-        } else {
-            _pendingIcon = icon;
-            _crossfade.start();
-        }
-    }
-
-    SequentialAnimation {
-        id: _crossfade
-        NumberAnimation { target: root; property: "opacity"; to: 0; duration: 60; easing.type: Easing.InQuad }
-        ScriptAction { script: root._displayIcon = root._pendingIcon }
-        NumberAnimation { target: root; property: "opacity"; to: 1; duration: 100; easing.type: Easing.OutQuad }
-    }
+    text: icon
     color: M.Theme.base05
     font.pixelSize: M.Theme.fontSize + 1
     font.family: M.Theme.iconFontFamily