AudioDeviceSelector: In a loader but fake content

Modules/Audio/AudioDeviceSelector.qml

@@ -1,12 +1,127 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell
 import Quickshell.Services.Pipewire
 import qs.Services
 import qs.Widgets
 
+NLoader {
+  id: root
+
+  content: Component {
     NPanel {
-  id: ioSelector
+      id: demoPanel
+
+      readonly property real scaling: Scaling.scale(screen)
+
+      // Ensure panel shows itself once created
+      Component.onCompleted: show()
+
+      Rectangle {
+        color: Colors.backgroundPrimary
+        radius: Style.radiusMedium * scaling
+        border.color: Colors.backgroundTertiary
+        border.width: Math.min(1, Style.borderMedium * scaling)
+        width: 500 * scaling
+        height: 400
+        anchors.centerIn: parent
+
+        // Prevent closing when clicking in the panel bg
+        MouseArea {
+          anchors.fill: parent
+        }
+
+        ColumnLayout {
+          anchors.fill: parent
+          anchors.margins: Style.marginXL * scaling
+          spacing: Style.marginSmall * scaling
+
+          // NIconButton
+          ColumnLayout {
+            spacing: 16 * scaling
+            NText {
+              text: "NIconButton"
+              color: Colors.accentSecondary
+            }
+
+            NIconButton {
+              id: myIconButton
+              icon: "refresh"
+            }
+
+            NDivider {
+              Layout.fillWidth: true
+            }
+          }
+
+          // NToggle
+          ColumnLayout {
+            spacing: Style.marginLarge * scaling
+            NText {
+              text: "NToggle"
+              color: Colors.accentSecondary
+            }
+
+            NToggle {
+              label: "Label"
+              description: "Description"
+              onToggled: function (value) {
+                console.log("NToggle: " + value)
+              }
+            }
+
+            NDivider {
+              Layout.fillWidth: true
+            }
+          }
+
+          // NSlider
+          ColumnLayout {
+            spacing: 16 * scaling
+            NText {
+              text: "Scaling"
+              color: Colors.accentSecondary
+            }
+            RowLayout {
+              spacing: Style.marginSmall * scaling
+              NText {
+                text: `${Math.round(Scaling.overrideScale * 100)}%`
+                Layout.alignment: Qt.AlignVCenter
+              }
+              NSlider {
+                id: scaleSlider
+                from: 0.6
+                to: 1.8
+                stepSize: 0.01
+                value: Scaling.overrideScale
+                onMoved: function () {
+                  Scaling.overrideScale = value
+                }
+                onPressedChanged: function () {
+                  Scaling.overrideEnabled = true
+                }
+              }
+              NIconButton {
+                icon: "restart_alt"
+                sizeMultiplier: 0.7
+                onClicked: function () {
+                  Scaling.overrideEnabled = false
+                  Scaling.overrideScale = 1.0
+                }
+              }
+            }
+            NDivider {
+              Layout.fillWidth: true
+            }
+          }
+        }
+      }
+    }
+  }
+}
+// NPanel {
+//   id: ioSelector
 
 // property int tabIndex: 0
 // property Item anchorItem: null
@@ -366,4 +481,5 @@ NPanel {
 
 //     target: Pipewire
 // }
-}
+// }
+

Modules/Bar/Volume.qml

@@ -40,32 +40,6 @@ Item {
                    Colors.accentPrimary.b + (Colors.error.b - Colors.accentPrimary.b) * factor, 1)
   }
 
-  NPill {
-    id: pill
-    icon: getIcon()
-    iconCircleColor: getVolumeColor()
-    collapsedIconColor: getIconColor()
-    autoHide: true
-    text: Math.round(Audio.volume * 100) + "%"
-    tooltipText: "Volume: " + Math.round(
-                   Audio.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume."
-    onClicked: function () {
-      console.log("onClicked")
-      // if (ioSelector.visible) {
-      //   ioSelector.dismiss()
-      // } else {
-      //   ioSelector.show()
-      // }
-    }
-    onWheel: function (angle) {
-      if (angle > 0) {
-        Audio.volumeIncrement()
-      } else if (angle < 0) {
-        Audio.volumeDecrement()
-      }
-    }
-  }
-
   // Connection used to open the pill when volume changes
   Connections {
     target: Audio.sink?.audio ? Audio.sink?.audio : null
@@ -80,8 +54,29 @@ Item {
     }
   }
 
+  NPill {
+    id: pill
+    icon: getIcon()
+    iconCircleColor: getVolumeColor()
+    collapsedIconColor: getIconColor()
+    autoHide: true
+    text: Math.round(Audio.volume * 100) + "%"
+    tooltipText: "Volume: " + Math.round(
+                   Audio.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume."
+
+    onWheel: function (angle) {
+      if (angle > 0) {
+        Audio.volumeIncrement()
+      } else if (angle < 0) {
+        Audio.volumeDecrement()
+      }
+    }
+    onClicked: function () {
+      ioSelector.isLoaded = !ioSelector.isLoaded
+    }
+  }
+
   AudioDeviceSelector {
     id: ioSelector
-    //     onPanelClosed: ioSelector.dismiss()
   }
 }

Services/Audio.qml

@@ -37,7 +37,7 @@ Singleton {
   }
 
   PwObjectTracker {
-    objects: [Pipewire.defaultAudioSink]
+    objects: [Pipewire.defaultAudioSink, Pipewire.nodes]
   }
 
   Connections {

Widgets/NLoader.qml

@@ -4,7 +4,6 @@ import QtQuick
 // NLoader {
 //   content: Component {
 //     NPanel {
-
 Loader {
   id: loader