hardcoded icons on scaled, find better solution later

Bar.qml

@@ -1,12 +1,7 @@
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
-import Quickshell.Widgets
 import Quickshell.Io
-import Quickshell.Wayland
-import Qt5Compat.GraphicalEffects
-import Quickshell.Hyprland
 import qs.Modules
 import qs.Config
 
@@ -21,6 +16,10 @@ Scope {
             screen: modelData
             property var root: Quickshell.shellDir
 
+            Component.onCompleted: {
+                console.log(modelData.x);
+            }
+
             Process {
                 id: ncProcess
                 command: ["sh", "-c", `qs -p ${bar.root}/shell.qml ipc call root showCenter`]
@@ -50,13 +49,14 @@ Scope {
                     RowLayout {
                         id: leftSection
                         Layout.fillHeight: true
-                        Layout.preferredWidth: 100
+                        Layout.preferredWidth: leftSection.childrenRect.width
 
                         Workspaces {
                             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
                             Layout.fillHeight: true
                             Layout.topMargin: 6
                             Layout.bottomMargin: 6
+                            bar: bar
                         }
 
                         AudioWidget {

Config/Config.qml

@@ -11,6 +11,7 @@ Singleton {
     property alias wallpaperPath: adapter.wallpaperPath
     property alias maxWallpapers: adapter.maxWallpapers
     property alias wallust: adapter.wallust
+    property alias workspaceWidget: adapter.workspaceWidget
 
     FileView {
         id: root
@@ -31,6 +32,7 @@ Singleton {
             property AccentColor accentColor: AccentColor {}
             property int maxWallpapers: 7
             property bool wallust: false
+            property WorkspaceWidget workspaceWidget: WorkspaceWidget {}
         }
     }
 }

Config/WorkspaceWidget.qml

@@ -0,0 +1,6 @@
+import Quickshell.Io
+
+JsonObject {
+    property string textColor: "black"
+    property string inactiveTextColor: "white"
+}

Modules/TrayItem.qml

@@ -1,13 +1,9 @@
 //@ pragma Env QT_STYLE_OVERRIDE=Breeze
 
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import Quickshell
-import Quickshell.DBusMenu
-import Quickshell.Widgets
-import Quickshell.Hyprland
 import Quickshell.Services.SystemTray
+import Quickshell.Io
 import qs.Modules
 
 MouseArea {
@@ -27,16 +23,27 @@ MouseArea {
         globalPos = root.mapToItem(root.bar.backgroundRect, 0, 0);
     }
 
-    IconImage {
+    Image {
         id: icon
 
+        Component.onCompleted: {
+            console.log(root.item.icon);
+        }
+
+        property bool batteryHDPI: root.bar.screen.x < 0 && root.item.icon.includes("battery")
+        property bool nmHDPI: root.bar.screen.x < 0 && root.item.icon.includes("nm-")
+
         anchors.centerIn: parent
-        height: 22
+        width: batteryHDPI ? 26 : ( nmHDPI ? 25 : 22 )
-        width: 22
+        height: batteryHDPI ? 26 : ( nmHDPI ? 25 : 22 )
         source: root.item.icon
         mipmap: true
-        smooth: false
+        smooth: batteryHDPI ? false : ( nmHDPI ? false : true )
         asynchronous: true
+        sourceSize.width: batteryHDPI ? 16 : ( nmHDPI ? 16 : 22 )
+        sourceSize.height: batteryHDPI ? 16 : ( nmHDPI ? 16 : 22 )
+        autoTransform: true
+        fillMode: Image.PreserveAspectFit
 
         TrayMenu {
             id: trayMenu

Modules/UpdatesWidget.qml

@@ -5,7 +5,7 @@ import qs.Modules
 Item {
     id: root
     required property int countUpdates
-    implicitWidth: 60
+    implicitWidth: contentRow.childrenRect.width + 10
     implicitHeight: 22
 
     Rectangle {
@@ -15,6 +15,8 @@ Item {
     }
 
     RowLayout {
+        id: contentRow
+        spacing: 10
         anchors {
             fill: parent
             leftMargin: 5
@@ -29,17 +31,16 @@ Item {
             color: "#ffffff"
         }
 
-        Item {
+        TextMetrics {
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            id: textMetrics
-            implicitWidth: 18
+            font.pixelSize: 16
-            implicitHeight: root.implicitHeight
+            text: root.countUpdates
+        }
 
-
+        Text {
-            Text {
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                anchors.centerIn: parent
+            text: textMetrics.text
-                text: root.countUpdates
+            color: "white"
-                color: "white"
-            }
         }
     }
 }

Modules/Wallust.qml

@@ -16,7 +16,7 @@ Singleton {
 
     Process {
         id: wallustProc
-        command: ["wallust", "run", root.args, "--palette=dark16", "--ignore-sequence=cursor", "--threshold=9" ]
+        command: ["wallust", "run", root.args, "--palette=dark", "--ignore-sequence=cursor", "--threshold=9" ]
         running: false
     }
 }

Modules/Workspaces.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -8,9 +10,22 @@ import qs.Config
 Rectangle {
     id: root
 
-    implicitWidth: workspacesRow.implicitWidth + 10
+    required property PanelWindow bar
+    property HyprlandMonitor monitor: Hyprland.monitorFor( root.bar?.screen )
+
+    implicitWidth: workspacesRow.implicitWidth + 6
     implicitHeight: workspacesRow.implicitHeight + 7
 
+    function shouldShow(monitor) {
+        Hyprland.refreshWorkspaces();
+        Hyprland.refreshMonitors();
+        if ( monitor === root.monitor ) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     color: "#40000000"
     radius: height / 2
 
@@ -25,7 +40,7 @@ Rectangle {
         id: workspacesRow
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: 5
+        anchors.leftMargin: 3
         spacing: 8
 
         Repeater {
@@ -34,8 +49,8 @@ Rectangle {
             Rectangle {
                 required property var modelData
 
-                width: 14
+                width: 16
-                height: 14
+                height: 16
                 radius: height / 2
 
                 color: modelData.id === Hyprland.focusedWorkspace.id ? Config.accentColor.accents.primary : "#606060"
@@ -43,6 +58,8 @@ Rectangle {
                 border.color: modelData.id === Hyprland.focusedWorkspace.id ? Config.accentColor.accents.primaryAlt : "#808080"
                 border.width: 1
 
+                visible: root.shouldShow( modelData.monitor )
+
                 scale: 1.0
                 opacity: 1.0
 
@@ -73,6 +90,14 @@ Rectangle {
                     duration: 200
                 }
 
+                Text {
+                    anchors.centerIn: parent
+                    text: modelData.id
+                    font.pixelSize: 10
+                    font.family: "Rubik"
+                    color: modelData.id === Hyprland.focusedWorkspace.id ? Config.workspaceWidget.textColor : Config.workspaceWidget.inactiveTextColor
+                }
+
                 MouseArea {
                     anchors.fill: parent
                     onClicked: {