Note UX polish: pin marker, icon picker, fix Save button color

- The clicked location now stays marked (a plain maplibre-gl Marker,
  removed on save/cancel/deactivate) while the note form is open —
  before, nothing on the map showed where the pending note would land.
- POI_ICONS gains a dozen more symbols (water, dump station, toilets,
  playground, viewpoint, swimming, fishing, climbing, hiking, …) via
  Object.assign after PARK4NIGHT_TAGS' own icon constants are declared
  (they're below POI_ICONS in the file, so the literal itself can't
  reference them directly) — reused as real marker-badge glyphs, not
  just PARK4NIGHT_TAGS' inline description-tag icons. NoteSaveForm
  gets a picker grid for these, shown only for a Point note (a
  Measure-drawn line/polygon has no one spot for a badge).
- Fixed: .notes-panel__save's blue background was losing to
  .notes-panel__actions button's gray — same class-vs-class+element
  specificity trap .gpx-panel__action[hidden] already has a comment
  about elsewhere in this file. The button was never actually blue.

Verified live (properly simulating a logged-in session this time, via
Page.addScriptToEvaluateOnNewDocument rather than a post-load DOM
poke, since NotesControl's mount decision happens once, synchronously,
at page load): marker appears and clears correctly, 19 icons + "none"
render and select, Save renders #1a5fb4. Full suite: 115 runs, 0
failures.

public/js/notes.js

@@ -1,6 +1,31 @@
-import { NOTE_PIN_ICON } from "/js/icons.js";
+import { Marker } from "/vendor/maplibre-gl/maplibre-gl.mjs";
+import { NOTE_PIN_ICON, POI_ICONS } from "/js/icons.js";
 import { notifyGpxStoreChanged } from "/js/panels.js";
 
+// Human labels for the icon picker's title attribute — POI_ICONS' own keys
+// are internal (OSM-tag-shaped) ids, not display text.
+const ICON_LABELS = {
+  amenity_parking: "Parking",
+  tourism_camp_site: "Camp site",
+  leisure_picnic_table: "Picnic table",
+  amenity_fuel: "Fuel",
+  tourism_hotel: "Lodging",
+  forest: "Forest",
+  sport_cycling: "Cycling",
+  amenity_drinking_water: "Drinking water",
+  amenity_sanitary_dump_station: "Dump station",
+  amenity_toilets: "Toilets",
+  shop_gas: "Gas/LPG refill",
+  amenity_electricity: "Electricity",
+  shop_laundry: "Laundry",
+  leisure_playground: "Playground",
+  tourism_viewpoint: "Viewpoint",
+  leisure_swimming: "Swimming",
+  leisure_fishing: "Fishing",
+  sport_climbing: "Climbing",
+  route_hiking: "Hiking",
+};
+
 const NEW_LAYER_VALUE = "__new__";
 
 // Every hand-drawn note (from here or measure.js's "Save as note") gets one
@@ -29,6 +54,15 @@ export class NoteSaveForm {
     this._el.hidden = true;
     this._el.innerHTML = `
       <input type="text" class="notes-panel__title" placeholder="Title">
+      <div class="notes-panel__icons">
+        <button type="button" class="notes-panel__icon-option active" data-icon="" title="No icon">${NOTE_PIN_ICON}</button>
+        ${Object.keys(POI_ICONS)
+          .map(
+            (key) =>
+              `<button type="button" class="notes-panel__icon-option" data-icon="${key}" title="${escapeAttr(ICON_LABELS[key] || key)}">${POI_ICONS[key]}</button>`,
+          )
+          .join("")}
+      </div>
       <textarea class="notes-panel__body" rows="3" placeholder="Details (optional) — **bold**, *italic*, links"></textarea>
       <select class="notes-panel__target"></select>
       <input type="text" class="notes-panel__new-name" placeholder="Layer name" hidden>
@@ -40,11 +74,19 @@ export class NoteSaveForm {
     container.appendChild(this._el);
 
     this._title = this._el.querySelector(".notes-panel__title");
+    this._iconPicker = this._el.querySelector(".notes-panel__icons");
     this._body = this._el.querySelector(".notes-panel__body");
     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._selectedIcon = "";
 
+    this._iconPicker.querySelectorAll(".notes-panel__icon-option").forEach((button) => {
+      button.addEventListener("click", () => {
+        this._selectedIcon = button.dataset.icon;
+        this._iconPicker.querySelectorAll(".notes-panel__icon-option").forEach((b) => b.classList.toggle("active", b === button));
+      });
+    });
     this._target.addEventListener("change", () => {
       this._newName.hidden = this._target.value !== NEW_LAYER_VALUE;
       if (!this._newName.hidden) this._newName.focus();
@@ -62,6 +104,12 @@ export class NoteSaveForm {
     this._el.hidden = false;
     this._title.value = "";
     this._body.value = "";
+    this._selectedIcon = "";
+    this._iconPicker.querySelectorAll(".notes-panel__icon-option").forEach((b, i) => b.classList.toggle("active", i === 0));
+    // An icon only makes sense on a single point — Measure's "Save as
+    // note" can hand this a LineString/Polygon, which has no one spot for
+    // a badge glyph to sit at.
+    this._iconPicker.hidden = geometry.type !== "Point";
     this._title.focus();
     await this._populateTargets();
   }
@@ -112,6 +160,7 @@ export class NoteSaveForm {
         category: "Note",
         time: new Date().toISOString(),
         ...(details ? { description: details } : {}),
+        ...(this._selectedIcon ? { icon: this._selectedIcon } : {}),
       },
       geometry: this._geometry,
     };
@@ -143,6 +192,7 @@ export class NoteSaveForm {
 export class NotesControl {
   constructor() {
     this._active = false;
+    this._marker = null; // where the pending note will land — visible until saved/cancelled
   }
 
   onAdd(map) {
@@ -161,8 +211,14 @@ export class NotesControl {
     this._hint = this._container.querySelector(".notes-panel__hint");
 
     this._form = new NoteSaveForm(this._panel, {
-      onSaved: () => (this._hint.hidden = false),
-      onCancel: () => (this._hint.hidden = false),
+      onSaved: () => {
+        this._hint.hidden = false;
+        this._removeMarker();
+      },
+      onCancel: () => {
+        this._hint.hidden = false;
+        this._removeMarker();
+      },
     });
 
     this._button.addEventListener("click", () => this._setActive(!this._active));
@@ -170,6 +226,7 @@ export class NotesControl {
     this._onClick = (event) => {
       if (!this._active || this._form.isOpen) return;
       this._hint.hidden = true;
+      this._marker = new Marker({ color: "#c0392b" }).setLngLat(event.lngLat).addTo(this._map);
       this._form.open({ type: "Point", coordinates: [event.lngLat.lng, event.lngLat.lat] });
     };
     map.on("click", this._onClick);
@@ -177,6 +234,11 @@ export class NotesControl {
     return this._container;
   }
 
+  _removeMarker() {
+    this._marker?.remove();
+    this._marker = null;
+  }
+
   onRemove() {
     this._map.off("click", this._onClick);
     this._container.remove();
@@ -191,7 +253,10 @@ export class NotesControl {
     this._button.classList.toggle("active", active);
     this._panel.hidden = !active;
     this._map.getCanvas().style.cursor = active ? "crosshair" : "";
-    if (!active) this._form.close();
+    if (!active) {
+      this._form.close();
+      this._removeMarker();
+    }
   }
 }