102 lines
3.2 KiB
TypeScript

import { execAsync } from "astal";
import { Gtk } from "astal/gtk4";
import sysinfo from "../sysinfo";
const info = () => {
return (
<box vertical>
<label
label={"System Information"}
cssClasses={["title-2"]}
></label>
<Gtk.Separator marginTop={5} marginBottom={10}></Gtk.Separator>
<label
vexpand
halign={Gtk.Align.START}
hexpand
label={sysinfo.ramUsed(used => {
return "RAM: " + used + ` (${sysinfo.ramUtil.get()}%)`;
})}
></label>
<label
label={sysinfo.systemStats(stats => {
return `CPU: ${stats.cpuTemp}, ${stats.cpuClk}
GPU: ${stats.gpuTemp}, ${stats.gpuClk} (${stats.vram} / ${stats.availableVRAM})
Kernel: ${stats.kernel}`;
})}
></label>
<Gtk.Separator marginTop={10}></Gtk.Separator>
<button
onClicked={() => execAsync(`/bin/sh -c "kitty --hold fish -c 'fastfetch'"`)}
child={
<label label={"View FastFetch"}></label>
}></button>
</box>
);
};
const SystemInformationPanel = () => {
const popover = new Gtk.Popover();
popover.set_child(info());
return popover;
};
const panel = SystemInformationPanel();
const SystemInfo = () => {
sysinfo.startSysInfoFetcher();
const openSysInfo = async () => {
panel.popup();
sysinfo.refreshStats();
};
if (sysinfo.enabled) {
return (
<button
onClicked={() => openSysInfo()}
child={
<box tooltipText={sysinfo.ramUsed(v => v)}>
<box
cssClasses={[ 'quick-view-symbol' ]}
>
<image
iconName={"power-profile-performance-symbolic"}
marginEnd={1}
></image>
<label
label={sysinfo.cpuUtil(util => util)}
marginEnd={5}
></label>
</box>
<box
cssClasses={[ 'quick-view-symbol' ]}
>
<image iconName={"histogram-symbolic"}></image>
<label label={sysinfo.ramUtil(util => util)}></label>
</box>
<box
cssClasses={[ 'quick-view-symbol' ]}
>
<image iconName={"show-gpu-effects-symbolic"}></image>
<label label={sysinfo.gpuUtil(util => util)}></label>
</box>
{panel}
</box>
}
cssClasses={["bar-button"]}
></button>
);
} else {
return <image iconName={"action-unavailable-symbolic"}></image>;
}
};
export default {
SystemInfo,
panel,
};