lucalise/dotfiles-status-bar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat!: migrate to ags v3, redesign styles

Browse Source
This commit is contained in:
rocketcamel
2025-12-05 20:32:18 -08:00
parent 42b4f99c37
commit 11c257e4b3
14 changed files with 182 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
widget/Bar.tsx
View File

@@ -1,15 +1,14 @@
import { Astal, Gtk, Gdk } from "ags/gtk4";
// import Workspaces from "./workspaces";
// import Audio from "./audio";
// import NetworkModule from "./network";
// import Cpu from "./cpu-widget";
// import Ram from "./ram";
// import Disk from "./disk";
// import Battery from "./battery";
import { Astal, Gdk, Gtk } from "ags/gtk4";
import Time from "./time";
import Title from "./title";
import app from "ags/gtk4/app";
import Workspaces from "./workspaces";
import Battery from "./battery";
import Disk from "./disk";
import NetworkModule from "./network";
import Ram from "./ram";
import Cpu from "./cpu-widget";
import Audio from "./audio";
export default function Bar(gdkmonitor: Gdk.Monitor) {
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
@@ -25,11 +24,26 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
application={app}
>
<centerbox>
<Workspaces $type="start" monitor={gdkmonitor} />
<box $type="start">
<image iconName="nixos" pixel_size={24} class="nix-icon" />
<Workspaces monitor={gdkmonitor} />
</box>
<box $type="center" class="client-title">
<Title />
</box>
<box $type="end">
<Gtk.Separator class="separator" />
<Audio />
<Gtk.Separator class="separator" />
<NetworkModule />
<Gtk.Separator class="separator" />
<Cpu />
<Gtk.Separator class="separator" />
<Ram />
<Gtk.Separator class="separator" />
<Disk />
<Gtk.Separator class="separator" />
<Battery />
<Time />
</box>
</centerbox>

25
widget/audio.tsx
View File

@@ -1,18 +1,21 @@
import { bind, Variable } from "astal"
import AstalWp from "gi://AstalWp?version=0.1"
import { createBinding, createMemo } from "gnim"
export default function Audio() {
const speaker = AstalWp.get_default()?.default_speaker!
// const derived = Variable.derive([bind(speaker, "volume"), bind(speaker, "mute")], (volume: number, muted: boolean) => {
// if (muted) {
// return { label: ` (muted)`, muted }
// }
// return { label: `${Math.floor(volume * 100)}% ` }
// })
const display = createMemo(() => {
const volume = createBinding(speaker, "volume")
const muted = createBinding(speaker, "mute")
// return <box className={derived((v) => ["status-box", v.muted && "inactive"].filter(Boolean).join(" "))}>
// <label
// label={derived((v) => v.label)} />
// </box>
if (muted()) {
return "(muted)"
}
return `${Math.floor(volume() * 100)}% `
})
return (
<box class="status-box audio">
<label label={display} />
</box>
)
}

25
widget/battery.tsx
View File

@@ -1,21 +1,24 @@
import { bind, Variable } from "astal"
import { Gtk } from "ags/gtk4"
import AstalBattery from "gi://AstalBattery?version=0.1"
import { createBinding, createComputed } from "gnim"
export default function Battery() {
const battery = AstalBattery.get_default()
const battery_info = Variable.derive([bind(battery, "percentage"), bind(battery, "charging")], (percentage, charging) => {
const full_percentage = Math.floor(percentage * 100)
if (charging) {
return { label: `${full_percentage == 100 ? "FULL" : "CHR"}: ${full_percentage}%` }
}
return { label: `${full_percentage == 100 ? "FULL" : "BAT"}: ${full_percentage}%` }
})
const percentage = createBinding(battery, "percentage")
const full_percentage = Math.floor(percentage.peek() * 100)
const battery_info = createComputed(() => (`${full_percentage === 100 ? "FULL" : "CHR"}: ${full_percentage}%`))
if (!battery.is_battery) {
return <></>
}
return <box className="status-box">
<label label={battery_info((i) => i.label)} />
</box>
return (
<>
<box class="status-box">
<label label={battery_info} />
</box>
<Gtk.Separator />
</>
)
}

27
widget/cpu-widget.tsx
View File

@@ -1,19 +1,18 @@
import { bind, GLib, Variable } from "astal";
import { createPoll } from "ags/time";
import { calc_cpu_usage, get_cpu_snapshot } from "./cpu";
let s1 = get_cpu_snapshot();
let cpu_usage_percent = Variable(0);
GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000, () => {
const s2 = get_cpu_snapshot();
cpu_usage_percent.set(calc_cpu_usage(s1, s2));
s1 = s2;
return true;
});
let s1 = get_cpu_snapshot()
export default function Cpu() {
return <box className="status-box">
<label label={bind(cpu_usage_percent).as((u) => `${u}% `)} />
</box>
const usage = createPoll(0, 1000, () => {
const s2 = get_cpu_snapshot()
let calc = calc_cpu_usage(s1, s2)
s1 = s2
return calc
})
return (
<box class="status-box cpu">
<label label={usage.as(u => `CPU: ${u}% `)} />
</box>
)
}

