make mousearea root of clickable

modules/bar/components/mpris/Player.qml

@@ -27,8 +27,14 @@ Loader {
                 modelData.play();
             }
         }
-        onScrolledUp: parent.nextPlayer()
+
-        onScrolledDown: parent.previousPlayer()
+        onWheel: event => {
+            if (event.angleDelta.y > 0) {
+                parent.nextPlayer();
+            } else if (event.angleDelta.y < 0) {
+                parent.previousPlayer();
+            }
+        }
 
         StyledText {
             id: text
@@ -44,7 +50,7 @@ Loader {
 
             states: State {
                 name: "hovered"
-                when: clickable.hovered
+                when: clickable.containsMouse
                 PropertyChanges {
                     text {
                         color: Theme.palette.base300

styled/Clickable.qml

@@ -1,13 +1,13 @@
 import QtQuick
 import "../config/"
 
-Item {
+MouseArea {
-    id: root
+    id: mouseArea
+
     property bool disabled: false
-    property alias hovered: mouseArea.containsMouse
+
-    signal clicked
+    hoverEnabled: !disabled
-    signal scrolledUp
+    cursorShape: Qt.PointingHandCursor
-    signal scrolledDown
 
     StyledLabel {
         id: background
@@ -32,22 +32,4 @@ Item {
             }
         }
     }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-
-        hoverEnabled: !disabled
-        cursorShape: Qt.PointingHandCursor
-
-        onClicked: root.clicked()
-
-        onWheel: event => {
-            if (event.angleDelta.y > 0) {
-                root.scrolledUp();
-            } else if (event.angleDelta.y < 0) {
-                root.scrolledDown();
-            }
-        }
-    }
 }