[Astal] Add mode indicator

This commit is contained in:
2025-10-17 09:47:18 +02:00
parent 94a57be9f7
commit 47bbdd9f85
6 changed files with 282 additions and 219 deletions

View File

@@ -1,35 +1,39 @@
import { execAsync } from "astal";
import { Gtk } from "astal/gtk4";
import sysinfo from "../sysinfo";
import {
Gtk
} from 'astal/gtk4';
import {
execAsync
} from 'astal';
import sysinfo from '../sysinfo';
const info = () => {
return (
<box vertical>
<label
label={"System Information"}
cssClasses={["title-2"]}
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={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={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'"`)}
onClicked={() => execAsync( '/bin/sh -c "kitty --hold fish -c \'fastfetch\'"' )}
child={
<label label={"View FastFetch"}></label>
<label label={'View FastFetch'}></label>
}></button>
</box>
);
@@ -38,7 +42,7 @@ Kernel: ${stats.kernel}`;
const SystemInformationPanel = () => {
const popover = new Gtk.Popover();
popover.set_child(info());
popover.set_child( info() );
return popover;
};
@@ -54,44 +58,44 @@ const SystemInfo = () => {
sysinfo.refreshStats();
};
if (sysinfo.enabled) {
if ( sysinfo.enabled ) {
return (
<button
onClicked={() => openSysInfo()}
child={
<box tooltipText={sysinfo.ramUsed(v => v)}>
<box tooltipText={sysinfo.ramUsed( v => v )}>
<box
cssClasses={[ 'quick-view-symbol' ]}
>
<image
iconName={"power-profile-performance-symbolic"}
iconName={'power-profile-performance-symbolic'}
marginEnd={1}
></image>
<label
label={sysinfo.cpuUtil(util => util)}
label={sysinfo.cpuUtil( util => util )}
marginEnd={5}
></label>
</box>
<box
cssClasses={[ 'quick-view-symbol' ]}
>
<image iconName={"memory"}></image>
<label label={sysinfo.ramUtil(util => util)}></label>
<image iconName={'memory'}></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>
<image iconName={'show-gpu-effects-symbolic'}></image>
<label label={sysinfo.gpuUtil( util => util )}></label>
</box>
{panel}
</box>
}
cssClasses={["bar-button"]}
cssClasses={[ 'bar-button' ]}
></button>
);
} else {
return <image iconName={"action-unavailable-symbolic"}></image>;
return <image iconName={'action-unavailable-symbolic'}></image>;
}
};