From fb5aa0c9cb94bc86f990249fa429cc52d572409b Mon Sep 17 00:00:00 2001
From: lucy <lucykaufmann@protonmail.com>
Date: Mon, 19 Jan 2026 16:56:11 +0100
Subject: [PATCH] add border around modules for style and add mpris modules for
 spotify:

---
 modules/bar/Bar.qml      |  3 ++-
 modules/bar/Battery.qml  |  2 ++
 modules/bar/Clock.qml    |  2 ++
 modules/bar/Mpris.qml    | 52 ++++++++++++++++++++++++++++++++++++++++
 modules/bar/Title.qml    |  2 ++
 modules/bar/Volume.qml   |  2 ++
 reusables/CustomIcon.qml |  2 +-
 7 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 modules/bar/Mpris.qml

diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index a6d3498..ff781b3 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -34,13 +34,14 @@ Variants {
             Row {
                 id: leftStuff
                 leftPadding: 10
-                spacing: 20
+                spacing: 10
                 anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
                 Workspaces {
                     property var screen: root.modelData
                 }
                 Title {}
+                Mpris {}
             }
 
             Row {
diff --git a/modules/bar/Battery.qml b/modules/bar/Battery.qml
index d92c99c..ce69074 100644
--- a/modules/bar/Battery.qml
+++ b/modules/bar/Battery.qml
@@ -14,6 +14,8 @@ Loader {
 
     sourceComponent: Rectangle {
         id: container
+        border.color: Colors.color7
+        border.width: 1
         radius: implicitHeight / 2
         color: Colors.color0
         anchors.verticalCenter: parent.verticalCenter
diff --git a/modules/bar/Clock.qml b/modules/bar/Clock.qml
index f29889e..e745ded 100644
--- a/modules/bar/Clock.qml
+++ b/modules/bar/Clock.qml
@@ -6,6 +6,8 @@ import qs.reusables
 
 Rectangle {
     id: container
+    border.color: Colors.color7
+    border.width: 1
     radius: implicitHeight / 2
     color: Colors.color0
     anchors.verticalCenter: parent.verticalCenter
diff --git a/modules/bar/Mpris.qml b/modules/bar/Mpris.qml
new file mode 100644
index 0000000..a3a4cd4
--- /dev/null
+++ b/modules/bar/Mpris.qml
@@ -0,0 +1,52 @@
+import QtQuick
+import Quickshell.Services.Mpris
+import qs
+import qs.settings
+import qs.reusables
+
+Rectangle {
+    id: container
+    visible: root.getSpotify() != null
+    radius: implicitHeight / 2
+    color: Colors.color0
+    anchors.verticalCenter: parent.verticalCenter
+    implicitWidth: root.implicitWidth + 20
+    implicitHeight: Settings.config.barHeight - 10
+    border.color: clickHandler.containsMouse ? Colors.color8 : Colors.color7
+    border.width: 1
+    Item {
+        id: root
+        property var spotify: root.getSpotify()
+        function getSpotify() {
+            for (let i = 0; i < Mpris.players.values.length; i++) {
+                if (Mpris.players.values[i].identity === "Spotify") {
+                    return Mpris.players.values[i];
+                }
+            }
+            return null;
+        }
+        anchors.horizontalCenter: parent.horizontalCenter
+        implicitWidth: mprisText.implicitWidth
+        CustomText {
+            id: mprisText
+            text: root.spotify != null ? root.spotify.trackArtist + " - " + root.spotify.trackTitle : ""
+        }
+    }
+    MouseArea {
+        id: clickHandler
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        cursorShape: Qt.PointingHandCursor
+        onDoubleClicked: mouse => {
+            if (mouse.button == Qt.LeftButton) {
+                root.spotify.next();
+            }
+        }
+        onClicked: mouse => {
+            if (mouse.button == Qt.RightButton) {
+                root.spotify.togglePlaying();
+            }
+        }
+    }
+}
diff --git a/modules/bar/Title.qml b/modules/bar/Title.qml
index 3741d4b..06d936b 100644
--- a/modules/bar/Title.qml
+++ b/modules/bar/Title.qml
@@ -11,6 +11,8 @@ Rectangle {
     anchors.verticalCenter: parent.verticalCenter
     implicitWidth: root.implicitWidth
     implicitHeight: Settings.config.barHeight - 10
+    border.color: Colors.color7
+    border.width: 1
     Item {
         id: root
         readonly property var activeWindow: ToplevelManager.activeToplevel
diff --git a/modules/bar/Volume.qml b/modules/bar/Volume.qml
index 4eba456..06b0db2 100644
--- a/modules/bar/Volume.qml
+++ b/modules/bar/Volume.qml
@@ -8,6 +8,8 @@ import qs
 
 Rectangle {
     id: container
+    border.color: Colors.color7
+    border.width: 1
     radius: implicitHeight / 2
     color: Colors.color0
     anchors.verticalCenter: parent.verticalCenter
diff --git a/reusables/CustomIcon.qml b/reusables/CustomIcon.qml
index 4f63678..3c63209 100644
--- a/reusables/CustomIcon.qml
+++ b/reusables/CustomIcon.qml
@@ -8,7 +8,7 @@ Text {
     color: Colors.foreground
     font.pixelSize: Settings.config.fontSize + 1
     font.variableAxes: ({
-            FILL: 1,
+            FILL: 0,
             GRAD: 100,
             wght: 400
         })