ags/widget/bar/battery_info.tsx

54 lines
1.9 KiB
TypeScript

import { App, Astal, Gtk } from "astal/gtk4";
import { bind } from "astal";
import { getBatteryIcon } from "@/lib/icons";
import { hideWindow } from "@lib/utils";
import PowerProfiles from "gi://AstalPowerProfiles?version=0.1";
import Battery from "gi://AstalBattery?version=0.1";
import Hyprland from "gi://AstalHyprland";
export default function BatteryInfo(_monitor_id: number) {
const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
const CENTER = Gtk.Align.CENTER;
const hypr = Hyprland.get_default();
const power = PowerProfiles.get_default();
const battery = Battery.get_default();
const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
const charging = bind(battery, "charging");
return <window
visible={false}
name={"battery_info"}
monitor={bind(hypr, "focusedMonitor").as(monitor => monitor.id)}
cssClasses={["battery_info"]}
keymode={Astal.Keymode.EXCLUSIVE}
exclusivity={Astal.Exclusivity.IGNORE}
anchor={BOTTOM | LEFT | RIGHT}
onKeyPressed={hideWindow}
application={App}>
<box halign={CENTER} cssClasses={["inner"]} spacing={10}>
{percentage.as(p => <>
<image
iconSize={Gtk.IconSize.LARGE}
iconName={getBatteryIcon(p, charging)}
/>
<label cssClasses={["percentage"]}>{percentage.as(p => `${p}%`)}</label>
</>)}
{power.get_profiles().map(profile => <button
label={profile.profile}
cssClasses={bind(power, "active_profile").as(active =>
active === profile.profile
? ["active"]
: []
)}
onClicked={() => power.set_active_profile(profile.profile)}
/>)}
</box>
</window>
}