Add Garmin LiveTrack session tracking

A Gmail-watching Apps Script (documented in docs/deployment.adoc) posts
the session ID from each LiveTrack email to a new webhook, which stores
it in data/livetrack.json; a new sidebar panel lists what's been
received.

public/js/livetrack.js

@@ -0,0 +1,71 @@
+import { LIVETRACK_ICON } from "/js/icons.js";
+import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
+
+const SESSIONS_URL = "/api/livetrack/sessions";
+
+// A sidebar icon that opens a side panel listing Garmin LiveTrack session
+// IDs received via the webhook (see docs/deployment.adoc) — read-only, just
+// so they're visible somewhere instead of only in data/livetrack.json.
+export class LiveTrackPanelControl {
+  mount(sidebar) {
+    this._container = document.createElement("div");
+    this._container.className = "sidebar-item";
+    this._container.innerHTML = `<button type="button" class="sidebar-icon" title="LiveTrack" aria-label="LiveTrack">${LIVETRACK_ICON}</button>`;
+    this._icon = this._container.querySelector(".sidebar-icon");
+    this._icon.addEventListener("click", () => this._togglePanel());
+
+    this._panel = document.getElementById("livetrack-panel");
+    this._list = this._panel.querySelector(".livetrack-panel__list");
+    this._panel
+      .querySelector(".basemap-panel__close")
+      .addEventListener("click", () => this._togglePanel(false));
+
+    onlyOneSidePanelOpen(this._panel, () => this._icon.classList.remove("active"));
+
+    sidebar.appendChild(this._container);
+  }
+
+  _togglePanel(force) {
+    const open = force === undefined ? this._panel.hidden : force;
+    this._panel.hidden = !open;
+    this._icon.classList.toggle("active", open);
+    if (open) {
+      notifySidePanelOpen(this._panel);
+      this._loadSessions();
+    }
+  }
+
+  async _loadSessions() {
+    const response = await fetch(SESSIONS_URL);
+    const { sessions } = await response.json();
+    this._renderSessions(sessions);
+  }
+
+  _renderSessions(sessions) {
+    this._list.innerHTML = "";
+
+    if (sessions.length === 0) {
+      const li = document.createElement("li");
+      li.className = "gpx-tree__empty";
+      li.textContent = "No sessions yet";
+      this._list.appendChild(li);
+      return;
+    }
+
+    sessions.forEach(({ id, received_at }) => {
+      const li = document.createElement("li");
+      li.className = "livetrack-panel__item";
+
+      const idSpan = document.createElement("span");
+      idSpan.className = "livetrack-panel__id";
+      idSpan.textContent = id;
+
+      const timeSpan = document.createElement("span");
+      timeSpan.className = "livetrack-panel__time";
+      timeSpan.textContent = new Date(received_at).toLocaleString();
+
+      li.append(idSpan, timeSpan);
+      this._list.appendChild(li);
+    });
+  }
+}