feat(wifi): network detail panel replaces slide-up drawer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/index.css

@@ -4018,87 +4018,110 @@ header h1 .tagline {
 .wifi-security-ring-name { color: var(--text-dim); flex: 1; }
 .wifi-security-ring-count { color: var(--text-primary); font-weight: 600; }
 
-/* WiFi Detail Drawer */
-.wifi-detail-drawer {
-    display: none;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.wifi-detail-drawer.open {
-    display: block;
-}
-
-.wifi-detail-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 15px;
-    background: var(--bg-tertiary);
-    border-bottom: 1px solid var(--border-color);
-}
-
-.wifi-detail-title {
+/* WiFi Detail Panel */
+.wifi-detail-inner {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 10px;
+    padding: 12px;
+    height: 100%;
 }
 
+.wifi-detail-head { display: flex; flex-direction: column; gap: 3px; }
+
 .wifi-detail-essid {
     font-size: 14px;
     font-weight: 600;
     color: var(--text-primary);
+    word-break: break-word;
 }
 
 .wifi-detail-bssid {
-    font-size: 11px;
+    font-size: 10px;
     font-family: monospace;
     color: var(--text-dim);
 }
 
-.wifi-detail-close {
-    background: none;
-    border: none;
+.wifi-detail-signal-bar {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 8px 10px;
+}
+
+.wifi-detail-signal-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 9px;
     color: var(--text-dim);
-    font-size: 20px;
-    cursor: pointer;
-    padding: 0 5px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
 }
 
-.wifi-detail-close:hover {
-    color: var(--accent-red);
+.wifi-detail-signal-track {
+    height: 6px;
+    background: var(--bg-elevated);
+    border-radius: 3px;
+    overflow: hidden;
 }
 
-.wifi-detail-content {
-    padding: 15px;
+.wifi-detail-signal-fill {
+    height: 100%;
+    border-radius: 3px;
+    background: linear-gradient(90deg, var(--accent-green), var(--accent-orange));
+    transition: width 0.3s;
 }
 
 .wifi-detail-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
 }
 
 .wifi-detail-stat {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 6px 8px;
 }
 
 .wifi-detail-stat .label {
-    font-size: 10px;
+    display: block;
+    font-size: 9px;
     color: var(--text-dim);
     text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 2px;
 }
 
 .wifi-detail-stat .value {
-    font-size: 13px;
-    font-weight: 500;
+    font-size: 12px;
+    font-weight: 600;
     color: var(--text-primary);
 }
 
+.wifi-detail-actions {
+    display: flex;
+    gap: 6px;
+    margin-top: auto;
+    padding-top: 4px;
+}
+
+.wifi-detail-close-btn {
+    padding: 7px 12px;
+    font-family: inherit;
+    font-size: 10px;
+    background: var(--bg-secondary);
+    color: var(--text-dim);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: color 0.15s;
+}
+
+.wifi-detail-close-btn:hover { color: var(--text-primary); }
+
 .wifi-detail-clients {
     margin-top: 15px;
     padding-top: 15px;
@@ -4225,9 +4248,6 @@ header h1 .tagline {
         grid-column: span 1;
     }
 
-    .wifi-detail-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
 }
 
 /* Bluetooth Layout Container */

static/js/modes/wifi.js

@@ -216,8 +216,8 @@ const WiFiMode = (function() {
             zoneNear: document.getElementById('wifiZoneNear'),
             zoneFar: document.getElementById('wifiZoneFar'),
 
-            // Detail drawer
-            detailDrawer: document.getElementById('wifiDetailDrawer'),
+            // Detail panel
+            detailSignalFill: document.getElementById('wifiDetailSignalFill'),
             detailEssid: document.getElementById('wifiDetailEssid'),
             detailBssid: document.getElementById('wifiDetailBssid'),
             detailRssi: document.getElementById('wifiDetailRssi'),
@@ -1252,12 +1252,17 @@ const WiFiMode = (function() {
     function selectNetwork(bssid) {
         selectedBssid = bssid;
 
-        // Update row selection
+        // Highlight selected row
         elements.networkList?.querySelectorAll('.network-row').forEach(row => {
             row.classList.toggle('selected', row.dataset.bssid === bssid);
         });
 
-        // Update detail panel
+        // Show detail in right panel
+        if (elements.heatmapView) elements.heatmapView.style.display = 'none';
+        if (elements.detailView)  elements.detailView.style.display  = 'flex';
+        if (elements.rightPanelTitle) elements.rightPanelTitle.textContent = 'Network Detail';
+        if (elements.detailBackBtn)   elements.detailBackBtn.style.display = 'inline-block';
+
         updateDetailPanel(bssid);
 
         // Highlight on radar
@@ -1272,7 +1277,6 @@ const WiFiMode = (function() {
 
     function updateDetailPanel(bssid, options = {}) {
         const { refreshClients = true } = options;
-        if (!elements.detailDrawer) return;
 
         const network = networks.get(bssid);
         if (!network) {
@@ -1280,7 +1284,7 @@ const WiFiMode = (function() {
             return;
         }
 
-        // Update drawer header
+        // Update detail header
         if (elements.detailEssid) {
             elements.detailEssid.textContent = network.display_name || network.essid || '[Hidden SSID]';
         }
@@ -1314,8 +1318,12 @@ const WiFiMode = (function() {
             elements.detailFirstSeen.textContent = formatTime(network.first_seen);
         }
 
-        // Show the drawer
-        elements.detailDrawer.classList.add('open');
+        // Update signal bar
+        if (elements.detailSignalFill) {
+            const rssi = network.rssi_current;
+            const pct = rssi != null ? Math.max(0, Math.min(100, (rssi + 100) / 80 * 100)) : 0;
+            elements.detailSignalFill.style.width = pct.toFixed(1) + '%';
+        }
 
         // Fetch and display clients for this network
         if (refreshClients) {
@@ -1325,12 +1333,17 @@ const WiFiMode = (function() {
 
     function closeDetail() {
         selectedBssid = null;
-        if (elements.detailDrawer) {
-            elements.detailDrawer.classList.remove('open');
-        }
+
+        // Deselect all rows
         elements.networkList?.querySelectorAll('.network-row').forEach(row => {
             row.classList.remove('selected');
         });
+
+        // Restore heatmap in right panel
+        if (elements.detailView)  elements.detailView.style.display  = 'none';
+        if (elements.heatmapView) elements.heatmapView.style.display = 'flex';
+        if (elements.rightPanelTitle) elements.rightPanelTitle.textContent = 'Channel Heatmap';
+        if (elements.detailBackBtn)   elements.detailBackBtn.style.display = 'none';
     }
 
     // ==========================================================================