fix: replace broken draw_rectangle with two-tap rectangle for mobile support

draw_rectangle is not a built-in MapboxDraw mode and no plugin was loaded,
so rectangle drawing silently failed. Replaced with a two-tap approach:
first tap sets one corner, second tap sets the opposite corner. Works on
both touch (mobile) and click (desktop).

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

frontend/index.html

@@ -210,7 +210,7 @@
       <div class="form-group">
         <label class="label">Draw on map</label>
         <div class="draw-tools">
-          <button id="draw-rect-btn" class="draw-btn" type="button">Draw rectangle</button>
+          <button id="draw-rect-btn" class="draw-btn" type="button">Tap two corners</button>
         </div>
         <div id="aoi-area-display" class="aoi-area-display" style="display:none;"></div>
       </div>

frontend/js/map.js

@@ -94,6 +94,7 @@ class BasemapToggle {
 let _aoiMap = null;
 let _draw = null;
 let _onAoiChange = null; // callback(bbox | null)
+let _rectFirstCorner = null; // [lon, lat] or null — for two-tap rectangle
 
 /**
  * Initialise the AOI draw map inside containerId.
@@ -160,12 +161,62 @@ function getAllCoords(geometry) {
 }
 
 /**
- * Activate rectangle draw mode.
+ * Activate two-tap rectangle mode.
+ * First tap sets one corner, second tap sets the opposite corner.
+ * Works on both touch (mobile) and click (desktop).
  */
 export function activateDrawRect() {
-  if (!_draw) return;
-  _draw.deleteAll();
-  _draw.changeMode('draw_rectangle');
+  if (!_aoiMap) return;
+  if (_draw) _draw.deleteAll();
+  _rectFirstCorner = null;
+  _aoiMap.getCanvas().style.cursor = 'crosshair';
+  // Remove previous listener if any, then add fresh
+  _aoiMap.off('click', _onRectClick);
+  _aoiMap.on('click', _onRectClick);
+}
+
+function _onRectClick(e) {
+  const { lng, lat } = e.lngLat;
+
+  if (!_rectFirstCorner) {
+    // First tap — store corner
+    _rectFirstCorner = [lng, lat];
+    return;
+  }
+
+  // Second tap — build rectangle from two corners
+  const [lon1, lat1] = _rectFirstCorner;
+  const lon2 = lng;
+  const lat2 = lat;
+  _rectFirstCorner = null;
+  _aoiMap.getCanvas().style.cursor = '';
+  _aoiMap.off('click', _onRectClick);
+
+  const minLon = Math.min(lon1, lon2);
+  const maxLon = Math.max(lon1, lon2);
+  const minLat = Math.min(lat1, lat2);
+  const maxLat = Math.max(lat1, lat2);
+
+  const feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [[
+        [minLon, minLat],
+        [maxLon, minLat],
+        [maxLon, maxLat],
+        [minLon, maxLat],
+        [minLon, minLat],
+      ]],
+    },
+    properties: {},
+  };
+
+  if (_draw) {
+    _draw.deleteAll();
+    _draw.add(feature);
+    _onDrawUpdate();
+  }
 }
 
 /**