Normalize bar icon size and alignment

shell/Ui/BarIconButton.qml

@@ -8,52 +8,90 @@ WidgetButton {
   property Component iconComponent: null
   property real slotSize: Style.bar.iconSlot
   property real opticalSize: Style.bar.iconCanvas
+  property real iconSize: Math.min(Style.bar.iconSize, opticalSize)
+  readonly property real visualIconSize: Style.bar.iconSize
+  readonly property real canvasSize: Math.max(visualIconSize, opticalSize)
+  property string labelText: ""
   property bool debugOpticalBounds: Quickshell.env("OMARCHY_DEBUG_BAR_ICONS") === "1"
-  // Measured against the slot, which the open-panel underline centers on.
-  readonly property real opticalCenterErrorX: glyph.visible ? opticalCanvas.x + glyph.paintedCenterX - root.width / 2 : 0
-  readonly property real glyphPaintedWidth: glyph.visible ? glyph.tightWidth : 0
+  // A label shifts the icon within the centered group.
+  readonly property real opticalCenterErrorX:
+    content.x + opticalCanvas.x + (glyph.visible ? glyph.paintedCenterX : customIcon.width / 2 + customIcon.centerErrorX) - root.width / 2
+      - (label.visible ? (label.implicitWidth + Style.space(4)) / 2 : 0)
+  readonly property real opticalCenterErrorY:
+    content.y + (glyph.visible ? glyph.paintedCenterY : customIcon.height / 2 + customIcon.centerErrorY) - root.height / 2
+  readonly property real glyphPaintedWidth: glyph.visible ? glyph.paintedWidth : 0
+  readonly property real glyphPaintedHeight: glyph.visible ? glyph.paintedHeight : 0
   readonly property real glyphBaselineY: glyph.visible ? glyph.baselineY : 0
   readonly property int glyphFontSize: glyph.visible ? glyph.renderedFontSize : 0
+  readonly property real componentPaintedWidth: customIcon.visible ? customIcon.paintedWidth : 0
+  readonly property real componentPaintedHeight: customIcon.visible ? customIcon.paintedHeight : 0
 
   labelVisible: false
-  hasVisualContent: text !== "" || iconComponent !== null
+  hasVisualContent: text !== "" || iconComponent !== null || labelText !== ""
   fontSize: Style.bar.iconFont
   fixedWidth: vertical ? -1 : slotSize
   fixedHeight: vertical ? slotSize : -1
 
   Item {
-    id: opticalCanvas
-    // Placed exactly, not anchored: centerIn snaps an even canvas in an odd slot
-    // to a whole pixel, pulling every glyph off the open-panel underline.
+    id: content
+    // Exact coordinates preserve the center of odd-width slots.
     x: (root.width - width) / 2
     y: (root.height - height) / 2
-    width: root.opticalSize
-    height: root.opticalSize
+    width: root.canvasSize + (label.visible ? label.implicitWidth + Style.space(4) : 0)
+    height: root.canvasSize
 
-    OpticalGlyph {
-      id: glyph
-      anchors.fill: parent
-      visible: root.iconComponent === null
-      text: root.text
-      fontFamily: root.fontFamily
-      fontSize: root.fontSize
+    Text {
+      id: label
+      visible: root.labelText !== ""
+      textFormat: Text.PlainText
+      text: root.labelText
+      font.family: root.fontFamily
+      font.pixelSize: root.fontSize
       color: root.active && root.useActiveColor ? root.activeColor : root.foreground
-      rotation: root.textRotation
-      debugBounds: root.debugOpticalBounds
+      y: (parent.height - height) / 2
+        + (labelMetrics.descent - labelMetrics.ascent + labelMetrics.tightBoundingRect("0").height) / 2
+      renderType: Text.NativeRendering
     }
 
-    Loader {
-      anchors.fill: parent
-      visible: root.iconComponent !== null
-      sourceComponent: root.iconComponent
+    FontMetrics {
+      id: labelMetrics
+      font: label.font
     }
 
-    Rectangle {
-      visible: root.debugOpticalBounds && root.iconComponent !== null
-      anchors.fill: parent
-      color: "transparent"
-      border.width: 1
-      border.color: "#4488ff"
+    Item {
+      id: opticalCanvas
+      x: label.visible ? label.implicitWidth + Style.space(4) : 0
+      width: root.canvasSize
+      height: root.canvasSize
+
+      OpticalGlyph {
+        id: glyph
+        anchors.fill: parent
+        visible: root.iconComponent === null
+        text: root.text
+        fontFamily: root.fontFamily
+        fontSize: root.fontSize
+        paintedSize: root.visualIconSize
+        color: root.active && root.useActiveColor ? root.activeColor : root.foreground
+        rotation: root.textRotation
+        debugBounds: root.debugOpticalBounds
+      }
+
+      BarIconContent {
+        id: customIcon
+        anchors.fill: parent
+        visible: root.iconComponent !== null
+        sourceComponent: root.iconComponent
+        sourceSize: root.opticalSize
+      }
+
+      Rectangle {
+        visible: root.debugOpticalBounds && root.iconComponent !== null
+        anchors.fill: parent
+        color: "transparent"
+        border.width: 1
+        border.color: "#4488ff"
+      }
     }
   }