From cdbb47bf1be7d2915d0d5cf20e492562d486e98a Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 7 Apr 2026 17:05:14 -0500
Subject: [PATCH] Show 'Press ESC to close' hint on map and weather pages

Subtle hint appears in top-right corner (desktop only) when the
detail panel is open. Fades in when panel shows, fades out on ESC.
Hidden on mobile where the X button is more appropriate.
---
 assets/js/propagation_map_hook.js | 10 ++++++++++
 assets/js/weather_map_hook.js     |  9 +++++++++
 2 files changed, 19 insertions(+)

diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js
index 9350b4db..e1a30694 100644
--- a/assets/js/propagation_map_hook.js
+++ b/assets/js/propagation_map_hook.js
@@ -569,6 +569,7 @@ export const PropagationMap = {
         const merged = { ...basic, ...this.bandInfo, factors: null }
         this.detailPanel.innerHTML = buildLoadingHTML(merged)
         this.detailPanel.style.display = "block"
+        this.escHint.style.opacity = "1"
         this.positionDetailPanel()
         this.pushEvent("point_detail", { lat: e.latlng.lat, lon: e.latlng.lng })
       }
@@ -590,6 +591,7 @@ export const PropagationMap = {
         this.lastDetail = merged
         this.detailPanel.innerHTML = buildPopupHTML(merged, this.viewshedLoading)
         this.detailPanel.style.display = "block"
+        this.escHint.style.opacity = "1"
         this.positionDetailPanel()
 
         // Draw propagation reach polygon based on contiguous good cells
@@ -682,6 +684,13 @@ export const PropagationMap = {
       L.DomEvent.disableScrollPropagation(this.timelineEl)
     }
 
+    // ESC hint — shown on desktop when detail panel is visible
+    this.escHint = document.createElement("div")
+    this.escHint.className = "hidden md:block"
+    this.escHint.style.cssText = "position:absolute;top:12px;right:12px;z-index:1100;background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;opacity:0;transition:opacity 0.2s;pointer-events:none;"
+    this.escHint.textContent = "Press ESC to close"
+    this.el.appendChild(this.escHint)
+
     // Escape key closes detail panel and range circles
     document.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
@@ -692,6 +701,7 @@ export const PropagationMap = {
         this.rangeCircles.clearLayers()
         this.clickedLatLng = null
         this.lastDetail = null
+        this.escHint.style.opacity = "0"
       }
     })
 
diff --git a/assets/js/weather_map_hook.js b/assets/js/weather_map_hook.js
index 8b08807e..17d2837d 100644
--- a/assets/js/weather_map_hook.js
+++ b/assets/js/weather_map_hook.js
@@ -300,10 +300,18 @@ export const WeatherMap = {
       L.DomEvent.disableScrollPropagation(this.detailPanel)
     }
 
+    // ESC hint
+    this.escHint = document.createElement("div")
+    this.escHint.className = "hidden md:block"
+    this.escHint.style.cssText = "position:absolute;top:12px;right:12px;z-index:1100;background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;opacity:0;transition:opacity 0.2s;pointer-events:none;"
+    this.escHint.textContent = "Press ESC to close"
+    this.el.appendChild(this.escHint)
+
     this.handleEvent("point_detail", (detail) => {
       if (detail && detail.lat && this.detailPanel) {
         this.detailPanel.innerHTML = buildDetailHTML(detail)
         this.detailPanel.style.display = "block"
+        this.escHint.style.opacity = "1"
         this.positionDetailPanel()
       }
     })
@@ -324,6 +332,7 @@ export const WeatherMap = {
         this.detailPanel.style.display = "none"
         this.detailPanel.innerHTML = ""
         this.clickMarker.clearLayers()
+        this.escHint.style.opacity = "0"
       }
     }
     document.addEventListener("keydown", this._escHandler)