bar/popouts: add audio device switcher (#319)

* feat: basic audio switcher

* feat: replace VerticalSlider with StyledSlider

* fix: styling

* fix: formatting

* chore: make sound icons consistent, change slider styling

* feat: styled slider component variants

* chore: cleanup

* chore: cleanup

* fix: pr fixes

* fix: remove redundant code

* chore: remove old code

* fix: controls styling

* fixes

* more tweaks

* radiobtn: add interaction stuff

Anim slider

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

3 files changed, 118 insertions, 1 deletions

diff --git a/components/controls/VerticalSlider.qml b/components/controls/FilledSlider.qml
index 306cc24..8d0e547 100644
--- a/components/controls/VerticalSlider.qml
+++ b/components/controls/FilledSlider.qml
@@ -25,7 +25,7 @@ Slider {
             implicitHeight: parent.height - y
 
             color: Colours.alpha(Colours.palette.m3secondary, true)
-            radius: Appearance.rounding.full
+            radius: parent.radius
         }
     }
 
diff --git a/components/controls/StyledRadioButton.qml b/components/controls/StyledRadioButton.qml
new file mode 100644
index 0000000..73fc836
--- /dev/null
+++ b/components/controls/StyledRadioButton.qml
@@ -0,0 +1,58 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+RadioButton {
+    id: root
+
+    font.pointSize: Appearance.font.size.smaller
+
+    indicator: Rectangle {
+        id: outerCircle
+
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: Appearance.rounding.full
+        color: "transparent"
+        border.color: root.checked ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
+        border.width: 2
+        anchors.verticalCenter: parent.verticalCenter
+
+        StateLayer {
+            anchors.margins: -Appearance.padding.smaller
+            color: root.checked ? Colours.palette.m3onSurface : Colours.palette.m3primary
+            z: -1
+
+            function onClicked(): void {
+                root.click();
+            }
+        }
+
+        StyledRect {
+            anchors.centerIn: parent
+            implicitWidth: 8
+            implicitHeight: 8
+
+            radius: Appearance.rounding.full
+            color: root.checked ? Colours.palette.m3primary : "transparent"
+        }
+
+        Behavior on border.color {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+
+    contentItem: StyledText {
+        text: root.text
+        font.pointSize: root.font.pointSize
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: outerCircle.right
+        anchors.leftMargin: Appearance.spacing.smaller
+    }
+}
diff --git a/components/controls/StyledSlider.qml b/components/controls/StyledSlider.qml
new file mode 100644
index 0000000..0352cef
--- /dev/null
+++ b/components/controls/StyledSlider.qml
@@ -0,0 +1,59 @@
+import qs.components
+import qs.config
+import qs.services
+import QtQuick.Controls
+import QtQuick
+
+Slider {
+    id: slider
+
+    background: Item {
+        StyledRect {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.topMargin: slider.implicitHeight / 3
+            anchors.bottomMargin: slider.implicitHeight / 3
+
+            implicitWidth: slider.handle.x - slider.implicitHeight / 6
+
+            color: Colours.palette.m3primary
+            radius: Appearance.rounding.full
+            topRightRadius: slider.implicitHeight / 15
+            bottomRightRadius: slider.implicitHeight / 15
+        }
+
+        StyledRect {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.topMargin: slider.implicitHeight / 3
+            anchors.bottomMargin: slider.implicitHeight / 3
+
+            implicitWidth: parent.width - slider.handle.x - slider.handle.implicitWidth - slider.implicitHeight / 6
+
+            color: Colours.palette.m3surfaceContainer
+            radius: Appearance.rounding.full
+            topLeftRadius: slider.implicitHeight / 15
+            bottomLeftRadius: slider.implicitHeight / 15
+        }
+    }
+
+    handle: StyledRect {
+        id: rect
+
+        x: slider.visualPosition * slider.availableWidth
+
+        implicitWidth: slider.implicitHeight / 4.5
+        implicitHeight: slider.implicitHeight
+
+        color: Colours.palette.m3primary
+        radius: Appearance.rounding.full
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onPressed: event => event.accepted = false
+        }
+    }
+}