ESC key resets map zoom on /map and /communities (#477)

Pressing Escape now does the same thing as the reset-view button on both
maps. Ignored while typing in a form field.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: bryceerobertson

src/app/communities/CommunitiesMap.tsx

@@ -107,6 +107,17 @@ export default function CommunitiesMap({ communities }: CommunitiesMapProps) {
     const resizeObserver = new ResizeObserver(() => map.resize())
     resizeObserver.observe(mapContainer)
 
+    const resetMapView = () => {
+      map.flyTo({
+        center: initialCenter,
+        zoom: initialZoom,
+        bearing: 0,
+        pitch: 0,
+        duration: 500,
+        essential: true,
+      })
+    }
+
     // Repurpose Mapbox's compass button as a "reset map view" button.
     // addControl synchronously inserts the compass into the DOM, so this
     // runs reliably without depending on the map 'load' event or pin image
@@ -131,14 +142,7 @@ export default function CommunitiesMap({ communities }: CommunitiesMapProps) {
         ev => {
           ev.preventDefault()
           ev.stopPropagation()
-          map.flyTo({
-            center: initialCenter,
-            zoom: initialZoom,
-            bearing: 0,
-            pitch: 0,
-            duration: 500,
-            essential: true,
-          })
+          resetMapView()
         },
         true
       )
@@ -527,15 +531,32 @@ export default function CommunitiesMap({ communities }: CommunitiesMapProps) {
         }
       }
 
+      // ESC resets the view, same as the reset button. Skip while typing in
+      // a form field — ESC there shouldn't yank the map.
+      const handleEscKey = function (e: KeyboardEvent) {
+        if (e.key !== 'Escape') return
+        const target = e.target as HTMLElement | null
+        if (
+          target &&
+          (target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.isContentEditable)
+        )
+          return
+        resetMapView()
+      }
+
       tooltip.addEventListener('click', handleTooltipClick)
       document.addEventListener('click', handleDocumentClick)
+      document.addEventListener('keydown', handleEscKey)
 
       // Store cleanup function for useEffect teardown
       cleanupRef.current = () => {
         // A pending hover dwell must not fire after unmount.
         cancelHoverTimer()
         tooltip.removeEventListener('click', handleTooltipClick)
         document.removeEventListener('click', handleDocumentClick)
+        document.removeEventListener('keydown', handleEscKey)
         resizeObserver.disconnect()
       }
     })

src/app/map/D3Map.tsx

@@ -497,11 +497,28 @@ export default function D3Map({ orgs }: D3MapProps) {
         svg.transition().duration(300).call(zoom.scaleBy, 0.75)
       }
     }
+    const resetView = () => {
+      svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity)
+    }
     if (recenter) {
-      recenter.onclick = () => {
-        svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity)
-      }
+      recenter.onclick = resetView
+    }
+
+    // ESC resets the view, same as the recenter button. Skip while typing in
+    // a form field — ESC there shouldn't yank the map.
+    const handleEscKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      const target = e.target as HTMLElement | null
+      if (
+        target &&
+        (target.tagName === 'INPUT' ||
+          target.tagName === 'TEXTAREA' ||
+          target.isContentEditable)
+      )
+        return
+      resetView()
     }
+    document.addEventListener('keydown', handleEscKey)
 
     // Mobile: tapping the tooltip opens the stashed link in a new tab.
     const handleTooltipClick = (e: MouseEvent) => {
@@ -548,6 +565,7 @@ export default function D3Map({ orgs }: D3MapProps) {
       svgNode.removeEventListener('wheel', preventPageZoom)
       if (tooltipEl) tooltipEl.removeEventListener('click', handleTooltipClick)
       document.removeEventListener('click', handleDocumentClick)
+      document.removeEventListener('keydown', handleEscKey)
       if (container) {
         d3.select(container).select('svg').remove()
       }