WIP - modular bar (need to fix brightness & tray)

Modules/Bar/Bar.qml

@@ -47,7 +47,7 @@ Variants {
         layer.enabled: true
       }
 
-      // Left
+      // Left Section - Dynamic Widgets
       Row {
         id: leftSection
 
@@ -57,14 +57,25 @@ Variants {
         anchors.verticalCenter: parent.verticalCenter
         spacing: Style.marginS * scaling
 
-        SystemMonitor {}
-
-        ActiveWindow {}
-
-        MediaMini {}
+        Repeater {
+          model: Settings.data.bar.widgets.left
+          delegate: Loader {
+            id: widgetLoader
+            sourceComponent: getWidgetComponent(modelData)
+            active: true
+            anchors.verticalCenter: parent.verticalCenter
+            onStatusChanged: {
+              if (status === Loader.Error) {
+                console.warn(`Failed to load widget: ${modelData}`)
+              } else if (status === Loader.Ready) {
+                console.log(`Successfully loaded widget: ${modelData}`)
+              }
+            }
+          }
+        }
       }
 
-      // Center
+      // Center Section - Dynamic Widgets
       Row {
         id: centerSection
 
@@ -73,10 +84,25 @@ Variants {
         anchors.verticalCenter: parent.verticalCenter
         spacing: Style.marginS * scaling
 
-        Workspace {}
+        Repeater {
+          model: Settings.data.bar.widgets.center
+          delegate: Loader {
+            id: widgetLoader
+            sourceComponent: getWidgetComponent(modelData)
+            active: true
+            anchors.verticalCenter: parent.verticalCenter
+            onStatusChanged: {
+              if (status === Loader.Error) {
+                console.warn(`Failed to load widget: ${modelData}`)
+              } else if (status === Loader.Ready) {
+                console.log(`Successfully loaded widget: ${modelData}`)
+              }
+            }
+          }
+        }
       }
 
-      // Right
+      // Right Section - Dynamic Widgets
       Row {
         id: rightSection
 
@@ -86,44 +112,43 @@ Variants {
         anchors.verticalCenter: bar.verticalCenter
         spacing: Style.marginS * scaling
 
-        ScreenRecorderIndicator {
-          anchors.verticalCenter: parent.verticalCenter
+        Repeater {
+          model: Settings.data.bar.widgets.right
+          delegate: Loader {
+            id: widgetLoader
+            sourceComponent: getWidgetComponent(modelData)
+            active: true
+            anchors.verticalCenter: parent.verticalCenter
+            onStatusChanged: {
+              if (status === Loader.Error) {
+                console.warn(`Failed to load widget: ${modelData}`)
+              } else if (status === Loader.Ready) {
+                console.log(`Successfully loaded widget: ${modelData}`)
+              }
+            }
+          }
         }
-
-        Tray {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        NotificationHistory {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        WiFi {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Bluetooth {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Battery {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Volume {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Brightness {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Clock {
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        SidePanelToggle {}
       }
     }
+
+    // Auto-discover widget components
+    function getWidgetComponent(widgetName) {
+      if (!widgetName || widgetName.trim() === "") {
+        return null
+      }
+      
+      // Try to load the widget directly from file
+      const component = Qt.createComponent(`../Bar/Widgets/${widgetName}.qml`)
+      if (component.status === Component.Ready) {
+        return component
+      }
+      
+      console.warn(`Failed to load widget: ${widgetName}.qml`)
+      return null
+    }
+
+
+
+
   }
 }

Modules/Bar/Widgets/Bluetooth.qml

@@ -10,9 +10,7 @@ import qs.Widgets
 NIconButton {
   id: root
 
-  readonly property bool bluetoothEnabled: Settings.data.network.bluetoothEnabled
   sizeMultiplier: 0.8
-  visible: bluetoothEnabled
 
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface

Modules/Bar/Widgets/BluetoothPanel.qml

@@ -118,7 +118,7 @@ NPanel {
               radius: Style.radiusM * scaling
               color: {
                 if (availableDeviceArea.containsMouse && !isBusy)
-                  return Color.mSecondary
+                  return Color.mTertiary
 
                 if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
                   return Color.mPrimary

Modules/Bar/Widgets/Brightness.qml

@@ -10,7 +10,7 @@ Item {
 
   width: pill.width
   height: pill.height
-  visible: Settings.data.bar.showBrightness && firstBrightnessReceived && getMonitor() !== null
+  visible: firstBrightnessReceived && getMonitor() !== null
 
   // Used to avoid opening the pill on Quickshell startup
   property bool firstBrightnessReceived: false

Modules/Bar/Widgets/TrayMenu.qml

@@ -134,7 +134,7 @@ PopupWindow {
 
           Rectangle {
             anchors.fill: parent
-            color: mouseArea.containsMouse ? Color.mSecondary : Color.transparent
+            color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent
             radius: Style.radiusS * scaling
             visible: !(modelData?.isSeparator ?? false)
 

Modules/Bar/Widgets/WiFi.qml

@@ -10,10 +10,7 @@ import qs.Widgets
 NIconButton {
   id: root
 
-  readonly property bool wifiEnabled: Settings.data.network.wifiEnabled
-
   sizeMultiplier: 0.8
-  visible: wifiEnabled
 
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface

Modules/Bar/Widgets/WiFiPanel.qml

@@ -147,7 +147,7 @@ NPanel {
                 Layout.fillWidth: true
                 Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling
                 radius: Style.radiusS * scaling
-                color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mSecondary : Color.transparent)
+                color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent)
 
                 RowLayout {
                   anchors.fill: parent