bar: make groups cleaner

.config/quickshell/modules/bar/Bar.qml

@@ -191,12 +191,10 @@ Scope {
                     anchors.centerIn: parent
                     spacing: ConfigOptions?.bar.borderless ? 4 : 8
 
-                    RowLayout {
+                    BarGroup {
                         id: leftCenterGroup
                         Layout.preferredWidth: barRoot.centerSideModuleWidth
-                        spacing: 4
                         Layout.fillHeight: true
-                        implicitWidth: 350
 
                         Resources {
                             alwaysShowAllResources: barRoot.useShortenedForm === 2
@@ -212,12 +210,15 @@ Scope {
 
                     VerticalBarSeparator {visible: ConfigOptions?.bar.borderless}
 
-                    RowLayout {
+                    BarGroup {
                         id: middleCenterGroup
+                        padding: workspacesWidget.widgetPadding
                         Layout.fillHeight: true
-
+                        
                         Workspaces {
+                            id: workspacesWidget
                             bar: barRoot
+                            Layout.fillHeight: true
                             MouseArea { // Right-click to toggle overview
                                 anchors.fill: parent
                                 acceptedButtons: Qt.RightButton
@@ -229,25 +230,23 @@ Scope {
                                 }
                             }
                         }
-
                     }
 
                     VerticalBarSeparator {visible: ConfigOptions?.bar.borderless}
 
-                    RowLayout {
+                    BarGroup {
                         id: rightCenterGroup
-                        Layout.preferredWidth: leftCenterGroup.width
+                        Layout.preferredWidth: barRoot.centerSideModuleWidth
                         Layout.fillHeight: true
-                        spacing: 4
+                        
-
                         ClockWidget {
-                            showDate: barRoot.useShortenedForm < 2
+                            showDate: (ConfigOptions.bar.verbose && barRoot.useShortenedForm < 2)
                             Layout.alignment: Qt.AlignVCenter
                             Layout.fillWidth: true
                         }
 
                         UtilButtons {
-                            visible: barRoot.useShortenedForm === 0
+                            visible: (ConfigOptions.bar.verbosebarRoot.useShortenedForm === 0)
                             Layout.alignment: Qt.AlignVCenter
                         }
 
@@ -255,7 +254,6 @@ Scope {
                             visible: (barRoot.useShortenedForm < 2 && UPower.displayDevice.isLaptopBattery)
                             Layout.alignment: Qt.AlignVCenter
                         }
-
                     }
 
                 }

.config/quickshell/modules/bar/BarGroup.qml

@@ -0,0 +1,37 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/services"
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property real padding: 5
+    implicitHeight: 40
+    implicitWidth: rowLayout.implicitWidth + padding * 2
+    default property alias items: rowLayout.children
+
+    Rectangle {
+        id: background
+        anchors {
+            fill: parent
+            topMargin: 4
+            bottomMargin: 4
+        }
+        color: ConfigOptions?.bar.borderless ? "transparent" : Appearance.colors.colLayer1
+        radius: Appearance.rounding.small
+    }
+
+    RowLayout {
+        id: rowLayout
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            right: parent.right
+            leftMargin: root.padding
+            rightMargin: root.padding
+        }
+        spacing: 4
+
+    }
+}

.config/quickshell/modules/bar/BatteryIndicator.qml

@@ -7,7 +7,7 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Services.UPower
 
-Rectangle {
+Item {
     id: root
     property bool borderless: ConfigOptions.bar.borderless
     readonly property var chargeState: Battery.chargeState
@@ -20,8 +20,6 @@ Rectangle {
 
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
     implicitHeight: 32
-    color: borderless ? "transparent" : Appearance.colors.colLayer1
-    radius: Appearance.rounding.small
 
     RowLayout {
         id: rowLayout

.config/quickshell/modules/bar/ClockWidget.qml

@@ -4,19 +4,17 @@ import "root:/services"
 import QtQuick
 import QtQuick.Layouts
 
-Rectangle {
+Item {
+    id: root
     property bool borderless: ConfigOptions.bar.borderless
-    property bool showDate: true
+    property bool showDate: ConfigOptions.bar.verbose
-    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 6 // idk, text seems nicer w/ more padding
+    implicitWidth: rowLayout.implicitWidth
     implicitHeight: 32
-    color: borderless ? "transparent" : Appearance.colors.colLayer1
-    radius: Appearance.rounding.small
 
     RowLayout {
         id: rowLayout
-
-        spacing: 4
         anchors.centerIn: parent
+        spacing: 4
 
         StyledText {
             font.pixelSize: Appearance.font.pixelSize.large
@@ -25,14 +23,14 @@ Rectangle {
         }
 
         StyledText {
-            visible: showDate
+            visible: root.showDate
             font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer1
             text: "•"
         }
 
         StyledText {
-            visible: showDate
+            visible: root.showDate
             font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer1
             text: DateTime.date

.config/quickshell/modules/bar/Media.qml

@@ -42,14 +42,6 @@ Item {
         }
     }
 
-    Rectangle { // Background
-        anchors.centerIn: parent
-        width: parent.width
-        implicitHeight: 32
-        color: borderless ? "transparent" : Appearance.colors.colLayer1
-        radius: Appearance.rounding.small
-    }
-
     RowLayout { // Real content
         id: rowLayout
 

.config/quickshell/modules/bar/Resource.qml

@@ -10,6 +10,7 @@ Item {
     required property double percentage
     property bool shown: true
     clip: true
+    visible: width > 0 && height > 0
     implicitWidth: resourceRowLayout.x < 0 ? 0 : childrenRect.width
     implicitHeight: childrenRect.height
 

.config/quickshell/modules/bar/Resources.qml

@@ -7,14 +7,12 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Services.Mpris
 
-Rectangle {
+Item {
     id: root
     property bool borderless: ConfigOptions.bar.borderless
     property bool alwaysShowAllResources: false
     implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
     implicitHeight: 32
-    color: borderless ? "transparent" : Appearance.colors.colLayer1
-    radius: Appearance.rounding.small
 
     RowLayout {
         id: rowLayout

.config/quickshell/modules/bar/UtilButtons.qml

@@ -7,14 +7,10 @@ import Quickshell.Io
 import Quickshell.Hyprland
 import Quickshell.Services.Pipewire
 
-Rectangle {
+Item {
     id: root
     property bool borderless: ConfigOptions.bar.borderless
-    Layout.alignment: Qt.AlignVCenter
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
-    implicitHeight: 32
-    color: borderless ? "transparent" : Appearance.colors.colLayer1
-    radius: Appearance.rounding.small
 
     RowLayout {
         id: rowLayout

.config/quickshell/modules/bar/Workspaces.qml

@@ -47,20 +47,9 @@ Item {
         }
     }
 
-    Layout.fillHeight: true
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
     implicitHeight: 40
 
-    // Background
-    Rectangle {
-        z: 0
-        anchors.centerIn: parent
-        implicitHeight: 32
-        implicitWidth: rowLayout.implicitWidth + widgetPadding * 2
-        radius: Appearance.rounding.small
-        color: borderless ? "transparent" : Appearance.colors.colLayer1
-    }
-
     // Scroll to switch workspaces
     WheelHandler {
         onWheel: (event) => {
@@ -223,7 +212,7 @@ Item {
                             ) ? 0 : 1
                         visible: opacity > 0
                         anchors.centerIn: parent
-                        width: workspaceButtonWidth * 0.15
+                        width: workspaceButtonWidth * 0.18
                         height: width
                         radius: width / 2
                         color: (monitor.activeWorkspace?.id == button.workspaceValue) ? 

.config/quickshell/modules/common/Appearance.qml

@@ -281,7 +281,7 @@ Singleton {
 
     sizes: QtObject {
         property real barHeight: 40
-        property real barCenterSideModuleWidth: 360
+        property real barCenterSideModuleWidth: ConfigOptions?.bar.verbose ? 360 : 140
         property real barCenterSideModuleWidthShortened: 280
         property real barCenterSideModuleWidthHellaShortened: 190
         property real barShortenScreenWidthThreshold: 1200 // Shorten if screen width is at most this value

.config/quickshell/modules/common/ConfigOptions.qml

@@ -42,6 +42,7 @@ Singleton {
         property bool borderless: false // true for no grouping of items
         property string topLeftIcon: "spark" // Options: distro, spark
         property bool showBackground: true
+        property bool verbose: true
         property QtObject resources: QtObject {
             property bool alwaysShowSwap: true
             property bool alwaysShowCpu: false

.config/quickshell/modules/overview/OverviewWidget.qml

@@ -185,7 +185,7 @@ Item {
                         onTriggered: {
                             window.x = Math.round(Math.max((windowData?.at[0] - monitorData?.reserved[0]) * root.scale, 0) + xOffset)
                             window.y = Math.round(Math.max((windowData?.at[1] - monitorData?.reserved[1]) * root.scale, 0) + yOffset)
-                            console.log(`[OverviewWindow] Updated position for window ${windowData?.address} to (${window.x}, ${window.y})`)
+                            // console.log(`[OverviewWindow] Updated position for window ${windowData?.address} to (${window.x}, ${window.y})`)
                         }
                     }
 
@@ -205,7 +205,7 @@ Item {
                             window.pressed = true
                             window.Drag.active = true
                             window.Drag.source = window
-                            console.log(`[OverviewWindow] Dragging window ${windowData?.address} from position (${window.x}, ${window.y})`)
+                            // console.log(`[OverviewWindow] Dragging window ${windowData?.address} from position (${window.x}, ${window.y})`)
                         }
                         onReleased: {
                             const targetWorkspace = root.draggingTargetWorkspace