feat: redesign settings page with sidebar navigation and improved layout

js/app.js

@@ -159,6 +159,10 @@ class App {
         });
         document.getElementById('pageConverter').style.display = page === 'converter' ? '' : 'none';
         document.getElementById('pageSettings').style.display = page === 'settings' ? '' : 'none';
+        
+        if (page === 'settings') {
+            this.switchSettingsSection('inbound');
+        }
 
         const pageViewer = document.getElementById('pageViewer');
         if (pageViewer) pageViewer.style.display = page === 'viewer' ? '' : 'none';
@@ -177,7 +181,19 @@ class App {
         if (window.lucide) try { lucide.createIcons(); } catch (e) { }
     }
 
+    // ─── Settings Sidebar Navigation ─────────────────────────────
+    switchSettingsSection(section) {
+        document.querySelectorAll('.settings-nav-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.section === section);
+        });
+        document.querySelectorAll('.settings-section').forEach(el => {
+            el.style.display = el.id === `settingsSection-${section}` ? '' : 'none';
+        });
+        if (window.lucide) try { lucide.createIcons(); } catch (e) { }
+    }
+
     // ─── Config ──────────────────────────────────────────────────────
+
     async loadConfigFromStorage() {
         let stored = null;