bar: unify resource usage popups

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

@@ -10,26 +10,12 @@ Item {
     id: root
     required property string iconName
     required property double percentage
-    property var tooltipData: [
-        {
-            icon: "info",
-            label: "System resource",
-            value: ""
-        }
-    ]
-    property var tooltipHeaderIcon
-    property var tooltipHeaderText
     property bool shown: true
     clip: true
     visible: width > 0 && height > 0
     implicitWidth: resourceRowLayout.x < 0 ? 0 : resourceRowLayout.implicitWidth
     implicitHeight: Appearance.sizes.barHeight
 
-    // Helper function to format KB to GB
-    function formatKB(kb) {
-        return (kb / (1024 * 1024)).toFixed(1) + " GB";
-    }
-
     RowLayout {
         id: resourceRowLayout
         spacing: 2
@@ -96,65 +82,6 @@ Item {
         enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
     }
 
-    StyledPopup {
-        hoverTarget: mouseArea
-
-        ColumnLayout {
-            id: columnLayout
-            anchors.centerIn: parent
-            spacing: 4
-
-            // Header
-            RowLayout {
-                id: header
-                spacing: 5
-
-                MaterialSymbol {
-                    fill: 0
-                    font.weight: Font.Medium
-                    text: root.tooltipHeaderIcon
-                    iconSize: Appearance.font.pixelSize.large
-                    color: Appearance.colors.colOnSurfaceVariant
-                }
-
-                StyledText {
-                    text: root.tooltipHeaderText
-                    font {
-                        weight: Font.Medium
-                        pixelSize: Appearance.font.pixelSize.normal
-                    }
-                    color: Appearance.colors.colOnSurfaceVariant
-                }
-            }
-
-            // Info rows
-            Repeater {
-                model: root.tooltipData
-                delegate: RowLayout {
-                    spacing: 5
-                    Layout.fillWidth: true
-
-                    MaterialSymbol {
-                        text: modelData.icon
-                        color: Appearance.colors.colOnSurfaceVariant
-                        iconSize: Appearance.font.pixelSize.large
-                    }
-                    StyledText {
-                        text: modelData.label
-                        color: Appearance.colors.colOnSurfaceVariant
-                    }
-                    StyledText {
-                        Layout.fillWidth: true
-                        horizontalAlignment: Text.AlignRight
-                        visible: modelData.value !== ""
-                        color: Appearance.colors.colOnSurfaceVariant
-                        text: modelData.value
-                    }
-                }
-            }
-        }
-    }
-
     Behavior on implicitWidth {
         NumberAnimation {
             duration: Appearance.animation.elementMove.duration

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

@@ -1,65 +0,0 @@
-import qs
-import qs.modules.common
-import qs.modules.common.widgets
-import qs.services
-import QtQuick
-import QtQuick.Layouts
-
-StyledPopup {
-    hoverTarget: mouseArea
-
-    ColumnLayout {
-        id: columnLayout
-        anchors.centerIn: parent
-        spacing: 4
-
-        // Header
-        RowLayout {
-            id: header
-            spacing: 5
-
-            MaterialSymbol {
-                fill: 0
-                font.weight: Font.Medium
-                text: root.tooltipHeaderIcon
-                iconSize: Appearance.font.pixelSize.large
-                color: Appearance.colors.colOnSurfaceVariant
-            }
-
-            StyledText {
-                text: root.tooltipHeaderText
-                font {
-                    weight: Font.Medium
-                    pixelSize: Appearance.font.pixelSize.normal
-                }
-                color: Appearance.colors.colOnSurfaceVariant
-            }
-        }
-
-        // Info rows
-        Repeater {
-            model: root.tooltipData
-            delegate: RowLayout {
-                spacing: 5
-                Layout.fillWidth: true
-
-                MaterialSymbol {
-                    text: modelData.icon
-                    color: Appearance.colors.colOnSurfaceVariant
-                    iconSize: Appearance.font.pixelSize.large
-                }
-                StyledText {
-                    text: modelData.label
-                    color: Appearance.colors.colOnSurfaceVariant
-                }
-                StyledText {
-                    Layout.fillWidth: true
-                    horizontalAlignment: Text.AlignRight
-                    visible: modelData.value !== ""
-                    color: Appearance.colors.colOnSurfaceVariant
-                    text: modelData.value
-                }
-            }
-        }
-    }
-}

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

@@ -5,12 +5,13 @@ import qs
 import QtQuick
 import QtQuick.Layouts
 
-Item {
+MouseArea {
     id: root
     property bool borderless: Config.options.bar.borderless
     property bool alwaysShowAllResources: false
     implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
     implicitHeight: Appearance.sizes.barHeight
+    hoverEnabled: true
 
     RowLayout {
         id: rowLayout
@@ -23,14 +24,6 @@ Item {
         Resource {
             iconName: "memory"
             percentage: ResourceUsage.memoryUsedPercentage
-
-            tooltipHeaderIcon: "memory"
-            tooltipHeaderText: Translation.tr("Memory usage")
-            tooltipData: [
-                { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.memoryUsed) },
-                { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.memoryFree) },
-                { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.memoryTotal) },
-            ]
         }
 
         Resource {
@@ -40,16 +33,6 @@ Item {
                 (MprisController.activePlayer?.trackTitle == null) ||
                 root.alwaysShowAllResources
             Layout.leftMargin: shown ? 6 : 0
-
-            tooltipHeaderIcon: "swap_horiz"
-            tooltipHeaderText: Translation.tr("Swap usage")
-            tooltipData: ResourceUsage.swapTotal > 0 ? [
-                { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.swapUsed) },
-                { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.swapFree) },
-                { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.swapTotal) },
-            ] : [
-                { icon: "swap_horiz", label: Translation.tr("Swap:"), value: Translation.tr("Not configured") }
-            ]
         }
 
         Resource {
@@ -59,18 +42,11 @@ Item {
                 !(MprisController.activePlayer?.trackTitle?.length > 0) ||
                 root.alwaysShowAllResources
             Layout.leftMargin: shown ? 6 : 0
-
-            tooltipHeaderIcon: "planner_review"
-            tooltipHeaderText: Translation.tr("CPU usage")
-            tooltipData: [
-                { icon: "bolt", label: Translation.tr("Load:"), value: (ResourceUsage.cpuUsage > 0.8 ?
-                    Translation.tr("High") :
-                    ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low"))
-                    + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
-                }
-            ]
         }
 
     }
 
+    ResourcesPopup {
+        hoverTarget: root
+    }
 }

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

@@ -0,0 +1,143 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+StyledPopup {
+    id: root
+
+    // Helper function to format KB to GB
+    function formatKB(kb) {
+        return (kb / (1024 * 1024)).toFixed(1) + " GB";
+    }
+
+    component ResourceItem: RowLayout {
+        id: resourceItem
+        required property string icon
+        required property string label
+        required property string value
+        spacing: 4
+        Layout.fillWidth: true
+
+        MaterialSymbol {
+            text: resourceItem.icon
+            color: Appearance.colors.colOnSurfaceVariant
+            iconSize: Appearance.font.pixelSize.large
+        }
+        StyledText {
+            text: resourceItem.label
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+        StyledText {
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignRight
+            visible: resourceItem.value !== ""
+            color: Appearance.colors.colOnSurfaceVariant
+            text: resourceItem.value
+        }
+    }
+
+    component ResourceHeaderItem: RowLayout {
+        id: headerItem
+        required property var icon
+        required property var label
+        spacing: 5
+
+        MaterialSymbol {
+            fill: 0
+            font.weight: Font.Medium
+            text: headerItem.icon
+            iconSize: Appearance.font.pixelSize.large
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+
+        StyledText {
+            text: headerItem.label
+            font {
+                weight: Font.Medium
+                pixelSize: Appearance.font.pixelSize.normal
+            }
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+    }
+
+    RowLayout {
+        anchors.centerIn: parent
+        spacing: 12
+
+        ColumnLayout {
+            Layout.alignment: Qt.AlignTop
+            spacing: 8
+
+            ResourceHeaderItem {
+                icon: "memory"
+                label: "RAM"
+            }
+            ColumnLayout {
+                ResourceItem {
+                    icon: "clock_loader_60"
+                    label: Translation.tr("Used:")
+                    value: formatKB(ResourceUsage.memoryUsed)
+                }
+                ResourceItem {
+                    icon: "check_circle"
+                    label: Translation.tr("Free:")
+                    value: formatKB(ResourceUsage.memoryFree)
+                }
+                ResourceItem {
+                    icon: "empty_dashboard"
+                    label: Translation.tr("Total:")
+                    value: formatKB(ResourceUsage.memoryTotal)
+                }
+            }
+        }
+
+        ColumnLayout {
+            visible: ResourceUsage.swapTotal > 0
+            Layout.alignment: Qt.AlignTop
+            spacing: 8
+
+            ResourceHeaderItem {
+                icon: "swap_horiz"
+                label: "Swap"
+            }
+            ColumnLayout {
+                ResourceItem {
+                    icon: "clock_loader_60"
+                    label: Translation.tr("Used:")
+                    value: formatKB(ResourceUsage.swapUsed)
+                }
+                ResourceItem {
+                    icon: "check_circle"
+                    label: Translation.tr("Free:")
+                    value: formatKB(ResourceUsage.swapFree)
+                }
+                ResourceItem {
+                    icon: "empty_dashboard"
+                    label: Translation.tr("Total:")
+                    value: formatKB(ResourceUsage.swapTotal)
+                }
+            }
+        }
+
+        ColumnLayout {
+            Layout.alignment: Qt.AlignTop
+            spacing: 8
+
+            ResourceHeaderItem {
+                icon: "planner_review"
+                label: "CPU"
+            }
+            ColumnLayout {
+                ResourceItem {
+                    icon: "bolt"
+                    label: Translation.tr("Load:")
+                    value: (ResourceUsage.cpuUsage > 0.8 ? Translation.tr("High") : ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low")) + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
+                }
+            }
+        }
+    }
+}