Consolidate note-drawing into Measure; add edit/delete

Measure already draws distance lines and area polygons by hand — a
second click-to-draw UI in the notes tool (Point/Area mode, from the
previous commit) duplicated that. Replaced it with a "Save as note"
button on the Measure panel that saves whatever shape is currently
drawn there; NotesControl goes back to being just a one-click point
pin. Both share a single NoteSaveForm (notes.js) for the note-text +
target-layer-file UI instead of two copies of it.

gpx.js: the "lines" source now also renders a note-flagged LineString
(dashed, popup-on-click) alongside the Polygon fill/outline from
before — the plain track-line layer excludes category:"Note" features
so a saved distance note doesn't also get the track hover-summary/
profile-panel treatment.

Notes are now individually editable/deletable from their own popup
(logged-in only): Edit swaps the popup content for an inline
textarea, Delete confirms and removes. Both target the feature by a
new client-generated properties.id rather than array position (new
GpxStore#update_feature/#delete_feature, PUT/DELETE /api/gpx/notes),
since neither array index nor the note's own text (the thing being
edited) is a stable identifier.

Verified live: Measure's Save button (disabled/enabled state, saves
the exact on-screen shape), the popup's Edit/Delete buttons and inline
edit form. Full test suite: 115 runs, 0 failures (new coverage for
update_feature/delete_feature and the PUT/DELETE routes).

public/js/gpx.js

@@ -12,7 +12,7 @@ import {
   POI_ICONS,
   PARK4NIGHT_TAGS,
 } from "/js/icons.js";
-import { notifySidePanelOpen, onlyOneSidePanelOpen, onGpxStoreChanged } from "/js/panels.js";
+import { notifySidePanelOpen, onlyOneSidePanelOpen, onGpxStoreChanged, notifyGpxStoreChanged } from "/js/panels.js";
 import { formatActivityType } from "/js/track_profile.js";
 import { isLoggedIn } from "/js/auth.js";
 
@@ -531,22 +531,27 @@ export class GpxPanelControl {
     }
 
     this._map.addSource(linesId, { type: "geojson", data: lines });
+    // Excludes category:"Note" — a saved Measure-tool distance line gets
+    // its own layer below (popup-on-click, not this hover-summary/profile-
+    // panel track behavior), not this one.
     this._map.addLayer({
       id: `${linesId}-line`,
       type: "line",
       source: linesId,
+      filter: ["any", ["!has", "category"], ["!=", ["get", "category"], "Note"]],
       layout: { "line-cap": "round", "line-join": "round" },
       paint: { "line-color": TRACK_COLOR, "line-width": 3 },
     });
     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.
