Move connection indicator to footer

Author: makermelissa

index.html

@@ -124,6 +124,7 @@
         <div id="footer-bar">
             <button id="btn-mode-editor" class="mode-button active">Editor</button>
             <button id="btn-mode-serial" class="mode-button">Serial</button>
+            <span id="connection-indicator" aria-label="" title="" hidden></span>
             <div class="spacer"></div>
             <button class="purple-button btn-settings">Settings<i class="fa-solid fa-gear"></i></button>
             <button class="purple-button btn-info" disabled>Info<i class="fa-solid fa-info-circle"></i></button>

js/script.js

@@ -63,6 +63,7 @@ const btnInfo = document.querySelector('.btn-info');
 const btnSettings = document.querySelector('.btn-settings');
 const terminalTitle = document.getElementById('terminal-title');
 const serialPlotter = document.getElementById('plotter');
+const connectionIndicator = document.getElementById('connection-indicator');
 
 const messageDialog = new MessageModal("message");
 const connectionType = new ButtonValueDialog("connection-type");
@@ -122,28 +123,28 @@ function getConnectionIndicatorType() {
     return getLastBackend();
 }
 
-function getConnectButtonContents(isConnected) {
-    const action = isConnected ? "Disconnect" : "Connect";
+function getConnectButtonState(isConnected) {
+    return {
+        label: isConnected ? "Disconnect" : "Connect",
+        title: isConnected ? "Disconnect" : "Connect",
+    };
+}
+
+function getConnectionIndicatorState(isConnected) {
     const connectionType = getConnectionIndicatorType();
     const details = CONNECTION_DETAILS[connectionType];
 
     if (!details) {
-        return {
-            html: action,
-            label: action,
-            title: action,
-        };
+        return null;
     }
 
-    const status = isConnected ? "Connected via" : "Last connection";
-    const actionLabel = isConnected
-        ? `Disconnect ${details.label}`
-        : `Connect using ${details.label}`;
+    const title = isConnected
+        ? `Connected with ${details.label}`
+        : `Last connection: ${details.label}`;
 
     return {
-        html: `<span class="connection-indicator" aria-hidden="true"><i class="${details.iconClass}"></i><span class="connection-label">${details.label}</span></span> <span class="connect-action">${action}</span>`,
-        label: actionLabel,
-        title: `${status}: ${details.label}`,
+        iconClass: details.iconClass,
+        title,
     };
 }
 
@@ -777,11 +778,27 @@ async function debugLog(msg) {
 }
 
 function updateUIConnected(isConnected) {
-    const buttonState = getConnectButtonContents(isConnected);
+    const buttonState = getConnectButtonState(isConnected);
+    const indicatorState = getConnectionIndicatorState(isConnected);
+
+    if (indicatorState) {
+        connectionIndicator.innerHTML = `<i class="${indicatorState.iconClass}"></i>`;
+        connectionIndicator.setAttribute("aria-label", indicatorState.title);
+        connectionIndicator.title = indicatorState.title;
+        connectionIndicator.hidden = false;
+        connectionIndicator.classList.toggle("connected", isConnected);
+    } else {
+        connectionIndicator.replaceChildren();
+        connectionIndicator.removeAttribute("aria-label");
+        connectionIndicator.removeAttribute("title");
+        connectionIndicator.hidden = true;
+        connectionIndicator.classList.remove("connected");
+    }
+
     if (isConnected) {
         // Set to Connected State
         getConnectButtons().forEach((element) => {
-            element.innerHTML = buttonState.html;
+            element.textContent = buttonState.label;
             element.setAttribute("aria-label", buttonState.label);
             element.title = buttonState.title;
             element.disabled = false;
@@ -792,7 +809,7 @@ function updateUIConnected(isConnected) {
     } else {
         // Set to Disconnected State
         getConnectButtons().forEach((element) => {
-            element.innerHTML = buttonState.html;
+            element.textContent = buttonState.label;
             element.setAttribute("aria-label", buttonState.label);
             element.title = buttonState.title;
             element.disabled = false;

sass/layout/_header.scss

@@ -109,33 +109,11 @@
             margin: 0;
             align-items: center;
             display: inline-flex;
-            gap: 8px;
             justify-content: center;
-            min-width: 118px;
         }
     }
 }
 
-.connection-indicator {
-    align-items: center;
-    display: inline-flex;
-    gap: 5px;
-    white-space: nowrap;
-
-    i {
-        font-size: 16px;
-        line-height: 1;
-    }
-}
-
-.connection-label {
-    font-size: 13px;
-}
-
-.connect-action {
-    white-space: nowrap;
-}
-
 .site-navigation {
     padding: 0 0 10px 0;
     font-size: 18px;

sass/layout/_header_mobile.scss

@@ -109,14 +109,7 @@
         display: block !important;
     }
 
-    #mobile-header {
-        .get-started button {
-            gap: 6px;
-            min-width: 94px;
-        }
-
-        .connection-label {
-            display: none;
-        }
+    #mobile-header .get-started button {
+        min-width: auto;
     }
 }

sass/layout/_layout.scss

@@ -15,6 +15,7 @@
         height: 4em;
         padding: 0 10px;
         display: flex;
+        align-items: center;
 
         .spacer {
             flex: auto;
@@ -195,6 +196,41 @@
     }
 }
 
+#connection-indicator {
+    align-items: center;
+    color: $gray;
+    display: inline-flex;
+    font-size: 1.15em;
+    justify-content: center;
+    line-height: 1;
+    margin-right: 0.5em;
+    min-width: 1.75em;
+
+    &.connected {
+        color: $purple;
+    }
+
+    &[hidden] {
+        display: none;
+    }
+}
+
+@media (max-width: $screen-xs-max) {
+    .layout #footer-bar {
+        .purple-button {
+            font-size: 0;
+            margin-right: 0.35em;
+            padding-left: 0.75em;
+            padding-right: 0.75em;
+
+            i {
+                font-size: 16px;
+                margin-left: 0;
+            }
+        }
+    }
+}
+
 @media (min-width: 650px) {
     .popup-modal.file-dialog {
         max-height: 365px;