unfinished workspace redesign

modules/bar/Bar.qml

@@ -35,7 +35,7 @@ PanelWindow {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 0
+            anchors.leftMargin: Config.big_spacing_fun(height)
             spacing: Config.big_spacing_fun(height)
 
             MenuButton {}

modules/bar/widgets/MenuButton.qml

@@ -16,9 +16,8 @@ MouseArea {
     
     Rectangle {
         anchors.fill: parent
-        color: menuButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.75)
+        color: "transparent"
         radius: Config.radius_fun(menuButton.height)
-        border.width: 0
 
         Text {
             id: menuText
@@ -26,7 +25,7 @@ MouseArea {
             text: "󰣇"
             font.pixelSize: Config.bigIconSize(menuButton.height)
             font.family: Config.font
-            color: menuButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg
+            color: Colors.secondaryContainer_fg
         }
     }
 

modules/bar/widgets/Workspaces.qml

@@ -4,36 +4,61 @@ import Quickshell.Hyprland
 import "../../../config"
 import "../states/Apps"
 
+Rectangle {
+    id: workspacesContainer
+    required property HyprlandMonitor thisMonitor
+
+    height: bar.height - (Config.spacing_fun(bar.height) * 1.5)
+    width: workspacesRow.width + (Config.spacing_fun(bar.height) * 2)
+    
+    radius: height / 2
+    
+    color: Colors.surfaceVariant 
+    border.color: Colors.surfaceVariant_fg
+    border.width: Config.border_width
+
     Row {
         id: workspacesRow
-
-    required property HyprlandMonitor thisMonitor
-    spacing: Config.spacing_fun(bar.height)
+        anchors.centerIn: parent
+        spacing: Config.spacing_fun(bar.height) / 2 
 
         Repeater {
             model: Hyprland.workspaces
             Loader {
                 active: modelData.monitor === thisMonitor
-            sourceComponent: Rectangle {
-                id: wsRect
+                sourceComponent: Item {
+                    id: wsItem
                     property var workspaceData: modelData
                     
+
                     width: {
                         var cw = wsNum.width
                         if (wsIconsRow.children.length > 0)
                             cw += Config.spacing_fun(bar.height) + wsIconsRow.width
                         Math.max(cw + Config.spacing_fun(bar.height)*2, wsNum.height + Config.spacing_fun(bar.height)*2)
                     }
-                height: wsNum.height + Config.spacing_fun(wsNum.height)
-                radius: Config.radius_fun(height)
+                    height: workspacesContainer.height
+                    
+                    // highlight
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: parent.width
+                        height: parent.height - (Config.spacing_fun(bar.height) * 1.5)
+                        
+                        radius: height / 2
+                        
                         color: wsArea.containsMouse ? Colors.tertiaryContainer
                             : workspaceData.active ? Colors.primaryContainer
-                    : Colors.secondaryContainer
+                            : "transparent"
+                        
                         border.color: wsArea.containsMouse ? Colors.tertiaryContainer_fg
                             : workspaceData.active ? Colors.primaryContainer_fg
-                    : Colors.secondaryContainer_fg
-                border.width: Config.border_width
+                            : "transparent"
                         
+                        border.width: (wsArea.containsMouse || workspaceData.active) ? Config.border_width : 0
+                    }
+
+                    // hyprland workspace api + color
                     MouseArea {
                         id: wsArea
                         hoverEnabled: true
@@ -63,7 +88,7 @@ Row {
 
                             Row {
                                 id: wsIconsRow
-                            spacing: Config.spacing_fun(workspacesRow.height)
+                                spacing: Config.spacing_fun(workspacesContainer.height)
                                 anchors.verticalCenter: parent.verticalCenter
 
                                 Repeater {
@@ -82,11 +107,13 @@ Row {
                 }
             }
         }
+    }
 
     Text {
         visible: Hyprland.workspaces.length === 0
         text: "No Workspaces"
         color: Colors.error
         font.pixelSize: Config.iconSize(bar.height)
+        anchors.centerIn: parent
     }
 }