Fix hover, systray menu and theming

AudioWidget.qml

@@ -67,7 +67,7 @@ Rectangle {
         anchors.centerIn: parent
         text: audioTextText
         font.bold: true
-        font.pixelSize: 14
+        font.pixelSize: Theme.pixelSize
         font.family: Theme.fontFamily
         color: Theme.textColor
     }

ClockWidget.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import Quickshell.Widgets
+import Quickshell.Io
 import qs.Services
 import qs.Common
 
@@ -12,22 +13,48 @@ Item {
     }
 
     Rectangle {
+        id: clock
+
         color: Theme.backgroudColor
         implicitWidth: clockText.implicitWidth * 1.6
-        implicitHeight: Theme.heightGaps //root.implicitHeight*0.8
+        implicitHeight: Theme.heightGaps 
         radius: 25
 
+        property string calendar: ""
+
         Text {
             id: clockText
 
             anchors.centerIn: parent
             text: Time.time
             font.bold: true
-            font.pixelSize: 14
+            font.pixelSize: Theme.pixelSize
             font.family: Theme.fontFamily
             color: Theme.textColor
         }
 
+        Process {
+            id: cal
+            running: true
+            command: ["cal","-S3"]
+            stdout: StdioCollector {
+                onStreamFinished: {clock.calendar=this.text}
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+                cal.running = true
+                PopUpHover.start(clock,"time")
+            }
+            onExited: {
+                PopUpHover.exit()
+            }
+        }
+
+
     }
 
 }

Common/HoverMediator.qml

@@ -8,11 +8,7 @@ Singleton {
 
     property var component: null
     property string type: ""
-    property int width: 100
-    property int height: 100
     property int x: component? component.implicitWidth : 0
     property int y: component? (component.implicitHeight + Theme.gaps) : 100
-    property bool visible: false
-
 
 }

Common/Theme.qml

