From ce1418cfdbbbd9821c82122cc5fdc62e171da65a Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Mon, 26 May 2025 11:39:37 +0200
Subject: [PATCH] refractor radiobutton in volume mixer to new file

---
 .../common/widgets/StyledRadioButton.qml      | 86 ++++++++++++++++
 .../sidebarRight/volumeMixer/VolumeMixer.qml  | 98 +------------------
 2 files changed, 90 insertions(+), 94 deletions(-)
 create mode 100644 .config/quickshell/modules/common/widgets/StyledRadioButton.qml

diff --git a/.config/quickshell/modules/common/widgets/StyledRadioButton.qml b/.config/quickshell/modules/common/widgets/StyledRadioButton.qml
new file mode 100644
index 000000000..f665a3f13
--- /dev/null
+++ b/.config/quickshell/modules/common/widgets/StyledRadioButton.qml
@@ -0,0 +1,86 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/services"
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+
+RadioButton {
+    id: root
+    implicitHeight: 40
+    property string description
+    property color activeColor: Appearance?.m3colors.m3primary ?? "#685496"
+    property color inactiveColor: Appearance?.m3colors.m3onSurfaceVariant ?? "#45464F"
+
+    PointingHandInteraction {}
+
+    indicator: Item{}
+    
+    contentItem: RowLayout {
+        Layout.fillWidth: true
+        spacing: 12
+        Rectangle {
+            id: radio
+            Layout.fillWidth: false
+            Layout.alignment: Qt.AlignVCenter
+            width: 20
+            height: 20
+            radius: Appearance?.rounding.full
+            border.color: checked ? root.activeColor : root.inactiveColor
+            border.width: 2
+            color: "transparent"
+
+            // Checked indicator
+            Rectangle {
+                anchors.centerIn: parent
+                width: checked ? 10 : 4
+                height: checked ? 10 : 4
+                radius: Appearance?.rounding.full
+                color: Appearance?.m3colors.m3primary
+                opacity: checked ? 1 : 0
+
+                Behavior on opacity {
+                    animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                Behavior on width {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on height {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+
+            }
+
+            // Hover
+            Rectangle {
+                anchors.centerIn: parent
+                width: root.hovered ? 40 : 20
+                height: root.hovered ? 40 : 20
+                radius: Appearance?.rounding.full
+                color: Appearance?.m3colors.m3onSurface
+                opacity: root.hovered ? 0.1 : 0
+
+                Behavior on opacity {
+                    animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                Behavior on width {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on height {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+            }
+        }
+
+        StyledText {
+            text: root.description
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            wrapMode: Text.Wrap
+            color: Appearance?.m3colors.m3onSurface
+        }
+    }
+}
\ No newline at end of file
diff --git a/.config/quickshell/modules/sidebarRight/volumeMixer/VolumeMixer.qml b/.config/quickshell/modules/sidebarRight/volumeMixer/VolumeMixer.qml
index 4fd51c75d..a7a88a403 100644
--- a/.config/quickshell/modules/sidebarRight/volumeMixer/VolumeMixer.qml
+++ b/.config/quickshell/modules/sidebarRight/volumeMixer/VolumeMixer.qml
@@ -212,12 +212,14 @@ Item {
                             })
 
                             // This could and should be refractored, but all data becomes null when passed wtf
-                            delegate: RadioButton {
+                            delegate: StyledRadioButton {
                                 id: radioButton
+                                required property var modelData
                                 Layout.leftMargin: root.dialogMargins
                                 Layout.rightMargin: root.dialogMargins
                                 Layout.fillWidth: true
-                                implicitHeight: 40
+
+                                description: modelData.description
                                 checked: modelData.id === Pipewire.defaultAudioSink?.id
 
                                 Connections {
@@ -228,103 +230,11 @@ Item {
                                     }
                                 }
 
-                                PointingHandInteraction {}
-
                                 onCheckedChanged: {
                                     if (checked) {
                                         root.selectedDevice = modelData
                                     }
                                 }
-
-                                indicator: Item{}
-                                
-                                contentItem: RowLayout {
-                                    Layout.fillWidth: true
-                                    spacing: 12
-                                    Rectangle {
-                                        id: radio
-                                        Layout.fillWidth: false
-                                        Layout.alignment: Qt.AlignVCenter
-                                        width: 20
-                                        height: 20
-                                        radius: Appearance.rounding.full
-                                        border.color: checked ? Appearance.m3colors.m3primary : Appearance.m3colors.m3onSurfaceVariant
-                                        border.width: 2
-                                        color: "transparent"
-
-                                        // Checked indicator
-                                        Rectangle {
-                                            anchors.centerIn: parent
-                                            width: checked ? 10 : 4
-                                            height: checked ? 10 : 4
-                                            radius: Appearance.rounding.full
-                                            color: Appearance.m3colors.m3primary
-                                            opacity: checked ? 1 : 0
-
-                                            Behavior on opacity {
-                                                NumberAnimation {
-                                                    duration: Appearance.animation.elementMoveFast.duration
-                                                    easing.type: Appearance.animation.elementMoveFast.type
-                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                                                }
-                                            }
-                                            Behavior on width {
-                                                NumberAnimation {
-                                                    duration: Appearance.animation.elementMoveFast.duration
-                                                    easing.type: Appearance.animation.elementMoveFast.type
-                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                                                }
-                                            }
-                                            Behavior on height {
-                                                NumberAnimation {
-                                                    duration: Appearance.animation.elementMoveFast.duration
-                                                    easing.type: Appearance.animation.elementMoveFast.type
-                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                                                }
-                                            }
-
-                                        }
-
-                                        // Hover
-                                        Rectangle {
-                                            anchors.centerIn: parent
-                                            width: radioButton.hovered ? 40 : 20
-                                            height: radioButton.hovered ? 40 : 20
-                                            radius: Appearance.rounding.full
-                                            color: Appearance.m3colors.m3onSurface
-                                            opacity: radioButton.hovered ? 0.1 : 0
-
-                                            Behavior on opacity {
-                                                NumberAnimation {
-                                                    duration: Appearance.animation.elementMoveFast.duration
-                                                    easing.type: Appearance.animation.elementMoveFast.type
-                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                                                }
-                                            }
-                                            Behavior on width {
-                                                NumberAnimation {
-                                                    duration: Appearance.animation.elementMoveFast.duration
-                                                    easing.type: Appearance.animation.elementMoveFast.type
-                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                                                }
-                                            }
-                                            Behavior on height {
-                                                NumberAnimation {
-                                                    duration: Appearance.animation.elementMoveFast.duration
-                                                    easing.type: Appearance.animation.elementMoveFast.type
-                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                                                }
-                                            }
-                                        }
-                                    }
-                                    StyledText {
-                                        text: modelData.description
-                                        Layout.alignment: Qt.AlignVCenter
-                                        Layout.fillWidth: true
-                                        wrapMode: Text.Wrap
-                                        color: Appearance.m3colors.m3onSurface
-                                    }
-                                }
                             }
                         }
                         Item {