Refactor connection status display for improved clarity and consistency

Author: MrAlders0n

content/wardrive.js

@@ -769,7 +769,7 @@ function setConnStatus(text, color) {
 
   // Format based on connection state
   if (text === "Connected") {
-    // Show: 🟢 DeviceName 🔊 NoiseFloor
+    // Show: 🟢 DeviceName 🔊 NoiseFloor (device/noise in slate, indicator green)
     const deviceName = state.deviceName || "[No device]";
     let noiseText = "-";
     if (state.lastNoiseFloor === null) {
@@ -780,16 +780,17 @@ function setConnStatus(text, color) {
       noiseText = `${state.lastNoiseFloor}dBm`;
     }
     connectionStatusEl.textContent = `${deviceName} 🔊 ${noiseText}`;
+    connectionStatusEl.className = 'font-medium text-slate-300';
   } else if (text === "Disconnected") {
     // Show: 🔴 Disconnected
     connectionStatusEl.textContent = text;
+    connectionStatusEl.className = `font-medium ${color}`;
   } else {
     // Connecting, Disconnecting - show as-is
     connectionStatusEl.textContent = text;
+    connectionStatusEl.className = `font-medium ${color}`;
   }
 
-  connectionStatusEl.className = `font-medium ${color}`;
-  
   // Update status indicator dot color to match
   if (statusIndicatorEl) {
     statusIndicatorEl.className = `text-lg ${color}`;

index.html

@@ -47,17 +47,9 @@ <h1 class="flex items-center gap-2 text-lg sm:text-xl font-semibold truncate min
       <div>
         <!-- Connection Status Bar -->
         <div id="connectionBar" class="bg-slate-800/80 border border-slate-700 rounded-t-xl rounded-b-none px-4 py-0.5 flex items-center justify-between">
-          <div class="flex items-center gap-4 text-sm">
-            <div class="flex items-center gap-2">
-              <span id="statusIndicator" class="text-base">●</span>
-              <span id="connectionStatus" class="font-medium text-red-300">Disconnected</span>
-            </div>
-            <div class="flex items-center gap-2 text-xs">
-              <span class="text-slate-400">Device:</span>
-              <span id="deviceName" class="text-slate-300">-</span>
-              <span class="text-slate-400">Noise:</span>
-              <span id="deviceInfo" class="text-slate-300">-</span>
-            </div>
+          <div class="flex items-center gap-2 text-sm">
+            <span id="statusIndicator" class="text-base">●</span>
+            <span id="connectionStatus" class="font-medium text-red-300">Disconnected</span>
           </div>
           <button id="settingsGearBtn" class="p-0 text-slate-400 hover:text-slate-200 transition-colors" aria-label="Toggle settings">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">