gradient: subtle glow fading from stroke to bar bottom via compositing

modules/Bar.qml

@@ -28,19 +28,17 @@ PanelWindow {
     }
 
     Canvas {
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: Math.max(M.Theme.screenRadius + 2, 4)
+        anchors.fill: parent
 
         onPaint: {
             const ctx = getContext("2d");
             const w = width;
+            const h = height;
             const r = M.Theme.screenRadius;
             const lw = 3;
             const hw = lw / 2;
 
-            ctx.clearRect(0, 0, w, height);
+            ctx.clearRect(0, 0, w, h);
 
             // Opaque backing behind the stroke
             ctx.fillStyle = M.Theme.base00.toString();
@@ -56,6 +54,37 @@ PanelWindow {
                 ctx.rect(0, 0, w, lw);
             }
             ctx.fill();
+
+            // Glow below the stroke — fades from gradient color to transparent
+            const glowH = h - lw;
+            if (glowH > 0) {
+                const glowGrad = ctx.createLinearGradient(0, lw, 0, h);
+                glowGrad.addColorStop(0, "rgba(255,255,255,0.06)");
+                glowGrad.addColorStop(1, "transparent");
+
+                // Use the horizontal gradient as a mask via compositing
+                const hGrad = ctx.createLinearGradient(0, 0, w, 0);
+                hGrad.addColorStop(0, M.Theme.base0C.toString());
+                hGrad.addColorStop(1, M.Theme.base09.toString());
+
+                // Draw vertical fade strip
+                ctx.globalAlpha = 0.12;
+                ctx.fillStyle = hGrad;
+                ctx.fillRect(0, lw, w, glowH);
+
+                // Erase bottom portion with transparent fade
+                ctx.globalAlpha = 1;
+                ctx.globalCompositeOperation = "destination-out";
+                const eraseGrad = ctx.createLinearGradient(0, lw, 0, h);
+                eraseGrad.addColorStop(0, "transparent");
+                eraseGrad.addColorStop(1, "black");
+                ctx.fillStyle = eraseGrad;
+                ctx.fillRect(0, lw, w, glowH);
+                ctx.globalCompositeOperation = "source-over";
+            }
+
+            // Gradient stroke
+            ctx.globalAlpha = 1;
             const grad = ctx.createLinearGradient(0, 0, w, 0);
             grad.addColorStop(0, M.Theme.base0C.toString());
             grad.addColorStop(1, M.Theme.base09.toString());

modules/BarIcon.qml

@@ -7,6 +7,7 @@ Text {
     id: root
     property string icon: ""
     property string tooltip: ""
+    property string minIcon: ""
     property bool _hovered: false
     property string _displayIcon: icon
     property string _pendingIcon: ""
@@ -39,11 +40,20 @@ Text {
             easing.type: Easing.OutQuad
         }
     }
+    width: minIcon ? Math.max(implicitWidth, _minIconMetrics.width) : implicitWidth
+    horizontalAlignment: minIcon ? Text.AlignHCenter : Text.AlignLeft
     color: M.Theme.base05
     font.pixelSize: M.Theme.fontSize + 1
     font.family: M.Theme.iconFontFamily
     verticalAlignment: Text.AlignVCenter
 
+    TextMetrics {
+        id: _minIconMetrics
+        text: root.minIcon
+        font.pixelSize: root.font.pixelSize
+        font.family: root.font.family
+    }
+
     layer.enabled: _hovered && !(parent && parent._hovered === true)
     layer.effect: MultiEffect {
         shadowEnabled: true

modules/Volume.qml

@@ -74,6 +74,7 @@ M.BarSection {
 
     M.BarIcon {
         icon: root._volumeIcon
+        minIcon: "\uF028"
         color: root._volumeColor
         anchors.verticalCenter: parent.verticalCenter
         MouseArea {