Add BarService, use signals to check state of bar and update widgets accordingly

Modules/Bar/Bar.qml

@@ -109,7 +109,7 @@ Variants {
                     "section": "left",
                     "sectionWidgetIndex": index,
                     "sectionWidgetsCount": Settings.data.bar.widgets.left.length,
-                    "barPosition": Settings.data.bar.position
+                    "barPosition": BarService.position
                   }
                   anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -134,7 +134,7 @@ Variants {
                     "section": "center",
                     "sectionWidgetIndex": index,
                     "sectionWidgetsCount": Settings.data.bar.widgets.center.length,
-                    "barPosition": Settings.data.bar.position
+                    "barPosition": BarService.position
                   }
                   anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -160,7 +160,7 @@ Variants {
                     "section": "right",
                     "sectionWidgetIndex": index,
                     "sectionWidgetsCount": Settings.data.bar.widgets.right.length,
-                    "barPosition": Settings.data.bar.position
+                    "barPosition": BarService.position
                   }
                   anchors.horizontalCenter: parent.horizontalCenter
                 }
@@ -182,7 +182,7 @@ Variants {
               anchors.left: parent.left
               anchors.leftMargin: Style.marginS * root.scaling
               anchors.verticalCenter: parent.verticalCenter
-              spacing: 0
+              spacing: Style.marginS * root.scaling
 
               Repeater {
                 model: Settings.data.bar.widgets.left
@@ -195,7 +195,7 @@ Variants {
                     "section": "left",
                     "sectionWidgetIndex": index,
                     "sectionWidgetsCount": Settings.data.bar.widgets.left.length,
-                    "barPosition": Settings.data.bar.position
+                    "barPosition": BarService.position
                   }
                   anchors.verticalCenter: parent.verticalCenter
                 }
@@ -222,7 +222,7 @@ Variants {
                     "section": "center",
                     "sectionWidgetIndex": index,
                     "sectionWidgetsCount": Settings.data.bar.widgets.center.length,
-                    "barPosition": Settings.data.bar.position
+                    "barPosition": BarService.position
                   }
                   anchors.verticalCenter: parent.verticalCenter
                 }
@@ -250,7 +250,7 @@ Variants {
                     "section": "right",
                     "sectionWidgetIndex": index,
                     "sectionWidgetsCount": Settings.data.bar.widgets.right.length,
-                    "barPosition": Settings.data.bar.position
+                    "barPosition": BarService.position
                   }
                   anchors.verticalCenter: parent.verticalCenter
                 }

Modules/Bar/Widgets/ActiveWindow.qml

@@ -19,6 +19,21 @@ Item {
   property int sectionWidgetIndex: -1
   property int sectionWidgetsCount: 0
   property string barPosition: "top"
+  
+  // Listen to BarService position changes
+  Connections {
+    target: BarService
+    function onBarPositionChanged(newPosition) {
+      barPosition = newPosition
+      // Force re-evaluation of implicit sizing
+      implicitWidth = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : calculatedHorizontalWidth()
+      })
+      implicitHeight = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling)
+      })
+    }
+  }
 
   property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
   property var widgetSettings: {
@@ -82,8 +97,7 @@ Item {
       total += titleWidth
     }
 
-    // Add extra margin for spacing between widgets in the bar
+     // Row layout handles spacing between widgets
-    total += Style.marginM * scaling * 2 // widget-to-widget spacing
 
     return Math.max(total, Style.capsuleHeight * scaling) // Minimum width
   }

Modules/Bar/Widgets/MediaMini.qml

