bar tooltips: refractor more

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

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

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

@@ -5,124 +5,128 @@ import qs
 import QtQuick
 import QtQuick.Layouts
 
-ColumnLayout {
+StyledPopup {
-    id: columnLayout
+    id: root
-    anchors.centerIn: parent
+    
-    spacing: 4
+    ColumnLayout {
+        id: columnLayout
+        anchors.centerIn: parent
+        spacing: 4
 
-    // Header
+        // Header
-    RowLayout {
+        RowLayout {
-        id: header
+            id: header
-        spacing: 5
+            spacing: 5
 
-        MaterialSymbol {
+            MaterialSymbol {
-            fill: 0
+                fill: 0
-            font.weight: Font.Medium
+                font.weight: Font.Medium
-            text: "battery_android_full"
+                text: "battery_android_full"
-            iconSize: Appearance.font.pixelSize.large
+                iconSize: Appearance.font.pixelSize.large
-            color: Appearance.colors.colOnSurfaceVariant
+                color: Appearance.colors.colOnSurfaceVariant
-        }
-
-        StyledText {
-            text: "Battery"
-            font {
-                weight: Font.Medium
-                pixelSize: Appearance.font.pixelSize.normal
             }
-            color: Appearance.colors.colOnSurfaceVariant
-        }
-    }
 
-    // This row is hidden when the battery is full.
+            StyledText {
-    RowLayout {
+                text: "Battery"
-        spacing: 5
+                font {
-        Layout.fillWidth: true
+                    weight: Font.Medium
-        property bool rowVisible: {
+                    pixelSize: Appearance.font.pixelSize.normal
-            let timeValue = Battery.isCharging ? Battery.timeToFull : Battery.timeToEmpty;
+                }
-            let power = Battery.energyRate;
+                color: Appearance.colors.colOnSurfaceVariant
-            return !(Battery.chargeState == 4 || timeValue <= 0 || power <= 0.01);
-        }
-        visible: rowVisible
-        opacity: rowVisible ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation {
-                duration: 500
             }
         }
 
-        MaterialSymbol {
+        // This row is hidden when the battery is full.
-            text: "schedule"
+        RowLayout {
-            color: Appearance.colors.colOnSurfaceVariant
+            spacing: 5
-            iconSize: Appearance.font.pixelSize.large
-        }
-        StyledText {
-            text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:")
-            color: Appearance.colors.colOnSurfaceVariant
-        }
-        StyledText {
             Layout.fillWidth: true
-            horizontalAlignment: Text.AlignRight
+            property bool rowVisible: {
-            color: Appearance.colors.colOnSurfaceVariant
+                let timeValue = Battery.isCharging ? Battery.timeToFull : Battery.timeToEmpty;
-            text: {
+                let power = Battery.energyRate;
-                function formatTime(seconds) {
+                return !(Battery.chargeState == 4 || timeValue <= 0 || power <= 0.01);
-                    var h = Math.floor(seconds / 3600);
+            }
-                    var m = Math.floor((seconds % 3600) / 60);
+            visible: rowVisible
-                    if (h > 0)
+            opacity: rowVisible ? 1 : 0
-                        return `${h}h, ${m}m`;
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 500
+                }
+            }
+
+            MaterialSymbol {
+                text: "schedule"
+                color: Appearance.colors.colOnSurfaceVariant
+                iconSize: Appearance.font.pixelSize.large
+            }
+            StyledText {
+                text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:")
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignRight
+                color: Appearance.colors.colOnSurfaceVariant
+                text: {
+                    function formatTime(seconds) {
+                        var h = Math.floor(seconds / 3600);
+                        var m = Math.floor((seconds % 3600) / 60);
+                        if (h > 0)
+                            return `${h}h, ${m}m`;
+                        else
+                            return `${m}m`;
+                    }
+                    if (Battery.isCharging)
+                        return formatTime(Battery.timeToFull);
                     else
-                        return `${m}m`;
+                        return formatTime(Battery.timeToEmpty);
-                }
-                if (Battery.isCharging)
-                    return formatTime(Battery.timeToFull);
-                else
-                    return formatTime(Battery.timeToEmpty);
-            }
-        }
-    }
-
-    RowLayout {
-        spacing: 5
-        Layout.fillWidth: true
-
-        property bool rowVisible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
-        visible: rowVisible
-        opacity: rowVisible ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation {
-                duration: 500
-            }
-        }
-
-        MaterialSymbol {
-            text: "bolt"
-            color: Appearance.colors.colOnSurfaceVariant
-            iconSize: Appearance.font.pixelSize.large
-        }
-
-        StyledText {
-            text: {
-                if (Battery.chargeState == 4) {
-                    return Translation.tr("Fully charged");
-                } else if (Battery.chargeState == 1) {
-                    return Translation.tr("Charging:");
-                } else {
-                    return Translation.tr("Discharging:");
                 }
             }
-            color: Appearance.colors.colOnSurfaceVariant
         }
 
-        StyledText {
+        RowLayout {
+            spacing: 5
             Layout.fillWidth: true
-            horizontalAlignment: Text.AlignRight
+
-            color: Appearance.colors.colOnSurfaceVariant
+            property bool rowVisible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
-            text: {
+            visible: rowVisible
-                if (Battery.chargeState == 4) {
+            opacity: rowVisible ? 1 : 0
-                    return "";
+            Behavior on opacity {
-                } else {
+                NumberAnimation {
-                    return `${Battery.energyRate.toFixed(2)}W`;
+                    duration: 500
+                }
+            }
+
+            MaterialSymbol {
+                text: "bolt"
+                color: Appearance.colors.colOnSurfaceVariant
+                iconSize: Appearance.font.pixelSize.large
+            }
+
+            StyledText {
+                text: {
+                    if (Battery.chargeState == 4) {
+                        return Translation.tr("Fully charged");
+                    } else if (Battery.chargeState == 1) {
+                        return Translation.tr("Charging:");
+                    } else {
+                        return Translation.tr("Discharging:");
+                    }
+                }
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignRight
+                color: Appearance.colors.colOnSurfaceVariant
+                text: {
+                    if (Battery.chargeState == 4) {
+                        return "";
+                    } else {
+                        return `${Battery.energyRate.toFixed(2)}W`;
+                    }
                 }
             }
         }
     }
-}
+}

.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
+            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 {
+    WeatherPopup {
+        id: weatherPopup
         hoverTarget: root
-
-        WeatherPopup {
-            id: weatherPopup
-            anchors.centerIn: parent
-        }
     }
 }

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

@@ -6,83 +6,88 @@ import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
 
-ColumnLayout {
+StyledPopup {
-    id: columnLayout
+    id: root
-    spacing: 5
-    implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
-    implicitHeight: gridLayout.implicitHeight
 
-    // Header
+    ColumnLayout {
-    RowLayout {
+        id: columnLayout
-        id: header
+        anchors.centerIn: parent
+        implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
+        implicitHeight: gridLayout.implicitHeight
         spacing: 5
-        Layout.alignment: Qt.AlignHCenter
 
-        MaterialSymbol {
+        // Header
-            fill: 0
+        RowLayout {
-            font.weight: Font.Medium
+            id: header
-            text: "location_on"
+            spacing: 5
-            iconSize: Appearance.font.pixelSize.large
+            Layout.alignment: Qt.AlignHCenter
-            color: Appearance.colors.colOnSurfaceVariant
-        }
 
-        StyledText {
+            MaterialSymbol {
-            text: Weather.data.city
+                fill: 0
-            font {
+                font.weight: Font.Medium
-                weight: Font.Medium
+                text: "location_on"
-                pixelSize: Appearance.font.pixelSize.normal
+                iconSize: Appearance.font.pixelSize.large
+                color: Appearance.colors.colOnSurfaceVariant
             }
-            color: Appearance.colors.colOnSurfaceVariant
-        }
-    }
 
-    // Metrics grid
+            StyledText {
-    GridLayout {
+                text: Weather.data.city
-        id: gridLayout
+                font {
-        columns: 2
+                    weight: Font.Medium
-        rowSpacing: 5
+                    pixelSize: Appearance.font.pixelSize.normal
-        columnSpacing: 5
+                }
-        uniformCellWidths: true
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+        }
 
-        WeatherCard {
+        // Metrics grid
-            title: Translation.tr("UV Index")
+        GridLayout {
-            symbol: "wb_sunny"
+            id: gridLayout
-            value: Weather.data.uv
+            columns: 2
-        }
+            rowSpacing: 5
-        WeatherCard {
+            columnSpacing: 5
-            title: Translation.tr("Wind")
+            uniformCellWidths: true
-            symbol: "air"
+
-            value: `(${Weather.data.windDir}) ${Weather.data.wind}`
+            WeatherCard {
-        }
+                title: Translation.tr("UV Index")
-        WeatherCard {
+                symbol: "wb_sunny"
-            title: Translation.tr("Precipitation")
+                value: Weather.data.uv
-            symbol: "rainy_light"
+            }
-            value: Weather.data.precip
+            WeatherCard {
-        }
+                title: Translation.tr("Wind")
-        WeatherCard {
+                symbol: "air"
-            title: Translation.tr("Humidity")
+                value: `(${Weather.data.windDir}) ${Weather.data.wind}`
-            symbol: "humidity_low"
+            }
-            value: Weather.data.humidity
+            WeatherCard {
-        }
+                title: Translation.tr("Precipitation")
-        WeatherCard {
+                symbol: "rainy_light"
-            title: Translation.tr("Visibility")
+                value: Weather.data.precip
-            symbol: "visibility"
+            }
-            value: Weather.data.visib
+            WeatherCard {
-        }
+                title: Translation.tr("Humidity")
-        WeatherCard {
+                symbol: "humidity_low"
-            title: Translation.tr("Pressure")
+                value: Weather.data.humidity
-            symbol: "readiness_score"
+            }
-            value: Weather.data.press
+            WeatherCard {
-        }
+                title: Translation.tr("Visibility")
-        WeatherCard {
+                symbol: "visibility"
-            title: Translation.tr("Sunrise")
+                value: Weather.data.visib
-            symbol: "wb_twilight"
+            }
-            value: Weather.data.sunrise
+            WeatherCard {
-        }
+                title: Translation.tr("Pressure")
-        WeatherCard {
+                symbol: "readiness_score"
-            title: Translation.tr("Sunset")
+                value: Weather.data.press
-            symbol: "bedtime"
+            }
-            value: Weather.data.sunset
+            WeatherCard {
+                title: Translation.tr("Sunrise")
+                symbol: "wb_twilight"
+                value: Weather.data.sunrise
+            }
+            WeatherCard {
+                title: Translation.tr("Sunset")
+                symbol: "bedtime"
+                value: Weather.data.sunset
+            }
         }
     }
 }