left sidebar: bouncy command buttons

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

@@ -14,12 +14,13 @@ Rectangle {
     default property alias content: rowLayout.data
     property real spacing: 5
     property real padding: 5
+    property int clickIndex: rowLayout.clickIndex
 
     property real contentWidth: {
         let total = 0;
         for (let i = 0; i < rowLayout.children.length; ++i) {
-            if (rowLayout.children[i].baseWidth !== undefined)
+            const child = rowLayout.children[i];
-                total += rowLayout.children[i].baseWidth;
+            total += child.baseWidth ?? child.implicitWidth ?? child.width;
         }
         return total + rowLayout.spacing * (rowLayout.children.length - 1);
     }
@@ -27,17 +28,14 @@ Rectangle {
     topLeftRadius: rowLayout.children.length > 0 ? (rowLayout.children[0].radius + padding) : 
         Appearance?.rounding?.small
     bottomLeftRadius: topLeftRadius
-    topRightRadius: {
+    topRightRadius: rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : 
-        console.log(rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : 
-            Appearance?.rounding?.small)
-        return rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : 
         Appearance?.rounding?.small
-    }
     bottomRightRadius: topRightRadius
 
     color: "transparent"
     width: root.contentWidth + padding * 2
     implicitHeight: rowLayout.implicitHeight + padding * 2
+    implicitWidth: root.contentWidth + padding * 2
     
     children: [RowLayout {
         id: rowLayout

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

@@ -15,6 +15,7 @@ Button {
     property real buttonRadius: Appearance?.rounding?.small ?? 4
     property real buttonRadiusPressed: buttonRadius
     property var altAction
+    property bool bounce: true
     property real baseWidth: 40
     property real baseHeight: 40
     property real clickedWidth: baseWidth + 20
@@ -23,8 +24,8 @@ Button {
     property int clickIndex: parentGroup?.clickIndex ?? -1
 
     Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(button) && parentGroup.children.indexOf(button) <= clickIndex + 1)
-    implicitWidth: button.down ? clickedWidth : baseWidth
+    implicitWidth: (button.down && bounce) ? clickedWidth : baseWidth
-    implicitHeight: button.down ? clickedHeight : baseHeight
+    implicitHeight: (button.down && bounce) ? clickedHeight : baseHeight
     
     Behavior on implicitWidth {
         animation: Appearance.animation.clickBounce.numberAnimation.createObject(this)

.config/quickshell/modules/sidebarLeft/AiChat.qml

@@ -271,6 +271,7 @@ int main(int argc, char* argv[]) {
             id: suggestions
             visible: root.suggestionList.length > 0 && messageInputField.text.length > 0
             property int selectedIndex: 0
+            property int clickIndex: -1
             Layout.fillWidth: true
             spacing: 5
 
@@ -283,21 +284,13 @@ int main(int argc, char* argv[]) {
                 delegate: ApiCommandButton {
                     id: commandButton
                     colBackground: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
-
+                    bounce: false
-                    contentItem: RowLayout {
+                    contentItem: StyledText {
-                        spacing: 5
-                        StyledText {
                         font.pixelSize: Appearance.font.pixelSize.small
                         color: Appearance.m3colors.m3onSurface
+                        horizontalAlignment: Text.AlignHCenter
                         text: modelData.displayName ?? modelData.name
                     }
-                        StyledText {
-                            visible: modelData.count !== undefined
-                            font.pixelSize: Appearance.font.pixelSize.smaller
-                            color: Appearance.m3colors.m3outline
-                            text: modelData.count ?? ""
-                        }
-                    }
 
                     onHoveredChanged: {
                         if (commandButton.hovered) {
@@ -524,11 +517,12 @@ int main(int argc, char* argv[]) {
 
                 Item { Layout.fillWidth: true }
 
+                ButtonGroup {
+                    padding: 0
+
                     Repeater { // Command buttons
-                    id: commandRepeater
                         model: commandButtonsRow.commandsShown
                         delegate: ApiCommandButton {
-                        id: commandButton
                             property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
                             buttonText: commandRepresentation
                             onClicked: {
@@ -539,6 +533,10 @@ int main(int argc, char* argv[]) {
                                     messageInputField.cursorPosition = messageInputField.text.length
                                     messageInputField.forceActiveFocus()
                                 }
+                                if (modelData.name === "clear") {
+                                    messageInputField.text = ""
+                                }
+                            }
                         }
                     }
                 }

.config/quickshell/modules/sidebarLeft/Anime.qml

@@ -308,20 +308,24 @@ Item {
                 }
                 delegate: ApiCommandButton {
                     id: tagButton
-
                     colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
-                    
+                    bounce: false
                     contentItem: RowLayout {
+                        anchors.centerIn: parent
                         spacing: 5
                         StyledText {
+                            Layout.fillWidth: false
                             font.pixelSize: Appearance.font.pixelSize.small
                             color: Appearance.m3colors.m3onSurface
+                            horizontalAlignment: Text.AlignRight
                             text: modelData.displayName ?? modelData.name
                         }
                         StyledText {
+                            Layout.fillWidth: false
                             visible: modelData.count !== undefined
                             font.pixelSize: Appearance.font.pixelSize.smaller
                             color: Appearance.m3colors.m3outline
+                            horizontalAlignment: Text.AlignLeft
                             text: modelData.count ?? ""
                         }
                     }
@@ -615,6 +619,8 @@ Item {
 
                 Item { Layout.fillWidth: true }
 
+                ButtonGroup {
+                    padding: 0
                     Repeater { // Command buttons
                         id: commandRepeater
                         model: commandButtonsRow.commandsShown
@@ -632,6 +638,10 @@ Item {
                                     tagInputField.cursorPosition = tagInputField.text.length
                                     tagInputField.forceActiveFocus()
                                 }
+                                if (modelData.name === "clear") {
+                                    tagInputField.text = ""
+                                }
+                            }
                         }
                     }
                 }

.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml

@@ -6,17 +6,20 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 
-RippleButton {
+GroupButton {
     id: button
     property string buttonText
 
-    implicitHeight: 30
+    horizontalPadding: 8
-    leftPadding: 10
+    verticalPadding: 6
-    rightPadding: 10
+
+    baseWidth: contentItem.implicitWidth + horizontalPadding * 2
+    clickedWidth: baseWidth + 20
+    baseHeight: contentItem.implicitHeight + verticalPadding * 2
 
     colBackground: Appearance.colors.colLayer2
     colBackgroundHover: Appearance.colors.colLayer2Hover
-    colRipple: Appearance.colors.colLayer2Active
+    colBackgroundActive: Appearance.colors.colLayer2Active
 
     contentItem: StyledText {
         horizontalAlignment: Text.AlignHCenter