From 1bb03eb9646635019fe6d2ac84cc6a1f227f3518 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Sat, 23 May 2026 00:34:54 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20SVG=20icons=20for=20map=20toolbar=20chi?=
 =?UTF-8?q?ps=20=E2=80=94=20flame/crosshair/outline,=2013px,=20with=20labe?=
 =?UTF-8?q?l=20spans?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/index.html | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/static/index.html b/static/index.html
index d3167c5..ce1c471 100644
--- a/static/index.html
+++ b/static/index.html
@@ -787,15 +787,18 @@
       border-radius: var(--radius);
     /* Map controls bar */
     .map-controls {
-      display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
+      display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
     }
     .map-chip {
+      display: inline-flex; align-items: center; gap: 4px;
       font-size: 11px; font-weight: 600; padding: 6px 12px;
       border-radius: 20px; border: 1px solid var(--border);
       background: var(--card2); color: var(--text2); cursor: pointer;
       transition: all 0.15s;
       -webkit-tap-highlight-color: transparent;
+      user-select: none;
     }
+    .map-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
     .map-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
     .map-chip.heat-on { background: var(--amber); border-color: var(--amber); color: #000; }
     .map-chip.park-on { background: var(--accent); border-color: var(--accent); color: #fff; }
@@ -1336,9 +1339,18 @@
        ═══════════════════════════════════════════════════════════════════════ -->
   <div id="tabMap" class="tab-panel">
     <div class="map-controls">
-      <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">🔥 Heatmap</span>
-      <span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">🏰 Parks ON</span>
-      <span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">◎ My GPS</span>
+      <span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c-1.5 2.5-3 5-3 8a3 3 0 0 0 6 0c0-3-1.5-5.5-3-8z"/><path d="M12 14c-1.5 2.5-3 5-3 8a3 3 0 0 0 6 0c0-3-1.5-5.5-3-8z" opacity=".3"/></svg>
+        <span class="chip-label">Heatmap</span>
+      </span>
+      <span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><rect x="8" y="8" width="8" height="8" rx="1.5" stroke-dasharray="3 2"/></svg>
+        <span class="chip-label">Parks ON</span>
+      </span>
+      <span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="7"/><line x1="12" y1="17" x2="12" y2="22"/><line x1="2" y1="12" x2="7" y2="12"/><line x1="17" y1="12" x2="22" y2="12"/></svg>
+        <span class="chip-label">My Location</span>
+      </span>
     </div>
     <div id="mapContainer"></div>
     <!-- Auto-visit status indicator -->
@@ -3378,13 +3390,14 @@
     function toggleParkOutlines() {
       parkOutlinesVisible = !parkOutlinesVisible;
       const chip = document.getElementById('chipParkOutlines');
+      const label = chip.querySelector('.chip-label');
       if (parkOutlinesVisible) {
         chip.classList.add('park-on');
-        chip.textContent = '🏰 Parks ON';
+        if (label) label.textContent = 'Parks ON';
         drawParkOutlines();
       } else {
         chip.classList.remove('park-on');
-        chip.textContent = '🏰 Parks';
+        if (label) label.textContent = 'Parks';
         if (parkOutlineGroup) map.removeLayer(parkOutlineGroup);
         parkOutlineGroup = null;
       }
@@ -4442,11 +4455,12 @@
     async function toggleHeatmap() {
       if (!map) return;
       const chip = document.getElementById('chipHeat');
+      const label = chip.querySelector('.chip-label');
 
       if (heatVisible) {
         heatVisible = false;
         chip.classList.remove('heat-on');
-        chip.textContent = '🔥 Heatmap';
+        if (label) label.textContent = 'Heatmap';
         if (heatLayer) map.removeLayer(heatLayer);
         heatLayer = null;
         return;
@@ -4454,7 +4468,7 @@
 
       heatVisible = true;
       chip.classList.add('heat-on');
-      chip.textContent = '🔥 Heatmap ON';
+      if (label) label.textContent = 'Heatmap ON';
       await loadHeatmapData();
     }