From 903803bdfd64c9301daac5dd4410b9c2a9cc2a26 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Tue, 22 Jul 2025 13:06:27 -0400
Subject: [PATCH] implement and use clickable on mpris player

---
 modules/bar/components/mpris/Mpris.qml  |  4 +-
 modules/bar/components/mpris/Player.qml | 69 ++++++++++++++-----------
 styled/Clickable.qml                    | 53 +++++++++++++++++++
 3 files changed, 94 insertions(+), 32 deletions(-)
 create mode 100644 styled/Clickable.qml

diff --git a/modules/bar/components/mpris/Mpris.qml b/modules/bar/components/mpris/Mpris.qml
index 85dd15e..b129e77 100644
--- a/modules/bar/components/mpris/Mpris.qml
+++ b/modules/bar/components/mpris/Mpris.qml
@@ -16,8 +16,8 @@ Item {
 
         Player {
 
-          anchors.horizontalCenter: parent.horizontalCenter
-          anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
 
             visible: index === root.currentIndex && modelData.canControl
 
diff --git a/modules/bar/components/mpris/Player.qml b/modules/bar/components/mpris/Player.qml
index 0399031..47cc619 100644
--- a/modules/bar/components/mpris/Player.qml
+++ b/modules/bar/components/mpris/Player.qml
@@ -1,40 +1,21 @@
-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
 
-    implicitWidth: text.width
-    implicitHeight: Dimensions.mpris.height
+    sourceComponent: player
+    property Component player: Clickable {
+        id: clickable
 
-    StyledLabel {
-        anchors.fill: text
-    }
-
-    StyledText {
-        id: text
-        text: `${modelData.isPlaying ? "" : ""} ${modelData.trackTitle} - ${modelData.trackArtist}`
-
-        anchors.verticalCenter: parent.verticalCenter
-        topPadding: Dimensions.mpris.verticalPadding
-        bottomPadding: Dimensions.mpris.verticalPadding
-        leftPadding: Dimensions.mpris.horizontalPadding
-        rightPadding: Dimensions.mpris.horizontalPadding
-
-        font.pixelSize: Dimensions.mpris.fontSize
-    }
-
-    MouseArea {
-        anchors.fill: text
-
-        cursorShape: Qt.PointingHandCursor
+        implicitWidth: text.width
+        implicitHeight: Dimensions.mpris.height
 
         onClicked: {
             if (!modelData.canTogglePlaying) {
@@ -46,11 +27,39 @@ Item {
                 modelData.play();
             }
         }
-        onWheel: event => {
-            if (event.angleDelta.y > 0) {
-                parent.nextPlayer();
-            } else if (event.angleDelta.y < 0) {
-                parent.previousPlayer();
+        onScrolledUp: parent.nextPlayer()
+        onScrolledDown: parent.previousPlayer()
+
+        StyledText {
+            id: text
+            text: `${modelData.isPlaying ? "" : ""} ${modelData.trackTitle} - ${modelData.trackArtist}`
+
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.mpris.verticalPadding
+            bottomPadding: Dimensions.mpris.verticalPadding
+            leftPadding: Dimensions.mpris.horizontalPadding
+            rightPadding: Dimensions.mpris.horizontalPadding
+
+            font.pixelSize: Dimensions.mpris.fontSize
+
+            states: State {
+                name: "hovered"
+                when: clickable.hovered
+                PropertyChanges {
+                    text {
+                        color: Theme.palette.base300
+                    }
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "hovered"
+                reversible: true
+                ColorAnimation {
+                    properties: "color"
+                    duration: 200
+                    easing.type: Easing.InOutCubic
+                }
             }
         }
     }
diff --git a/styled/Clickable.qml b/styled/Clickable.qml
new file mode 100644
index 0000000..ec4eff1
--- /dev/null
+++ b/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();
+            }
+        }
+    }
+}