bars: refractor bar groups

.config/quickshell/ii/modules/bar/BarGroup.qml

@@ -4,33 +4,38 @@ import QtQuick.Layouts
 
 Item {
     id: root
+    property bool vertical: false
     property real padding: 5
-    implicitHeight: Appearance.sizes.baseBarHeight
-    height: Appearance.sizes.barHeight
-    implicitWidth: rowLayout.implicitWidth + padding * 2
-    default property alias items: rowLayout.children
+    implicitWidth: vertical ? Appearance.sizes.baseVerticalBarWidth : (gridLayout.implicitWidth + padding * 2)
+    implicitHeight: vertical ? (gridLayout.implicitHeight + padding * 2) : Appearance.sizes.baseBarHeight
+    default property alias items: gridLayout.children
 
     Rectangle {
         id: background
         anchors {
             fill: parent
-            topMargin: 4
-            bottomMargin: 4
+            topMargin: root.vertical ? 0 : 4
+            bottomMargin: root.vertical ? 0 : 4
+            leftMargin: root.vertical ? 4 : 0
+            rightMargin: root.vertical ? 4 : 0
         }
         color: Config.options?.bar.borderless ? "transparent" : Appearance.colors.colLayer1
         radius: Appearance.rounding.small
     }
 
-    RowLayout {
-        id: rowLayout
+    GridLayout {
+        id: gridLayout
+        columns: root.vertical ? 1 : -1
         anchors {
-            verticalCenter: parent.verticalCenter
-            left: parent.left
-            right: parent.right
-            leftMargin: root.padding
-            rightMargin: root.padding
+            verticalCenter: root.vertical ? undefined : parent.verticalCenter
+            horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+            left: root.vertical ? undefined : parent.left
+            right: root.vertical ? undefined : parent.right
+            top: root.vertical ? parent.top : undefined
+            bottom: root.vertical ? parent.bottom : undefined
+            margins: root.padding
         }
-        spacing: 4
-
+        columnSpacing: 4
+        rowSpacing: 12
     }
 }