feat(bar): add hover popups for system resources and upcoming todos

- Add detailed popups for memory, swap, and CPU resource icons - Add todo integration popup for date/time widget
2026-06-05 14:59:27 -05:00 · 2025-08-06 01:25:37 +01:00
parent 4161467356
commit 1dc46fa104
2 changed files with 158 additions and 2 deletions
@@ -1,8 +1,10 @@
+import qs
 import qs.modules.common
 import qs.modules.common.widgets
 import qs.services
 import QtQuick
 import QtQuick.Layouts
+import Quickshell

 Item {
    id: root
@@ -11,6 +13,81 @@ Item {
    implicitWidth: rowLayout.implicitWidth
    implicitHeight: 32

+    // Helper function to get upcoming todos
+    function getUpcomingTodos() {
+        const unfinishedTodos = Todo.list.filter(function(item) { return !item.done; })
+        if (unfinishedTodos.length === 0) {
+            return "No pending tasks"
+        }
+        
+        // Limit to first 5 todos to keep popup manageable
+        const limitedTodos = unfinishedTodos.slice(0, 5)
+        let todoText = limitedTodos.map(function(item, index) {
+            return `${index + 1}. ${item.content}`
+        }).join('\n')
+        
+        if (unfinishedTodos.length > 5) {
+            todoText += `\n... and ${unfinishedTodos.length - 5} more`
+        }
+        
+        return todoText
+    }
+
+    // Generate popup content with date and upcoming todos
+    property string dateDetails: {
+        const todosSection = getUpcomingTodos()
+        return `${Qt.locale().toString(DateTime.clock.date, "dddd, MMMM dd, yyyy")} • ${DateTime.time}
+Uptime: ${DateTime.uptime}
+
+📋 Upcoming Tasks:
+${todosSection}`
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+    }
+
+    LazyLoader {
+        id: popupLoader
+        active: mouseArea.containsMouse
+
+        component: PopupWindow {
+            id: popupWindow
+            visible: true
+            implicitWidth: datePopup.implicitWidth
+            implicitHeight: datePopup.implicitHeight
+            anchor.item: root
+            anchor.edges: Edges.Top
+            anchor.rect.x: (root.implicitWidth - popupWindow.implicitWidth) / 2
+            anchor.rect.y: Config.options.bar.bottom ? 
+                (-datePopup.implicitHeight - 15) :
+                (root.implicitHeight + 15)
+            color: "transparent"
+            
+            Rectangle {
+                id: datePopup
+                readonly property real margin: 12
+                implicitWidth: popupText.implicitWidth + margin * 2
+                implicitHeight: popupText.implicitHeight + margin * 2
+                color: Appearance.colors.colLayer0
+                radius: Appearance.rounding.small
+                border.width: 1
+                border.color: Appearance.colors.colLayer0Border
+                
+                StyledText {
+                    id: popupText
+                    anchors.centerIn: parent
+                    font.pixelSize: Appearance.font.pixelSize.small
+                    color: Appearance.colors.colOnLayer0
+                    text: dateDetails
+                }
+            }
+        }
+    }
+
    RowLayout {
        id: rowLayout
        anchors.centerIn: parent
@@ -1,7 +1,10 @@
+import qs
 import qs.modules.common
 import qs.modules.common.widgets
+import qs.services
 import QtQuick
 import QtQuick.Layouts
+import Quickshell

 Item {
    required property string iconName
@@ -9,8 +12,84 @@ Item {
    property bool shown: true
    clip: true
    visible: width > 0 && height > 0
-    implicitWidth: resourceRowLayout.x < 0 ? 0 : childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitWidth: resourceRowLayout.x < 0 ? 0 : resourceRowLayout.implicitWidth
+    implicitHeight: resourceRowLayout.implicitHeight
+
+    // Helper function to format KB to GB  
+    function formatKB(kb) {
+        return (kb / (1024 * 1024)).toFixed(1) + " GB"
+    }
+
+    // Generate tooltip content based on resource type
+    property string tooltipContent: {
+        switch(iconName) {
+            case "memory":
+                return `Memory Usage
+Used: ${formatKB(ResourceUsage.memoryUsed)}
+Free: ${formatKB(ResourceUsage.memoryFree)}
+Total: ${formatKB(ResourceUsage.memoryTotal)}
+Usage: ${Math.round(ResourceUsage.memoryUsedPercentage * 100)}%`
+            case "swap_horiz":
+                return ResourceUsage.swapTotal > 0 ? 
+                    `Swap Usage
+Used: ${formatKB(ResourceUsage.swapUsed)}
+Free: ${formatKB(ResourceUsage.swapFree)}
+Total: ${formatKB(ResourceUsage.swapTotal)}
+Usage: ${Math.round(ResourceUsage.swapUsedPercentage * 100)}%` :
+                    "Swap: Not configured"
+            case "settings_slow_motion":
+                return `CPU Usage
+Current: ${Math.round(ResourceUsage.cpuUsage * 100)}%
+Load: ${ResourceUsage.cpuUsage > 0.8 ? "High" : ResourceUsage.cpuUsage > 0.5 ? "Medium" : "Low"}`
+            default:
+                return "System Resource"
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+    }
+
+    LazyLoader {
+        id: popupLoader
+        active: mouseArea.containsMouse
+
+        component: PopupWindow {
+            id: popupWindow
+            visible: true
+            implicitWidth: resourcePopup.implicitWidth
+            implicitHeight: resourcePopup.implicitHeight
+            anchor.item: root
+            anchor.edges: Edges.Top
+            anchor.rect.x: (root.implicitWidth - popupWindow.implicitWidth) / 2
+            anchor.rect.y: Config.options.bar.bottom ? 
+                (-resourcePopup.implicitHeight - 15) :
+                (root.implicitHeight + 15)
+            color: "transparent"
+            
+            Rectangle {
+                id: resourcePopup
+                readonly property real margin: 10
+                implicitWidth: popupText.implicitWidth + margin * 2
+                implicitHeight: popupText.implicitHeight + margin * 2
+                color: Appearance.colors.colLayer0
+                radius: Appearance.rounding.small
+                border.width: 1
+                border.color: Appearance.colors.colLayer0Border
+                
+                StyledText {
+                    id: popupText
+                    anchors.centerIn: parent
+                    font.pixelSize: Appearance.font.pixelSize.small
+                    color: Appearance.colors.colOnLayer0
+                    text: tooltipContent
+                }
+            }
+        }
+    }

    RowLayout {
        spacing: 4