feat: wire size toggles and click-to-place in app.js

frontend/js/app.js

@@ -4,7 +4,7 @@
  */
 
 import { submitJob, getJob, requestMagicLink, verifyToken, listJobs } from './api.js';
-import { initAoiMap, activateDrawRect, geocode, loadGeoJSON, initResultsMap } from './map.js';
+import { initAoiMap, setAoiSize, geocode, initResultsMap } from './map.js';
 import { initIndicators, getSelectedIds } from './indicators.js';
 import { renderResults } from './results.js';
 
@@ -167,15 +167,20 @@ function setupDefineArea() {
 
   const continueBtn   = document.getElementById('aoi-continue-btn');
   const geocoderInput = document.getElementById('geocoder-input');
-  const rectBtn       = document.getElementById('draw-rect-btn');
-  const uploadInput   = document.getElementById('geojson-upload');
-  const uploadLabel   = document.getElementById('upload-label');
   const areaDisplay   = document.getElementById('aoi-area-display');
-
-  const AOI_MAX_KM2 = 10000;
+  const sizeButtons   = document.querySelectorAll('.size-toggle-btn');
 
   continueBtn.disabled = true;
 
+  // Size toggle buttons
+  sizeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      sizeButtons.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      setAoiSize(parseInt(btn.dataset.km2));
+    });
+  });
+
   // Init map once
   if (!_aoiMapInit) {
     _aoiMapInit = true;
@@ -183,14 +188,10 @@ function setupDefineArea() {
       _currentBbox = bbox;
       if (bbox) {
         const area = _bboxAreaKm2(bbox);
-        const overLimit = area > AOI_MAX_KM2;
         areaDisplay.style.display = '';
         areaDisplay.textContent = `${Math.round(area).toLocaleString()} km²`;
-        areaDisplay.className = 'aoi-area-display' + (overLimit ? ' aoi-area-over' : '');
-        if (overLimit) {
-          areaDisplay.textContent += ` — exceeds ${AOI_MAX_KM2.toLocaleString()} km² limit`;
-        }
-        continueBtn.disabled = overLimit;
+        areaDisplay.className = 'aoi-area-display';
+        continueBtn.disabled = false;
       } else {
         areaDisplay.style.display = 'none';
         continueBtn.disabled = true;
@@ -198,7 +199,7 @@ function setupDefineArea() {
     });
   }
 
-  // Geocoder
+  // Geocoder — auto-places AOI
   geocoderInput.addEventListener('keydown', async (e) => {
     if (e.key !== 'Enter') return;
     const query = geocoderInput.value.trim();
@@ -210,29 +211,6 @@ function setupDefineArea() {
     }
   });
 
-  // Draw button
-  rectBtn.addEventListener('click', () => {
-    rectBtn.classList.add('active');
-    activateDrawRect();
-  });
-
-  // GeoJSON upload
-  uploadInput.addEventListener('change', (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = (ev) => {
-      try {
-        const geojson = JSON.parse(ev.target.result);
-        loadGeoJSON(geojson);
-        uploadLabel.textContent = file.name;
-      } catch {
-        showError('Invalid GeoJSON file.');
-      }
-    };
-    reader.readAsText(file);
-  });
-
   // Date defaults: last 12 months
   const today = new Date();
   const yearAgo = new Date(today);