Fix Brightness & Tray

Commons/Color.qml

@@ -47,6 +47,7 @@ Singleton {
   // -----------
   function applyOpacity(color, opacity) {
     // Convert color to string and apply opacity
+    if (!color) return "transparent"
     return color.toString().replace("#", "#" + opacity)
   }
 

Modules/Bar/Bar.qml

@@ -137,13 +137,16 @@ Variants {
         return null
       }
       
+      console.log(`Attempting to load widget: ${widgetName}.qml`)
+      
       // Try to load the widget directly from file
       const component = Qt.createComponent(`../Bar/Widgets/${widgetName}.qml`)
       if (component.status === Component.Ready) {
+        console.log(`Successfully created component for: ${widgetName}.qml`)
         return component
       }
       
-      console.warn(`Failed to load widget: ${widgetName}.qml`)
+      console.warn(`Failed to load widget: ${widgetName}.qml, status:`, component.status, "error:", component.errorString())
       return null
     }
 

Modules/Bar/Widgets/Brightness.qml

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

Modules/Bar/Widgets/Tray.qml

@@ -9,10 +9,14 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
+
+
 Rectangle {
   readonly property real itemSize: 24 * scaling
 
   visible: Settings.data.bar.showTray && (SystemTray.items.values.length > 0)
+  
+
   width: tray.width + Style.marginM * scaling * 2
 
   height: Math.round(Style.capsuleHeight * scaling)
@@ -95,14 +99,14 @@ Rectangle {
                            return
                          }
 
-                         if (modelData.hasMenu && modelData.menu && trayMenu) {
+                         if (modelData.hasMenu && modelData.menu && trayMenu.item) {
                            trayPanel.open()
 
                            // Anchor the menu to the tray icon item (parent) and position it below the icon
-                           const menuX = (width / 2) - (trayMenu.width / 2)
+                           const menuX = (width / 2) - (trayMenu.item.width / 2)
                            const menuY = (Style.barHeight * scaling)
-                           trayMenu.menu = modelData.menu
+                           trayMenu.item.menu = modelData.menu
-                           trayMenu.showAt(parent, menuX, menuY)
+                           trayMenu.item.showAt(parent, menuX, menuY)
                          } else {
                            Logger.log("Tray", "No menu available for", modelData.id, "or trayMenu not set")
                          }
@@ -142,7 +146,7 @@ Rectangle {
 
     function close() {
       visible = false
-      trayMenu.hideMenu()
+      trayMenu.item.hideMenu()
     }
 
     // Clicking outside of the rectangle to close
@@ -151,8 +155,9 @@ Rectangle {
       onClicked: trayPanel.close()
     }
 
-    TrayMenu {
+    Loader {
       id: trayMenu
+      source: "TrayMenu.qml"
     }
   }
 }

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -199,7 +199,7 @@ ColumnLayout {
                     height: 32 * scaling
                     radius: width * 0.5
                     color: Color.mPrimary
-                    border.color: Color.mPrimaryContainer
+                    border.color: Color.mPrimary
                     border.width: 2 * scaling
 
                     NIcon {
@@ -336,7 +336,7 @@ ColumnLayout {
                     height: 32 * scaling
                     radius: width * 0.5
                     color: Color.mPrimary
-                    border.color: Color.mPrimaryContainer
+                    border.color: Color.mPrimary
                     border.width: 2 * scaling
 
                     NIcon {
@@ -473,7 +473,7 @@ ColumnLayout {
                     height: 32 * scaling
                     radius: width * 0.5
                     color: Color.mPrimary
-                    border.color: Color.mPrimaryContainer
+                    border.color: Color.mPrimary
                     border.width: 2 * scaling
 
                     NIcon {
@@ -612,8 +612,9 @@ ColumnLayout {
       border.width: Math.max(1, Style.borderS * scaling)
 
       ColumnLayout {
-        anchors.fill: parent
+        Layout.fillWidth: true
-        anchors.margins: Style.marginL * scaling
+        Layout.fillHeight: true
+        Layout.margins: Style.marginL * scaling
         spacing: Style.marginM * scaling
 
         NText {