From 6cb777e90cd725ea3e963eb0854936ad6179df0b Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 16 Jan 2026 07:51:00 +0100
Subject: [PATCH] fix: Map buttons not working in contacts page and message
 bubbles

- Add Leaflet CSS/JS and map modal to contacts_base.html
- Add showContactOnMap function to contacts.js (contacts page has separate template)
- Load contactsGeoCache before messages to ensure Map buttons appear on bubbles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/js/app.js             |  6 ++--
 app/static/js/contacts.js        | 53 ++++++++++++++++++++++++++++++++
 app/templates/contacts_base.html | 25 +++++++++++++++
 3 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index 55bd495..c6872e7 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -204,6 +204,9 @@ document.addEventListener('DOMContentLoaded', async function() {
     // This ensures channels are available for checkForUpdates()
     await loadChannels();
 
+    // Load contacts geo cache BEFORE messages (needed for Map buttons on bubbles)
+    await loadContactsGeoCache();
+
     // Now load other data (can run in parallel)
     loadArchiveList();
     loadMessages();
@@ -212,9 +215,6 @@ document.addEventListener('DOMContentLoaded', async function() {
     updatePendingContactsBadge();
     loadStatus();
 
-    // Load contacts geo cache for map buttons on messages
-    loadContactsGeoCache();
-
     // Map button in menu
     const mapBtn = document.getElementById('mapBtn');
     if (mapBtn) {
diff --git a/app/static/js/contacts.js b/app/static/js/contacts.js
index 0d010b4..b72a27f 100644
--- a/app/static/js/contacts.js
+++ b/app/static/js/contacts.js
@@ -50,6 +50,59 @@ let contactToDelete = null;
 let sortBy = 'last_advert'; // 'name' or 'last_advert'
 let sortOrder = 'desc'; // 'asc' or 'desc'
 
+// Map state (Leaflet)
+let leafletMap = null;
+let markersGroup = null;
+
+// =============================================================================
+// Leaflet Map Functions
+// =============================================================================
+
+/**
+ * Initialize Leaflet map (called once on first modal open)
+ */
+function initLeafletMap() {
+    if (leafletMap) return;
+
+    leafletMap = L.map('leafletMap').setView([52.0, 19.0], 6);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(leafletMap);
+
+    markersGroup = L.layerGroup().addTo(leafletMap);
+}
+
+/**
+ * Show single contact on map
+ */
+function showContactOnMap(name, lat, lon) {
+    const modalEl = document.getElementById('mapModal');
+    const modal = new bootstrap.Modal(modalEl);
+    document.getElementById('mapModalTitle').textContent = name;
+
+    const onShown = function() {
+        initLeafletMap();
+        markersGroup.clearLayers();
+
+        L.marker([lat, lon])
+            .addTo(markersGroup)
+            .bindPopup(`<b>${name}</b>`)
+            .openPopup();
+
+        leafletMap.setView([lat, lon], 13);
+        leafletMap.invalidateSize();
+
+        modalEl.removeEventListener('shown.bs.modal', onShown);
+    };
+
+    modalEl.addEventListener('shown.bs.modal', onShown);
+    modal.show();
+}
+
+// Make showContactOnMap available globally
+window.showContactOnMap = showContactOnMap;
+
 // =============================================================================
 // Initialization
 // =============================================================================
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index 3514668..38a81eb 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -17,6 +17,11 @@
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
 
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin="" />
+
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 
@@ -410,9 +415,29 @@
         </div>
     </div>
 
+    <!-- Map Modal (Leaflet) -->
+    <div class="modal fade" id="mapModal" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-geo-alt"></i> <span id="mapModalTitle">Map</span></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-0">
+                    <div id="leafletMap" style="height: 400px; width: 100%;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Bootstrap 5 JS Bundle -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+            crossorigin=""></script>
+
     <!-- Contact Management JavaScript -->
     <script src="{{ url_for('static', filename='js/contacts.js') }}"></script>