feat: add network widget

widgets/bar/index.tsx

@@ -3,6 +3,7 @@ import { FocusedClient, WorkspaceButton } from "./workspace";
 import { Battery } from "./battery";
 import { Tailscale } from "./tailscale";
 import { Time } from "./time";
+import { Network } from "./network";
 
 export const WINDOW_NAME = "bar";
 
@@ -43,6 +44,7 @@ const Center = () => {
 const End = () => {
   return (
     <box spacing={10}>
+      <Network />
       <Tailscale />
       <Battery />
       <Time />

widgets/bar/network.tsx

@@ -0,0 +1,21 @@
+import { bind } from "astal";
+import AstalNetwork from "gi://AstalNetwork";
+
+export const Network = () => {
+  const network = AstalNetwork.get_default();
+  const wifi = bind(network, "wifi");
+
+  return (
+    <box cssClasses={["pill"]} visible={wifi.as(Boolean)}>
+      {wifi.as(
+        (wifi) =>
+          wifi && (
+            <box spacing={10}>
+              <image iconName={bind(wifi, "iconName")} />
+              <label label={bind(wifi, "ssid")} />
+            </box>
+          ),
+      )}
+    </box>
+  );
+};