52
widget/cpu.ts
View File

@@ -1,58 +1,56 @@
import { GLib, Variable } from "astal";
import GTop from "gi://GTop";
import Wp05 from "gi://Wp";
import GTop from "gi://GTop"
type Snapshot = {
total: number;
user: number;
sys: number;
idle: number;
};
total: number
user: number
sys: number
idle: number
}
export function get_cpu_snapshot() {
const cpu = new GTop.glibtop_cpu();
GTop.glibtop_get_cpu(cpu);
const cpu = new GTop.glibtop_cpu()
GTop.glibtop_get_cpu(cpu)
return {
total: cpu.total,
user: cpu.user + cpu.nice,
sys: cpu.sys,
idle: cpu.idle,
};
}
}
export function calc_cpu_usage(a: Snapshot, b: Snapshot) {
const total_diff = b.total - a.total;
const active_diff = b.user + b.sys - (a.user + a.sys);
return Math.round(total_diff > 0 ? (100 * active_diff) / total_diff : 0);
const total_diff = b.total - a.total
const active_diff = b.user + b.sys - (a.user + a.sys)
return Math.round(total_diff > 0 ? (100 * active_diff) / total_diff : 0)
}
export function get_ram_info() {
const mem = new GTop.glibtop_mem();
GTop.glibtop_get_mem(mem);
const mem = new GTop.glibtop_mem()
GTop.glibtop_get_mem(mem)
return {
total: mem.total,
used: mem.total - mem.free - mem.cached - mem.buffer,
free: mem.free,
};
}
}
function format_bytes(bytes: number) {
let units = ["B", "KiB", "MiB", "GiB", "TiB"];
let i = 0;
let num: number = bytes;
let units = ["B", "KiB", "MiB", "GiB", "TiB"]
let i = 0
let num: number = bytes
while (num >= 1024 && i < units.length - 1) {
num /= 1024;
i++;
num /= 1024
i++
}
return `${num.toFixed(2)}${units[i]}`;
return `${num.toFixed(2)}${units[i]}`
}
export function get_disk_space() {
const usage = new GTop.glibtop_fsusage();
GTop.glibtop_get_fsusage(usage, "/");
const usage = new GTop.glibtop_fsusage()
GTop.glibtop_get_fsusage(usage, "/")
const free_bytes = usage.bavail * usage.block_size;
const free_bytes = usage.bavail * usage.block_size
return format_bytes(free_bytes);
return format_bytes(free_bytes)
}

13
widget/disk.tsx
View File

@@ -1,10 +1,13 @@
import { bind, Variable } from "astal"
import { get_disk_space } from "./cpu"
import { createPoll } from "ags/time"
let disk_space = Variable(get_disk_space()).poll(5000, () => get_disk_space())
export default function Disk() {
return <box className="status-box">
<label label={bind(disk_space).as((s) => `${s}`)} />
</box>
const disk = createPoll(get_disk_space(), 5000, () => get_disk_space())
return (
<box class="status-box disk">
<label label={disk.as(d => `Disk: ${d}`)} />
</box>
)
}

33
widget/network.tsx
View File

