bar tooltips: refractor more

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

@@ -94,12 +94,8 @@ MouseArea {
         }
     }
 
-    StyledPopup {
-        hoverTarget: root
-
     BatteryPopup {
         id: batteryPopup
-            anchors.centerIn: parent
+        hoverTarget: root
-        }
     }
 }

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

@@ -5,6 +5,9 @@ import qs
 import QtQuick
 import QtQuick.Layouts
 
+StyledPopup {
+    id: root
+    
     ColumnLayout {
         id: columnLayout
         anchors.centerIn: parent
@@ -126,3 +129,4 @@ ColumnLayout {
             }
         }
     }
+}

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

@@ -13,34 +13,6 @@ 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 Translation.tr("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${Translation.tr("... and %1 more").arg(unfinishedTodos.length - 5)}`;
-        }
-
-        return todoText;
-    }
-
-    // Popup Data
-    property string formattedDate: Qt.locale().toString(DateTime.clock.date, "dddd, MMMM dd, yyyy")
-    property string formattedTime: DateTime.time
-    property string formattedUptime: DateTime.uptime
-    property string todosSection: getUpcomingTodos()
-
     RowLayout {
         id: rowLayout
         anchors.centerIn: parent
@@ -72,83 +44,9 @@ Item {
         anchors.fill: parent
         hoverEnabled: true
         acceptedButtons: Qt.NoButton
-    }
 
-    StyledPopup {
+        ClockWidgetTooltip {
             hoverTarget: mouseArea
-
-        ColumnLayout {
-            id: columnLayout
-            anchors.centerIn: parent
-            spacing: 4
-
-            // Date + Time row
-            RowLayout {
-                spacing: 5
-
-                MaterialSymbol {
-                    fill: 0
-                    font.weight: Font.Medium
-                    text: "calendar_month"
-                    iconSize: Appearance.font.pixelSize.large
-                    color: Appearance.colors.colOnSurfaceVariant
-                }
-                StyledText {
-                    horizontalAlignment: Text.AlignLeft
-                    color: Appearance.colors.colOnSurfaceVariant
-                    text: `${root.formattedDate} • ${root.formattedTime}`
-                    font.weight: Font.Medium
-                }
-            }
-
-            // Uptime row
-            RowLayout {
-                spacing: 5
-                Layout.fillWidth: true
-                MaterialSymbol {
-                    text: "timelapse"
-                    color: Appearance.colors.colOnSurfaceVariant
-                    font.pixelSize: Appearance.font.pixelSize.large
-                }
-                StyledText {
-                    text: Translation.tr("System uptime:")
-                    color: Appearance.colors.colOnSurfaceVariant
-                }
-                StyledText {
-                    Layout.fillWidth: true
-                    horizontalAlignment: Text.AlignRight
-                    color: Appearance.colors.colOnSurfaceVariant
-                    text: root.formattedUptime
-                }
-            }
-
-            // Tasks
-            ColumnLayout {
-                spacing: 0
-                Layout.fillWidth: true
-
-                RowLayout {
-                    spacing: 4
-                    Layout.fillWidth: true
-                    MaterialSymbol {
-                        text: "checklist"
-                        color: Appearance.colors.colOnSurfaceVariant
-                        font.pixelSize: Appearance.font.pixelSize.large
-                    }
-                    StyledText {
-                        text: Translation.tr("To Do:")
-                        color: Appearance.colors.colOnSurfaceVariant
-                    }
-                }
-
-                StyledText {
-                    Layout.fillWidth: true
-                    horizontalAlignment: Text.AlignLeft
-                    wrapMode: Text.Wrap
-                    color: Appearance.colors.colOnSurfaceVariant
-                    text: root.todosSection
-                }
-            }
         }
     }
 }

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

@@ -0,0 +1,109 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+StyledPopup {
+    id: root
+    property string formattedDate: Qt.locale().toString(DateTime.clock.date, "dddd, MMMM dd, yyyy")
+    property string formattedTime: DateTime.time
+    property string formattedUptime: DateTime.uptime
+    property string todosSection: getUpcomingTodos()
+
+    function getUpcomingTodos() {
+        const unfinishedTodos = Todo.list.filter(function (item) {
+            return !item.done;
+        });
+        if (unfinishedTodos.length === 0) {
+            return Translation.tr("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${Translation.tr("... and %1 more").arg(unfinishedTodos.length - 5)}`;
+        }
+
+        return todoText;
+    }
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.centerIn: parent
+        spacing: 4
+
+        // Date + Time row
+        RowLayout {
+            spacing: 5
+
+            MaterialSymbol {
+                fill: 0
+                font.weight: Font.Medium
+                text: "calendar_month"
+                iconSize: Appearance.font.pixelSize.large
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                horizontalAlignment: Text.AlignLeft
+                color: Appearance.colors.colOnSurfaceVariant
+                text: `${root.formattedDate} • ${root.formattedTime}`
+                font.weight: Font.Medium
+            }
+        }
+
+        // Uptime row
+        RowLayout {
+            spacing: 5
+            Layout.fillWidth: true
+            MaterialSymbol {
+                text: "timelapse"
+                color: Appearance.colors.colOnSurfaceVariant
+                font.pixelSize: Appearance.font.pixelSize.large
+            }
+            StyledText {
+                text: Translation.tr("System uptime:")
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignRight
+                color: Appearance.colors.colOnSurfaceVariant
+                text: root.formattedUptime
+            }
+        }
+
+        // Tasks
+        ColumnLayout {
+            spacing: 0
+            Layout.fillWidth: true
+
+            RowLayout {
+                spacing: 4
+                Layout.fillWidth: true
+                MaterialSymbol {
+                    text: "checklist"
+                    color: Appearance.colors.colOnSurfaceVariant
+                    font.pixelSize: Appearance.font.pixelSize.large
+                }
+                StyledText {
+                    text: Translation.tr("To Do:")
+                    color: Appearance.colors.colOnSurfaceVariant
+                }
+            }
+
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignLeft
+                wrapMode: Text.Wrap
+                color: Appearance.colors.colOnSurfaceVariant
+                text: root.todosSection
+            }
+        }
+    }
+}

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

@@ -0,0 +1,65 @@
+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/weather/WeatherBar.qml

@@ -21,7 +21,7 @@ MouseArea {
 
         MaterialSymbol {
             fill: 0
-            text: WeatherIcons.codeToName[Weather.data.wCode]
+            text: WeatherIcons.codeToName[Weather.data.wCode] ?? "cloud"
             iconSize: Appearance.font.pixelSize.large
             color: Appearance.colors.colOnLayer1
             Layout.alignment: Qt.AlignVCenter
@@ -36,12 +36,8 @@ MouseArea {
         }
     }
 
-    StyledPopup {
-        hoverTarget: root
-
     WeatherPopup {
         id: weatherPopup
-            anchors.centerIn: parent
+        hoverTarget: root
-        }
     }
 }

.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml

@@ -6,11 +6,15 @@ import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
 
+StyledPopup {
+    id: root
+
     ColumnLayout {
         id: columnLayout
-    spacing: 5
+        anchors.centerIn: parent
         implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
         implicitHeight: gridLayout.implicitHeight
+        spacing: 5
 
         // Header
         RowLayout {
@@ -86,3 +90,4 @@ ColumnLayout {
             }
         }
     }
+}