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`,