added beta of hover texts

modules/bar/widgets/BarPopup.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import Quickshell
+import "../../../config"
+
+PopupWindow {
+    id: popup
+
+    property Item anchorItem
+    property bool anchorHovered: false
+    property int popupWidth: 300
+    property int popupVerticalOffset: 0
+
+    default property alias content: contentColumn.data
+
+    visible: false
+    color: "transparent"
+    width: popupWidth
+    height: background.height
+
+    onAnchorHoveredChanged: popup.updateVisibility()
+
+    function updateVisibility() {
+        if (anchorHovered || mouseArea.containsMouse) {
+            closeTimer.stop()
+            visible = true
+        } else {
+            closeTimer.restart()
+        }
+    }
+
+    Timer {
+        id: closeTimer
+        interval: 1
+        onTriggered: {
+            if (!anchorHovered && !mouseArea.containsMouse) {
+                visible = false
+            }
+        }
+    }
+
+    anchor {
+        item: anchorItem
+        edges: Edges.Top | Edges.Left
+        gravity: Edges.Bottom | Edges.Right
+        adjustment: PopupAdjustment.FlipY | PopupAdjustment.SlideX
+        onAnchoring: {
+            anchor.rect.x = (anchorItem.width - popup.width) / 2
+            anchor.rect.y = anchorItem.height + popupVerticalOffset
+        }
+    }
+
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onContainsMouseChanged: popup.updateVisibility()
+        Rectangle {
+            id: background
+            width: parent.width
+            height: contentColumn.implicitHeight + 2 * 12
+            color: Qt.alpha(Colors.primaryContainer, 0.9)
+            radius: 12
+            border {
+                color: Colors.primaryContainer_fg
+                width: Config.border_width
+            }
+
+            Column {
+                id: contentColumn
+                height: implicitHeight
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                    margins: 12
+                }
+                spacing: Config.small_spacing_fun(24)
+            }
+        }
+    }
+}

modules/bar/widgets/Clock.qml

@@ -2,10 +2,11 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "../../../config"
+import "../states/Clock"
 
 Rectangle {  //workspace
     id: clockRect
-    width: dateTimer.running ? Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*3, bar.height) : Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*2, bar.height)
+    width: ClockState.expanded ? Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*3, bar.height) : Math.max(timeText.width + Config.spacing_fun(height)*2, bar.height)
     height: bar.height
     radius: Config.radius_fun(height)
     color: clockArea.containsMouse ? Colors.tertiaryContainer : Colors.primaryContainer
@@ -22,9 +23,8 @@ Rectangle {  //workspace
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
         onClicked: {
-            dateTimer.running = !dateTimer.running
-            if (!dateTimer.running) dateText.currentDate = ""
-            console.log("[Clock] Date visible: " + dateTimer.running)
+            ClockState.expanded = !ClockState.expanded
+            console.log("[Clock] Date visible: " + ClockState.expanded)
         }
         
         Row {
@@ -32,54 +32,59 @@ Rectangle {  //workspace
 
             Text {
                 id: dateText
-                property string currentDate: ""
-                text: currentDate
+                text: ClockState.shortDate
+                visible: ClockState.expanded
                 color: (
                     clockArea.containsMouse ? Colors.tertiary :
                     Colors.primary
                 )
                 font.pixelSize: Config.font_size_small(clockRect.height)
                 font.family: Config.font
-
-                Timer {
-                    id: dateTimer
-                    interval: Config.reload_interval
-                    running: false
-                    repeat: true
-                    triggeredOnStart: true
-                    onTriggered: {
-                        var now = new Date()
-                        dateText.currentDate = Qt.formatDate(now, "ddd, dd.MM.yyyy - ")
-                    }
-                }
             }
 
             Text {
                 id: timeText
                 property string currentTime: ""
 
-                text: currentTime
+                text: ClockState.currentTime
                 color: (
                     clockArea.containsMouse ? Colors.tertiary :
                     Colors.primary
                 )
                 font.pixelSize: Config.font_size_small(clockRect.height)
                 font.family: Config.font
+            }
+        }
+    }
 
-                Component.onCompleted: {
-                    var now = new Date()
-                    currentTime = Qt.formatTime(now, "hh:mm:ss")
-                }
+    BarPopup {
+        id: clockPopup
+        anchorItem: clockRect
+        anchorHovered: clockArea.containsMouse
+        width: Math.max(text1.width, text2.width) + (Config.spacing_fun(clockRect.height) * 3)
+        height: text1.height*3+(Config.spacing_fun(clockRect.height) * 5)
 
-                Timer {
-                    interval: 1000
-                    running: true
-                    repeat: true
-                    onTriggered: {
-                        var now = new Date()
-                        timeText.currentTime = Qt.formatTime(now, "hh:mm:ss")
-                    }
-                }
+        Column {
+            width: parent.width
+            spacing: Config.spacing_fun(clockRect.height)
+            Text {
+                id: text1
+                text: ClockState.fullDate
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text2
+                text: ClockState.uptime
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
             }
         }
     }

modules/bar/widgets/Network.qml

@@ -33,4 +33,187 @@ MouseArea {
             color: networkButton.containsMouse ? Colors.tertiary_fg : networkText.text === "󰤭 /󱐤" ? Colors.error : Colors.primary
         }
     }
+
+    BarPopup {
+        id: clockPopup
+        anchorItem: networkButton
+        anchorHovered: networkButton.containsMouse
+        property int count: 17
+        width: Math.max(text1.width, text2.width, text3.width, text4.width, text5.width, text6.width) + (Config.spacing_fun(networkButton.height) * 3)
+        height: text1.height*count+(Config.spacing_fun(networkButton.height) * (count + 2))
+
+        Column {
+            width: parent.width
+            spacing: Config.spacing_fun(networkButton.height)
+            Text {
+                id: text1
+                text: "interfaceName: " + NetworkState.interfaceName
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text2
+                text: "interfaceType: " + NetworkState.interfaceType
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text3
+                text: "connectionName: " + NetworkState.connectionName
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text4
+                text: "ipv4: " + NetworkState.ipv4
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text5
+                text: "signalStrength: " + NetworkState.signalStrength
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text6
+                text: "wifiChannel: " + NetworkState.wifiChannel
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text7
+                text: "wifiFrequency: " + NetworkState.wifiFrequency
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text8
+                text: "linkSpeed: " + NetworkState.linkSpeed
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text9
+                text: "downloadSpeed: " + NetworkState.downloadSpeed
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text10
+                text: "uploadSpeed: " + NetworkState.uploadSpeed
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text11
+                text: "ping: " + NetworkState.ping
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text12
+                text: "internetAvailable: " + NetworkState.internetAvailable
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text13
+                text: "vpnConnected: " + NetworkState.vpnConnected
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text14
+                text: "vpnName: " + NetworkState.vpnName
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text15
+                text: "vpnIp: " + NetworkState.vpnIp
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text16
+                text: "tailscaleConnected: " + NetworkState.tailscaleConnected
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+
+            Text {
+                id: text17
+                text: "tailscaleIp: " + NetworkState.tailscaleIp
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+        }
+    }
 }