@@ -9,7 +9,9 @@ Singleton {
 
     readonly property int barSize: 35
     readonly property double heightGaps: barSize * 0.8
-    readonly property string fontFamily: "Source Code Pro"
+    readonly property string fontFamily: "Noto Sans"
+    readonly property string fontFamilyMono: "SauceCodePro Nerd Font Mono"
+    readonly property int pixelSize: 14
     readonly property int gaps: 5
     readonly property int animationDuration: 200
 
@@ -23,25 +25,25 @@ Singleton {
     }
     readonly property var walColorsText: walColors.text().split('\n')
 
-    property double barOpacity: 0.2
+    readonly property double barOpacity: 0.2
-    property color backgroudColor: walColorsText[0]
+    readonly property color backgroudColor: walColorsText[0]
-    property color color2: walColorsText[1]
+    readonly property color color2: walColorsText[1]
-    property color color3: walColorsText[2]
+    readonly property color color3: walColorsText[2]
-    property color color4: walColorsText[3]
+    readonly property color color4: walColorsText[3]
-    property color color5: walColorsText[4]
+    readonly property color color5: walColorsText[4]
-    property color color6: walColorsText[5]
+    readonly property color color6: walColorsText[5]
-    property color color7: walColorsText[6]
+    readonly property color color7: walColorsText[6]
-    property color foregroundColor: walColorsText[7]
+    readonly property color foregroundColor: walColorsText[7]
-    property color backgroudColorBright: walColorsText[8]
+    readonly property color backgroudColorBright: walColorsText[8]
-    property color color2Bright: walColorsText[9]
+    readonly property color color2Bright: walColorsText[9]
-    property color color3Bright: walColorsText[10]
+    readonly property color color3Bright: walColorsText[10]
-    property color color4Bright: walColorsText[11]
+    readonly property color color4Bright: walColorsText[11]
-    property color color5Bright: walColorsText[12]
+    readonly property color color5Bright: walColorsText[12]
-    property color color6Bright: walColorsText[13]
+    readonly property color color6Bright: walColorsText[13]
-    property color color7Bright: walColorsText[14]
+    readonly property color color7Bright: walColorsText[14]
-    property color foregroundColorBright: walColorsText[15]
+    readonly property color foregroundColorBright: walColorsText[15]
 
-    readonly property color textColor: foregroundColor
+    readonly property color textColor: foregroundColorBright
 // background "#0e1721"
 // color2     "#463e44"
 // color3     "#7b4834"

NotificationsWidget.qml

@@ -15,7 +15,7 @@ Item {
     Rectangle {
         color: Theme.backgroudColor
         implicitWidth: clockText.implicitWidth * 1.6
-        implicitHeight: Theme.heightGaps //root.implicitHeight*0.8
+        implicitHeight: Theme.heightGaps 
         radius: 25
 
         Text {
@@ -24,7 +24,7 @@ Item {
             anchors.centerIn: parent
             text: "OPA!"
             font.bold: true
-            font.pixelSize: 14
+            font.pixelSize: Theme.pixelSize
             font.family: Theme.fontFamily
             color: Theme.textColor
         }

Services/PopUpHover.qml

@@ -14,12 +14,13 @@ Singleton {
     function start(component, type) {
         HoverMediator.component = component
         HoverMediator.type = type
+        hoverPopUp.anchor.updateAnchor()
         hoverTimer.start() 
     }
 
     function exit() {
         hoverTimer.stop()
-        wsPopUp.opacity=0
+        hoverPopUp.visible = false
     }
 
     PopupWindow {
@@ -31,25 +32,58 @@ Singleton {
             anchor.rect.x: (HoverMediator.x - this.implicitWidth)/2
             implicitHeight: wsPopUp.implicitHeight
             implicitWidth: wsPopUp.implicitWidth
-            // implicitHeight: HoverMediator.height
-            // implicitWidth: HoverMediator.width
 
             color:"transparent"
-            visible:true
         
         Component {
             id: stub
             Text {
                 text: "stub"
+                font.bold: true
+                font.pixelSize: Theme.pixelSize
+                font.family: Theme.fontFamily
+                color: Theme.textColor
+            }
+        }
+        
+        Component {
+            id: systray
+            Text {
+                text: {
+                    if (!HoverMediator.component.model) return ""
+                    if (HoverMediator.component.model.tooltipTitle) return HoverMediator.component.model.tooltipTitle
+                    if (HoverMediator.component.model.title) return HoverMediator.component.model.title
+                    else return ""
+                }
+                font.bold: true
+                font.pixelSize: Theme.pixelSize
+                font.family: Theme.fontFamily
+                color: Theme.textColor
+            }
+        }
+
+        Component {
+            id: time
+            Text {
+                property string calendar:(HoverMediator.component.calendar)? HoverMediator.component.calendar: ""
+
+                text: calendar
+                font.bold: true
+                font.pixelSize: Theme.pixelSize
+                font.family: Theme.fontFamilyMono
+                color: Theme.textColor
             }
         }
 
         Component {
             id: audio
             Text {
-                property string sinkDescription:(HoverMediator.component && HoverMediator.component.sink)? HoverMediator.component.sink.description : ""
+                property string sinkDescription:(HoverMediator.component.sink)? HoverMediator.component.sink.description : ""
                 text: sinkDescription
-                color:"white"
+                font.bold: true
+                font.pixelSize: Theme.pixelSize
+                font.family: Theme.fontFamily
+                color: Theme.textColor
             }
         }
 
@@ -86,7 +120,7 @@ Singleton {
             bottomMargin: Theme.gaps
             color: Theme.backgroudColor
             radius: 25
-            opacity: 0
+            opacity: 1
             Behavior on opacity {
                 NumberAnimation { property: "opacity"; duration: Theme.animationDuration}
             }
@@ -97,6 +131,8 @@ Singleton {
                     if(!HoverMediator.type) return stub
                     if(HoverMediator.type === "workspace") return workspaceComponent
                     if(HoverMediator.type === "audio") return audio
+                    if(HoverMediator.type === "time") return time 
+                    if(HoverMediator.type === "systray") return systray
                 }
             }
         }
@@ -108,8 +144,8 @@ Singleton {
 
         interval: 300
         onTriggered: {
-            wsPopUp.opacity = 1
+            // wsPopUp.opacity = 1
-            // hoverPopUp.visible = true
+            hoverPopUp.visible = true
         }
     }
 }

SysTrayWidget.qml

@@ -7,6 +7,7 @@ import Quickshell
 import Quickshell.Widgets
 import Quickshell.Services.SystemTray
 import qs.Common
+import qs.Services
 
 WrapperRectangle {
     id: systrayRoot
@@ -60,24 +61,26 @@ WrapperRectangle {
                     source: systrayItem.iconSource
                 }
 
-
                 MouseArea {
                     anchors.fill: parent
                     acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    hoverEnabled: true
+                    onEntered: {
+                        PopUpHover.start(systrayItem,"systray")
+                    }
+                    onExited: {
+                        PopUpHover.exit()
+                    }
                     onClicked: (mouse) => {
                         if (mouse.button === Qt.RightButton) { 
 
-                            const globalPos = mapToGlobal(0, 0);
-
-                            const currentScreen = parent.monitor
-                            const relativeX = globalPos.x;
                             menuAnchor.menu = systrayItem.model.menu;
-                            menuAnchor.anchor.window = root;
+                            menuAnchor.anchor.item = systrayItem;
                             menuAnchor.anchor.rect = Qt.rect(
-                                globalPos.x,
+                                0,
-                                globalPos.y+10, 
+                                systrayItem.implicitHeight, 
-                                1, 
+                                0,
-                                1
+                                0
                             );
                             menuAnchor.open();
                             
@@ -97,4 +100,4 @@ WrapperRectangle {
         id: menuAnchor
 
     }
-}
+}

Workspaces.qml

@@ -78,7 +78,9 @@ WrapperMouseArea {
                 ]
 
                 Behavior on color {
-                    ColorAnimation {duration: Theme.animationDuration}
+                    ColorAnimation {
+                        duration: Theme.animationDuration
+                    }
                 }
 
                 Behavior on implicitWidth {
@@ -94,7 +96,7 @@ WrapperMouseArea {
                     anchors.centerIn: parent
                     text: workspaceName
                     font.bold: true
-                    font.pixelSize: 14
+                    font.pixelSize: Theme.pixelSize
                     font.family: Theme.fontFamily
                     color: Theme.textColor
                 }
@@ -104,13 +106,10 @@ WrapperMouseArea {
                     hoverEnabled: true
                     onEntered: {
                         if (parent.hasTopLevel) {
-                            // PopUpHover.show(workspacesRectangle)
-
                             PopUpHover.start(workspacesRectangle, "workspace")
                         }
                     }
                     onExited: {
-                        // PopUpHover.exit()
                         PopUpHover.exit()
                     }
                     onClicked: {