[fix](trx-frontend-http): move the map's fullscreen and filter toggles into the bar

Fullscreen and Hide Filters floated in their own block over the map's
top-right corner, separate from the filter bar they sit beside.

Put them at the right-hand end of the bar, behind a separator. What made
this awkward before is that Hide Filters cannot live inside the thing it
hides, so the collapse now applies to the filters alone: the bar keeps its
two controls and shrinks to them at the map's right edge, leaving the whole
map visible and the way back one click away.

Fixes #38

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/map-core.ts

@@ -1637,7 +1637,10 @@ const mapWindow = window as unknown as MapWindow;
   function applyMapOverlayPanelVisibility() {
     const panel = document.querySelector("#map-stage .map-overlay-panel");
     if (!panel) return;
-    panel.classList.toggle("is-hidden", !mapOverlayPanelVisible);
+    // Only the filters collapse. The bar itself stays, because it carries the
+    // button that brings them back.
+    panel.classList.toggle("filters-hidden", !mapOverlayPanelVisible);
+    panel.querySelector(".map-overlay-filters")?.classList.toggle("is-hidden", !mapOverlayPanelVisible);
   }
 
   function updateMapOverlayToggleButton() {

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs

@@ -225,9 +225,11 @@ try {
 
 // The map's filter panel is a bar across the top of the map, not a window
 // sitting on it: it has to stay one or two rows tall, span most of the width,
-// and keep clear of the things that share the map's corners — Leaflet's zoom
-// buttons, the Fullscreen/Hide Filters controls, and the band legend. A panel
-// that grew a column would cover the map it filters.
+// and keep clear of what shares the map's corners — Leaflet's zoom buttons and
+// the band legend. A panel that grew a column would cover the map it filters.
+// Fullscreen and the filter toggle ride at the bar's right-hand end, so only
+// the filters collapse: the bar itself has to survive Hide Filters, or there
+// is nothing left to click to bring them back.
 const mapFixture = await startWebFixture({ spectrum: true });
 const mapView = await startBrowser(chromium);
 try {
@@ -242,7 +244,6 @@ try {
       const panel = document.querySelector(".map-overlay-panel");
       const stage = box(document.getElementById("map-stage"));
       const zoom = box(document.querySelector("#aprs-map .leaflet-control-zoom"));
-      const corner = box(document.querySelector(".map-corner-controls"));
       const legend = box(document.getElementById("map-band-legend"));
       const panelBox = box(panel);
       const hits = (a, b) => !!a && !!b
@@ -252,8 +253,10 @@ try {
         height: Math.round(panelBox.height),
         outsideStage: panelBox.right > stage.right + 1 || panelBox.bottom > stage.bottom + 1,
         hitsZoom: hits(panelBox, zoom),
-        hitsCorner: hits(panelBox, corner),
         hitsLegend: hits(panelBox, legend),
+        // Both controls belong to the bar now, not to a floating corner block.
+        actionsInBar: [...panel.querySelectorAll(".map-overlay-actions button")]
+          .map((button) => button.id).join(","),
         clipped: panel.scrollWidth > panel.clientWidth + 1 || panel.scrollHeight > panel.clientHeight + 1,
       };
     });
@@ -261,21 +264,41 @@ try {
     assert.ok(bar.height <= 140, `the filter bar is ${bar.height}px tall at ${width}px, not a bar`);
     assert.equal(bar.outsideStage, false, `the filter bar runs off the map at ${width}px`);
     assert.equal(bar.hitsZoom, false, `the filter bar covers the zoom buttons at ${width}px`);
-    assert.equal(bar.hitsCorner, false, `the filter bar covers the map controls at ${width}px`);
+    assert.equal(bar.actionsInBar, "map-fullscreen-btn,map-overlay-toggle-btn",
+      `the bar carries "${bar.actionsInBar}" at ${width}px`);
     assert.equal(bar.hitsLegend, false, `the filter bar covers the band legend at ${width}px`);
     assert.equal(bar.clipped, false, `the filter bar is clipping its own controls at ${width}px`);
   }
 
-  // Hiding it still works, and gives the whole map back.
+  // Hiding gives the map back, but leaves the bar itself — collapsed to its
+  // two controls at the right-hand edge — so the filters can be brought back.
   await mapView.page.locator("#map-overlay-toggle-btn").click();
   await mapView.page.waitForTimeout(400);
-  const toggled = await mapView.page.evaluate(() => ({
-    hidden: document.querySelector(".map-overlay-panel").classList.contains("is-hidden"),
-    label: document.getElementById("map-overlay-toggle-btn").textContent.trim(),
-  }));
-  assert.equal(toggled.hidden, true, "the filter bar stayed up after Hide Filters");
+  const toggled = await mapView.page.evaluate(() => {
+    const panel = document.querySelector(".map-overlay-panel");
+    const stage = document.getElementById("map-stage").getBoundingClientRect();
+    const panelBox = panel.getBoundingClientRect();
+    const visible = (id) => document.getElementById(id).getBoundingClientRect().width > 0;
+    return {
+      filtersHidden: panel.querySelector(".map-overlay-filters").classList.contains("is-hidden"),
+      widthPct: Math.round((panelBox.width / stage.width) * 100),
+      rightGap: Math.round(stage.right - panelBox.right),
+      label: document.getElementById("map-overlay-toggle-btn").textContent.trim(),
+      togglesVisible: visible("map-fullscreen-btn") && visible("map-overlay-toggle-btn"),
+    };
+  });
+  assert.equal(toggled.filtersHidden, true, "the filters stayed up after Hide Filters");
+  assert.equal(toggled.togglesVisible, true, "Hide Filters took its own button down with it");
+  assert.ok(toggled.widthPct < 30, `the collapsed bar still covers ${toggled.widthPct}% of the map`);
+  assert.ok(toggled.rightGap < 30, `the collapsed bar sits ${toggled.rightGap}px from the map's edge`);
   assert.equal(toggled.label, "Show Filters", `the toggle still reads "${toggled.label}"`);
 
+  await mapView.page.locator("#map-overlay-toggle-btn").click();
+  await mapView.page.waitForTimeout(400);
+  const restored = await mapView.page.evaluate(() =>
+    !document.querySelector(".map-overlay-filters").classList.contains("is-hidden"));
+  assert.equal(restored, true, "Show Filters did not bring the filters back");
+
   assert.deepEqual(mapView.runtimeErrors, []);
 } finally {
   await mapView.browser.close();