+    // Polygon/line notes (see notes.js and measure.js's "Save as note") —
+    // the same "lines" source already only renders LineString geometry
+    // through the line layer above, and Polygon geometry isn't drawn by a
+    // "line"-type layer at all (MapLibre only draws LineString for that
+    // type), so these are just 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 — a note
+    // has no elevation profile to open.
     this._map.addLayer({
       id: `${linesId}-polygon-fill`,
       type: "fill",
@@ -561,7 +566,17 @@ export class GpxPanelControl {
       filter: ["==", ["geometry-type"], "Polygon"],
       paint: { "line-color": TRACK_COLOR, "line-width": 2 },
     });
-    this._registerPointInteractivity(`${linesId}-polygon-fill`);
+    this._registerPointInteractivity(`${linesId}-polygon-fill`, path);
+
+    this._map.addLayer({
+      id: `${linesId}-note-line`,
+      type: "line",
+      source: linesId,
+      filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", ["get", "category"], "Note"]],
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: { "line-color": TRACK_COLOR, "line-width": 3, "line-dasharray": [2, 1] },
+    });
+    this._registerPointInteractivity(`${linesId}-note-line`, path);
 
     // clusterRadius/clusterMaxZoom are harmless when there's nothing dense
     // enough to cluster (a handful of waypoints just render individually).
@@ -570,7 +585,7 @@ export class GpxPanelControl {
     await Promise.all([this._iconsReady, this._registerBadgeColors(badgeColors)]);
     if (!this._map.getSource(pointsId)) return true; // a style.load (basemap switch) tore it down while icons were loading
 
-    this._addClusterLayers(pointsId);
+    this._addClusterLayers(pointsId, path);
 
     if (points.features.length > 0) this._pointsByPath.set(path, points);
     this._updateLegend();
@@ -584,7 +599,7 @@ export class GpxPanelControl {
   // each waypoint's own category color (see Maptool::Gpx#waypoint_color),
   // falling back to the plain track color for waypoints with no category
   // (e.g. a hand-placed GNSS pin, not from a POI export).
-  _addClusterLayers(pointsId) {
+  _addClusterLayers(pointsId, path) {
     this._map.addLayer({
       id: `${pointsId}-clusters`,
       type: "circle",
@@ -643,7 +658,7 @@ export class GpxPanelControl {
     });
 
     this._registerClusterInteractivity(pointsId);
-    this._registerPointInteractivity(`${pointsId}-unclustered`);
+    this._registerPointInteractivity(`${pointsId}-unclustered`, path);
   }
 
   // Clicking a cluster zooms in just far enough to break it apart, the
@@ -671,17 +686,22 @@ export class GpxPanelControl {
   // delegated listener that lives on the map itself and keeps matching
   // that layer id after setStyle() removes and (via _addLayers) re-adds
   // it, so re-registering on every re-add would stack duplicate popups.
-  _registerPointInteractivity(layerId) {
+  // `path` (which file this layer's features came from) is only used for
+  // a "Note" feature's Edit/Delete actions — plain GPX/FIT/park4night
+  // waypoints don't get those, so it's otherwise unused.
+  _registerPointInteractivity(layerId, path) {
     if (this._interactiveLayers.has(layerId)) return;
     this._interactiveLayers.add(layerId);
 
     this._map.on("click", layerId, (event) => {
       const feature = event.features[0];
       if (!feature) return;
-      new Popup({ closeButton: true, maxWidth: "260px" })
+      const editable = feature.properties.category === "Note" && isLoggedIn();
+      const popup = new Popup({ closeButton: true, maxWidth: "260px" })
         .setLngLat(event.lngLat)
-        .setHTML(popupHtml(feature.properties))
+        .setHTML(popupHtml(feature.properties, { editable }))
         .addTo(this._map);
+      if (editable) this._wireNoteActions(popup, path, feature);
     });
     this._map.on("mouseenter", layerId, () => {
       this._map.getCanvas().style.cursor = "pointer";
@@ -691,6 +711,70 @@ export class GpxPanelControl {
     });
   }
 
+  // Edit swaps the popup's content for a plain textarea + Save/Cancel (the
+  // note's location doesn't change, just its text, so there's no need for
+  // NoteSaveForm's fuller target-file picker here). Delete just confirms
+  // and removes. Both end by reloading the file's layers from the server —
+  // simplest way to keep the map, the category legend, and this popup's
+  // own feature data all in sync with what the edit/delete actually wrote,
+  // rather than hand-patching three different client-side copies of it.
+  _wireNoteActions(popup, path, feature) {
+    const element = popup.getElement();
+    const id = feature.properties.id;
+
+    element.querySelector(".gpx-popup__delete")?.addEventListener("click", async () => {
+      if (!window.confirm("Delete this note?")) return;
+      try {
+        const response = await fetch(`/api/gpx/notes?${new URLSearchParams({ path, id })}`, { method: "DELETE" });
+        if (!response.ok) throw new Error(`delete failed: ${response.status}`);
+        popup.remove();
+        notifyGpxStoreChanged();
+        await this._reloadFile(path);
+      } catch (err) {
+        window.alert("Could not delete the note — check your connection and try again.");
+      }
+    });
+
+    element.querySelector(".gpx-popup__edit")?.addEventListener("click", () => {
+      const content = popup.getElement().querySelector(".maplibregl-popup-content");
+      content.innerHTML = `
+        <div class="gpx-popup__edit-form">
+          <textarea class="gpx-popup__edit-text" rows="2">${escapeHtml(feature.properties.name || "")}</textarea>
+          <div class="gpx-popup__edit-actions">
+            <button type="button" class="gpx-popup__edit-save">Save</button>
+            <button type="button" class="gpx-popup__edit-cancel">Cancel</button>
+          </div>
+        </div>
+      `;
+      const textarea = content.querySelector(".gpx-popup__edit-text");
+      textarea.focus();
+      content.querySelector(".gpx-popup__edit-cancel").addEventListener("click", () => {
+        content.innerHTML = popupHtml(feature.properties, { editable: true });
+        this._wireNoteActions(popup, path, feature);
+      });
+      content.querySelector(".gpx-popup__edit-save").addEventListener("click", async () => {
+        const text = textarea.value.trim();
+        if (!text) return;
+        const updated = { ...feature, properties: { ...feature.properties, name: text } };
+        try {
+          const body = new URLSearchParams({ path, id, feature: JSON.stringify(updated) });
+          const response = await fetch("/api/gpx/notes", { method: "PUT", body });
+          if (!response.ok) throw new Error(`save failed: ${response.status}`);
+          popup.remove();
+          notifyGpxStoreChanged();
+          await this._reloadFile(path);
+        } catch (err) {
+          window.alert("Could not save the note — check your connection and try again.");
+        }
+      });
+    });
+  }
+
+  async _reloadFile(path) {
+    this._removeLayers(path);
+    await this._addLayers(path);
+  }
+
   // Hover shows a quick summary (unlike a waypoint popup, which is
   // click-triggered — a track's summary describes the whole line, not
   // whatever point along it happens to get hovered, so there's no single
@@ -729,6 +813,7 @@ export class GpxPanelControl {
       `${linesId}-line`,
       `${linesId}-polygon-fill`,
       `${linesId}-polygon-outline`,
+      `${linesId}-note-line`,
       `${pointsId}-clusters`,
       `${pointsId}-cluster-count`,
       `${pointsId}-unclustered`,
@@ -985,7 +1070,11 @@ function gpxFileUrl(path) {
 
 // properties come straight from an uploaded GPX file — untrusted input —
 // so every value is escaped before landing in the popup's HTML.
-function popupHtml({ name, description, time, category, photos, icon }) {
+// editable (only ever true for a "Note" feature the viewer is logged in
+// for — see _registerPointInteractivity) adds Edit/Delete buttons; the
+// click handling for them lives in _wireNoteActions, not here, since this
+// only builds markup, it has no map/store access of its own.
+function popupHtml({ name, description, time, category, photos, icon }, { editable = false } = {}) {
   const parts = [];
   if (name) {
     const glyph = icon && POI_ICONS[icon] ? `<span class="gpx-popup__header-icon">${POI_ICONS[icon]}</span>` : "";
@@ -1000,6 +1089,11 @@ function popupHtml({ name, description, time, category, photos, icon }) {
       parts.push(`<p class="gpx-popup__time">${escapeHtml(parsed.toLocaleString())}</p>`);
     }
   }
+  if (editable) {
+    parts.push(
+      `<div class="gpx-popup__note-actions"><button type="button" class="gpx-popup__edit">Edit</button><button type="button" class="gpx-popup__delete">Delete</button></div>`,
+    );
+  }
   return parts.length > 0 ? parts.join("") : "<em>No details</em>";
 }
 

public/js/measure.js

@@ -1,4 +1,5 @@
 import { RULER_ICON } from "/js/icons.js";
+import { NoteSaveForm } from "/js/notes.js";
 
 const SOURCE_ID = "measure";
 const LINE_LAYER_ID = "measure-line";
@@ -29,24 +30,38 @@ export class MeasureControl {
     this._container.innerHTML = `
       <button type="button" class="measure-ctrl__button" title="Measure" aria-label="Measure">${RULER_ICON}</button>
       <div class="measure-panel" hidden>
-        <button type="button" class="measure-panel__mode active" data-mode="distance">Distance</button>
-        <button type="button" class="measure-panel__mode" data-mode="area">Area</button>
-        <span class="measure-panel__result"></span>
-        <button type="button" class="measure-panel__clear" title="Clear" aria-label="Clear">×</button>
+        <div class="measure-panel__controls">
+          <button type="button" class="measure-panel__mode active" data-mode="distance">Distance</button>
+          <button type="button" class="measure-panel__mode" data-mode="area">Area</button>
+          <span class="measure-panel__result"></span>
+          <button type="button" class="measure-panel__save" title="Save as a note" aria-label="Save as a note" disabled>📍</button>
+          <button type="button" class="measure-panel__clear" title="Clear" aria-label="Clear">×</button>
+        </div>
       </div>
     `;
     this._button = this._container.querySelector(".measure-ctrl__button");
     this._panel = this._container.querySelector(".measure-panel");
+    this._controls = this._container.querySelector(".measure-panel__controls");
     this._result = this._container.querySelector(".measure-panel__result");
+    this._saveButton = this._container.querySelector(".measure-panel__save");
+
+    this._noteForm = new NoteSaveForm(this._panel, {
+      onSaved: () => {
+        this._controls.hidden = false;
+        this._clear();
+      },
+      onCancel: () => (this._controls.hidden = false),
+    });
 
     this._button.addEventListener("click", () => this._setActive(!this._active));
     this._panel.querySelectorAll(".measure-panel__mode").forEach((button) => {
       button.addEventListener("click", () => this._setMode(button.dataset.mode));
     });
+    this._saveButton.addEventListener("click", () => this._saveAsNote());
     this._panel.querySelector(".measure-panel__clear").addEventListener("click", () => this._clear());
 
     this._onClick = (event) => {
-      if (!this._active) return;
+      if (!this._active || this._noteForm.isOpen) return;
       this._points.push([event.lngLat.lng, event.lngLat.lat]);
       this._render();
     };
@@ -79,10 +94,30 @@ export class MeasureControl {
     if (active) {
       this._addLayers();
     } else {
+      this._noteForm.close();
+      this._controls.hidden = false;
       this._clear();
     }
   }
 
+  // The same shape _render() draws — a distance line (2+ points) or a
+  // closed area polygon (3+ points), or null while there isn't yet enough
+  // to measure — extracted so "Save as note" saves exactly what's on
+  // screen rather than recomputing it slightly differently.
+  _currentShapeGeometry() {
+    if (this._mode === "area") {
+      return this._points.length >= 3 ? { type: "Polygon", coordinates: [[...this._points, this._points[0]]] } : null;
+    }
+    return this._points.length >= 2 ? { type: "LineString", coordinates: this._points } : null;
+  }
+
+  _saveAsNote() {
+    const geometry = this._currentShapeGeometry();
+    if (!geometry) return;
+    this._controls.hidden = true;
+    this._noteForm.open(geometry);
+  }
+
   _setMode(mode) {
     this._mode = mode;
     this._panel.querySelectorAll(".measure-panel__mode").forEach((button) => {
@@ -165,10 +200,9 @@ export class MeasureControl {
       properties: { role: "vertex" },
       geometry: { type: "Point", coordinates: coord },
     }));
-    const shapeFeature =
-      this._mode === "area"
-        ? this._points.length >= 3 && { type: "Feature", geometry: { type: "Polygon", coordinates: [[...this._points, this._points[0]]] } }
-        : this._points.length >= 2 && { type: "Feature", geometry: { type: "LineString", coordinates: this._points } };
+    const geometry = this._currentShapeGeometry();
+    const shapeFeature = geometry && { type: "Feature", geometry };
+    this._saveButton.disabled = !geometry;
     // Area mode has no equivalent yet — only asked for distance's own
     // per-leg labels, and a polygon's edges read differently (perimeter
     // segments, not a path) if this ever extends there.

public/js/notes.js

@@ -2,222 +2,73 @@ 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 (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 — 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._mode = "point"; // "point" | "area"
-    this._areaPoints = []; // vertices while drawing an area, before Finish
-    this._pendingGeometry = null; // the finished Point/Polygon geometry, once placed
-  }
+// Every hand-drawn note (from here or measure.js's "Save as note") gets one
+// of these — the only stable way to find a specific feature again for
+// editing/deleting later (see GpxStore#update_feature/#delete_feature):
+// array position shifts as other notes are added/removed, and the note's
+// own text is exactly the thing an edit changes.
+export function generateNoteId() {
+  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
 
-  onAdd(map) {
-    this._map = map;
+// The "note text + which .geojson layer" form, shared by NotesControl (a
+// single click) and measure.js's "Save as note" button (its current
+// distance/area shape) — extracted here rather than duplicated in both,
+// since the two differ only in *what* the note attaches a location to,
+// not in how it's captured or where it's saved. Renders into whatever
+// container it's given (each caller owns where that sits in its own panel);
+// hidden until open() is called.
+export class NoteSaveForm {
+  constructor(container, { onSaved, onCancel } = {}) {
+    this._onSaved = onSaved;
+    this._onCancel = onCancel;
 
-    this._container = document.createElement("div");
-    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group notes-ctrl";
-    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>
-        <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>
-          <input type="text" class="notes-panel__new-name" placeholder="Layer name" hidden>
-          <div class="notes-panel__actions">
-            <button type="button" class="notes-panel__save">Save</button>
-            <button type="button" class="notes-panel__cancel">Cancel</button>
-          </div>
-        </div>
+    this._el = document.createElement("div");
+    this._el.className = "notes-panel__form";
+    this._el.hidden = true;
+    this._el.innerHTML = `
+      <textarea class="notes-panel__text" rows="2" placeholder="Note…"></textarea>
+      <select class="notes-panel__target"></select>
+      <input type="text" class="notes-panel__new-name" placeholder="Layer name" hidden>
+      <div class="notes-panel__actions">
+        <button type="button" class="notes-panel__save">Save</button>
+        <button type="button" class="notes-panel__cancel">Cancel</button>
       </div>
     `;
-    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");
+    container.appendChild(this._el);
+
+    this._text = this._el.querySelector(".notes-panel__text");
+    this._target = this._el.querySelector(".notes-panel__target");
+    this._newName = this._el.querySelector(".notes-panel__new-name");
+    this._saveButton = this._el.querySelector(".notes-panel__save");
 
-    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();
     });
-    this._container.querySelector(".notes-panel__save").addEventListener("click", () => this._save());
-    this._container.querySelector(".notes-panel__cancel").addEventListener("click", () => this._resetForm());
-
-    this._onClick = (event) => {
-      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;
+    this._saveButton.addEventListener("click", () => this._save());
+    this._el.querySelector(".notes-panel__cancel").addEventListener("click", () => this.close(true));
   }
 
-  onRemove() {
-    this._map.off("click", this._onClick);
-    this._container.remove();
+  get isOpen() {
+    return !this._el.hidden;
   }
 
-  getDefaultPosition() {
-    return "top-left";
-  }
-
-  _setActive(active) {
-    this._active = active;
-    this._button.classList.toggle("active", active);
-    this._panel.hidden = !active;
-    this._map.getCanvas().style.cursor = active ? "crosshair" : "";
-    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;
+  async open(geometry) {
+    this._geometry = geometry;
+    this._el.hidden = false;
     this._text.value = "";
     this._text.focus();
     await this._populateTargets();
   }
 
-  _resetForm() {
-    this._pendingGeometry = null;
-    this._hint.hidden = false;
-    this._panel.querySelector(".notes-panel__modes").hidden = false;
-    this._form.hidden = true;
+  close(viaCancel = false) {
+    this._geometry = null;
+    this._el.hidden = true;
     this._newName.hidden = true;
     this._newName.value = "";
-    this._updateAreaUi();
+    if (viaCancel) this._onCancel?.();
   }
 
   async _populateTargets() {
@@ -240,7 +91,7 @@ export class NotesControl {
 
   async _save() {
     const text = this._text.value.trim();
-    if (!text || !this._pendingGeometry) return;
+    if (!text || !this._geometry) return;
 
     const isNewLayer = this._target.value === NEW_LAYER_VALUE;
     const name = isNewLayer ? this._newName.value.trim() : "";
@@ -251,32 +102,87 @@ export class NotesControl {
 
     const feature = {
       type: "Feature",
-      properties: { name: text, category: "Note", time: new Date().toISOString() },
-      geometry: this._pendingGeometry,
+      properties: { id: generateNoteId(), name: text, category: "Note", time: new Date().toISOString() },
+      geometry: this._geometry,
     };
 
     const body = new URLSearchParams({ feature: JSON.stringify(feature) });
     if (isNewLayer) body.set("name", name);
     else body.set("path", this._target.value);
 
-    const saveButton = this._container.querySelector(".notes-panel__save");
-    saveButton.disabled = true;
+    this._saveButton.disabled = true;
     try {
       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();
+      this.close();
+      this._onSaved?.();
     } catch (err) {
       window.alert("Could not save the note — check your connection and try again.");
     } finally {
-      saveButton.disabled = false;
+      this._saveButton.disabled = false;
     }
   }
 }
 
-function emptyCollection() {
-  return { type: "FeatureCollection", features: [] };
+// 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). Point
+// only: for a distance/area shape, draw it with the Measure tool and use
+// its own "Save as note" button instead of duplicating that click-to-place
+// UX here — see measure.js.
+export class NotesControl {
+  constructor() {
+    this._active = false;
+  }
+
+  onAdd(map) {
+    this._map = map;
+
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group notes-ctrl";
+    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>
+    `;
+    this._button = this._container.querySelector(".notes-ctrl__button");
+    this._panel = this._container.querySelector(".notes-panel");
+    this._hint = this._container.querySelector(".notes-panel__hint");
+
+    this._form = new NoteSaveForm(this._panel, {
+      onSaved: () => (this._hint.hidden = false),
+      onCancel: () => (this._hint.hidden = false),
+    });
+
+    this._button.addEventListener("click", () => this._setActive(!this._active));
+
+    this._onClick = (event) => {
+      if (!this._active || this._form.isOpen) return;
+      this._hint.hidden = true;
+      this._form.open({ type: "Point", coordinates: [event.lngLat.lng, event.lngLat.lat] });
+    };
+    map.on("click", this._onClick);
+
+    return this._container;
+  }
+
+  onRemove() {
+    this._map.off("click", this._onClick);
+    this._container.remove();
+  }
+
+  getDefaultPosition() {
+    return "top-left";
+  }
+
+  _setActive(active) {
+    this._active = active;
+    this._button.classList.toggle("active", active);
+    this._panel.hidden = !active;
+    this._map.getCanvas().style.cursor = active ? "crosshair" : "";
+    if (!active) this._form.close();
+  }
 }
 
 function geojsonFiles(node, results = []) {