add border around modules for style and add mpris modules for spotify:

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 {

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

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

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();
+            }
+        }
+    }
+}

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

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

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
         })