Add power placeholder and update display logic for connection states

Author: MrAlders0n

content/wardrive.js

@@ -4516,11 +4516,15 @@ async function autoSetPowerLevel() {
       powerRadio.checked = true;
       state.autoPowerSet = true;
 
-      // Show auto-configured power display, hide manual selection
+      // Show auto-configured power display, hide manual selection and placeholder
+      const powerPlaceholder = document.getElementById("powerPlaceholder");
       const powerAutoDisplay = document.getElementById("powerAutoDisplay");
       const powerManualSelection = document.getElementById("powerManualSelection");
       const powerAutoValue = document.getElementById("powerAutoValue");
 
+      if (powerPlaceholder) {
+        powerPlaceholder.style.display = "none";
+      }
       if (powerAutoDisplay) {
         powerAutoDisplay.classList.remove("hidden");
         powerAutoDisplay.style.display = "flex";
@@ -4565,10 +4569,14 @@ async function autoSetPowerLevel() {
     debugError(`[DEVICE MODEL] Unknown device: ${state.deviceModel}`);
     state.autoPowerSet = false;
 
-    // Hide auto-configured power display, show manual selection
+    // Hide auto-configured power display and placeholder, show manual selection
+    const powerPlaceholder = document.getElementById("powerPlaceholder");
     const powerAutoDisplay = document.getElementById("powerAutoDisplay");
     const powerManualSelection = document.getElementById("powerManualSelection");
 
+    if (powerPlaceholder) {
+      powerPlaceholder.style.display = "none";
+    }
     if (powerAutoDisplay) {
       powerAutoDisplay.classList.add("hidden");
       powerAutoDisplay.style.display = "none";
@@ -4846,11 +4854,15 @@ async function connect() {
       state.bleDisconnectErrorMessage = null; // Clear error message
       state.autoPowerSet = false; // Reset auto-power flag
 
-      // Hide both power displays and clear label
+      // Show placeholder, hide both power displays and clear label
+      const powerPlaceholder = document.getElementById("powerPlaceholder");
       const powerAutoDisplay = document.getElementById("powerAutoDisplay");
       const powerManualSelection = document.getElementById("powerManualSelection");
       const powerLabelStatus = document.getElementById("powerLabelStatus");
 
+      if (powerPlaceholder) {
+        powerPlaceholder.style.display = "flex";
+      }
       if (powerAutoDisplay) {
         powerAutoDisplay.classList.add("hidden");
         powerAutoDisplay.style.display = "none";

index.html

@@ -120,6 +120,11 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
             Radio Power <span id="powerLabelStatus"></span>
           </label>
 
+          <!-- Placeholder when disconnected -->
+          <div id="powerPlaceholder" style="display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; background-color: rgba(71, 85, 105, 0.1);">
+            <span class="text-sm font-medium text-slate-500">Waiting for connection...</span>
+          </div>
+          
           <!-- Auto-configured power display (shown when auto-set) -->
           <div id="powerAutoDisplay" class="hidden" style="align-items: center; gap: 0.5rem;">
             <div style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #10b981; background-color: rgba(16, 185, 129, 0.1);">
@@ -151,9 +156,13 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
           </div>
         </div>
 
-        <!-- Permissions & Status -->
+        <!-- Device Info -->
         <div class="space-y-2">
-          <label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Permissions & Status</label>
+          <label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Device Info</label>
+          <div class="flex items-center gap-2 text-sm">
+            <span class="text-slate-300">Model:</span>
+            <span id="deviceModel" class="font-medium">-</span>
+          </div>
           <div class="flex flex-wrap gap-4 text-sm">
             <div class="flex items-center gap-2">
               <span class="text-slate-300">Location:</span>
@@ -164,10 +173,6 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
               <span id="channelInfo" class="font-medium">-</span>
             </div>
           </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="text-slate-300">Model:</span>
-            <span id="deviceModel" class="font-medium">-</span>
-          </div>
         </div>
       </section>
       </div>