add basic functionality, mpris, workspaces and active window title

Ws.qml

@@ -0,0 +1,50 @@
+pragma ComponentBehavior: Bound
+import Quickshell
+import Quickshell.Hyprland
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.settings
+import qs.widgets
+
+Rectangle {
+    id: wsWrap
+    required property ShellScreen barScreen
+    color: ThemeLoader.colors.base03
+    radius: Settings.config.rounding
+    implicitWidth: wsLayout.implicitWidth + 6
+    implicitHeight: wsLayout.implicitHeight + 6
+    RowLayout {
+        id: wsLayout
+        spacing: 0
+        anchors.centerIn: parent
+        Repeater {
+            id: wsRep
+            model: Hyprland.workspaces
+            delegate: Rectangle {
+                id: wsRect
+                implicitWidth: Settings.config.barHeight / 2
+                implicitHeight: Settings.config.barHeight / 2
+                visible: modelData.monitor?.name == wsWrap.barScreen.name
+                required property var modelData
+                color: modelData.focused ? ThemeLoader.colors.base05 : ThemeLoader.colors.base03
+                radius: Settings.config.rounding
+                CText {
+                    id: wsText
+                    anchors.centerIn: parent
+                    text: wsRect.modelData.id
+                    color: parent.modelData.focused ? ThemeLoader.colors.base00 : ThemeLoader.colors.base05
+                }
+                MouseArea {
+                    id: mouseHandler
+                    acceptedButtons: Qt.LeftButton
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        wsRect.modelData.activate();
+                    }
+                }
+            }
+        }
+    }
+}

modules/Bar/Bar.qml

@@ -1,9 +1,14 @@
 import Quickshell
 import QtQuick
+import QtQuick.Layouts
 import qs.settings
 import qs
 
-PanelWindow {
+Variants {
+    model: Quickshell.screens
+    delegate: PanelWindow {
+	required property ShellScreen modelData
+	screen: modelData
         id: root
         anchors {
             top: true
@@ -11,5 +16,35 @@ PanelWindow {
             right: true
         }
         implicitHeight: Settings.config.barHeight
+        color: "transparent"
+        Rectangle {
+            id: bar
+            anchors.fill: parent
             color: ThemeLoader.colors.base00
+            RowLayout {
+                id: left
+		anchors.leftMargin: 10
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                }
+                Ws {barScreen: root.modelData}
+		MPris {}
+            }
+            RowLayout {
+                id: center
+                anchors {
+                    centerIn: parent
+                }
+		Title {}
+            }
+            RowLayout {
+                id: right
+                anchors {
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                }
+            }
+        }
+    }
 }

modules/Bar/MPris.qml

@@ -0,0 +1,31 @@
+import Quickshell
+import Quickshell.Services.Mpris
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.settings
+import qs.widgets
+
+Rectangle {
+    id: root
+    color: ThemeLoader.colors.base03
+    implicitWidth: playingSong.implicitWidth + 14
+    implicitHeight: Settings.config.barHeight / 2 + 6
+    radius: Settings.config.rounding
+    property var spotify: root.getSpotify()
+
+    function getSpotify() {
+        for (var i = 0; i < Mpris.players.values.length; i++) {
+            console.log(Mpris.players.values[i].identity);
+            if (Mpris.players.values[i].identity == "spotify" || "Spotify") {
+                return Mpris.players.values[i];
+            }
+        }
+        return null;
+    }
+    CText {
+        id: playingSong
+        anchors.centerIn: parent
+        text: root.spotify.trackTitle + " - " + root.spotify.trackArtist
+    }
+}

modules/Bar/Title.qml

@@ -0,0 +1,21 @@
+import Quickshell
+import Quickshell.Wayland
+import QtQuick
+import qs
+import qs.widgets
+import qs.settings
+
+Rectangle {
+    id: root
+    property var activeWindow: ToplevelManager.activeToplevel
+    property bool active: activeWindow ? activeWindow.activated ? true : false : false
+    radius: Settings.config.rounding
+    color: active ? ThemeLoader.colors.base03 : "transparent"
+    implicitHeight: Settings.config.barHeight / 2 + 6
+    implicitWidth: titleText.implicitWidth + 14
+    CText {
+	anchors.centerIn: parent
+        id: titleText
+        text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "" : ""
+    }
+}

settings/Settings.qml

@@ -13,10 +13,10 @@ Singleton {
         adapter: JsonAdapter {
             id: settingsAdapter
             property int barHeight: 40
-            property int rounding
+            property int rounding: 16
             property bool floating
             property string font
-            property string fontSize
+            property int fontSize: 14
         }
     }
 }

widgets/CText.qml

@@ -1,4 +1,3 @@
-import Quickshell
 import QtQuick
 import qs
 import qs.settings