Add polygon notes (Area mode) to the user overlay tool

notes.js: Point/Area mode toggle mirroring measure.js's UX — Area
mode accumulates clicked vertices with a live dashed-preview polygon
(own small preview source/layers), a Finish button once 3+ corners
are placed, then the same save form as Point mode.

gpx.js's _addLayers now also renders Polygon features from a file's
"lines" source (fill + outline, filtered by geometry-type — the
existing line layer already only draws LineString, so this is just
two more layers on the same source, not a new bucket) with
popup-on-click like a waypoint, not the track line's hover-summary/
profile-panel behavior. Without this a saved polygon wouldn't have
rendered back on reload.

Fixed along the way: .notes-panel__form/.notes-panel__modes both set
their own `display`, which silently wins over the browser's default
`[hidden] { display: none }` (author styles always beat user-agent
ones) — same gotcha .gpx-panel__action[hidden] already has a comment
about. The form was never actually invisible before being opened.

Verified live: real polygon file (fill/outline render, click ->
popup) and the full Area-mode draw flow (mode switch, live preview,
Finish, form) via headless Chrome. Full test suite: 104 runs, 0
failures — one new backend test confirms a Polygon feature round-
trips through POST /api/gpx/notes.

Known gap (noted in TODO.adoc): the category filter matrix only
re-slices the points source, so toggling "Note" off hides point notes
but not polygon ones.

public/js/gpx.js

@@ -540,6 +540,29 @@ export class GpxPanelControl {
     });
     this._registerLineInteractivity(`${linesId}-line`);
 
+    // Polygon notes (see notes.js) — the same "lines" source already only
+    // renders LineString geometry through the line layer above (MapLibre's
+    // own "line" layer type silently ignores Polygon features), so this is
+    // just two more layers reading the same source, not a new bucket.
+    // Popup-on-click like a waypoint (_registerPointInteractivity), not the
+    // track line's hover-summary/profile-panel behavior above — a note
+    // polygon has no elevation profile to open.
+    this._map.addLayer({
+      id: `${linesId}-polygon-fill`,
+      type: "fill",
+      source: linesId,
+      filter: ["==", ["geometry-type"], "Polygon"],
+      paint: { "fill-color": TRACK_COLOR, "fill-opacity": 0.2 },
+    });
+    this._map.addLayer({
+      id: `${linesId}-polygon-outline`,
+      type: "line",
+      source: linesId,
+      filter: ["==", ["geometry-type"], "Polygon"],
+      paint: { "line-color": TRACK_COLOR, "line-width": 2 },
+    });
+    this._registerPointInteractivity(`${linesId}-polygon-fill`);
+
     // clusterRadius/clusterMaxZoom are harmless when there's nothing dense
     // enough to cluster (a handful of waypoints just render individually).
     this._map.addSource(pointsId, { type: "geojson", data: points, cluster: true, clusterRadius: 50, clusterMaxZoom: 14 });
