[feat](trx-frontend-http): add audio play/stop toggle button in header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js

@@ -7435,6 +7435,7 @@ function configureRxStream(nextInfo) {
   rxAudioBtn.style.borderColor = "#00d17f";
   rxAudioBtn.style.color = "#00d17f";
   audioStatus.textContent = "RX";
+  syncHeaderAudioBtn();
 }
 
 function extractAudioFrameChannels(frame) {
@@ -7597,6 +7598,7 @@ function startRxAudio() {
       opusDecoder = null;
     }
     nextPlayTime = 0;
+    syncHeaderAudioBtn();
   };
 
   audioWs.onerror = () => {
@@ -7620,6 +7622,7 @@ function stopRxAudio() {
   rxAudioBtn.style.color = "";
   audioStatus.textContent = "Off";
   setAudioLevel(0);
+  syncHeaderAudioBtn();
 }
 
 function startTxAudio() {
@@ -7743,6 +7746,23 @@ async function stopTxAudio() {
 rxAudioBtn.addEventListener("click", startRxAudio);
 txAudioBtn.addEventListener("click", startTxAudio);
 
+// Header play button mirrors the RX audio toggle.
+const headerAudioToggle = document.getElementById("header-audio-toggle");
+const headerAudioIconPath = document.getElementById("header-audio-icon-path");
+const PLAY_ICON = "M5 3.5v9l7-4.5z";
+const STOP_ICON = "M4 3.5h8v9H4z";
+function syncHeaderAudioBtn() {
+  if (!headerAudioToggle) return;
+  headerAudioToggle.classList.toggle("audio-active", rxActive);
+  if (headerAudioIconPath) {
+    headerAudioIconPath.setAttribute("d", rxActive ? STOP_ICON : PLAY_ICON);
+  }
+  headerAudioToggle.title = rxActive ? "Stop audio" : "Play audio";
+}
+if (headerAudioToggle) {
+  headerAudioToggle.addEventListener("click", startRxAudio);
+}
+
 const rxVolPct = document.getElementById("rx-vol-pct");
 const txVolPct = document.getElementById("tx-vol-pct");
 

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -58,6 +58,9 @@
         </div>
       </div>
       <div class="top-bar-actions">
+        <button id="header-audio-toggle" class="header-bar-btn header-audio-btn" aria-label="Toggle audio playback" title="Toggle audio playback">
+          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true"><path id="header-audio-icon-path" d="M5 3.5v9l7-4.5z"/></svg>
+        </button>
         <div class="header-rig-switch">
           <select id="header-rig-switch-select" aria-label="Select active rig"></select>
         </div>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -1026,6 +1026,25 @@ small { color: var(--text-muted); }
   gap: 0.6rem;
   min-width: 0;
 }
+.header-audio-btn {
+  width: 2rem;
+  height: 2rem;
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  background: var(--input-bg);
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.header-audio-btn.audio-active {
+  color: var(--accent-green);
+  border-color: var(--accent-green);
+}
 .header-rig-switch {
   display: flex;
   align-items: center;