settings: add horizontal section nav bar

Adds a scrollable row of section tabs at the top of the settings
overlay: Network · Audio · Interface · Bluetooth · System.
Each tab scrolls smoothly to its section and highlights as active.

src/web/ui-v2-dist/index.html

@@ -116,6 +116,12 @@ body{display:flex;flex-direction:column;max-height:100vh;user-select:none;-webki
 /* Settings */
 .setting-group{margin-bottom:12px}
 .setting-group-title{font-size:10px;font-weight:700;color:var(--text-sec);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;padding:0 4px}
+/* Settings section nav */
+.settings-nav{display:flex;gap:4px;overflow-x:auto;padding:0 0 8px 0;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}
+.settings-nav::-webkit-scrollbar{display:none}
+.sn-btn{flex-shrink:0;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font);font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s}
+.sn-btn:active{background:var(--panel);transform:scale(.95)}
+.sn-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(232,160,48,.08)}
 .setting-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--surface);border-radius:6px;border:1px solid var(--border);margin-bottom:3px;min-height:42px}
 .setting-row .sr-label{font-size:11px;font-weight:600}
 .setting-row .sr-value{font-size:10px;color:var(--text-sec)}
@@ -241,7 +247,15 @@ body{display:flex;flex-direction:column;max-height:100vh;user-select:none;-webki
 <div class="overlay" id="overlaySettings">
   <div class="overlay-hdr"><span class="overlay-title">⚙ Settings</span><button class="overlay-close" id="closeSettings">✕</button></div>
   <div class="overlay-body">
-    <div class="setting-group"><div class="setting-group-title">Network</div>
+    <!-- Settings section nav -->
+    <div class="settings-nav">
+      <button class="sn-btn active" data-section="network" onclick="scrollToSection('network')">Network</button>
+      <button class="sn-btn" data-section="audio" onclick="scrollToSection('audio')">Audio</button>
+      <button class="sn-btn" data-section="interface" onclick="scrollToSection('interface')">Interface</button>
+      <button class="sn-btn" data-section="bluetooth" onclick="scrollToSection('bluetooth')">Bluetooth</button>
+      <button class="sn-btn" data-section="system" onclick="scrollToSection('system')">System</button>
+    </div>
+    <div class="setting-group" id="section-network"><div class="setting-group-title">Network</div>
       <div class="setting-row"><span class="sr-label">🌐 Eth IP</span><span class="sr-value" id="netEthIp">—</span></div>
       <div class="setting-row"><span class="sr-label">🔗 MAC</span><span class="sr-value" id="netEthMac">—</span></div>
       <div class="setting-row"><span class="sr-label">🚪 Gateway</span><span class="sr-value" id="netGateway">—</span></div>
@@ -253,14 +267,14 @@ body{display:flex;flex-direction:column;max-height:100vh;user-select:none;-webki
       <div class="wifi-connect-pw" id="wifiConnectPw" style="display:none"><input type="password" id="wifiPw" placeholder="WiFi password"><button id="wifiConnectBtn">Connect</button></div>
       <div class="setting-row"><span class="sr-label">🔥 Hotspot</span><span class="sr-value" id="hotspotStatus">Off</span><button class="sr-action" id="hotspotToggle">Enable</button></div>
     </div>
-    <div class="setting-group"><div class="setting-group-title">Audio</div>
+    <div class="setting-group" id="section-audio"><div class="setting-group-title">Audio</div>
       <div class="setting-row"><span class="sr-label">🎛 Profile</span><span class="sr-value" id="audioProfileLabel">—</span></div>
       <div class="audio-profile-grid" id="audioProfileGrid"></div>
       <div class="setting-row"><span class="sr-label">🎸 Instrument</span><span class="sr-value" id="instrumentLabel">Guitar</span><button class="sr-action" id="instrumentCycleBtn" style="min-width:44px;padding:4px 10px">Cycle</button></div>
       <div class="setting-row"><span class="sr-label">🔄 Channel Mode</span><span class="sr-value" id="channelModeLabel">Dual Mono</span><button class="sr-action" id="channelModeToggle">Toggle</button></div>
       <div class="setting-row"><span class="sr-label">🔗 Routing</span><span class="sr-value" id="routingModeLabel">4CM</span><button class="sr-action" id="routingModeToggle">Toggle</button></div>
     </div>
-    <div class="setting-group"><div class="setting-group-title">🎚 Audio Interface</div>
+    <div class="setting-group" id="section-interface"><div class="setting-group-title">🎚 Audio Interface</div>
       <div class="setting-row"><span class="sr-label">🔌 Input Device</span><select id="audioInputDevice" style="flex:1;min-width:0;font-size:10px;padding:4px 6px;min-height:30px" onchange="setAudioDevice(this.value)"></select></div>
       <div class="ch-card" id="ch1Card" style="background:var(--card2);border-radius:8px;padding:6px 8px;margin:4px 0;border:2px solid rgba(232,160,48,.25)">
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
@@ -298,12 +312,12 @@ body{display:flex;flex-direction:column;max-height:100vh;user-select:none;-webki
       </div>
       <div style="font-size:9px;color:var(--text3);padding:2px 0">Dual Mono: each channel has independent presets. Same instrument = shared presets.</div>
     </div>
-    <div class="setting-group"><div class="setting-group-title">Bluetooth</div>
+    <div class="setting-group" id="section-bluetooth"><div class="setting-group-title">Bluetooth</div>
       <div class="setting-row"><span class="sr-label">🔵 Status</span><span class="sr-value" id="btStatus">—</span></div>
       <div class="setting-row"><span class="sr-label">🎛 MIDI</span><span class="sr-value" id="btMidiStatus">Off</span><button class="sr-action" id="btMidiToggle">Enable</button></div>
       <div class="setting-row"><span class="sr-label">🔓 Discoverable</span><span class="sr-value" id="btDiscStatus">On</span><button class="sr-action" id="btDiscToggle">Disable</button></div>
     </div>
-    <div class="setting-group"><div class="setting-group-title">System</div>
+    <div class="setting-group" id="section-system"><div class="setting-group-title">System</div>
       <div class="setting-row"><span class="sr-label">🔧 CPU</span><span class="sr-value" id="cpuLabel">0%</span></div>
       <div class="setting-row"><span class="sr-label">🌡 Temp</span><span class="sr-value" id="sysTemp">—</span></div>
       <div class="setting-row"><span class="sr-label">⏱ Uptime</span><span class="sr-value" id="sysUptime">—</span></div>
@@ -703,6 +717,15 @@ async function loadBtMidi(){
   }catch(e){}
 }
 
+// Settings section nav — scroll to section and highlight active button
+function scrollToSection(id){
+  const el=document.getElementById('section-'+id);
+  if(el) el.scrollIntoView({behavior:'smooth',block:'start'});
+  document.querySelectorAll('.sn-btn').forEach(b=>b.classList.remove('active'));
+  const btn=document.querySelector('.sn-btn[data-section="'+id+'"]');
+  if(btn) btn.classList.add('active');
+}
+
 async function loadHotspotStatus(){
   try{
     const hs=await API.hotspotStatus();