Improve network bar (#813)

* Improve network bar

- Improve consistency of status updates by using `state` and
`connectivity`
- Add 'Off' text based on WiFi adapter status

* Update src/components/bar/modules/network/index.tsx

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

src/components/bar/modules/network/helpers.ts

@@ -64,21 +64,16 @@ const formatFrequency = (frequency: number): string => {
  * Formats the WiFi information for display.
  *
  * This function takes a WiFi object and formats its SSID, signal strength, and frequency for display.
- * If any of these values are not available, it provides default values.
  *
  * @param wifi The WiFi object containing SSID, signal strength, and frequency information.
  *
  * @returns A formatted string containing the WiFi information.
  */
-export const formatWifiInfo = (wifi: AstalNetwork.Wifi | null): string => {
+export const formatWifiInfo = (wifi: AstalNetwork.Wifi): string => {
-    const netSsid = wifi?.ssid ? wifi.ssid : 'None';
+    return `Network: ${wifi.ssid} \nSignal Strength: ${wifi.strength}% \nFrequency: ${formatFrequency(wifi.frequency)}`;
-    const wifiStrength = wifi?.strength ? wifi.strength : '--';
-    const wifiFreq = wifi?.frequency ? formatFrequency(wifi.frequency) : '--';
-
-    return `Network: ${netSsid} \nSignal Strength: ${wifiStrength}% \nFrequency: ${wifiFreq}`;
 };
 
-Variable.derive([bind(networkService, 'wifi')], () => {
+Variable.derive([bind(networkService, 'state'), bind(networkService, 'connectivity')], () => {
     handleWiredIcon();
     handleWirelessIcon();
 });

src/components/bar/modules/network/index.tsx

@@ -16,10 +16,7 @@ const Network = (): BarBoxChild => {
     const iconBinding = Variable.derive(
         [bind(networkService, 'primary'), bind(wiredIcon), bind(wirelessIcon)],
         (primaryNetwork, wiredIcon, wifiIcon) => {
-            const isWired = primaryNetwork === AstalNetwork.Primary.WIRED;
+            return primaryNetwork === AstalNetwork.Primary.WIRED ? wiredIcon : wifiIcon;
-            const iconName = isWired ? wiredIcon : wifiIcon;
-
-            return iconName;
         },
     );
 
@@ -28,28 +25,44 @@ const Network = (): BarBoxChild => {
     const networkLabel = Variable.derive(
         [
             bind(networkService, 'primary'),
-            bind(networkService, 'wifi'),
             bind(label),
             bind(truncation),
             bind(truncation_size),
             bind(showWifiInfo),
+
+            bind(networkService, 'state'),
+            bind(networkService, 'connectivity'),
+            ...(networkService.wifi ? [bind(networkService.wifi, 'enabled')] : []),
         ],
-        (primaryNetwork, networkWifi, showLabel, trunc, tSize, showWifiInfo) => {
+        (primaryNetwork, showLabel, trunc, tSize, showWifiInfo) => {
             if (!showLabel) {
                 return <box />;
             }
             if (primaryNetwork === AstalNetwork.Primary.WIRED) {
                 return <label className={'bar-button-label network-label'} label={'Wired'.substring(0, tSize)} />;
             }
+            const networkWifi = networkService.wifi;
+            if (networkWifi != null) {
+                // Astal doesn't reset the wifi attributes on disconnect, only on a valid connection
+                // so we need to check if both the WiFi is enabled and if there is an active access
+                // point
+                if (!networkWifi.enabled) {
+                    return <label className={'bar-button-label network-label'} label="Off" />;
+                }
+
                 return (
                     <label
                         className={'bar-button-label network-label'}
                         label={
-                        networkWifi?.ssid ? `${trunc ? networkWifi.ssid.substring(0, tSize) : networkWifi.ssid}` : '--'
+                            networkWifi.active_access_point
+                                ? `${trunc ? networkWifi.ssid.substring(0, tSize) : networkWifi.ssid}`
+                                : '--'
                         }
-                    tooltipText={showWifiInfo ? formatWifiInfo(networkWifi) : ''}
+                        tooltipText={showWifiInfo && networkWifi.active_access_point ? formatWifiInfo(networkWifi) : ''}
                     />
                 );
+            }
+            return <box />;
         },
     );