make notif status row less weird

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

@@ -27,7 +27,7 @@ Button {
     property real clickedWidth: baseWidth + (isAtSide ? 10 : 20)
     property real clickedHeight: baseHeight
     property var parentGroup: root.parent
-    property int indexInParent: parentGroup?.children.indexOf(root) ?? 0
+    property int indexInParent: parentGroup?.children.indexOf(root) ?? -1
     property int clickIndex: parentGroup?.clickIndex ?? -1
     property bool isAtSide: indexInParent === 0 || indexInParent === (parentGroup?.childrenCount - 1)
 

dots/.config/quickshell/ii/modules/sidebarRight/notifications/NotificationList.qml

@@ -64,53 +64,32 @@ Item {
         }
     }
 
-    Item {
+    ButtonGroup {
         id: statusRow
-        anchors.left: parent.left
+        anchors {
-        anchors.right: parent.right
+            left: parent.left
-        anchors.bottom: parent.bottom
+            right: parent.right
-
+            bottom: parent.bottom
-        Layout.fillWidth: true
-        implicitHeight: Math.max(
-            controls.implicitHeight,
-            statusText.implicitHeight
-        )
-
-        StyledText {
-            id: statusText
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.leftMargin: 10
-            horizontalAlignment: Text.AlignHCenter
-            text: Translation.tr("%1 notifications").arg(Notifications.list.length)
-
-            opacity: Notifications.list.length > 0 ? 1 : 0
-            visible: opacity > 0
-            Behavior on opacity {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-            }
         }
 
-        ButtonGroup {
+        NotificationStatusButton {
-            id: controls
+            Layout.fillWidth: false
-            anchors.right: parent.right
+            buttonIcon: "notifications_paused"
-            anchors.verticalCenter: parent.verticalCenter
+            toggled: Notifications.silent
-            anchors.rightMargin: 5
+            onClicked: () => {
-
+                Notifications.silent = !Notifications.silent;
-            NotificationStatusButton {
-                buttonIcon: "notifications_paused"
-                buttonText: Translation.tr("Silent")
-                toggled: Notifications.silent
-                onClicked: () => {
-                    Notifications.silent = !Notifications.silent;
-                }
             }
-            NotificationStatusButton {
+        }
-                buttonIcon: "clear_all"
+        NotificationStatusButton {
-                buttonText: Translation.tr("Clear")
+            enabled: false
-                onClicked: () => {
+            Layout.fillWidth: true
-                    Notifications.discardAllNotifications()
+            buttonText: Translation.tr("%1 notifications").arg(Notifications.list.length)
-                }
+        }
+        NotificationStatusButton {
+            Layout.fillWidth: false
+            buttonIcon: "clear_all"
+            onClicked: () => {
+                Notifications.discardAllNotifications()
             }
         }
     }

dots/.config/quickshell/ii/modules/sidebarRight/notifications/NotificationStatusButton.qml

@@ -5,11 +5,12 @@ import QtQuick.Layouts
 
 GroupButton {
     id: button
-    property string buttonText: ""
     property string buttonIcon: ""
+    property string buttonText: ""
 
-    baseWidth: content.implicitWidth + 10 * 2
+    baseHeight: 36
-    baseHeight: 30
+    baseWidth: content.implicitWidth + 46
+    clickedWidth: baseWidth + 6
 
     buttonRadius: baseHeight / 2
     buttonRadiusPressed: Appearance.rounding.small
@@ -28,11 +29,13 @@ GroupButton {
             anchors.centerIn: parent
             spacing: 5
             MaterialSymbol {
+                visible: buttonIcon !== ""
                 text: buttonIcon
-                iconSize: Appearance.font.pixelSize.large
+                iconSize: Appearance.font.pixelSize.huge
                 color: button.colText
             }
             StyledText {
+                visible: buttonText !== ""
                 text: buttonText
                 font.pixelSize: Appearance.font.pixelSize.small
                 color: button.colText