[feat](trx-frontend-http): refine header controls and overlays

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>

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

@@ -248,6 +248,7 @@ function applyAuthRestrictions() {
 
 function applyCapabilities(caps) {
   if (!caps) return;
+  lastHasTx = !!caps.tx;
 
   // PTT / TX controls
   const pttBtn = document.getElementById("ptt-btn");
@@ -330,14 +331,12 @@ const overviewCanvas = document.getElementById("overview-canvas");
 const overviewLabel = document.getElementById("overview-label");
 const overviewPeakHoldEl = document.getElementById("overview-peak-hold");
 const themeToggleBtn = document.getElementById("theme-toggle");
-const rigSwitchSelect = document.getElementById("rig-switch-select");
-const rigSwitchBtn = document.getElementById("rig-switch-btn");
 const headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
-const headerRigSwitchBtn = document.getElementById("header-rig-switch-btn");
 let overviewPeakHoldMs = Number(loadSetting("overviewPeakHoldMs", 2000));
 
 let lastControl;
 let lastTxEn = null;
+let lastHasTx = true;
 let lastRendered = null;
 let hintTimer = null;
 let sigMeasuring = false;
@@ -451,10 +450,7 @@ function applyRigList(activeRigId, rigIds, displayNames) {
     if (aboutActive) aboutActive.textContent = activeRigId;
   }
   const disableSwitch = lastRigIds.length === 0 || authRole === "rx";
-  populateRigPicker(rigSwitchSelect, lastRigIds, activeRigId, lastRigIds.length === 0);
+  populateRigPicker(headerRigSwitchSelect, lastRigIds, activeRigId, disableSwitch);
-  populateRigPicker(headerRigSwitchSelect, lastRigIds, activeRigId, lastRigIds.length === 0);
-  if (rigSwitchBtn) rigSwitchBtn.disabled = disableSwitch;
-  if (headerRigSwitchBtn) headerRigSwitchBtn.disabled = disableSwitch;
   updateRigSubtitle(activeRigId);
 }
 
@@ -1195,7 +1191,7 @@ function render(update) {
   lockBtn.textContent = lastLocked ? "Unlock" : "Lock";
 
   const tx = update.status && update.status.tx ? update.status.tx : null;
-  txMeters.style.display = "";
+  txMeters.style.display = lastHasTx ? "" : "none";
   if (tx && typeof tx.power === "number") {
     const pct = Math.max(0, Math.min(100, tx.power));
     pwrBar.style.width = `${pct}%`;
@@ -1339,8 +1335,7 @@ async function switchRigFromSelect(selectEl) {
     showHint("Unknown rig", 1500);
     return;
   }
-  if (rigSwitchBtn) rigSwitchBtn.disabled = true;
+  selectEl.disabled = true;
-  if (headerRigSwitchBtn) headerRigSwitchBtn.disabled = true;
   showHint("Switching rig…");
   try {
     await postPath(`/select_rig?rig_id=${encodeURIComponent(selectEl.value)}`);
@@ -1351,13 +1346,12 @@ async function switchRigFromSelect(selectEl) {
     console.error(err);
   } finally {
     const disableSwitch = lastRigIds.length === 0 || authRole === "rx";
-    if (rigSwitchBtn) rigSwitchBtn.disabled = disableSwitch;
+    selectEl.disabled = disableSwitch;
-    if (headerRigSwitchBtn) headerRigSwitchBtn.disabled = disableSwitch;
   }
 }
 
-if (headerRigSwitchBtn) {
+if (headerRigSwitchSelect) {
-  headerRigSwitchBtn.addEventListener("click", () => switchRigFromSelect(headerRigSwitchSelect));
+  headerRigSwitchSelect.addEventListener("change", () => { switchRigFromSelect(headerRigSwitchSelect); });
 }
 
 powerBtn.addEventListener("click", async () => {

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

@@ -20,20 +20,21 @@
       <div class="top-bar-actions">
         <div class="header-rig-switch">
           <select id="header-rig-switch-select" aria-label="Select active rig"></select>
-          <button id="header-rig-switch-btn" type="button">Switch Rig</button>
         </div>
         <button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
         <button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
       </div>
     </div>
     <div class="header">
-      <div class="header-left">
+      <div class="header-main">
-        <img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
+        <div class="header-left">
-      </div>
+          <img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
-      <div class="header-text">
+        </div>
-        <div class="title"><span id="rig-title">trx-rs</span></div>
+        <div class="header-text">
-        <div class="subtitle" id="server-subtitle"></div>
+          <div class="title"><span id="rig-title">trx-rs</span></div>
-        <div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
+          <div class="subtitle" id="server-subtitle"></div>
+          <div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
+        </div>
       </div>
     </div>
     <div class="overview-strip">

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

@@ -377,26 +377,28 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
 }
 small { color: var(--text-muted); }
 .header {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  column-gap: 1rem;
   margin-bottom: 0;
   padding: 0.25rem 0 0.15rem;
   position: relative;
   z-index: 3;
 }
-.header-text {
+.header-main {
-  width: auto;
+  display: inline-flex;
-  min-width: 0;
+  align-items: center;
-  flex: 1 1 auto;
+  gap: 0.9rem;
-  padding: 0.35rem 0.65rem 0.4rem;
+  max-width: min(100%, 46rem);
-  border-radius: 0.8rem;
+  padding: 0.35rem 0.8rem 0.4rem 0.45rem;
+  border-radius: 0.95rem;
   background: color-mix(in srgb, var(--card-bg) 56%, transparent);
   backdrop-filter: blur(12px) saturate(125%);
   -webkit-backdrop-filter: blur(12px) saturate(125%);
   box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
 }
+.header-text {
+  width: auto;
+  min-width: 0;
+  flex: 0 1 auto;
+}
 .title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
 .overview-strip {
   width: 100%;
@@ -680,6 +682,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   .freq-inline { gap: 0.5rem; }
   .freq-inline { flex-wrap: wrap; }
   .header-text { width: auto; min-width: 0; flex: 0 1 auto; }
+  .header-main { max-width: 100%; padding-right: 0.65rem; }
   .header-left { justify-content: flex-end; }
   .tab-bar { flex-wrap: wrap; }
   .top-bar-actions { width: 100%; justify-content: space-between; }