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)
-                total += rowLayout.children[i].baseWidth;
+            const child = rowLayout.children[i];
+            total += child.baseWidth ?? child.implicitWidth ?? child.width;
         }
         return total + rowLayout.spacing * (rowLayout.children.length - 1);
     }
@@ -27,23 +28,20 @@ Rectangle {
     topLeftRadius: rowLayout.children.length > 0 ? (rowLayout.children[0].radius + padding) : 
         Appearance?.rounding?.small
     bottomLeftRadius: topLeftRadius
-    topRightRadius: {
-        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
-    }
+    topRightRadius: 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
         anchors.fill: parent
         anchors.margins: root.padding
         spacing: root.spacing
-        property int clickIndex: -1        
+        property int clickIndex: -1
     }]
 }

.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
-    implicitHeight: button.down ? clickedHeight : baseHeight
+    implicitWidth: (button.down && bounce) ? clickedWidth : baseWidth
+    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,20 +284,12 @@ int main(int argc, char* argv[]) {
                 delegate: ApiCommandButton {
                     id: commandButton
                     colBackground: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
-
-                    contentItem: RowLayout {
-                        spacing: 5
-                        StyledText {
-                            font.pixelSize: Appearance.font.pixelSize.small
-                            color: Appearance.m3colors.m3onSurface
-                            text: modelData.displayName ?? modelData.name
-                        }
-                        StyledText {
-                            visible: modelData.count !== undefined
-                            font.pixelSize: Appearance.font.pixelSize.smaller
-                            color: Appearance.m3colors.m3outline
-                            text: modelData.count ?? ""
-                        }
+                    bounce: false
+                    contentItem: StyledText {
+                        font.pixelSize: Appearance.font.pixelSize.small
+                        color: Appearance.m3colors.m3onSurface
+                        horizontalAlignment: Text.AlignHCenter
+                        text: modelData.displayName ?? modelData.name
                     }
 
                     onHoveredChanged: {
@@ -524,20 +517,25 @@ int main(int argc, char* argv[]) {
 
                 Item { Layout.fillWidth: true }
 
-                Repeater { // Command buttons
-                    id: commandRepeater
-                    model: commandButtonsRow.commandsShown
-                    delegate: ApiCommandButton {
-                        id: commandButton
-                        property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
-                        buttonText: commandRepresentation
-                        onClicked: {
-                            if(modelData.sendDirectly) {
-                                root.handleInput(commandRepresentation)
-                            } else {
-                                messageInputField.text = commandRepresentation + " "
-                                messageInputField.cursorPosition = messageInputField.text.length
-                                messageInputField.forceActiveFocus()
+                ButtonGroup {
+                    padding: 0
+
+                    Repeater { // Command buttons
+                        model: commandButtonsRow.commandsShown
+                        delegate: ApiCommandButton {
+                            property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
+                            buttonText: commandRepresentation
+                            onClicked: {
+                                if(modelData.sendDirectly) {
+                                    root.handleInput(commandRepresentation)
+                                } else {
+                                    messageInputField.text = commandRepresentation + " "
+                                    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,22 +619,28 @@ Item {
 
                 Item { Layout.fillWidth: true }
 
-                Repeater { // Command buttons
-                    id: commandRepeater
-                    model: commandButtonsRow.commandsShown
-                    delegate: ApiCommandButton {
-                        id: tagButton
-                        property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
-                        buttonText: commandRepresentation
-                        colBackground: Appearance.colors.colLayer2
+                ButtonGroup {
+                    padding: 0
+                    Repeater { // Command buttons
+                        id: commandRepeater
+                        model: commandButtonsRow.commandsShown
+                        delegate: ApiCommandButton {
+                            id: tagButton
+                            property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
+                            buttonText: commandRepresentation
+                            colBackground: Appearance.colors.colLayer2
 
-                        onClicked: {
-                            if(modelData.sendDirectly) {
-                                root.handleInput(commandRepresentation)
-                            } else {
-                                tagInputField.text = commandRepresentation + " "
-                                tagInputField.cursorPosition = tagInputField.text.length
-                                tagInputField.forceActiveFocus()
+                            onClicked: {
+                                if(modelData.sendDirectly) {
+                                    root.handleInput(commandRepresentation)
+                                } else {
+                                    tagInputField.text = commandRepresentation + " "
+                                    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
-    leftPadding: 10
-    rightPadding: 10
+    horizontalPadding: 8
+    verticalPadding: 6
+
+    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