@@ -704,6 +727,8 @@ export class GpxPanelControl {
     const pointsId = pointsSourceId(path);
     [
       `${linesId}-line`,
+      `${linesId}-polygon-fill`,
+      `${linesId}-polygon-outline`,
       `${pointsId}-clusters`,
       `${pointsId}-cluster-count`,
       `${pointsId}-unclustered`,

public/js/notes.js

@@ -2,20 +2,26 @@ import { NOTE_PIN_ICON } from "/js/icons.js";
 import { notifyGpxStoreChanged } from "/js/panels.js";
 
 const NEW_LAYER_VALUE = "__new__";
+const PREVIEW_SOURCE_ID = "notes-preview";
+const PREVIEW_FILL_LAYER_ID = "notes-preview-fill";
+const PREVIEW_LINE_LAYER_ID = "notes-preview-line";
+const PREVIEW_POINT_LAYER_ID = "notes-preview-points";
+const PREVIEW_COLOR = "#c0392b";
 
-// A quick "pin it with a note" tool — click the map, write a short note,
-// pick which .geojson "layer" file it joins (or start a new one). Saved
-// server-side (POST /api/gpx/notes) into the same GpxStore everything else
-// in the Tracks panel already reads from, so a note shows up there with no
+// A quick "pin it with a note" tool — click the map (Point mode) or click
+// out a few corners and Finish (Area mode), write a short note, pick which
+// .geojson "layer" file it joins (or start a new one). Saved server-side
+// (POST /api/gpx/notes) into the same GpxStore everything else in the
+// Tracks panel already reads from, so a note shows up there with no
 // separate rendering path of its own: same tree, same checkbox visibility,
-// same popup. Points only for now — a polygon mode would need gpx.js's
-// point/line split (public/js/gpx.js's _addLayers) taught a third,
-// Polygon-shaped bucket first, so it's left for a follow-up rather than
-// saving areas that wouldn't render back once reloaded.
+// same popup — public/js/gpx.js's _addLayers renders a Polygon feature the
+// same way it already renders points/lines, no separate code path here.
 export class NotesControl {
   constructor() {
     this._active = false;
-    this._pendingLngLat = null;
+    this._mode = "point"; // "point" | "area"
+    this._areaPoints = []; // vertices while drawing an area, before Finish
+    this._pendingGeometry = null; // the finished Point/Polygon geometry, once placed
   }
 
   onAdd(map) {
@@ -26,7 +32,12 @@ export class NotesControl {
     this._container.innerHTML = `
       <button type="button" class="notes-ctrl__button" title="Add note" aria-label="Add note">${NOTE_PIN_ICON}</button>
       <div class="notes-panel" hidden>
-        <p class="notes-panel__hint">Click the map to place a note.</p>
+        <div class="notes-panel__modes">
+          <button type="button" class="notes-panel__mode active" data-mode="point">Point</button>
+          <button type="button" class="notes-panel__mode" data-mode="area">Area</button>
+        </div>
+        <p class="notes-panel__hint"></p>
+        <button type="button" class="notes-panel__finish" hidden>Finish shape</button>
         <div class="notes-panel__form" hidden>
           <textarea class="notes-panel__text" rows="2" placeholder="Note…"></textarea>
           <select class="notes-panel__target"></select>
@@ -41,12 +52,17 @@ export class NotesControl {
     this._button = this._container.querySelector(".notes-ctrl__button");
     this._panel = this._container.querySelector(".notes-panel");
     this._hint = this._container.querySelector(".notes-panel__hint");
+    this._finishButton = this._container.querySelector(".notes-panel__finish");
     this._form = this._container.querySelector(".notes-panel__form");
     this._text = this._container.querySelector(".notes-panel__text");
     this._target = this._container.querySelector(".notes-panel__target");
     this._newName = this._container.querySelector(".notes-panel__new-name");
 
     this._button.addEventListener("click", () => this._setActive(!this._active));
+    this._panel.querySelectorAll(".notes-panel__mode").forEach((button) => {
+      button.addEventListener("click", () => this._setMode(button.dataset.mode));
+    });
+    this._finishButton.addEventListener("click", () => this._finishArea());
     this._target.addEventListener("change", () => {
       this._newName.hidden = this._target.value !== NEW_LAYER_VALUE;
       if (!this._newName.hidden) this._newName.focus();
@@ -55,12 +71,23 @@ export class NotesControl {
     this._container.querySelector(".notes-panel__cancel").addEventListener("click", () => this._resetForm());
 
     this._onClick = (event) => {
-      if (!this._active) return;
-      this._pendingLngLat = event.lngLat;
-      this._openForm();
+      if (!this._active || !this._form.hidden) return;
+      if (this._mode === "point") {
+        this._pendingGeometry = { type: "Point", coordinates: [event.lngLat.lng, event.lngLat.lat] };
+        this._openForm();
+      } else {
+        this._areaPoints.push([event.lngLat.lng, event.lngLat.lat]);
+        this._renderPreview();
+        this._updateAreaUi();
+      }
     };
     map.on("click", this._onClick);
 
+    map.on("style.load", () => {
+      if (this._areaPoints.length > 0) this._addPreviewLayers();
+    });
+
+    this._updateHint();
     return this._container;
   }
 
@@ -78,11 +105,105 @@ export class NotesControl {
     this._button.classList.toggle("active", active);
     this._panel.hidden = !active;
     this._map.getCanvas().style.cursor = active ? "crosshair" : "";
-    if (!active) this._resetForm();
+    if (!active) {
+      this._clearArea();
+      this._resetForm();
+    }
+  }
+
+  _setMode(mode) {
+    this._mode = mode;
+    this._panel.querySelectorAll(".notes-panel__mode").forEach((button) => {
+      button.classList.toggle("active", button.dataset.mode === mode);
+    });
+    this._clearArea();
+    this._updateHint();
+  }
+
+  _clearArea() {
+    this._areaPoints = [];
+    this._renderPreview();
+    this._updateAreaUi();
+  }
+
+  _updateAreaUi() {
+    this._finishButton.hidden = this._mode !== "area" || this._areaPoints.length < 3;
+    this._updateHint();
+  }
+
+  _updateHint() {
+    if (this._mode === "point") {
+      this._hint.textContent = "Click the map to place a note.";
+    } else if (this._areaPoints.length === 0) {
+      this._hint.textContent = "Click to start drawing an area.";
+    } else {
+      this._hint.textContent = `${this._areaPoints.length} corner${this._areaPoints.length === 1 ? "" : "s"} — click to add more${
+        this._areaPoints.length >= 3 ? ", or Finish" : ""
+      }.`;
+    }
+  }
+
+  _finishArea() {
+    if (this._areaPoints.length < 3) return;
+    this._pendingGeometry = { type: "Polygon", coordinates: [[...this._areaPoints, this._areaPoints[0]]] };
+    this._openForm();
+  }
+
+  _addPreviewLayers() {
+    if (this._map.getSource(PREVIEW_SOURCE_ID)) return;
+    this._map.addSource(PREVIEW_SOURCE_ID, { type: "geojson", data: emptyCollection() });
+    this._map.addLayer({
+      id: PREVIEW_FILL_LAYER_ID,
+      type: "fill",
+      source: PREVIEW_SOURCE_ID,
+      filter: ["==", ["geometry-type"], "Polygon"],
+      paint: { "fill-color": PREVIEW_COLOR, "fill-opacity": 0.15 },
+    });
+    this._map.addLayer({
+      id: PREVIEW_LINE_LAYER_ID,
+      type: "line",
+      source: PREVIEW_SOURCE_ID,
+      filter: ["!=", ["geometry-type"], "Point"],
+      paint: { "line-color": PREVIEW_COLOR, "line-width": 2, "line-dasharray": [2, 1] },
+    });
+    this._map.addLayer({
+      id: PREVIEW_POINT_LAYER_ID,
+      type: "circle",
+      source: PREVIEW_SOURCE_ID,
+      filter: ["==", ["geometry-type"], "Point"],
+      paint: { "circle-radius": 4, "circle-color": "#fff", "circle-stroke-color": PREVIEW_COLOR, "circle-stroke-width": 2 },
+    });
+  }
+
+  _removePreviewLayers() {
+    [PREVIEW_FILL_LAYER_ID, PREVIEW_LINE_LAYER_ID, PREVIEW_POINT_LAYER_ID].forEach((id) => {
+      if (this._map.getLayer(id)) this._map.removeLayer(id);
+    });
+    if (this._map.getSource(PREVIEW_SOURCE_ID)) this._map.removeSource(PREVIEW_SOURCE_ID);
+  }
+
+  _renderPreview() {
+    if (this._areaPoints.length === 0) {
+      this._removePreviewLayers();
+      return;
+    }
+    this._addPreviewLayers();
+    const pointFeatures = this._areaPoints.map((coord) => ({ type: "Feature", properties: {}, geometry: { type: "Point", coordinates: coord } }));
+    // A closed ring needs 3+ vertices to be valid; with fewer, preview it as
+    // an open line so a half-drawn shape still shows something.
+    const shape =
+      this._areaPoints.length >= 3
+        ? { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [[...this._areaPoints, this._areaPoints[0]]] } }
+        : this._areaPoints.length === 2
+          ? { type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: this._areaPoints } }
+          : null;
+    this._map.getSource(PREVIEW_SOURCE_ID)?.setData({ type: "FeatureCollection", features: [...(shape ? [shape] : []), ...pointFeatures] });
   }
 
   async _openForm() {
     this._hint.hidden = true;
+    this._finishButton.hidden = true;
+    this._panel.querySelector(".notes-panel__modes").hidden = true;
     this._form.hidden = false;
     this._text.value = "";
     this._text.focus();
@@ -90,11 +211,13 @@ export class NotesControl {
   }
 
   _resetForm() {
-    this._pendingLngLat = null;
+    this._pendingGeometry = null;
     this._hint.hidden = false;
+    this._panel.querySelector(".notes-panel__modes").hidden = false;
     this._form.hidden = true;
     this._newName.hidden = true;
     this._newName.value = "";
+    this._updateAreaUi();
   }
 
   async _populateTargets() {
@@ -117,7 +240,7 @@ export class NotesControl {
 
   async _save() {
     const text = this._text.value.trim();
-    if (!text || !this._pendingLngLat) return;
+    if (!text || !this._pendingGeometry) return;
 
     const isNewLayer = this._target.value === NEW_LAYER_VALUE;
     const name = isNewLayer ? this._newName.value.trim() : "";
@@ -129,7 +252,7 @@ export class NotesControl {
     const feature = {
       type: "Feature",
       properties: { name: text, category: "Note", time: new Date().toISOString() },
-      geometry: { type: "Point", coordinates: [this._pendingLngLat.lng, this._pendingLngLat.lat] },
+      geometry: this._pendingGeometry,
     };
 
     const body = new URLSearchParams({ feature: JSON.stringify(feature) });
@@ -142,6 +265,7 @@ export class NotesControl {
       const response = await fetch("/api/gpx/notes", { method: "POST", body });
       if (!response.ok) throw new Error(`save failed: ${response.status}`);
       notifyGpxStoreChanged();
+      this._clearArea();
       this._resetForm();
     } catch (err) {
       window.alert("Could not save the note — check your connection and try again.");
@@ -151,6 +275,10 @@ export class NotesControl {
   }
 }
 
+function emptyCollection() {
+  return { type: "FeatureCollection", features: [] };
+}
+
 function geojsonFiles(node, results = []) {
   if (node.type === "file" && node.path.toLowerCase().endsWith(".geojson")) {
     results.push({ path: node.path });