feat(battery): add options to toggle percentage and remaining time (#2672)

* feat(battery): add options to toggle percentage and remaining time

* fix(battery): add SettingsSpec entries and combine verticalDisplayText

* fix(battery): format vertical battery remaining time as HH\nMM and center alignment

* fix(battery): remove percent sign from vertical layout when time is enabled

quickshell/Modules/DankBar/Widgets/Battery.qml

@@ -11,6 +11,71 @@ BasePill {
 
     property bool batteryPopupVisible: false
     property var popoutTarget: null
+    property var widgetData: null
+    readonly property bool showPercentOnlyOnBattery: widgetData?.showBatteryPercentOnlyOnBattery !== undefined ? widgetData.showBatteryPercentOnlyOnBattery : SettingsData.showBatteryPercentOnlyOnBattery
+    readonly property bool showPercent: {
+        const base = widgetData?.showBatteryPercent !== undefined ? widgetData.showBatteryPercent : SettingsData.showBatteryPercent;
+        return base && !(showPercentOnlyOnBattery && BatteryService.isPluggedIn);
+    }
+    readonly property bool showTime: widgetData?.showBatteryTime !== undefined ? widgetData.showBatteryTime : SettingsData.showBatteryTime
+    readonly property bool showTimeOnlyOnBattery: widgetData?.showBatteryTimeOnlyOnBattery !== undefined ? widgetData.showBatteryTimeOnlyOnBattery : SettingsData.showBatteryTimeOnlyOnBattery
+
+    readonly property string batteryTimeText: {
+        if (showTimeOnlyOnBattery && BatteryService.isPluggedIn) {
+            return "";
+        }
+        const time = BatteryService.formatTimeRemaining();
+        return time !== "Unknown" ? time : "";
+    }
+
+    readonly property string verticalBatteryTimeText: {
+        if (!batteryTimeText) return "";
+
+        // Parse batteryTimeText, e.g., "2h 41m" or "41m"
+        let hours = 0;
+        let minutes = 0;
+
+        const hourMatch = batteryTimeText.match(/(\d+)h/);
+        const minMatch = batteryTimeText.match(/(\d+)m/);
+
+        if (hourMatch) {
+            hours = parseInt(hourMatch[1], 10);
+        }
+        if (minMatch) {
+            minutes = parseInt(minMatch[1], 10);
+        }
+
+        const hoursStr = hours < 10 ? "0" + hours : hours.toString();
+        const minutesStr = minutes < 10 ? "0" + minutes : minutes.toString();
+
+        return `${hoursStr}\n${minutesStr}`;
+    }
+
+    readonly property string horizontalDisplayText: {
+        if (showPercent && showTime && batteryTimeText) {
+            return `${BatteryService.batteryLevel}% (${batteryTimeText})`;
+        }
+        if (showPercent) {
+            return `${BatteryService.batteryLevel}%`;
+        }
+        if (showTime && batteryTimeText) {
+            return batteryTimeText;
+        }
+        return "";
+    }
+
+    readonly property string verticalDisplayText: {
+        if (showPercent && showTime && batteryTimeText) {
+            return `${BatteryService.batteryLevel}\n${verticalBatteryTimeText}`;
+        }
+        if (showPercent) {
+            return BatteryService.batteryLevel.toString();
+        }
+        if (showTime && batteryTimeText) {
+            return verticalBatteryTimeText;
+        }
+        return "";
+    }
 
     property real touchpadAccumulator: 0
 
@@ -66,11 +131,12 @@ BasePill {
                 }
 
                 StyledText {
-                    text: BatteryService.batteryLevel.toString()
+                    text: battery.verticalDisplayText
                     font.pixelSize: Theme.barTextSize(battery.barThickness, battery.barConfig?.fontScale, battery.barConfig?.maximizeWidgetText)
                     color: Theme.widgetTextColor
+                    horizontalAlignment: Text.AlignHCenter
                     anchors.horizontalCenter: parent.horizontalCenter
-                    visible: BatteryService.batteryAvailable
+                    visible: BatteryService.batteryAvailable && battery.verticalDisplayText !== ""
                 }
             }
 
@@ -102,11 +168,11 @@ BasePill {
                 }
 
                 StyledText {
-                    text: `${BatteryService.batteryLevel}%`
+                    text: battery.horizontalDisplayText
                     font.pixelSize: Theme.barTextSize(battery.barThickness, battery.barConfig?.fontScale, battery.barConfig?.maximizeWidgetText)
                     color: Theme.widgetTextColor
                     anchors.verticalCenter: parent.verticalCenter
-                    visible: BatteryService.batteryAvailable
+                    visible: BatteryService.batteryAvailable && battery.horizontalDisplayText !== ""
                 }
             }
         }