@@ -19,6 +19,21 @@ Item {
   property int sectionWidgetIndex: -1
   property int sectionWidgetsCount: 0
   property string barPosition: "top"
+  
+  // Listen to BarService position changes
+  Connections {
+    target: BarService
+    function onBarPositionChanged(newPosition) {
+      barPosition = newPosition
+      // Force re-evaluation of implicit sizing
+      implicitWidth = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : calculatedHorizontalWidth()
+      })
+      implicitHeight = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling)
+      })
+    }
+  }
 
   property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
   property var widgetSettings: {
@@ -48,13 +63,14 @@ Item {
   }
 
   function calculatedHorizontalWidth() {
-    let total = Style.marginM * 2 * scaling // padding
+    let total = Style.marginM * 2 * scaling // internal padding
     if (showAlbumArt) {
-      total += 18 * scaling + Style.marginS * scaling // album art + spacing
+      total += 18 * scaling + 2 * scaling // album art + spacing
     } else {
-      total += Style.fontSizeL * scaling + Style.marginS * scaling // icon + spacing
+      total += Style.fontSizeL * scaling + 2 * scaling // icon + spacing
     }
     total += Math.min(fullTitleMetrics.contentWidth, maxWidth * scaling) // title text
+    // Row layout handles spacing between widgets
     return total
   }
 
@@ -74,18 +90,10 @@ Item {
   Rectangle {
     id: mediaMini
     visible: root.visible
-
+    anchors.left: parent.left
-    // For vertical bars, use anchors to center in parent
+    anchors.verticalCenter: parent.verticalCenter
-    anchors.centerIn: (barPosition === "left" || barPosition === "right") ? parent : undefined
+    width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (rowLayout.implicitWidth + Style.marginM * 2 * scaling)
-
+    height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : Math.round(Style.capsuleHeight * scaling)
-    // For horizontal bars, use Layout properties
-    Layout.preferredWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (rowLayout.implicitWidth + Style.marginM * 2 * scaling)
-    Layout.preferredHeight: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : Math.round(Style.capsuleHeight * scaling)
-    Layout.alignment: (barPosition === "left" || barPosition === "right") ? undefined : Qt.AlignVCenter
-
-    width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : undefined
-    height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : undefined
-
     radius: (barPosition === "left" || barPosition === "right") ? width / 2 : Math.round(Style.radiusM * scaling)
     color: Color.mSurfaceVariant
 

Modules/Bar/Widgets/SystemMonitor.qml

@@ -17,6 +17,21 @@ Item {
   property int sectionWidgetIndex: -1
   property int sectionWidgetsCount: 0
   property string barPosition: "top"
+  
+  // Listen to BarService position changes
+  Connections {
+    target: BarService
+    function onBarPositionChanged(newPosition) {
+      barPosition = newPosition
+      // Force re-evaluation of implicit sizing
+      implicitWidth = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : calculatedHorizontalWidth()
+      })
+      implicitHeight = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling)
+      })
+    }
+  }
 
   property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
   property var widgetSettings: {
@@ -121,8 +136,7 @@ Item {
       total += (visibleCount - 1) * Style.marginXS * scaling
     }
 
-    // Add extra margin for spacing between widgets in the bar
+     // Row layout handles spacing between widgets
-    total += Style.marginM * scaling * 2 // widget-to-widget spacing
 
     return Math.max(total, Style.capsuleHeight * scaling)
   }

Modules/Bar/Widgets/Workspace.qml

@@ -20,6 +20,21 @@ Item {
   property int sectionWidgetIndex: -1
   property int sectionWidgetsCount: 0
   property string barPosition: "top"
+  
+  // Listen to BarService position changes
+  Connections {
+    target: BarService
+    function onBarPositionChanged(newPosition) {
+      barPosition = newPosition
+      // Force re-evaluation of implicit sizing
+      implicitWidth = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? Math.round(Style.barHeight * scaling) : calculatedHorizontalWidth()
+      })
+      implicitHeight = Qt.binding(function() {
+        return (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling)
+      })
+    }
+  }
 
   property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
   property var widgetSettings: {

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -51,8 +51,8 @@ ColumnLayout {
             name: "Right"
           }
         }
-        currentKey: Settings.data.bar.position
+        currentKey: BarService.position
-        onSelected: key => Settings.data.bar.position = key
+        onSelected: key => BarService.setPosition(key)
       }
     }
 

Services/BarService.qml

@@ -0,0 +1,36 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import qs.Commons
+
+Singleton {
+  id: root
+
+  // Bar position property
+  property string position: Settings.data.bar.position
+
+  // Signal emitted when bar position changes
+  signal barPositionChanged(string newPosition)
+
+  // Watch for changes in Settings.data.bar.position
+  Connections {
+    target: Settings
+    function onDataChanged() {
+      if (Settings.data.bar.position !== root.position) {
+        root.position = Settings.data.bar.position
+        root.barPositionChanged(root.position)
+      }
+    }
+  }
+
+  // Also watch for direct changes to the position property
+  onPositionChanged: {
+    root.barPositionChanged(position)
+  }
+
+  // Function to change bar position
+  function setPosition(newPosition) {
+    Settings.data.bar.position = newPosition
+  }
+}