dock: pin button, launcher button

.config/quickshell/modules/common/widgets/GroupButton.qml

@@ -27,9 +27,10 @@ Button {
     property var parentGroup: root.parent
     property int clickIndex: parentGroup?.clickIndex ?? -1
 
-    Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(button) && parentGroup.children.indexOf(button) <= clickIndex + 1)
-    implicitWidth: (button.down && bounce) ? clickedWidth : baseWidth
-    implicitHeight: (button.down && bounce) ? clickedHeight : baseHeight
+    Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(root) && parentGroup.children.indexOf(root) <= clickIndex + 1)
+    Layout.fillHeight: (clickIndex - 1 <= parentGroup.children.indexOf(root) && parentGroup.children.indexOf(root) <= clickIndex + 1)
+    implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth
+    implicitHeight: (root.down && bounce) ? clickedHeight : baseHeight
     
     Behavior on implicitWidth {
         animation: Appearance.animation.clickBounce.numberAnimation.createObject(this)
@@ -56,9 +57,9 @@ Button {
             colBackground)) : colBackground
 
     onDownChanged: {
-        if (button.down) {
-            if (button.parent.clickIndex !== undefined) {
-                button.parent.clickIndex = parent.children.indexOf(button)
+        if (root.down) {
+            if (root.parent.clickIndex !== undefined) {
+                root.parent.clickIndex = parent.children.indexOf(root)
             }
         }
     }

.config/quickshell/modules/common/widgets/VerticalButtonGroup.qml

@@ -0,0 +1,47 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+/**
+ * A container that supports GroupButton children for bounciness.
+ * See https://m3.material.io/components/button-groups/overview
+ */
+Rectangle {
+    id: root
+    default property alias content: columnLayout.data
+    property real spacing: 5
+    property real padding: 0
+    property int clickIndex: columnLayout.clickIndex
+
+    property real contentHeight: {
+        let total = 0;
+        for (let i = 0; i < columnLayout.children.length; ++i) {
+            const child = columnLayout.children[i];
+            total += child.baseHeight ?? child.implicitHeight ?? child.height;
+        }
+        return total + columnLayout.spacing * (columnLayout.children.length - 1);
+    }
+
+    topLeftRadius: columnLayout.children.length > 0 ? (columnLayout.children[0].radius + padding) : 
+        Appearance?.rounding?.small
+    topRightRadius: topLeftRadius
+    bottomLeftRadius: columnLayout.children.length > 0 ? (columnLayout.children[columnLayout.children.length - 1].radius + padding) : 
+        Appearance?.rounding?.small
+    bottomRightRadius: bottomLeftRadius
+
+    color: "transparent"
+    height: root.contentHeight + padding * 2
+    implicitWidth: columnLayout.implicitWidth + padding * 2
+    implicitHeight: root.contentHeight + padding * 2
+    
+    children: [ColumnLayout {
+        id: columnLayout
+        anchors.fill: parent
+        anchors.margins: root.padding
+        spacing: root.spacing
+        property int clickIndex: -1
+    }]
+}