wrap mpris player selection pills into multiple rows with Flow

shell/applets/MprisApplet.qml

@@ -306,20 +306,14 @@ Column {
     // Player switcher
     Item {
         width: root.width
-        height: root.players.length > 1 ? 28 : 0
+        height: root.players.length > 1 ? _playerFlow.implicitHeight + 6 : 0
         visible: root.players.length > 1
 
-        Flickable {
-            id: _switcher
-            anchors.centerIn: parent
-            width: Math.min(_playerRow.implicitWidth, parent.width - 16)
-            height: 22
-            contentWidth: _playerRow.implicitWidth
-            clip: true
-
-            Row {
-                id: _playerRow
-                height: 22
+        Flow {
+            id: _playerFlow
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - 16
             spacing: 6
 
             Repeater {
@@ -337,7 +331,6 @@ Column {
                     color: _active ? S.Theme.base02 : (pHover.hovered ? S.Theme.base02 : "transparent")
                     border.color: _active ? root.accentColor : S.Theme.base03
                     border.width: _active ? 1 : 0
-                        anchors.verticalCenter: parent.verticalCenter
 
                     Text {
                         id: _pLabel
@@ -364,4 +357,3 @@ Column {
         }
     }
 }
-}

shell/services/MprisService.qml

@@ -1,6 +1,7 @@
 pragma Singleton
 
 import QtQuick
+import QtQml.Models
 import Quickshell.Services.Mpris
 
 QtObject {
@@ -13,7 +14,6 @@ QtObject {
 
     property string _selectedIdentity: ""
     property var _lastPlayedTime: ({})
-    property var _watchers: []
 
     onPlayerChanged: {
         if (player)
@@ -33,33 +33,18 @@ QtObject {
         }
     }
 
-    // Watch raw Mpris.players for add/remove - this does NOT fire on state changes
-    property Connections _mprisConn: Connections {
-        target: Mpris
-        function onPlayersChanged() {
-            root._reconnectWatchers();
-        }
-    }
-
-    function _reconnectWatchers() {
-        for (const w of _watchers)
-            w.destroy();
-
-        const raw = Mpris.players.values ?? [];
-        const newWatchers = [];
-        for (const p of raw) {
-            const conn = _watcherComp.createObject(root, {
-                target: p
-            });
-            newWatchers.push(conn);
-        }
-        _watchers = newWatchers;
-    }
-
-    property Component _watcherComp: Component {
-        Connections {
+    // Watch all raw players for state changes via Instantiator -
+    // delegates persist across state changes since the model only
+    // changes on player add/remove, not property changes
+    property Instantiator _stateWatchers: Instantiator {
+        model: Mpris.players
+        delegate: QtObject {
+            required property MprisPlayer modelData
+            property Connections _conn: Connections {
+                target: modelData
                 function onPlaybackStateChanged() {
-                root._onPlaybackStateChanged(target);
+                    root._onPlaybackStateChanged(modelData);
+                }
             }
         }
     }
@@ -84,7 +69,6 @@ QtObject {
                 }
             }
         } else if (p.playbackState === MprisPlaybackState.Paused && p === player) {
-            // Current player paused - switch to a playing one if available
             _switchToPlaying();
         }
     }
@@ -139,6 +123,4 @@ QtObject {
         if (players[idx])
             _selectedIdentity = players[idx].identity ?? "";
     }
-
-    Component.onCompleted: _reconnectWatchers()
 }