[feat](trx-frontend-http): give digital modes a decoder sidebar

Thirteen decoders in a horizontal strip needed a scroller on anything but a wide window, and the open one was marked by a single underline among thirteen. They are a list down the left now, all visible at once, each keeping the state dot it already carried, with the panel for the selected one filling the rest of the width. No script changed: the sub-tab wiring, the aria roles, the decoder picker and the state-dot observers all work on the same markup, so this is layout only. Below 760px the sidebar gives way to the picker that already existed there. That path needed align-content: the tab panel fills the page height and a grid stretches its rows to match, which handed the picker a 218px row and left a 189px gap under it. The tab icon was the signal-strength bars, which is what the S-meter shows two rows above it; a pulse train says digital modes instead. Signed-off-by: Stan Grams <sjg@haxx.space>
2026-08-04 08:01:22 +02:00
parent 9f495021f0
commit c527f20a88
3 changed files with 92 additions and 2 deletions
@@ -23,6 +23,33 @@ try {
  await page.locator("summary", { hasText: "Audio controls" }).click();
  assert.equal(await page.locator("#rx-audio-btn").count(), 1);

+  // Digital modes: the decoders are a list down the side, and the panel for the
+  // selected one sits beside it. A horizontal strip put thirteen decoders in a
+  // scroller and marked the open one with a single underline among them.
+  await page.locator('.tab[data-tab="digital-modes"]').click();
+  await page.locator("#tab-digital-modes").waitFor({ state: "visible" });
+  await page.locator('.sub-tab[data-subtab="ft8"]').click();
+  await page.waitForTimeout(250);
+  const digital = await page.evaluate(() => {
+    const bar = document.querySelector("#tab-digital-modes > .sub-tab-bar").getBoundingClientRect();
+    const panel = document.getElementById("subtab-ft8").getBoundingClientRect();
+    const shown = [...document.querySelectorAll("#tab-digital-modes > .sub-tab-panel")]
+      .filter((element) => getComputedStyle(element).display !== "none")
+      .map((element) => element.id);
+    return {
+      sidebarIsColumn: bar.height > bar.width,
+      panelBesideSidebar: Math.round(panel.left) >= Math.round(bar.right),
+      panelsShown: shown,
+      decoders: document.querySelectorAll("#tab-digital-modes > .sub-tab-bar .sub-tab").length,
+    };
+  });
+  assert.ok(digital.sidebarIsColumn, "the decoder list is not a sidebar");
+  assert.ok(digital.panelBesideSidebar, "the decoder panel does not sit beside the sidebar");
+  assert.deepEqual(digital.panelsShown, ["subtab-ft8"], `panels shown: ${JSON.stringify(digital.panelsShown)}`);
+  assert.ok(digital.decoders >= 10, `only ${digital.decoders} decoders in the sidebar`);
+  await page.locator('.tab[data-tab="main"]').click();
+  await page.waitForTimeout(200);
+
  // Map links from decode rows, before anything has opened the Map tab. The
  // lazy map module used to install these globals itself, so an AIS pin threw
  // "not a function" and an APRS link silently did nothing until the tab had