fix bar group glow to not affect content text

modules/Bar.qml

@@ -27,6 +27,18 @@ PanelWindow {
         opacity: M.Theme.barOpacity
     }
 
+    Rectangle {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 3
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+            GradientStop { position: 0; color: M.Theme.base0C }
+            GradientStop { position: 1; color: M.Theme.base09 }
+        }
+    }
+
     Item {
         anchors.fill: parent
         anchors.leftMargin: M.Theme.barPadding

modules/BarGroup.qml

@@ -2,20 +2,33 @@ import QtQuick
 import QtQuick.Effects
 import "." as M
 
-Rectangle {
+Item {
     id: root
 
     default property alias content: row.children
     property color borderColor: M.Theme.base02
-    color: "transparent"
-    border.color: borderColor
-    border.width: 1
-    radius: M.Theme.radius
 
     visible: row.visibleChildren.length > 0
 
-    layer.enabled: true
-    layer.effect: MultiEffect {
+    implicitWidth: row.implicitWidth + _pad * 2
+    implicitHeight: row.implicitHeight + _pad * 2
+
+    readonly property int _pad: 6
+
+    // Shadow source — rendered offscreen, only its glow is visible
+    Rectangle {
+        id: shadowSource
+        anchors.fill: parent
+        color: "transparent"
+        border.color: root.borderColor
+        border.width: 1
+        radius: M.Theme.radius
+        visible: false
+    }
+
+    MultiEffect {
+        source: shadowSource
+        anchors.fill: shadowSource
         shadowEnabled: true
         shadowColor: root.borderColor
         shadowBlur: 0.6
@@ -23,10 +36,14 @@ Rectangle {
         shadowHorizontalOffset: 0
     }
 
-    implicitWidth: row.implicitWidth + _pad * 2
-    implicitHeight: row.implicitHeight + _pad * 2
-
-    readonly property int _pad: 6
+    // Visible border (on top of the glow)
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        border.color: root.borderColor
+        border.width: 1
+        radius: M.Theme.radius
+    }
 
     Row {
         id: row

modules/Battery.qml

@@ -18,9 +18,17 @@ M.BarSection {
     readonly property var dev: UPower.displayDevice
     readonly property real pct: (dev?.percentage ?? 0) * 100
     readonly property bool charging: dev?.state === UPowerDeviceState.Charging
-    property color _stateColor: charging ? M.Theme.base0B : pct < 15 ? M.Theme.base09 : pct < 30 ? M.Theme.base0A : M.Theme.base08
+    readonly property bool _critical: pct < 15 && !charging
+    property color _stateColor: charging ? M.Theme.base0B : _critical ? M.Theme.base09 : pct < 30 ? M.Theme.base0A : M.Theme.base08
+    property real _blinkOpacity: 1
 
-    Behavior on _stateColor { ColorAnimation { duration: 300 } }
+    SequentialAnimation {
+        running: root._critical
+        loops: Animation.Infinite
+        NumberAnimation { target: root; property: "_blinkOpacity"; to: 0.2; duration: 400; easing.type: Easing.InOutQuad }
+        NumberAnimation { target: root; property: "_blinkOpacity"; to: 1;   duration: 400; easing.type: Easing.InOutQuad }
+        onRunningChanged: if (!running) root._blinkOpacity = 1
+    }
 
     property bool _warnSent: false
     property bool _critSent: false
@@ -49,12 +57,14 @@ M.BarSection {
             return icons[Math.min(10, Math.floor(root.pct / 10))];
         }
         color: root._stateColor
+        opacity: root._blinkOpacity
         font.pixelSize: M.Theme.fontSize + 2
         anchors.verticalCenter: parent.verticalCenter
     }
     M.BarLabel {
         label: Math.round(root.pct) + "%"
         color: root._stateColor
+        opacity: root._blinkOpacity
         anchors.verticalCenter: parent.verticalCenter
     }
 }