Add tooltips, fix tray menu

Bar/Modules/ActiveWindow.qml

@@ -15,6 +15,7 @@ PanelWindow {
     margins.top: barHeight
     visible: activeWindowWrapper.shouldShow
     implicitHeight: activeWindowTitleContainer.height
+    implicitWidth: activeWindowTitleContainer.x
     property int barHeight: 36
     color: "transparent"
 

Bar/Modules/Brightness.qml

@@ -40,6 +40,19 @@ Item {
         iconCircleColor: Theme.accentPrimary
         iconTextColor: Theme.backgroundPrimary
         textColor: Theme.textPrimary
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: brightnessTooltip.tooltipVisible = true
+            onExited: brightnessTooltip.tooltipVisible = false
+        }
+        StyledTooltip {
+            id: brightnessTooltip
+            text: "Brightness: " + brightness + "%"
+            tooltipVisible: false
+            targetItem: pill
+            delay: 200
+        }
     }
 
     Component.onCompleted: {

Bar/Modules/CustomTrayMenu.qml

@@ -18,7 +18,7 @@ PopupWindow {
     property real anchorY
 
     anchor.item: anchorItem ? anchorItem : null
-    anchor.rect.x: anchorX
+    anchor.rect.x: anchorX + 10
     anchor.rect.y: anchorY
 
     function showAt(item, x, y) {
@@ -51,10 +51,10 @@ PopupWindow {
     Rectangle {
         id: bg
         anchors.fill: parent
-        color: Theme.backgroundPrimary
-        border.color: Theme.accentPrimary
-        border.width: 2
-        radius: 20
+        color: Theme.backgroundElevated || "#222"
+        border.color: Theme.border || "#444"
+        border.width: 1
+        radius: 12
         z: 0
     }
 
@@ -76,15 +76,15 @@ PopupWindow {
             required property var modelData
 
             width: listView.width
-            height: (modelData?.isSeparator) ? 8 : 28
+            height: (modelData?.isSeparator) ? 8 : 32
             color: "transparent"
-            radius: 6
+            radius: 12
 
             Rectangle {
                 anchors.centerIn: parent
                 width: parent.width - 20
                 height: 1
-                color: Qt.darker(Theme.backgroundPrimary, 1.4)
+                color: Qt.darker(Theme.backgroundElevated || "#222", 1.4)
                 visible: modelData?.isSeparator ?? false
             }
 
@@ -92,14 +92,14 @@ PopupWindow {
                 id: bg
                 anchors.fill: parent
                 color: mouseArea.containsMouse ? Theme.highlight : "transparent"
-                radius: 6
+                radius: 12
                 visible: !(modelData?.isSeparator ?? false)
                 property color hoverTextColor: mouseArea.containsMouse ? Theme.onAccent : Theme.textPrimary
 
                 RowLayout {
                     anchors.fill: parent
-                    anchors.leftMargin: 10
-                    anchors.rightMargin: 10
+                    anchors.leftMargin: 12
+                    anchors.rightMargin: 12
                     spacing: 8
 
                     Text {

Bar/Modules/SystemTray.qml

@@ -6,6 +6,7 @@ import Qt5Compat.GraphicalEffects
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
 import qs.Settings
+import qs.Components
 
 Row {
     property var bar
@@ -110,8 +111,8 @@ Row {
                         
                         modelData.secondaryActivate && modelData.secondaryActivate()
                     } else if (mouse.button === Qt.RightButton) {
+                        trayTooltip.tooltipVisible = false
                         console.log("Right click on", modelData.id, "hasMenu:", modelData.hasMenu, "menu:", modelData.menu)
-                        
                         // If menu is already visible, close it
                         if (trayMenu && trayMenu.visible) {
                             trayMenu.hideMenu()
@@ -129,6 +130,16 @@ Row {
                         }
                     }
                 }
+                onEntered: trayTooltip.tooltipVisible = true
+                onExited: trayTooltip.tooltipVisible = false
+            }
+            
+            StyledTooltip {
+                id: trayTooltip
+                text: modelData.name || modelData.id || "Tray Item"
+                tooltipVisible: false
+                targetItem: trayIcon
+                delay: 200
             }
             
             Component.onDestruction: {

Bar/Modules/Volume.qml

@@ -21,6 +21,13 @@ Item {
         iconCircleColor: Theme.accentPrimary
         iconTextColor: Theme.backgroundPrimary
         textColor: Theme.textPrimary
+        StyledTooltip {
+            id: volumeTooltip
+            text: "Volume: " + volume + "%\nScroll up/down to change volume"
+            tooltipVisible: false
+            targetItem: pillIndicator
+            delay: 200
+        }
     }
 
     Connections {
@@ -47,6 +54,8 @@ Item {
         hoverEnabled: true
         acceptedButtons: Qt.NoButton // Accept wheel events only
         propagateComposedEvents: true
+        onEntered: volumeTooltip.tooltipVisible = true
+        onExited: volumeTooltip.tooltipVisible = false
         onWheel:(wheel) => {
             if (!shell) return;
             let step = 5;