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

.config/quickshell/ii/modules/bar/Resource.qml

@@ -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