bar: battery tooltip

This commit is contained in:
2 * r + 2 * t 2025-02-17 12:50:56 +11:00
parent 94ac778fcd
commit d1238f6a8e

View file

@ -34,6 +34,12 @@ const getBatteryIcon = (perc: number) => {
return "󰁹"; return "󰁹";
}; };
const formatSeconds = (sec: number) => {
if (sec >= 3600) return `${Math.floor(sec / 3600)} hour${sec % 3600 === 0 ? "" : "s"}`;
if (sec >= 60) return `${Math.floor(sec / 60)} minute${sec % 60 === 0 ? "" : "s"}`;
return `${sec} second${sec === 1 ? "" : "s"}`;
};
const hookFocusedClientProp = ( const hookFocusedClientProp = (
self: AstalWidget, self: AstalWidget,
prop: keyof AstalHyprland.Client, prop: keyof AstalHyprland.Client,
@ -463,9 +469,17 @@ const NotifCount = () => (
); );
const Battery = () => ( const Battery = () => (
<box className={bind(AstalBattery.get_default(), "percentage").as(p => `module battery ${p < 0.2 ? "low" : ""}`)}> <box
className={bind(AstalBattery.get_default(), "percentage").as(p => `module battery ${p < 0.2 ? "low" : ""}`)}
setup={self =>
setupCustomTooltip(
self,
bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`)
)
}
>
<label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} /> <label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} />
<label label={bind(AstalBattery.get_default(), "percentage").as(p => `${p * 100}%`)} /> <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} />
</box> </box>
); );