Refresh tabs/presets UI and add a mobile menu.

This improves navigation and profile workflows on smaller screens.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/static/help.js

@@ -3,6 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const helpBtn = document.getElementById('help-btn');
   const helpModal = document.getElementById('help-modal');
   const helpCloseBtn = document.getElementById('help-close-btn');
+  const mainMenuBtn = document.getElementById('main-menu-btn');
+  const mainMenuDropdown = document.getElementById('main-menu-dropdown');
 
   if (helpBtn && helpModal) {
     helpBtn.addEventListener('click', () => {
@@ -24,6 +26,32 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  // Mobile main menu: forward clicks to existing header buttons
+  if (mainMenuBtn && mainMenuDropdown) {
+    mainMenuBtn.addEventListener('click', () => {
+      mainMenuDropdown.classList.toggle('open');
+    });
+
+    mainMenuDropdown.addEventListener('click', (event) => {
+      const target = event.target;
+      if (target && target.matches('button[data-target]')) {
+        const id = target.getAttribute('data-target');
+        const realBtn = document.getElementById(id);
+        if (realBtn) {
+          realBtn.click();
+        }
+        mainMenuDropdown.classList.remove('open');
+      }
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!mainMenuDropdown.contains(event.target) && event.target !== mainMenuBtn) {
+        mainMenuDropdown.classList.remove('open');
+      }
+    });
+  }
+
   // Settings modal wiring (reusing existing settings endpoints).
   const settingsButton = document.getElementById('settings-btn');
   const settingsModal = document.getElementById('settings-modal');
@@ -145,11 +173,16 @@ document.addEventListener('DOMContentLoaded', () => {
   if (stationForm) {
     stationForm.addEventListener('submit', async (e) => {
       e.preventDefault();
+      const ssid = (document.getElementById('station-ssid').value || '').trim();
+      if (!ssid) {
+        showSettingsMessage('SSID is required', 'error');
+        return;
+      }
       const formData = {
-        ssid: document.getElementById('station-ssid').value,
-        password: document.getElementById('station-password').value,
-        ip: document.getElementById('station-ip').value || null,
-        gateway: document.getElementById('station-gateway').value || null,
+        ssid,
+        password: document.getElementById('station-password').value || '',
+        ip: (document.getElementById('station-ip').value || '').trim() || null,
+        gateway: (document.getElementById('station-gateway').value || '').trim() || null,
       };
       try {
         const response = await fetch('/settings/wifi/station', {
@@ -157,7 +190,12 @@ document.addEventListener('DOMContentLoaded', () => {
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(formData),
         });
-        const result = await response.json();
+        let result = {};
+        try {
+          result = await response.json();
+        } catch (_) {
+          result = { error: response.status === 400 ? 'Bad request (check SSID and connection)' : 'Request failed' };
+        }
         if (response.ok) {
           showSettingsMessage('WiFi station connected successfully!', 'success');
           setTimeout(loadStationStatus, 1000);