Backport tailscale network status changes (#1895)

Resolves #1894

This change adjusts network status related changes on [Tailscale change
on Network Status
dialog](tiny-pilot/tinypilot-pro#1549) to
support tailnet status.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1895"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

Author: str028

app/templates/custom-elements/network-status-dialog.html

@@ -117,6 +117,7 @@ <h3>Network Status</h3>
         }
 
         async _update() {
+          // Check Ethernet/WiFi status.
           let networkStatus;
           try {
             networkStatus = await getNetworkStatus();
@@ -129,11 +130,14 @@ <h3>Network Status</h3>
             );
             return;
           }
-          this._elements.statusEthernet.update(
+          this._elements.statusEthernet.setEthernetWifi(
             "Ethernet",
             networkStatus.ethernet
           );
-          this._elements.statusWifi.update("Wi-Fi", networkStatus.wifi);
+          this._elements.statusWifi.setEthernetWifi(
+            "Wi-Fi",
+            networkStatus.wifi
+          );
         }
       }
     );

app/templates/custom-elements/network-status-interface.html

@@ -39,24 +39,19 @@
       display: inline-block;
     }
 
-    :host([is-connected=""]) .status-dot {
+    :host([ethernet-wifi-status="CONNECTED"]) .status-dot {
       background-color: var(--brand-green-bright);
     }
 
-    :host(:not([is-connected])) .status-dot {
+    :host([ethernet-wifi-status="DISCONNECTED"]) .status-dot {
       background-color: var(--brand-red-bright);
     }
 
-    .label-connected,
-    .label-disconnected {
+    :host(:not([network-status-type="ETHERNET_WIFI"])) .ip-address-container,
+    :host(:not([network-status-type="ETHERNET_WIFI"])) .mac-address-container {
       display: none;
     }
 
-    :host([is-connected=""]) .label-connected,
-    :host(:not([is-connected])) .label-disconnected {
-      display: inline;
-    }
-
     #ip-address,
     #mac-address {
       margin-left: 0.3em;
@@ -67,16 +62,15 @@
   <div id="data">
     <div class="connection-indicator">
       <span class="status-dot status-dot-connected"></span>
-      <span class="label-connected">Connected</span>
-      <span class="label-disconnected">Disconnected</span>
+      <span id="label-status"><!-- Filled programmatically --></span>
     </div>
-    <div>
+    <div class="ip-address-container">
       IP Address:
       <span id="ip-address" class="monospace"
         ><!-- Filled programmatically --></span
       >
     </div>
-    <div>
+    <div class="mac-address-container">
       MAC Address:
       <span id="mac-address" class="monospace"
         ><!-- Filled programmatically --></span
@@ -102,6 +96,10 @@
             name: this.shadowRoot.querySelector("#name"),
             ipAddress: this.shadowRoot.querySelector("#ip-address"),
             macAddress: this.shadowRoot.querySelector("#mac-address"),
+            labelStatus: this.shadowRoot.querySelector("#label-status"),
+          };
+          this._networkStatusType = {
+            ETHERNET_WIFI: "ETHERNET_WIFI",
           };
         }
 
@@ -112,9 +110,20 @@
          * @param {string} [status.ipAddress]
          * @param {string} [status.macAddress]
          */
-        update(name, status) {
+        setEthernetWifi(name, status) {
+          this.setAttribute(
+            "network-status-type",
+            this._networkStatusType.ETHERNET_WIFI
+          );
           this._elements.name.innerText = name;
-          this.toggleAttribute("is-connected", status.isConnected);
+          const networkStatus = status.isConnected
+            ? "Connected"
+            : "Disconnected";
+          this._elements.labelStatus.innerText = networkStatus;
+          this.setAttribute(
+            "ethernet-wifi-status",
+            networkStatus.toUpperCase()
+          );
           this._elements.ipAddress.innerText = status.ipAddress || "n/a";
           this._elements.macAddress.innerText = status.macAddress || "n/a";
         }