bar: fix alignment

Also refactor box -> styledrect + paddedrect

modules/bar/Pills.qml

@@ -71,7 +71,7 @@ Item {
         }
     }
 
-    component Pill: Box {
+    component Pill: PaddedRect {
         id: pill
 
         color: Appearance.alpha(Appearance.colours.base, false)

modules/bar/components/ActiveWindow.qml

@@ -5,12 +5,11 @@ import "root:/config"
 import QtQuick
 import QtQuick.Layouts
 
-Box {
+StyledRect {
     id: root
 
     readonly property color colour: Appearance.colours.pink
 
-    padding: [Appearance.padding.smaller, 0]
     animated: true
     clip: true
 
@@ -21,14 +20,14 @@ Box {
         color: root.colour
     }
 
-    StyledText {
+    AnchorText {
+        prevAnchor: icon
+        vertical: root.vertical
+
         text: Hyprland.activeClient?.title ?? "Desktop"
         font.pointSize: Appearance.font.size.smaller
         font.family: Appearance.font.family.mono
         color: root.colour
         rotation: root.vertical ? 90 : 0
-
-        anchors.left: icon.right
-        anchors.leftMargin: Appearance.padding.smaller
     }
 }

modules/bar/components/OsIcon.qml

@@ -1,19 +1,10 @@
 import "root:/widgets"
-import "root:/services"
 import "root:/utils"
 import "root:/config"
-import QtQuick
-import QtQuick.Layouts
 
-Box {
+StyledText {
-    padding: [Appearance.padding.smaller, 0]
+    text: Icons.osIcon
-
+    font.pointSize: Appearance.font.size.smaller
-    StyledText {
+    font.family: Appearance.font.family.mono
-        text: Icons.osIcon
+    color: Appearance.colours.yellow
-        font.pointSize: Appearance.font.size.smaller
-        font.family: Appearance.font.family.mono
-        color: Appearance.colours.yellow
-
-        Layout.alignment: Layout.Center
-    }
 }

widgets/AnchorText.qml

@@ -0,0 +1,17 @@
+import "root:/config"
+import QtQuick
+
+StyledText {
+    id: root
+
+    required property Item prevAnchor
+    property bool vertical
+
+    anchors.left: vertical ? undefined : prevAnchor.right
+    anchors.leftMargin: vertical ? 0 : Appearance.padding.smaller
+    anchors.top: vertical ? prevAnchor.bottom : undefined
+    anchors.topMargin: vertical ? Appearance.padding.smaller : 0
+
+    anchors.horizontalCenter: vertical ? prevAnchor.horizontalCenter : undefined
+    anchors.verticalCenter: vertical ? undefined : prevAnchor.verticalCenter
+}

widgets/PaddedRect.qml

@@ -1,13 +1,9 @@
 import "root:/config"
 import QtQuick
 
-Rectangle {
+StyledRect {
     id: root
 
-    property bool vertical: false
-    property bool homogenous: false
-    property bool animated: false
-    property int spacing: Appearance.spacing.small
     property var padding: 0
 
     readonly property int paddingTop: getRealPadding().top
@@ -44,8 +40,6 @@ Rectangle {
         return pad;
     }
 
-    color: "transparent"
-
     implicitWidth: childrenRect.width + paddingX
     implicitHeight: childrenRect.height + paddingY
 
@@ -55,32 +49,4 @@ Rectangle {
             child.y = Qt.binding(() => paddingTop);
         }
     }
-
-    Behavior on color {
-        ColorAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standard
-        }
-    }
-
-    Behavior on implicitWidth {
-        enabled: root.animated
-
-        NumberAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
-
-    Behavior on implicitHeight {
-        enabled: root.animated
-
-        NumberAnimation {
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
 }

widgets/StyledRect.qml

@@ -0,0 +1,41 @@
+import "root:/config"
+import QtQuick
+
+Rectangle {
+    id: root
+
+    property bool animated: false
+    property bool vertical: false // Convenience property for propagation to children
+
+    color: "transparent"
+    implicitWidth: childrenRect.width
+    implicitHeight: childrenRect.height
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+}