tray: minor button updates to match

3 files changed, 39 insertions, 67 deletions

diff --git a/modules/bar/popouts/Audio.qml b/modules/bar/popouts/Audio.qml
index 0954b10..827f868 100644
--- a/modules/bar/popouts/Audio.qml
+++ b/modules/bar/popouts/Audio.qml
@@ -9,6 +9,7 @@ import Quickshell.Services.Pipewire
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
+import "../../controlcenter/network"
 
 Item {
     id: root
@@ -104,40 +105,16 @@ Item {
             }
         }
 
-        StyledRect {
+        SimpleButton {
+            Layout.fillWidth: true
             Layout.topMargin: Appearance.spacing.normal
-
-            implicitWidth: expandBtn.implicitWidth + Appearance.padding.normal * 2
-            implicitHeight: expandBtn.implicitHeight + Appearance.padding.small
-
-            radius: Appearance.rounding.normal
             color: Colours.palette.m3primaryContainer
+            onColor: Colours.palette.m3onPrimaryContainer
+            text: qsTr("Open Settings")
+            icon: "chevron_right"
 
-            StateLayer {
-                color: Colours.palette.m3onPrimaryContainer
-
-                function onClicked(): void {
-                    root.wrapper.detach("audio");
-                }
-            }
-
-            RowLayout {
-                id: expandBtn
-
-                anchors.centerIn: parent
-                spacing: Appearance.spacing.small
-
-                StyledText {
-                    Layout.leftMargin: Appearance.padding.smaller
-                    text: qsTr("Open Settings")
-                    color: Colours.palette.m3onPrimaryContainer
-                }
-
-                MaterialIcon {
-                    text: "chevron_right"
-                    color: Colours.palette.m3onPrimaryContainer
-                    font.pointSize: Appearance.font.size.large
-                }
+            onClicked: {
+                root.wrapper.detach("audio");
             }
         }
     }
diff --git a/modules/bar/popouts/Bluetooth.qml b/modules/bar/popouts/Bluetooth.qml
index a43bba1..60af466 100644
--- a/modules/bar/popouts/Bluetooth.qml
+++ b/modules/bar/popouts/Bluetooth.qml
@@ -9,6 +9,7 @@ import Quickshell
 import Quickshell.Bluetooth
 import QtQuick
 import QtQuick.Layouts
+import "../../controlcenter/network"
 
 ColumnLayout {
     id: root
@@ -164,39 +165,16 @@ ColumnLayout {
         }
     }
 
-    StyledRect {
-        Layout.topMargin: Appearance.spacing.small
-        implicitWidth: expandBtn.implicitWidth + Appearance.padding.normal * 2
-        implicitHeight: expandBtn.implicitHeight + Appearance.padding.small
-
-        radius: Appearance.rounding.normal
+    SimpleButton {
+        Layout.fillWidth: true
+        Layout.topMargin: Appearance.spacing.normal
         color: Colours.palette.m3primaryContainer
+        onColor: Colours.palette.m3onPrimaryContainer
+        text: qsTr("Open Settings")
+        icon: "chevron_right"
 
-        StateLayer {
-            color: Colours.palette.m3onPrimaryContainer
-
-            function onClicked(): void {
-                root.wrapper.detach("bluetooth");
-            }
-        }
-
-        RowLayout {
-            id: expandBtn
-
-            anchors.centerIn: parent
-            spacing: Appearance.spacing.small
-
-            StyledText {
-                Layout.leftMargin: Appearance.padding.smaller
-                text: qsTr("Open Settings")
-                color: Colours.palette.m3onPrimaryContainer
-            }
-
-            MaterialIcon {
-                text: "chevron_right"
-                color: Colours.palette.m3onPrimaryContainer
-                font.pointSize: Appearance.font.size.large
-            }
+        onClicked: {
+            root.wrapper.detach("bluetooth");
         }
     }
 
diff --git a/modules/controlcenter/network/SimpleButton.qml b/modules/controlcenter/network/SimpleButton.qml
index 49ab2f4..c949db3 100644
--- a/modules/controlcenter/network/SimpleButton.qml
+++ b/modules/controlcenter/network/SimpleButton.qml
@@ -1,7 +1,9 @@
 import qs.components
+import qs.components.controls
 import qs.components.effects
 import qs.config
 import QtQuick
+import QtQuick.Layouts
 
 StyledRect {
     id: root
@@ -10,9 +12,10 @@ StyledRect {
     property alias disabled: stateLayer.disabled
     property alias text: label.text
     property alias enabled: stateLayer.enabled
+    property string icon: ""
 
-    implicitWidth: label.implicitWidth + Appearance.padding.normal * 2
-    implicitHeight: label.implicitHeight + Appearance.padding.normal * 2
+    implicitWidth: rowLayout.implicitWidth + Appearance.padding.normal * 2
+    implicitHeight: rowLayout.implicitHeight + Appearance.padding.small
     radius: Appearance.rounding.normal
 
     StateLayer {
@@ -25,10 +28,24 @@ StyledRect {
         }
     }
 
-    StyledText {
-        id: label
+    RowLayout {
+        id: rowLayout
         anchors.centerIn: parent
-        color: parent.onColor
+        spacing: Appearance.spacing.small
+
+        StyledText {
+            id: label
+            Layout.leftMargin: root.icon.length > 0 ? Appearance.padding.smaller : 0
+            color: parent.parent.onColor
+        }
+
+        MaterialIcon {
+            id: iconItem
+            visible: root.icon.length > 0
+            text: root.icon
+            color: root.onColor
+            font.pointSize: Appearance.font.size.large
+        }
     }
 
     signal clicked