switch workspace to clickable

modules/bar/components/hyprland/Workspace.qml

@@ -1,45 +1,21 @@
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import Quickshell.Hyprland
 import "../../../../config"
 import "../../../../styled/"
 
-Item {
+Loader {
-    id: workspace
-
     required property HyprlandWorkspace modelData
 
-    visible: modelData.id > 0
+    active: modelData.id > 0
+
+    sourceComponent: workspace
+    property Component workspace: Clickable {
+        id: clickable
 
         width: Dimensions.workspace.width
         height: Dimensions.workspace.height
 
-    Rectangle {
+        onClicked: modelData.activate()
-        id: rectangle
-        anchors.fill: parent
-        color: Theme.palette.base100
-        radius: Dimensions.radius
-        states: State {
-            name: "hovered"
-            when: mouseArea.containsMouse
-            PropertyChanges {
-                rectangle {
-                    color: Theme.palette.primary
-                }
-            }
-        }
-        transitions: Transition {
-            from: ""
-            to: "hovered"
-            reversible: true
-            ColorAnimation {
-                properties: "color"
-                duration: 200
-                easing.type: Easing.InOutCubic
-            }
-        }
-    }
 
         Icon {
             id: icon
@@ -51,11 +27,11 @@ Item {
 
             states: State {
                 name: "active"
-            when: workspace.modelData.active
+                when: modelData.active
                 PropertyChanges {
                     icon {
                         rotation: 180
-                    color: mouseArea.containsMouse ? Theme.palette.basecontent : Theme.palette.primary
+                        color: clickable.hovered ? Theme.palette.basecontent : Theme.palette.primary
                     }
                 }
             }
@@ -76,14 +52,5 @@ Item {
                 }
             }
         }
-
-    MouseArea {
-        id: mouseArea
-
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor
-
-        hoverEnabled: true
-        onClicked: workspace.modelData.activate()
     }
 }

modules/bar/components/mpris/Player.qml

@@ -1,22 +1,34 @@
-import Quickshell
 import Quickshell.Services.Mpris
 import QtQuick
 import "../../../../styled/"
 import "../../../../config/"
 
-Item {
+Loader {
     required property MprisPlayer modelData
     required property int index
 
     signal nextPlayer
     signal previousPlayer
 
+    sourceComponent: player
+    property Component player: Clickable {
+        id: clickable
+
         implicitWidth: text.width
         implicitHeight: Dimensions.mpris.height
 
-    StyledLabel {
+        onClicked: {
-        anchors.fill: text
+            if (!modelData.canTogglePlaying) {
+                return;
             }
+            if (modelData.isPlaying) {
+                modelData.pause();
+            } else {
+                modelData.play();
+            }
+        }
+        onScrolledUp: parent.nextPlayer()
+        onScrolledDown: parent.previousPlayer()
 
         StyledText {
             id: text
@@ -29,28 +41,25 @@ Item {
             rightPadding: Dimensions.mpris.horizontalPadding
 
             font.pixelSize: Dimensions.mpris.fontSize
-    }
 
-    MouseArea {
+            states: State {
-        anchors.fill: text
+                name: "hovered"
-
+                when: clickable.hovered
-        cursorShape: Qt.PointingHandCursor
+                PropertyChanges {
-
+                    text {
-        onClicked: {
+                        color: Theme.palette.base300
-            if (!modelData.canTogglePlaying) {
-                return;
-            }
-            if (modelData.isPlaying) {
-                modelData.pause();
-            } else {
-                modelData.play();
                     }
                 }
-        onWheel: event => {
+            }
-            if (event.angleDelta.y > 0) {
+            transitions: Transition {
-                parent.nextPlayer();
+                from: ""
-            } else if (event.angleDelta.y < 0) {
+                to: "hovered"
-                parent.previousPlayer();
+                reversible: true
+                ColorAnimation {
+                    properties: "color"
+                    duration: 200
+                    easing.type: Easing.InOutCubic
+                }
             }
         }
     }

styled/Clickable.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import "../config/"
+
+Item {
+    id: root
+    property bool disabled: false
+    property alias hovered: mouseArea.containsMouse
+    signal clicked
+    signal scrolledUp
+    signal scrolledDown
+
+    StyledLabel {
+        id: background
+        anchors.fill: parent
+        states: State {
+            name: "hovered"
+            when: mouseArea.containsMouse
+            PropertyChanges {
+                background {
+                    color: Theme.palette.primary
+                }
+            }
+        }
+        transitions: Transition {
+            from: ""
+            to: "hovered"
+            reversible: true
+            ColorAnimation {
+                properties: "color"
+                duration: 200
+                easing.type: Easing.InOutCubic
+            }
+        }
+    }
+
+    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();
+            }
+        }
+    }
+}