hefty: bar: proper vertical layouting

dots/.config/quickshell/ii/modules/common/config/HeftyConfig.qml

@@ -4,8 +4,10 @@ import Quickshell.Io
 
 JsonObject {
     property JsonObject bar: JsonObject {
-        property list<var> leftWidgets: []
-        property list<var> centerWidgets: [["Workspaces"]]
+        property list<var> leftWidgets: [["HWindowInfo"]]
+        property list<var> centerLeftWidgets: [["HTime"]]
+        property list<var> centerWidgets: [["HWorkspaces"]]
+        property list<var> centerRightWidgets: [["HBattery"]]
         property list<var> rightWidgets: []
         property bool m3ExpressiveGrouping: true
     }

dots/.config/quickshell/ii/modules/common/widgets/AxisRectangle.qml

@@ -0,0 +1,15 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+
+StyledRectangle {
+    id: root
+    
+    property bool vertical: false
+    property real startRadius
+    property real endRadius
+
+    topLeftRadius: startRadius
+    topRightRadius: vertical ? startRadius : endRadius
+    bottomLeftRadius: vertical ? endRadius : startRadius
+    bottomRightRadius: endRadius
+}

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarContent.qml

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.modules.common as C
@@ -5,36 +6,70 @@ import qs.modules.common as C
 Item {
     id: root
 
+    property bool vertical: C.Config.options.bar.vertical
+    property real spacing: 4
+
     Side {
         id: leftSide
         anchors.left: parent.left
-        width: (parent.width - centerSide.width) / 2
+        anchors.top: parent.top
+
         HBarUserFallbackComponentRepeater {
             componentNames: C.Config.options.hefty.bar.leftWidgets
         }
     }
 
+    Side {
+        id: centerLeftSide
+        anchors.right: !root.vertical ? centerSide.left : parent.right
+        anchors.bottom: root.vertical ? parent.bottom : undefined
+        HBarUserFallbackComponentRepeater {
+            componentNames: C.Config.options.hefty.bar.centerLeftWidgets
+        }
+    }
+
     Side {
         id: centerSide
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: root.vertical ? parent.verticalCenter : undefined
+        anchors.horizontalCenter: !root.vertical ? parent.horizontalCenter : undefined
         HBarUserFallbackComponentRepeater {
             componentNames: C.Config.options.hefty.bar.centerWidgets
         }
     }
 
+    Side {
+        id: centerRightSide
+        anchors.left: !root.vertical ? centerSide.right : parent.left
+        anchors.top: root.vertical ? parent.top : undefined
+        HBarUserFallbackComponentRepeater {
+            componentNames: C.Config.options.hefty.bar.centerRightWidgets
+        }
+    }
+
     Side {
         id: rightSide
         anchors.right: parent.right
-        width: (parent.width - centerSide.width) / 2
+        anchors.bottom: parent.bottom
         HBarUserFallbackComponentRepeater {
             componentNames: C.Config.options.hefty.bar.rightWidgets
         }
     }
 
-    component Side: RowLayout {
+    component Side: GridLayout {
         anchors {
-            top: parent.top
-            bottom: parent.bottom
+            top: !root.vertical ? parent.top : undefined
+            bottom: !root.vertical ? parent.bottom : undefined
+            topMargin: root.spacing * root.vertical
+            bottomMargin: root.spacing * root.vertical
+            left: root.vertical ? parent.left : undefined
+            right: root.vertical ? parent.right : undefined
+            leftMargin: root.spacing * !root.vertical
+            rightMargin: root.spacing * !root.vertical
         }
+
+        columns: C.Config.options.bar.vertical ? 1 : -1
+        property real spacing: root.spacing
+        columnSpacing: spacing
+        rowSpacing: spacing
     }
 }

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarGroupContainer.qml

@@ -17,17 +17,18 @@ Item {
     readonly property bool vertical: C.Config.options.bar.vertical
     readonly property bool m3eRadius: C.Config.options.hefty.bar.m3ExpressiveGrouping
     readonly property real barUndirectionalWidth: C.Config.options.bar.vertical ? C.Appearance.sizes.baseVerticalBarWidth : C.Appearance.sizes.baseBarHeight
+    readonly property real backgroundUndirectionalWidth: barUndirectionalWidth - margins * 2
 
-    implicitWidth: vertical ? barUndirectionalWidth : layout.implicitWidth + (padding + margins) * 2
-    implicitHeight: vertical ? layout.implicitHeight + (padding + margins) * 2 : barUndirectionalWidth
+    implicitWidth: vertical ? barUndirectionalWidth : layout.implicitWidth + padding * 2
+    implicitHeight: vertical ? layout.implicitHeight + padding * 2 : barUndirectionalWidth
 
-    W.StyledRectangle {
+    W.AxisRectangle {
         id: bg
         anchors.centerIn: parent
         contentLayer: W.StyledRectangle.ContentLayer.Pane
 
-        width: (root.vertical ? root.barUndirectionalWidth : root.width) - root.margins * 2
-        height: (root.vertical ? root.height : root.barUndirectionalWidth) - root.margins * 2
+        width: root.vertical ? root.backgroundUndirectionalWidth : root.width
+        height: root.vertical ? root.height : root.backgroundUndirectionalWidth
 
         property real fullRadius: Math.min(width, height) / 2
         function getRadius(atSide) {
@@ -38,12 +39,9 @@ Item {
                 return 12;
             }
         }
-        property real startRadius: getRadius(root.startSide)
-        property real endRadius: getRadius(root.endSide)
-        topLeftRadius: startRadius
-        topRightRadius: root.vertical ? startRadius : endRadius
-        bottomLeftRadius: root.vertical ? endRadius : startRadius
-        bottomRightRadius: endRadius
+        vertical: root.vertical
+        startRadius: getRadius(root.startSide)
+        endRadius: getRadius(root.endSide)
     }
 
     GridLayout {