@@ -1,7 +1,7 @@
import { bind, Variable } from "astal";
import AstalNetwork from "gi://AstalNetwork?version=0.1";
import { createBinding, createMemo } from "gnim";
const disconnected_label = { label: `Disconnected ⚠` };
const disconnected_label = `Disconnected ⚠`
function create_label(
primary: AstalNetwork.Primary,
@@ -9,39 +9,28 @@ function create_label(
wifi?: AstalNetwork.Wifi,
) {
if (primary === AstalNetwork.Primary.WIRED) {
return { label: `🖧 Wired ${wired.device.interface}` };
return `🖧 Wired ${wired.device.interface}`
}
if (!wifi) {
return disconnected_label;
}
if (wifi.active_access_point !== null) {
return { label: `${wifi.ssid} (${wifi.strength}%) ` };
return `${wifi.ssid} (${wifi.strength}%) `
}
return disconnected_label;
}
export default function NetworkModule() {
const network = AstalNetwork.get_default();
const wifi = network.wifi;
const wired = network.wired;
const primary = createBinding(network, "primary")
const wifi = createBinding(network, "wifi")
const wired = createBinding(network, "wired")
let derived;
if (!wifi) {
derived = Variable.derive([bind(network, "primary")], (primary) => {
return create_label(primary, wired);
});
} else {
derived = Variable.derive(
[bind(network, "primary"), bind(wifi, "ssid"), bind(wifi, "strength")],
(primary) => {
return create_label(primary, wired, wifi);
},
);
}
const display = createMemo(() => create_label(primary(), wired(), wifi()))
return (
<box className="status-box">
<label label={derived((v) => v.label)} />
<box class="status-box net">
<label label={display} />
</box>
);
)
}

19
widget/ram.tsx
View File

@@ -1,16 +1,13 @@
import { bind, GLib, Variable } from "astal"
import { get_ram_info } from "./cpu"
let info = Variable(get_ram_info())
GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000, () => {
info.set(get_ram_info())
return true
})
import { createPoll } from "ags/time"
export default function Ram() {
return <box className="status-box">
<label label={bind(info).as((i) => `${Math.round((i.used / i.total) * 100)}% `)} />
</box>
const info = createPoll(get_ram_info(), 1000, () => get_ram_info())
return (
<box class="status-box mem">
<label label={info.as(i => `Mem: ${Math.round((i.used / i.total) * 100)}% `)} />
</box>
)
}

22
widget/time.tsx
View File

@@ -1,12 +1,6 @@
// let current_time = Variable(GLib.DateTime.new_now_local().format("%H:%M"))
// GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000, () => {
// const now = GLib.DateTime.new_now_local()
// current_time.set(now.format("%b %e (%a) %H:%M"))
// return true
import { Gtk } from "ags/gtk4"
import { createPoll } from "ags/time"
// })
export default function Time() {
const time = createPoll("", 500, () => {
return new Date().toLocaleString(undefined, {
@@ -14,11 +8,13 @@ export default function Time() {
})
})
return <box class="status-box">
<label label={time} />
</box>
// return <box class="status-box">
// <label label={bind(current_time)} />
// </box>
return (
<menubutton class="date-popover status-box">
<popover>
<Gtk.Calendar />
</popover>
<label label={time} />
</menubutton>
)
}

6
widget/title.tsx
View File

@@ -1,6 +1,5 @@
import { createPoll } from "ags/time";
import AstalHyprland from "gi://AstalHyprland?version=0.1";
import { createState } from "gnim";
const hyprland = AstalHyprland.get_default()
@@ -8,15 +7,10 @@ function get_title() {
return hyprland.focusedClient?.title ?? ""
}
// const title = Variable(get_title()).poll(200, () => get_title())
export default function Title() {
const title = createPoll("", 200, () => get_title())
return (
<label label={title} />
)
// return (
// <label label={title(t => t)} />
// )
}

19
widget/workspaces.tsx
View File

@@ -4,32 +4,17 @@ import { createBinding, For } from "gnim"
export default function Workspaces({ monitor }: { monitor: Gdk.Monitor }) {
const hypr = AstalHyprland.get_default()
const workspaces = createBinding(hypr, "workspaces").as(wss => wss.sort((a, b) => a.id - b.id))
const workspaces = createBinding(hypr, "workspaces").as(wss => wss.filter((ws) => ws.monitor.model === monitor.model).sort((a, b) => a.id - b.id))
return (
<box class="workspaces">
<For each={workspaces}>
{(ws) => (
<button class={createBinding(hypr, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "")}>
<button class={createBinding(hypr, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "")} onClicked={() => ws.focus()}>
<label label={ws.id.toString()} />
</button>
)}
</For>
</box>
)
// return <box className="workspaces">
// {bind(hypr, "workspaces").as(wss => wss.filter(ws => !(ws.id >= -99 && ws.id <= -2))
// .sort((a, b) => a.id - b.id)
// .map(ws => {
// if (ws.monitor.model !== monitor.model) return <></>
// return (
// <button
// className={bind(hypr, "focusedWorkspace").as(fw =>
// ws === fw ? "focused" : "")}
// onClicked={() => ws.focus()}>
// {ws.id}
// </button>
// )
// }))}
// </box>
}