battery-widget: better tooltip, reworked logic and improved display

Modules/Bar/Extras/BarPill.qml

@@ -12,7 +12,7 @@ Item {
   property string icon: ""
   property string text: ""
   property string suffix: ""
-  property string tooltipText: ""
+  property var tooltipText: ""
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false

Modules/Bar/Extras/BarPillHorizontal.qml

@@ -13,7 +13,7 @@ Item {
   property string icon: ""
   property string text: ""
   property string suffix: ""
-  property string tooltipText: ""
+  property var tooltipText: ""
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false

Modules/Bar/Extras/BarPillVertical.qml

@@ -13,7 +13,7 @@ Item {
   property string icon: ""
   property string text: ""
   property string suffix: ""
-  property string tooltipText: ""
+  property var tooltipText: ""
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false

Modules/Bar/Widgets/Battery.qml

@@ -39,7 +39,7 @@ Item {
   readonly property real capsuleHeight: Style.getCapsuleHeightForScreen(screenName)
 
   readonly property string displayMode: widgetSettings.displayMode !== undefined ? widgetSettings.displayMode : widgetMetadata.displayMode
-  readonly property bool useGraphicMode: displayMode === "graphic"
+  readonly property bool useGraphicMode: displayMode === "graphic" || displayMode === "graphic-clean"
 
   readonly property bool hideIfNotDetected: widgetSettings.hideIfNotDetected !== undefined ? widgetSettings.hideIfNotDetected : widgetMetadata.hideIfNotDetected
   readonly property bool hideIfIdle: widgetSettings.hideIfIdle !== undefined ? widgetSettings.hideIfIdle : widgetMetadata.hideIfIdle
@@ -58,53 +58,58 @@ Item {
   readonly property string deviceNativePath: widgetSettings.deviceNativePath !== undefined ? widgetSettings.deviceNativePath : widgetMetadata.deviceNativePath
   readonly property var selectedDevice: BatteryService.isDevicePresent(BatteryService.findDevice(deviceNativePath)) ? BatteryService.findDevice(deviceNativePath) : null
 
-  readonly property string tooltipText: {
-    let lines = [];
+  readonly property var tooltipContent: {
     if (!isReady || !isPresent) {
       return I18n.tr("battery.no-battery-detected");
     }
-    const isInternal = selectedDevice.isLaptopBattery;
 
+    let rows = [];
+    const isInternal = selectedDevice.isLaptopBattery;
     if (isInternal) {
       // Show charge percentage
-      lines.push(`${I18n.tr("battery.battery-level")}: ${percent}%`);
+      rows.push([I18n.tr("battery.battery-level"), `${percent}%`]);
 
       let timeText = BatteryService.getTimeRemainingText(selectedDevice);
       if (timeText) {
-        lines.push(timeText);
+        const entries = timeText.split(":").map(a => a.trim());
+        rows.push(entries);
       }
 
       let rateText = BatteryService.getRateText(selectedDevice);
+      console.log(rateText);
       if (rateText) {
-        lines.push(rateText);
+        const entries = rateText.split(":").map(a => a.trim());
+        rows.push(entries);
       }
 
       // Show battery health if supported (check actual battery, not DisplayDevice)
       let healthDevice = selectedDevice.healthSupported ? selectedDevice : (BatteryService.laptopBatteries.length > 0 ? BatteryService.laptopBatteries[0] : null);
       if (healthDevice && healthDevice.healthSupported) {
-        lines.push(`${I18n.tr("battery.battery-health")}: ${Math.round(healthDevice.healthPercentage)}%`);
+        rows.push([I18n.tr("battery.battery-health"), `${Math.round(healthDevice.healthPercentage)}%`]);
       }
     } else if (selectedDevice) {
       // External / Peripheral Device (Phone, Keyboard, Mouse, Gamepad, Headphone etc.)
       let name = BatteryService.getDeviceName(selectedDevice);
-      lines.push(`${name}: ${percent}%`);
+      rows.push([name, `${percent}%`]);
     }
 
     // If we are showing the main laptop battery, append external devices
     if (isInternal) {
       var external = BatteryService.bluetoothBatteries;
       if (external.length > 0) {
-        if (lines.length > 0)
-          lines.push(""); // Separator
+        if (rows.length > 0) {
+          rows.push(["---", "---"]); // Separator
+        }
         for (var j = 0; j < external.length; j++) {
           var dev = external[j];
           var dName = BatteryService.getDeviceName(dev);
           var dPct = BatteryService.getPercentage(dev);
-          lines.push(`${dName}: ${dPct}%`);
+          rows.push([dName, `${dPct}%`]);
         }
       }
     }
-    return lines.join("\n");
+
+    return rows;
   }
 
   visible: shouldShow
@@ -162,7 +167,7 @@ Item {
     visible: root.useGraphicMode
     anchors.centerIn: parent
     baseSize: Style.barFontSize
-    showPercentageText: true
+    showPercentageText: root.displayMode !== "graphic-clean"
     vertical: root.isBarVertical
     percentage: root.percent
     ready: root.isReady
@@ -180,11 +185,13 @@ Item {
     hoverEnabled: true
     acceptedButtons: Qt.LeftButton | Qt.RightButton
     onEntered: {
-      if (root.tooltipText) {
-        TooltipService.show(root, root.tooltipText, BarService.getTooltipDirection(root.screen?.name));
+      if (root.tooltipContent) {
+        TooltipService.show(root, root.tooltipContent, BarService.getTooltipDirection(root.screen?.name));
       }
+      tooltipRefreshTimer.start();
     }
     onExited: {
+      tooltipRefreshTimer.stop();
       TooltipService.hide();
     }
     onClicked: mouse => {
@@ -196,6 +203,17 @@ Item {
                }
   }
 
+  Timer {
+    id: tooltipRefreshTimer
+    interval: 1000
+    repeat: true
+    onTriggered: {
+      if (graphicMouseArea.containsMouse) {
+        TooltipService.updateText(root.tooltipContent);
+      }
+    }
+  }
+
   // ==================== ICON MODE ====================
 
   BarPill {
@@ -211,7 +229,7 @@ Item {
     forceClose: root.displayMode === "icon-only" || !root.isReady
     customBackgroundColor: root.isCharging ? Color.mPrimary : ((root.isLowBattery || root.isCriticalBattery) ? Color.mError : "transparent")
     customTextIconColor: root.isCharging ? Color.mOnPrimary : ((root.isLowBattery || root.isCriticalBattery) ? Color.mOnError : "transparent")
-    tooltipText: root.tooltipText
+    tooltipText: root.tooltipContent
 
     onClicked: openBatteryPanel()
     onRightClicked: PanelService.showContextMenu(contextMenu, pill, screen)

Modules/Panels/Settings/Bar/WidgetSettings/BatterySettings.qml

@@ -61,6 +61,10 @@ ColumnLayout {
         "key": "graphic",
         "name": I18n.tr("bar.battery.display-mode-graphic")
       },
+      {
+        "key": "graphic-clean",
+        "name": I18n.tr("bar.battery.display-mode-graphic-clean")
+      },
       {
         "key": "icon-hover",
         "name": I18n.tr("bar.battery.display-mode-icon-hover")