From e4487d90370b30aef34be78d7588198ab6c52d83 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Fri, 13 Mar 2026 14:29:29 +0100
Subject: [PATCH] [feat](trx-frontend-http): add map filter panel toggle

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 24 +++++++++++++
 .../trx-frontend-http/assets/web/index.html   |  1 +
 .../trx-frontend-http/assets/web/style.css    | 36 +++++++++++++++++++
 3 files changed, 61 insertions(+)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index a9922f9..b7e6d17 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -3748,6 +3748,7 @@ let selectedLocatorPulseRaf = null;
 let mapFullscreenListenerBound = false;
 let mapP2pRadioPathsEnabled = loadSetting("mapP2pRadioPathsEnabled", true) !== false;
 let mapDecodeContactPathsEnabled = loadSetting("mapDecodeContactPathsEnabled", true) !== false;
+let mapOverlayPanelVisible = loadSetting("mapOverlayPanelVisible", true) !== false;
 const stationMarkers = new Map();
 const locatorMarkers = new Map();
 const decodeContactPaths = new Map();
@@ -4630,6 +4631,18 @@ function updateMapFullscreenButton() {
   btn.textContent = mapIsFullscreen() ? "Exit Fullscreen" : "Fullscreen";
 }
 
+function applyMapOverlayPanelVisibility() {
+  const panel = document.querySelector("#map-stage .map-overlay-panel");
+  if (!panel) return;
+  panel.classList.toggle("is-hidden", !mapOverlayPanelVisible);
+}
+
+function updateMapOverlayToggleButton() {
+  const btn = document.getElementById("map-overlay-toggle-btn");
+  if (!btn) return;
+  btn.textContent = mapOverlayPanelVisible ? "Hide Filters" : "Show Filters";
+}
+
 async function toggleMapFullscreen() {
   const stage = mapStageEl();
   if (!stage) return;
@@ -4804,6 +4817,7 @@ function initAprsMap() {
   const mapP2pPathsToggleEl = document.getElementById("map-p2p-paths-toggle");
   const mapContactPathsToggleEl = document.getElementById("map-contact-paths-toggle");
   const fullscreenBtn = document.getElementById("map-fullscreen-btn");
+  const overlayToggleBtn = document.getElementById("map-overlay-toggle-btn");
   if (locatorPhaseEl) {
     locatorPhaseEl.addEventListener("click", (e) => {
       const btn = e.target.closest(".map-locator-phase-btn[data-phase]");
@@ -4881,6 +4895,16 @@ function initAprsMap() {
     });
     updateMapFullscreenButton();
   }
+  applyMapOverlayPanelVisibility();
+  updateMapOverlayToggleButton();
+  if (overlayToggleBtn) {
+    overlayToggleBtn.addEventListener("click", () => {
+      mapOverlayPanelVisible = !mapOverlayPanelVisible;
+      saveSetting("mapOverlayPanelVisible", mapOverlayPanelVisible);
+      applyMapOverlayPanelVisibility();
+      updateMapOverlayToggleButton();
+    });
+  }
   if (!mapFullscreenListenerBound) {
     const onFullscreenChange = () => {
       updateMapFullscreenButton();
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 263fa8c..19f187a 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -695,6 +695,7 @@
           </div>
         </div>
         <button type="button" id="map-fullscreen-btn" class="map-fullscreen-btn">Fullscreen</button>
+        <button type="button" id="map-overlay-toggle-btn" class="map-overlay-toggle-btn">Hide Filters</button>
         <div id="aprs-map"></div>
       </div>
     </div>
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index b44b72c..1c0638b 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -1254,6 +1254,13 @@ small { color: var(--text-muted); }
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   overflow: auto;
+  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
+}
+.map-overlay-panel.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.25rem);
+  pointer-events: none;
 }
 .map-fullscreen-btn {
   position: absolute;
@@ -1280,6 +1287,31 @@ small { color: var(--text-muted); }
   border-color: color-mix(in srgb, var(--accent-green) 34%, var(--border-light));
   color: var(--text-heading);
 }
+.map-overlay-toggle-btn {
+  position: absolute;
+  top: 3rem;
+  right: 0.7rem;
+  z-index: 410;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.9rem;
+  padding: 0.18rem 0.65rem;
+  border-radius: 6px;
+  border: 1px solid color-mix(in srgb, var(--border-light) 74%, transparent);
+  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
+  color: var(--text);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.map-overlay-toggle-btn:hover {
+  border-color: color-mix(in srgb, var(--accent-green) 34%, var(--border-light));
+  color: var(--text-heading);
+}
 #map-stage:fullscreen,
 #map-stage:-webkit-full-screen,
 #map-stage.map-fake-fullscreen {
@@ -2283,6 +2315,10 @@ button:focus-visible, input:focus-visible, select:focus-visible {
     padding: 0.6rem 0.65rem;
     border-radius: 0.7rem;
   }
+  .map-overlay-toggle-btn {
+    top: 3rem;
+    right: 0.55rem;
+  }
   .map-locator-filter-group {
     align-items: stretch;
   }