319 lines
11 KiB
TypeScript
319 lines
11 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, For, With, Accessor } from "ags"
|
|
import { createPoll } from "ags/time"
|
|
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"
|
|
import GLib from "gi://GLib";
|
|
|
|
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();
|
|
let items = createBinding(tray, "items");
|
|
const init = (btn: Gtk.MenuButton, item: Tray.TrayItem) => {
|
|
btn.menuModel = item.menuModel
|
|
btn.insert_action_group("dbusmenu", item.actionGroup)
|
|
item.connect("notify::action-group", () => {
|
|
btn.insert_action_group("dbusmenu", item.actionGroup)
|
|
})
|
|
}
|
|
return (
|
|
<box>
|
|
<For each={items}>
|
|
{(item: Tray.TrayItem) => {
|
|
if (item.iconThemePath) app.add_icons(item.iconThemePath);
|
|
return (
|
|
<menubutton
|
|
$={(self) => init(self, item)}
|
|
class="systray"
|
|
tooltipMarkup={createBinding(item, "tooltipMarkup")}
|
|
menuModel={createBinding(item, "menuModel")}>
|
|
<image gicon={item.gicon} class="systray-item" />
|
|
</menubutton>
|
|
);
|
|
}}
|
|
</For>
|
|
</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 = createPoll<string>("", 60000, () => GLib.DateTime.new_now_local().format(format)!)
|
|
return <button
|
|
class="item"
|
|
label={time}
|
|
onClicked={() => execAsync(['gnome-calendar'])}
|
|
/>
|
|
}
|
|
|
|
function Time({ format = "%H:%M:%S" }): JSX.Element {
|
|
const time = createPoll<string>("", 1000, () => GLib.DateTime.new_now_local().format(format)!)
|
|
return <label
|
|
class="item blue"
|
|
label={time}
|
|
/>
|
|
}
|
|
|
|
function Temp(): JSX.Element {
|
|
let [label, _setlabel] = createState<string>("N/A");
|
|
if (sensorsAvailable) {
|
|
label = createPoll<string>("", 3000, '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"
|
|
label={label}
|
|
/>
|
|
}
|
|
|
|
function Memory(): JSX.Element {
|
|
const memory = createPoll<string>("", 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"
|
|
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 = createPoll<string>("", 1000, command, out => out)
|
|
return <label
|
|
class="item"
|
|
label={speed}
|
|
/>
|
|
}
|
|
|
|
function CPU(): JSX.Element {
|
|
const usage = createPoll<string>("", 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">
|
|
<image iconName="speedometer" css="margin-right: 0.7em;" />
|
|
<label
|
|
label={usage}
|
|
/>
|
|
</box>
|
|
}
|
|
|
|
|
|
|
|
function Right() {
|
|
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 />;
|
|
let batteryPercentage = createBinding(battery, "percentage");
|
|
return <button class="battery-item" onClicked={() => execAsync(['gnome-power-statistics'])}>
|
|
<box>
|
|
<With value={batteryPercentage}>
|
|
{(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 <image
|
|
iconName={battery.charging ? `battery-level-${icon}-${charging_name}-symbolic` : `battery-level-${icon}-symbolic`}
|
|
/>
|
|
}}
|
|
</With>
|
|
</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;"
|
|
});
|
|
let volume = createBinding(audio.default_speaker, "volume");
|
|
let mute = createBinding(audio.default_speaker, "mute");
|
|
return (
|
|
<button class="item blue" onClicked={() => audio.default_speaker.mute = !audio.default_speaker.mute}>
|
|
<box>
|
|
<image iconName={icon} />
|
|
<With value={volume}>
|
|
{(vol) => <box>
|
|
<With value={mute}>
|
|
{(muted) => {
|
|
return (
|
|
<label label={muted ? "" : `${Math.floor(vol * 100)}%`} css={css} />
|
|
)
|
|
}}
|
|
</With>
|
|
</box>}
|
|
</With>
|
|
</box>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
|
|
function Workspaces(): JSX.Element {
|
|
const hyprland = Hyprland.get_default();
|
|
let workspaces = createBinding(hyprland, "workspaces");
|
|
return (
|
|
<box class="workspaces">
|
|
<With value={workspaces}>
|
|
{(wss: Array<Hyprland.Workspace>) => (
|
|
<box>
|
|
<With value={createBinding(hyprland, "focusedMonitor")}>
|
|
{(fm: Hyprland.Monitor) => {
|
|
let filtered_wss = new Accessor(() => wss.sort((a, b) => a.id - b.id)
|
|
.filter(ws => ws && ws.get_monitor() && ws.get_monitor().get_id() === fm.get_id()))
|
|
return (
|
|
<box>
|
|
<For each={filtered_wss}>
|
|
{(ws: Hyprland.Workspace, _index) => (
|
|
<button
|
|
class={createBinding(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
|
|
onClicked={() => ws.focus()}
|
|
>
|
|
{`${ws.id}`.slice(-1)}
|
|
</button>
|
|
)}
|
|
</For>
|
|
</box>
|
|
)
|
|
}}
|
|
</With>
|
|
</box>
|
|
)}
|
|
</With>
|
|
</box>
|
|
);
|
|
}
|
|
|
|
function shorten(title: string) {
|
|
return title.length > 40 ? title.slice(0, 20) + "..." : title
|
|
}
|
|
|
|
function Clients(): JSX.Element {
|
|
const hyprland = Hyprland.get_default();
|
|
let clients = createBinding(hyprland, "clients")
|
|
return (
|
|
<box>
|
|
<With value={createBinding(hyprland, "focusedWorkspace")}>
|
|
{(fw: Hyprland.Workspace) => (
|
|
<box class="clients">
|
|
<With value={clients}>
|
|
{(cls: Array<Hyprland.Client>) => {
|
|
let filtered_clients = new Accessor(() => 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()))
|
|
|
|
return (
|
|
<box>
|
|
<For each={filtered_clients}>
|
|
{(cl: Hyprland.Client, _index) => (
|
|
<box
|
|
class={createBinding(hyprland, "focusedClient").as(a => a && a.address === cl.address ? "focused" : "unfocused")}
|
|
>
|
|
<image
|
|
iconName={getIconName(cl)}
|
|
class="app-icon"
|
|
/>
|
|
<label label={createBinding(cl, 'title').as(title => shorten(title))} />
|
|
</box>
|
|
)}
|
|
</For>
|
|
</box>
|
|
)
|
|
}
|
|
}
|
|
</With>
|
|
</box>
|
|
)
|
|
}
|
|
</With >
|
|
</box >
|
|
);
|
|
}
|
|
|
|
export default function Bar(gdkmonitor: Gdk.Monitor, scaleFactor: number = 1) {
|
|
console.log("Creating Bar on monitor:", gdkmonitor);
|
|
return (
|
|
<window
|
|
visible
|
|
gdkmonitor={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" >
|
|
<centerbox class="window-box">
|
|
<Left $type="start" />
|
|
<Center $type="center" />
|
|
<Right $type="end" />
|
|
</centerbox>
|
|
</window >
|
|
)
|
|
}
|