296 lines
9.9 KiB
TypeScript
296 lines
9.9 KiB
TypeScript
import { Astal, Gdk } from "ags/gtk4";
|
|
import app from "ags/gtk4/app"
|
|
import Gtk from "gi://Gtk?version=4.0"
|
|
import { createBinding, createState } from "ags"
|
|
import Tray from "gi://AstalTray";
|
|
import { execAsync } from "ags/process"
|
|
import Hyprland from "gi://AstalHyprland";
|
|
import { getIconName } from "./utils";
|
|
import Wp from "gi://AstalWp"
|
|
import Battery from "gi://AstalBattery"
|
|
|
|
const battery = Battery.get_default()
|
|
const sensorsAvailable = await execAsync(['sensors']).then(() => true).catch(() => false);
|
|
const wirePlumber = Wp.get_default();
|
|
|
|
function SysTray(): JSX.Element {
|
|
const tray = Tray.get_default();
|
|
return (
|
|
<box>
|
|
{createBinding(tray, "items").as((items) =>
|
|
items.map((item) => {
|
|
if (item.iconThemePath) app.add_icons(item.iconThemePath);
|
|
return (
|
|
<menubutton
|
|
class="systray"
|
|
tooltipMarkup={createBinding(item, "tooltipMarkup")}
|
|
usePopover={false}
|
|
actionGroup={createBinding(item, "actionGroup").as(ag => ["dbusmenu", ag])}
|
|
menuModel={createBinding(item, "menuModel")}>
|
|
{/* <icon gicon={createBinding(item, "gicon")} class="systray-item" /> */}
|
|
</menubutton>
|
|
);
|
|
}),
|
|
)}
|
|
</box>
|
|
);
|
|
}
|
|
|
|
function Left(): JSX.Element {
|
|
return (
|
|
<box hexpand halign={Gtk.Align.START}>
|
|
<Clients />
|
|
</box>
|
|
);
|
|
}
|
|
|
|
function Center(): JSX.Element {
|
|
return (
|
|
<box>
|
|
<Workspaces />
|
|
</box>
|
|
);
|
|
}
|
|
|
|
function Date({ format = "%Y-%m-%d" }): JSX.Element {
|
|
const time = createState<string>("").poll(60000, () =>
|
|
GLib.DateTime.new_now_local().format(format)!)
|
|
return <button
|
|
class="item"
|
|
onDestroy={() => time.drop()}
|
|
label={time()}
|
|
onClicked={() => execAsync(['gnome-calendar'])}
|
|
/>
|
|
}
|
|
|
|
function Time({ format = "%H:%M:%S" }): JSX.Element {
|
|
const time = createState<string>("").poll(1000, () =>
|
|
GLib.DateTime.new_now_local().format(format)!)
|
|
return <label
|
|
class="item blue"
|
|
onDestroy={() => time.drop()}
|
|
label={time()}
|
|
/>
|
|
}
|
|
|
|
function Temp(): JSX.Element {
|
|
let label = createState<string>("N/A");
|
|
if (sensorsAvailable) {
|
|
label = createState<string>("").poll(5000, 'sensors', out => {
|
|
const match = out.split('\n').find(line => line.includes('Tctl') || line.includes('Package'))?.match(/[0-9.]*°C/);
|
|
return match ? match[0] : "N/A";
|
|
})
|
|
}
|
|
return <label
|
|
class="item blue"
|
|
onDestroy={() => label.drop()}
|
|
label={label()}
|
|
/>
|
|
}
|
|
|
|
function Memory(): JSX.Element {
|
|
const memory = createState<string>("").poll(2000, "free", out => {
|
|
const line = out.split('\n').find(line => line.includes('Mem:'));
|
|
if (!line) return "N/A";
|
|
const split = line.split(/\s+/).map(Number);
|
|
return (split[2] / 1000000).toFixed(2) + "GB";
|
|
});
|
|
return <label
|
|
class="item blue"
|
|
onDestroy={() => memory.drop()}
|
|
label={memory()}
|
|
/>
|
|
}
|
|
|
|
function ClockSpeed(): JSX.Element {
|
|
const command = 'bash -c "cat /proc/cpuinfo | grep \\"MHz\\" | awk \'{print \\$4}\' | sort -n | tail -1 | awk \'{printf \\"%.2fGHz\\", \\$1/1000}\'"';
|
|
const speed = createState<string>("").poll(5000, command)
|
|
return <label
|
|
class="item"
|
|
onDestroy={() => speed.drop()}
|
|
label={speed()}
|
|
/>
|
|
}
|
|
|
|
function CPU(): JSX.Element {
|
|
const usage = createState<string>("").poll(2000, "top -b -n 1", out => {
|
|
const line = out.split("\n").find(line => line.includes('Cpu(s)'));
|
|
if (!line) return "N/A";
|
|
return line.split(/\s+/)[1].replace(',', '.').toString() + "%";
|
|
});
|
|
return <box class="item">
|
|
{/* <icon icon="speedometer" css="margin-right: 0.7em;" /> */}
|
|
<label
|
|
onDestroy={() => usage.drop()}
|
|
label={usage()}
|
|
/>
|
|
</box>
|
|
}
|
|
|
|
|
|
|
|
function Right(): JSX.Element {
|
|
return (
|
|
<box class="right" hexpand halign={Gtk.Align.END} spacing={6}>
|
|
<Icons />
|
|
<Volume />
|
|
<CPU />
|
|
<Memory />
|
|
<ClockSpeed />
|
|
<Temp />
|
|
<Date />
|
|
<Time />
|
|
</box>
|
|
);
|
|
}
|
|
|
|
// function BatteryIcon(): JSX.Element {
|
|
// if (battery.get_state() == 0) return <box />;
|
|
// return <button class="battery-item" onClicked={() => execAsync(['gnome-power-statistics'])}>
|
|
// <box>
|
|
// {
|
|
// createBinding(battery, "percentage").as((percentage) => {
|
|
// const thresholds = [...Array(11).keys()].map(i => i * 10);
|
|
// const icon = thresholds.find(threshold => threshold >= percentage * 100)
|
|
// const charging_name = battery.percentage >= 0.99 ? "charged" : "charging"
|
|
// return <icon
|
|
// icon={battery.charging ? `battery-level-${icon}-${charging_name}-symbolic` : `battery-level-${icon}-symbolic`}
|
|
// />
|
|
// })
|
|
// }
|
|
// </box>
|
|
// </button>
|
|
// }
|
|
|
|
function Icons() {
|
|
return (
|
|
<box class="item icon-group">
|
|
<SysTray />
|
|
{/* <BatteryIcon /> */}
|
|
</box>
|
|
)
|
|
}
|
|
|
|
function Volume(): JSX.Element {
|
|
if (!wirePlumber) return <box />;
|
|
|
|
const audio = wirePlumber.audio;
|
|
const icon = createBinding(audio.default_speaker, "volume").as((volume) => {
|
|
const vol = volume * 100
|
|
const icon = [
|
|
[101, 'overamplified'],
|
|
[67, 'high'],
|
|
[34, 'medium'],
|
|
[1, 'low'],
|
|
[0, 'muted'],
|
|
].find(([threshold]) => Number(threshold) <= vol)?.[1]
|
|
return `audio-volume-${icon}-symbolic`
|
|
});
|
|
const css = createBinding(audio.default_speaker, "mute").as((mute) => {
|
|
return mute ? "margin-left:0;" : "margin-left: 0.7em;"
|
|
});
|
|
return (
|
|
<button class="item blue" onClicked={() => audio.default_speaker.mute = !audio.default_speaker.mute}>
|
|
<box>
|
|
{/* <icon icon={icon} /> */}
|
|
{
|
|
createBinding(audio.default_speaker, "volume").as((volume) => <box>
|
|
{
|
|
createBinding(audio.default_speaker, "mute").as((mute) => <box>
|
|
{
|
|
<label label={mute ? "" : `${Math.floor(volume * 100)}%`} css={css} />
|
|
}
|
|
</box>)
|
|
}
|
|
</box>)
|
|
}
|
|
</box>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
|
|
function Workspaces(): JSX.Element {
|
|
const hyprland = Hyprland.get_default();
|
|
return (
|
|
<box class="workspaces">
|
|
{createBinding(hyprland, "workspaces").as((wss) =>
|
|
<box>
|
|
{createBinding(hyprland, "focusedMonitor").as((fm) =>
|
|
wss.sort((a, b) => a.id - b.id)
|
|
.filter(ws => ws && ws.get_monitor() && ws.get_monitor().get_id() === fm.get_id())
|
|
.map((ws) => (
|
|
<button
|
|
class={createBinding(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
|
|
onClicked={() => ws.focus()}
|
|
>
|
|
{`${ws.id}`.slice(-1)}
|
|
</button>
|
|
)))}
|
|
</box>
|
|
)}
|
|
</box>
|
|
);
|
|
}
|
|
|
|
function shorten(title: string) {
|
|
return title.length > 40 ? title.slice(0, 20) + "..." : title
|
|
}
|
|
|
|
function Clients(): JSX.Element {
|
|
const hyprland = Hyprland.get_default();
|
|
return (
|
|
<box>
|
|
{
|
|
createBinding(hyprland, "focusedWorkspace").as(fw => (
|
|
<box class="clients">
|
|
{
|
|
createBinding(hyprland, "clients").as(cls =>
|
|
cls
|
|
.sort((a, b) => a.pid - b.pid)
|
|
.filter(cl => !cl.title.includes("rofi"))
|
|
.filter(cl => fw && cl.get_workspace().get_id() === fw.get_id())
|
|
.map(cl => (
|
|
<box
|
|
class={createBinding(hyprland, "focusedClient").as(a => a && a.address === cl.address ? "focused" : "unfocused")}
|
|
>
|
|
{/* <icon */}
|
|
{/* icon={getIconName(cl)} */}
|
|
{/* class="app-icon" */}
|
|
{/* /> */}
|
|
<label label={createBinding(cl, 'title').as(title => shorten(title))} />
|
|
</box>
|
|
)
|
|
)
|
|
)
|
|
|
|
}
|
|
</box>
|
|
)
|
|
)
|
|
}
|
|
</box>
|
|
);
|
|
}
|
|
|
|
export default function Bar(gdkmonitor: Gdk.Monitor, scaleFactor: number = 1): Gtk.Window {
|
|
return new Gtk.Window({
|
|
gdkmonitor,
|
|
css: "font-size: " + scaleFactor + "em;",
|
|
exclusivity: Astal.Exclusivity.EXCLUSIVE,
|
|
anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
|
|
application: app,
|
|
class: "Bar",
|
|
name: "top-bar",
|
|
s: self => self.connect("destroy", () => {
|
|
print("Detroying bar");
|
|
app.remove_window(self);
|
|
}),
|
|
child: <centerbox class="window-box">
|
|
<Left />
|
|
<Center />
|
|
<Right />
|
|
</centerbox>
|
|
})
|
|
}
|