fix: having no wifi crashes network module

astal/widget/Bar.tsx

@@ -1,40 +1,43 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk3"
-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 Time from "./time"
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+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 Time from "./time";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-  const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
+  const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor;
 
   //@ts-ignore
-  return <window
-    className="Bar"
-    gdkmonitor={gdkmonitor}
-    exclusivity={Astal.Exclusivity.EXCLUSIVE}
-    anchor={BOTTOM | LEFT | RIGHT}
-    application={App}>
-    <centerbox>
-      <box hexpand halign={Gtk.Align.START} >
-        <box className="nix-icon">
-          <icon icon="nixos-3" />
+  return (
+    <window
+      className="Bar"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      anchor={BOTTOM | LEFT | RIGHT}
+      application={App}
+    >
+      <centerbox>
+        <box hexpand halign={Gtk.Align.START}>
+          <box className="nix-icon">
+            <icon icon="nixos-3" />
+          </box>
+          <Workspaces monitor={gdkmonitor} />
         </box>
-        <Workspaces monitor={gdkmonitor} />
-      </box>
-      <box></box>
-      <box hexpand halign={Gtk.Align.END}>
-        <Audio />
-        <NetworkModule />
-        <Cpu />
-        <Ram />
-        <Disk />
-        <Battery />
-        <Time />
-      </box>
-    </centerbox>
-  </window>
+        <box></box>
+        <box hexpand halign={Gtk.Align.END}>
+          <Audio />
+          <NetworkModule />
+          <Cpu />
+          <Ram />
+          <Disk />
+          <Battery />
+          <Time />
+        </box>
+      </centerbox>
+    </window>
+  );
 }

astal/widget/network.tsx

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