Let a ListView own the bluetooth device list

The panel drove a Flickable by hand: two Repeaters in a Column, plus an
ensureCursorVisible() that mapped each row into content coordinates and
moved contentY itself. That is the machinery a ListView already has, and
the hand-rolled version came with a 6px margin that scrolled the list
whenever the mouse merely rested near the viewport edge.

Flatten the remembered and discovered groups into one model whose entries
carry the section they came from, and let the view keep the current row
visible. Section headers are computed per index the way the network panel
does it. The cursor keeps working in section-relative terms, so
activation, forget, hover, and the hero toggle are untouched.

Positioning has to be deferred a turn: called straight out of
onCurrentIndexChanged it silently does nothing, because the model is
rebuilt every time discovery reports and the swap resets the view out
from under the call.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

shell/plugins/panels/bluetooth/Panel.qml

@@ -122,6 +122,37 @@ Panel {
     return Model.sectionDevices(deviceGroups, section)
   }
 
+  // The scrollable half of the panel — remembered devices, then whatever the
+  // scan turned up — flattened into one model so a ListView can own the
+  // viewport. Each entry carries the section it came from, which is what lets
+  // the delegate and the cursor keep working in section-relative terms.
+  readonly property var scrollRows: {
+    var rows = []
+    for (var k = 0; k < knownDevices.length; k++)
+      rows.push({ dev: knownDevices[k], section: "known", indexInSection: k })
+    if (sectionVisible("discovered"))
+      for (var d = 0; d < discoveredDevices.length; d++)
+        rows.push({ dev: discoveredDevices[d], section: "discovered", indexInSection: d })
+    return rows
+  }
+
+  // Flat position of the keyboard cursor, or -1 while it sits on the hero or
+  // in the connected list (both of which live outside the scroll area).
+  readonly property int scrollRowIndex: {
+    if (focusSection !== "known" && focusSection !== "discovered") return -1
+    for (var i = 0; i < scrollRows.length; i++)
+      if (scrollRows[i].section === focusSection && scrollRows[i].indexInSection === selectedIndex) return i
+    return -1
+  }
+
+  // A row opens a section when it is the first of its kind in the flat list.
+  function scrollSectionTitle(index) {
+    var rows = scrollRows
+    if (index < 0 || index >= rows.length) return ""
+    if (index > 0 && rows[index - 1].section === rows[index].section) return ""
+    return rows[index].section === "known" ? "PAIRED" : "AVAILABLE"
+  }
+
   function audioSinks() {
     var sinks = []
     for (var i = 0; i < pipewireNodes.length; i++) {
@@ -388,22 +419,6 @@ Panel {
   onDiscoveredDevicesChanged: { reselectFocusedDevice(); syncPendingActions() }
   onVisibleSectionsChanged: clampCursor()
 
-  // Keep the keyboard-focused row inside the visible viewport of the device
-  // Flickable. Each DeviceRow calls this when it gains hasCursor. Without
-  // it, j/k can walk the selection off-screen in a long device list.
-  function ensureCursorVisible(item) {
-    if (!item || !deviceFlick) return
-    var pt = item.mapToItem(deviceFlick.contentItem, 0, 0)
-    var top = pt.y
-    var bottom = top + (item.height || 0)
-    var viewTop = deviceFlick.contentY
-    var viewBottom = viewTop + deviceFlick.height
-    var margin = 6
-    if (top < viewTop + margin) deviceFlick.contentY = Math.max(0, top - margin)
-    else if (bottom > viewBottom - margin)
-      deviceFlick.contentY = bottom + margin - deviceFlick.height
-  }
-
   function clampCursor() {
     var sections = visibleSections
     // "header" is virtual and never appears in visibleSections, so it has to
@@ -645,92 +660,86 @@ Panel {
         }
 
         PanelSeparator {
-          visible: root.connectedDevices.length > 0
+          visible: root.connectedDevices.length > 0 && root.scrollRows.length > 0
-                   && (root.knownDevices.length > 0
-                       || (root.adapter && root.adapter.discovering && root.discoveredDevices.length > 0))
           foreground: root.bar.foreground
         }
 
-        Flickable {
+        // ListView, not a Flickable: it owns the scroll position, so it keeps
-          id: deviceFlick
+        // the current row visible on j/k, re-clamps itself when discovery
+        // shortens the list, and — because Contain only moves when a row is
+        // actually clipped — never lurches under a hovering mouse.
+        ListView {
+          id: deviceListView
           width: parent.width
-          height: Math.min(deviceList.implicitHeight, Style.space(400))
+          height: Math.min(contentHeight, Style.space(400))
-          contentWidth: width
+          spacing: Style.space(10)
-          contentHeight: deviceList.implicitHeight
           clip: true
           boundsBehavior: Flickable.StopAtBounds
           interactive: contentHeight > height
 
           ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
 
-          Column {
+          model: root.scrollRows
-            id: deviceList
+          currentIndex: root.scrollRowIndex
-            width: parent.width
+          // Deferred by a turn. Called straight out of the signal the position
-            spacing: Style.space(10)
+          // does not take — verified with the cursor six rows down and
+          // contentY still 0 — because scrollRows is rebuilt every time
+          // discovery reports, and swapping the model resets the view out from
+          // under the call. Network's list is stable enough not to need this.
+          onCurrentIndexChanged: if (currentIndex >= 0) Qt.callLater(keepCurrentVisible)
+          function keepCurrentVisible() {
+            if (currentIndex >= 0) positionViewAtIndex(currentIndex, ListView.Contain)
+          }
 
-            // Remembered devices.
+          delegate: Item {
-            PanelSectionHeader {
+            required property var modelData
-              visible: root.knownDevices.length > 0
+            required property int index
-              text: "PAIRED"
+            readonly property string sectionTitle: root.scrollSectionTitle(index)
-              foreground: root.bar.foreground
-              fontFamily: root.bar.fontFamily
-            }
 
-            Repeater {
+            width: ListView.view.width
-              model: root.knownDevices
+            height: delegateColumn.implicitHeight
-              DeviceRow {
+
-                required property var modelData
+            Column {
-                required property int index
+              id: delegateColumn
-                width: deviceList.width
+              width: parent.width
-                dev: modelData
+              spacing: Style.space(10)
-                rowIndex: index
+
-                sectionName: "known"
+              PanelSeparator {
-                isDiscovered: false
+                visible: index > 0 && sectionTitle !== ""
+                height: visible ? implicitHeight : 0
+                foreground: root.bar.foreground
               }
-            }
 
-            // Discovered (unpaired) devices, only shown while scanning.
+              PanelSectionHeader {
-            PanelSeparator {
+                visible: sectionTitle !== ""
-              visible: root.adapter && root.adapter.discovering && root.discoveredDevices.length > 0
+                height: visible ? implicitHeight : 0
-                       && root.knownDevices.length > 0
+                text: sectionTitle
-              foreground: root.bar.foreground
+                foreground: root.bar.foreground
-            }
+                fontFamily: root.bar.fontFamily
-
-            PanelSectionHeader {
-              visible: root.adapter && root.adapter.discovering && root.discoveredDevices.length > 0
-              text: "AVAILABLE"
-              foreground: root.bar.foreground
-              fontFamily: root.bar.fontFamily
-            }
-
-            Repeater {
-              model: root.adapter && root.adapter.discovering ? root.discoveredDevices : []
-              DeviceRow {
-                required property var modelData
-                required property int index
-                width: deviceList.width
-                dev: modelData
-                rowIndex: index
-                sectionName: "discovered"
-                isDiscovered: true
               }
-            }
 
-            Text {
+              DeviceRow {
-              visible: root.connectedDevices.length === 0
+                width: parent.width
-                       && root.knownDevices.length === 0
+                dev: modelData.dev
-                       && (!root.adapter || !root.adapter.discovering || root.discoveredDevices.length === 0)
+                rowIndex: modelData.indexInSection
-              text: !root.adapter ? "No Bluetooth adapter"
+                sectionName: modelData.section
-                  : !root.adapter.enabled ? "Turn Bluetooth on to scan"
+                isDiscovered: modelData.section === "discovered"
-                  : "Scanning for devices…"
+              }
-              color: Qt.darker(root.bar.foreground, 1.5)
-              font.family: root.bar.fontFamily
-              font.pixelSize: Style.font.bodySmall
-              wrapMode: Text.WordWrap
-              width: deviceList.width
             }
           }
         }
+
+        Text {
+          visible: root.connectedDevices.length === 0 && root.scrollRows.length === 0
+          text: !root.adapter ? "No Bluetooth adapter"
+              : !root.adapter.enabled ? "Turn Bluetooth on to scan"
+              : "Scanning for devices…"
+          color: Qt.darker(root.bar.foreground, 1.5)
+          font.family: root.bar.fontFamily
+          font.pixelSize: Style.font.bodySmall
+          wrapMode: Text.WordWrap
+          width: parent.width
+        }
       }
     }
   }
@@ -759,7 +768,6 @@ Panel {
     readonly property bool showForgetButton: forgetAvailable && (rowMouse.containsMouse || rowSelected)
 
     hasCursor: rowSelected && !root.actionFocused
-    onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(row)
     current: isConnected
     foreground: root.bar.foreground
     fill: root.hoverFill