add more modules and show workspace only on monitors they belond

Colors.qml

@@ -5,25 +5,25 @@ import Quickshell
 Singleton {
     id: customColors
     // Core Backgrounds
-    readonly property color background: "#1E1E2E"
-    readonly property color foreground: "#CDD6F4"
-    readonly property color cursor: "#CDD6F4"
+    readonly property color background: "#1D2021"
+    readonly property color foreground: "#D5C4A1"
+    readonly property color cursor: "#D5C4A1"
 
     // The 16 Colors of the Apocalypse
-    readonly property color color0: "#45475A"
-    readonly property color color1: "#F38BA8"
-    readonly property color color2: "#A6E3A1"
-    readonly property color color3: "#F9E2AF"
-    readonly property color color4: "#89B4FA"
-    readonly property color color5: "#F5C2E7"
-    readonly property color color6: "#94E2D5"
-    readonly property color color7: "#BAC2DE"
-    readonly property color color8: "#585B70"
-    readonly property color color9: "#F38BA8"
-    readonly property color color10: "#A6E3A1"
-    readonly property color color11: "#F9E2AF"
-    readonly property color color12: "#89B4FA"
-    readonly property color color13: "#F5C2E7"
-    readonly property color color14: "#94E2D5"
-    readonly property color color15: "#A6ADC8"
+    readonly property color color0: "#1D2021"
+    readonly property color color1: "#FB4934"
+    readonly property color color2: "#B8BB26"
+    readonly property color color3: "#FABD2F"
+    readonly property color color4: "#83A598"
+    readonly property color color5: "#D3869B"
+    readonly property color color6: "#8EC07C"
+    readonly property color color7: "#D5C4A1"
+    readonly property color color8: "#665C54"
+    readonly property color color9: "#FB4934"
+    readonly property color color10: "#B8BB26"
+    readonly property color color11: "#FABD2F"
+    readonly property color color12: "#83A598"
+    readonly property color color13: "#D3869B"
+    readonly property color color14: "#8EC07C"
+    readonly property color color15: "#FBF1C7"
 }

modules/Bar/Bar.qml

@@ -5,8 +5,12 @@ import "../../"
 import "../../reusables/"
 import QtQuick.Layouts
 
-PanelWindow {
+Variants {
+    model: Quickshell.screens
+    delegate: PanelWindow {
         id: root
+        required property var modelData
+        screen: modelData
         color: Colors.background
         anchors {
             top: true
@@ -18,16 +22,16 @@ PanelWindow {
             id: leftStuff
             anchors.left: parent.left
             anchors.verticalCenter: parent.verticalCenter
-        CustomText {
-            text: "workspaces here"
+            Workspaces {
+                screen: root.screen
             }
         }
 
         Row {
             id: centerStuff
             anchors.centerIn: parent
-        CustomText {
-            text: "windowtitle here"
+            Title {
+                anchors.verticalCenter: parent.verticalCenter
             }
         }
 
@@ -40,3 +44,4 @@ PanelWindow {
             }
         }
     }
+}

modules/Bar/Title.qml

@@ -0,0 +1,24 @@
+import Quickshell
+import QtQuick
+import "../../reusables/"
+import "../../settings/"
+import "../../"
+import Quickshell.Hyprland
+
+Item {
+    id: root
+    implicitHeight: Settings.config.barHeight
+    implicitWidth: textContainer.implicitWidth
+    Rectangle {
+        id: textContainer
+        color: Colors.foreground
+        implicitWidth: text.implicitWidth + 10
+        implicitHeight: Settings.config.barHeight
+        CustomText {
+            id: text
+            color: Colors.background
+            anchors.centerIn: textContainer
+            text: Hyprland.activeToplevel.activated ? Hyprland.activeToplevel.title : "sigma"
+        }
+    }
+}

modules/Bar/Workspaces.qml

@@ -0,0 +1,47 @@
+pragma ComponentBehavior: Bound
+import "../../reusables/"
+import Quickshell.Hyprland
+import Quickshell
+import QtQuick
+import "../../"
+import "../../settings/"
+
+Item {
+    id: root
+    implicitWidth: workspaceRow.implicitWidth
+    height: 30
+    required property var screen
+    Row {
+        id: workspaceRow
+        anchors.centerIn: parent
+        spacing: 0 // Slightly increase spacing between workspace buttons
+
+        Repeater {
+            id: wsRepeater
+            model: Hyprland.workspaces
+            anchors.centerIn: parent
+            Rectangle {
+                id: workspaceNumber
+                property bool isOnMon: modelData.monitor == Hyprland.monitorFor(root.screen)
+                required property var modelData
+                width: isOnMon ? Settings.config.barHeight + 10 : 0
+                height: isOnMon ? Settings.config.barHeight : 0
+                color: modelData.active ? Colors.foreground : "transparent"
+
+                CustomText {
+                    anchors.centerIn: workspaceNumber
+                    text: parent.modelData.id
+                    color: parent.modelData.active ? Colors.background : Colors.foreground // Set contrasting color for workspace number
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        parent.modelData.activate();
+                    }
+                }
+            }
+        }
+    }
+}

settings/Settings.qml

@@ -21,11 +21,14 @@ Singleton {
 
         adapter: JsonAdapter {
             id: settingsAdapter
-            property var barHeight: 28
+            property var barHeight: 18
             property var font: "JetBrainsMono Nerd Font"
-            property var fontSize: 14
+            property var fontSize: 12
             property var rounding: 10
             property var wallDir: "/home/lucy/.walls"
+            property bool floating: true
+            property int paddingTop: 10
+            property int paddingSides: 10
         }
     }
 }

settings/config.json

@@ -1,7 +1,10 @@
 {
-    "barHeight": 28,
+    "barHeight": 18,
+    "floating": true,
     "font": "JetBrainsMono Nerd Font",
-    "fontSize": 14,
+    "fontSize": 12,
+    "paddingSides": 10,
+    "paddingTop": 10,
     "rounding": 10,
     "wallDir": "/home/lucy/.walls"
 }