bar: wifi and bluetooth status

This commit is contained in:
2 * r + 2 * t 2025-01-15 12:52:47 +11:00
parent 4ce74c4dc5
commit 2d7ad5977f
2 changed files with 138 additions and 1 deletions

View file

@ -1,7 +1,9 @@
import { execAsync, GLib, register, Variable } from "astal";
import { bind, kebabify } from "astal/binding";
import { App, Astal, astalify, Gdk, Gtk, type ConstructProps } from "astal/gtk3";
import AstalBluetooth01 from "gi://AstalBluetooth";
import AstalHyprland from "gi://AstalHyprland";
import AstalNetwork from "gi://AstalNetwork";
import AstalNotifd from "gi://AstalNotifd";
import AstalTray from "gi://AstalTray";
import { bar as config } from "../config";
@ -184,6 +186,127 @@ const TrayItem = (item: AstalTray.TrayItem) => {
const Tray = () => <box className="module tray">{bind(AstalTray.get_default(), "items").as(i => i.map(TrayItem))}</box>;
const Network = () => (
<stack
transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
transitionDuration={120}
shown={bind(AstalNetwork.get_default(), "primary").as(p =>
p === AstalNetwork.Primary.WIFI ? "wifi" : "wired"
)}
setup={self => {
const network = AstalNetwork.get_default();
const tooltipText = Variable("");
const update = () => {
if (network.primary === AstalNetwork.Primary.WIFI) {
if (network.wifi.internet === AstalNetwork.Internet.CONNECTED)
tooltipText.set(`${network.wifi.ssid} | Strength: ${network.wifi.strength}/100`);
else if (network.wifi.internet === AstalNetwork.Internet.CONNECTING)
tooltipText.set(`Connecting to ${network.wifi.ssid}`);
else tooltipText.set("Disconnected");
} else if (network.primary === AstalNetwork.Primary.WIRED) {
if (network.wired.internet === AstalNetwork.Internet.CONNECTED)
tooltipText.set(`Speed: ${network.wired.speed}`);
else if (network.wired.internet === AstalNetwork.Internet.CONNECTING) tooltipText.set("Connecting");
else tooltipText.set("Disconnected");
} else {
tooltipText.set("Unknown");
}
};
self.hook(network, "notify::primary", update);
self.hook(network.wifi, "notify::internet", update);
self.hook(network.wifi, "notify::ssid", update);
self.hook(network.wifi, "notify::strength", update);
if (network.wired) {
self.hook(network.wired, "notify::internet", update);
self.hook(network.wired, "notify::speed", update);
}
update();
setupCustomTooltip(self, bind(tooltipText));
}}
>
<stack
name="wifi"
transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
transitionDuration={120}
setup={self => {
const network = AstalNetwork.get_default();
const update = () => {
if (network.wifi.internet === AstalNetwork.Internet.CONNECTED)
self.shown = String(Math.ceil(network.wifi.strength / 25));
else if (network.wifi.internet === AstalNetwork.Internet.CONNECTING) self.shown = "connecting";
else self.shown = "disconnected";
};
self.hook(network.wifi, "notify::internet", update);
self.hook(network.wifi, "notify::strength", update);
update();
}}
>
<label className="icon" label="wifi_off" name="disconnected" />
<label className="icon" label="settings_ethernet" name="connecting" />
<label className="icon" label="signal_wifi_0_bar" name="0" />
<label className="icon" label="network_wifi_1_bar" name="1" />
<label className="icon" label="network_wifi_2_bar" name="2" />
<label className="icon" label="network_wifi_3_bar" name="3" />
<label className="icon" label="signal_wifi_4_bar" name="4" />
</stack>
<stack
transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
transitionDuration={120}
setup={self => {
const network = AstalNetwork.get_default();
const update = () => {
if (network.primary !== AstalNetwork.Primary.WIRED) return;
if (network.wired.internet === AstalNetwork.Internet.CONNECTED) self.shown = "connected";
else if (network.wired.internet === AstalNetwork.Internet.CONNECTING) self.shown = "connecting";
else self.shown = "disconnected";
};
self.hook(network, "notify::primary", update);
if (network.wired) self.hook(network.wired, "notify::internet", update);
update();
}}
>
<label className="icon" label="wifi_off" name="disconnected" />
<label className="icon" label="settings_ethernet" name="connecting" />
<label className="icon" label="lan" name="connected" />
</stack>
</stack>
);
const Bluetooth = () => (
<stack
transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
transitionDuration={120}
shown={bind(AstalBluetooth01.get_default(), "isPowered").as(p => (p ? "enabled" : "disabled"))}
setup={self => {
const tooltipText = Variable("");
const update = () => {
const devices = AstalBluetooth01.get_default()
.get_devices()
.filter(d => d.connected);
tooltipText.set(
devices.length > 0
? `Connected devices: ${devices.map(d => d.alias).join(", ")}`
: "No connected devices"
);
};
self.hook(AstalBluetooth01.get_default(), "notify", update);
update();
setupCustomTooltip(self, bind(tooltipText));
}}
>
<label className="icon" label="bluetooth" name="enabled" />
<label className="icon" label="bluetooth_disabled" name="disabled" />
</stack>
);
const StatusIcons = () => (
<box className="module status-icons">
<Network />
<Bluetooth />
</box>
);
const Notifications = () => {
const unreadCount = Variable(0);
return (
@ -252,7 +375,6 @@ const Power = () => (
<button
className="module power"
label="power_settings_new"
cursor="pointer"
onClicked={() => execAsync("fish -c 'pkill wlogout || wlogout -p layer-shell'").catch(console.error)}
/>
);
@ -273,6 +395,7 @@ export default ({ monitor }: { monitor: AstalHyprland.Monitor }) => (
<Workspaces />
<box halign={Gtk.Align.END}>
<Tray />
<StatusIcons />
<Notifications />
<DateTime />
<Power />

View file

@ -84,6 +84,10 @@
@include lib.spacing(10);
}
.status-icons {
color: scheme.$rosewater;
}
.notifications {
color: scheme.$mauve;
}
@ -94,10 +98,20 @@
.power {
@include lib.border(scheme.$red);
@include lib.element-decel;
@include font.icon;
color: scheme.$red;
font-weight: bold;
font-size: lib.s(16);
&:hover,
&:focus {
background-color: scheme.$surface1;
}
&:active {
background-color: scheme.$surface2;
}
}
}