From deb71231fbeacdb1e56cb851490390a01b9b502e Mon Sep 17 00:00:00 2001
From: Damocles <damocles@darkest.space>
Date: Sun, 12 Apr 2026 21:00:36 +0200
Subject: [PATCH 1/2] stable icon widths via minIcon, fix volume icon jitter

---
 modules/BarIcon.qml | 10 ++++++++++
 modules/Volume.qml  |  1 +
 2 files changed, 11 insertions(+)

diff --git a/modules/BarIcon.qml b/modules/BarIcon.qml
index dcc768c..4797021 100644
--- a/modules/BarIcon.qml
+++ b/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
diff --git a/modules/Volume.qml b/modules/Volume.qml
index 79fc010..428741d 100644
--- a/modules/Volume.qml
+++ b/modules/Volume.qml
@@ -74,6 +74,7 @@ M.BarSection {
 
     M.BarIcon {
         icon: root._volumeIcon
+        minIcon: "\uF028"
         color: root._volumeColor
         anchors.verticalCenter: parent.verticalCenter
         MouseArea {

From 4c90b4a9a28928f782c9047c36b438f41c532225 Mon Sep 17 00:00:00 2001
From: Damocles <damocles@darkest.space>
Date: Sun, 12 Apr 2026 21:01:24 +0200
Subject: [PATCH 2/2] gradient: subtle glow fading from stroke to bar bottom
 via compositing

---
 modules/Bar.qml | 39 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/modules/Bar.qml b/modules/Bar.qml
index c39fe40..bc80690 100644
--- a/modules/Bar.qml
+++ b/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());