extract HoverableListItem component from list delegates

shell/applets/BluetoothApplet.qml

@@ -9,24 +9,13 @@ Column {
     Repeater {
         model: S.BluetoothService.devices
 
-        delegate: Item {
+        delegate: HoverableListItem {
             id: entry
             required property var modelData
             required property int index
 
             readonly property bool _pending: S.BluetoothService.pendingMac === entry.modelData.mac
 
-            width: root.width
-            height: 32
-
-            Rectangle {
-                anchors.fill: parent
-                anchors.leftMargin: 4
-                anchors.rightMargin: 4
-                color: entryHover.hovered ? S.Theme.base02 : "transparent"
-                radius: S.Theme.radius
-            }
-
             Text {
                 id: btIcon
                 anchors.left: parent.left
@@ -83,10 +72,6 @@ Column {
                     entry.opacity = 1
             }
 
-            HoverHandler {
-                id: entryHover
-                cursorShape: Qt.PointingHandCursor
-            }
             TapHandler {
                 onTapped: {
                     if (!entry._pending)

shell/applets/HoverableListItem.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import "../services" as S
+
+Item {
+    id: root
+
+    readonly property bool hovered: _hover.hovered
+
+    width: parent?.width ?? 0
+    height: 32
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.leftMargin: 4
+        anchors.rightMargin: 4
+        color: root.hovered ? S.Theme.base02 : "transparent"
+        radius: S.Theme.radius
+        z: -1
+    }
+
+    HoverHandler {
+        id: _hover
+        cursorShape: Qt.PointingHandCursor
+    }
+}

shell/applets/NetworkApplet.qml

@@ -9,22 +9,11 @@ Column {
     Repeater {
         model: S.NetworkService.networks
 
-        delegate: Item {
+        delegate: HoverableListItem {
             id: entry
             required property var modelData
             required property int index
 
-            width: root.width
-            height: 32
-
-            Rectangle {
-                anchors.fill: parent
-                anchors.leftMargin: 4
-                anchors.rightMargin: 4
-                color: entryHover.hovered ? S.Theme.base02 : "transparent"
-                radius: S.Theme.radius
-            }
-
             Text {
                 id: netIcon
                 anchors.left: parent.left
@@ -62,10 +51,6 @@ Column {
                 width: entry.modelData.signal >= 0 ? implicitWidth : 0
             }
 
-            HoverHandler {
-                id: entryHover
-                cursorShape: Qt.PointingHandCursor
-            }
             TapHandler {
                 onTapped: {
                     if (entry.modelData.active)

shell/applets/VolumeApplet.qml

@@ -121,22 +121,13 @@ Column {
             Repeater {
                 model: root.sinkList
 
-                delegate: Item {
+                delegate: HoverableListItem {
                     required property var modelData
 
-                    width: root.width
                     height: 28
 
                     readonly property bool _active: modelData === root.sink
 
-                    Rectangle {
-                        anchors.fill: parent
-                        anchors.leftMargin: 4
-                        anchors.rightMargin: 4
-                        color: deviceHover.hovered ? S.Theme.base02 : "transparent"
-                        radius: S.Theme.radius
-                    }
-
                     Text {
                         anchors.left: parent.left
                         anchors.leftMargin: 12
@@ -151,11 +142,6 @@ Column {
                         elide: Text.ElideRight
                     }
 
-                    HoverHandler {
-                        id: deviceHover
-                        cursorShape: Qt.PointingHandCursor
-                    }
-
                     TapHandler {
                         onTapped: Pipewire.preferredDefaultAudioSink = modelData
                     }

shell/applets/qmldir

@@ -7,6 +7,7 @@ CpuApplet 1.0 CpuApplet.qml
 DiskApplet 1.0 DiskApplet.qml
 GpuApplet 1.0 GpuApplet.qml
 HexWaveBackground 1.0 HexWaveBackground.qml
+HoverableListItem 1.0 HoverableListItem.qml
 InfoRow 1.0 InfoRow.qml
 MemoryApplet 1.0 MemoryApplet.qml
 MprisApplet 1.0 MprisApplet.qml