From d0f1aae9632410ea71ac2c10616007345a05ac80 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 23 Jan 2026 08:58:32 +0100
Subject: [PATCH] ui: Replace map filter checkboxes with clickable badges

Convert type filter checkboxes to clickable toggle badges on the Map
modal (accessible from main menu). Same UX pattern as pending contacts:
- Active: colored background, white text
- Inactive: colored text/border, white background

Updated in both base.html and contacts_base.html for consistency.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css         | 56 ++++++++++++++++++++++++++++++++
 app/static/js/app.js             | 21 +++++++-----
 app/templates/base.html          | 30 +++--------------
 app/templates/contacts_base.html | 30 +++--------------
 4 files changed, 78 insertions(+), 59 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 4e0607c..91ed967 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -846,3 +846,59 @@ main {
     justify-content: center;
     font-size: 1rem;
 }
+
+/* =============================================================================
+   Map Filter Badges
+   ============================================================================= */
+
+/* Clickable map filter badges */
+.map-filter-badge {
+    display: inline-block;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+    user-select: none;
+}
+
+.map-filter-badge[data-type="1"] {
+    color: #2196F3;
+    background-color: white;
+    border: 2px solid #2196F3;
+}
+.map-filter-badge[data-type="1"].active {
+    color: white;
+    background-color: #2196F3;
+}
+
+.map-filter-badge[data-type="2"] {
+    color: #4CAF50;
+    background-color: white;
+    border: 2px solid #4CAF50;
+}
+.map-filter-badge[data-type="2"].active {
+    color: white;
+    background-color: #4CAF50;
+}
+
+.map-filter-badge[data-type="3"] {
+    color: #9C27B0;
+    background-color: white;
+    border: 2px solid #9C27B0;
+}
+.map-filter-badge[data-type="3"].active {
+    color: white;
+    background-color: #9C27B0;
+}
+
+.map-filter-badge[data-type="4"] {
+    color: #FF9800;
+    background-color: white;
+    border: 2px solid #FF9800;
+}
+.map-filter-badge[data-type="4"].active {
+    color: #212529;
+    background-color: #FF9800;
+}
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 4d5f265..4aeecd7 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -120,14 +120,14 @@ function showContactOnMap(name, lat, lon) {
 window.showContactOnMap = showContactOnMap;
 
 /**
- * Get selected contact types from map filter checkboxes
+ * Get selected contact types from map filter badges
  */
 function getSelectedMapTypes() {
     const types = [];
-    if (document.getElementById('mapFilterCLI')?.checked) types.push(1);
-    if (document.getElementById('mapFilterREP')?.checked) types.push(2);
-    if (document.getElementById('mapFilterROOM')?.checked) types.push(3);
-    if (document.getElementById('mapFilterSENS')?.checked) types.push(4);
+    if (document.getElementById('mapFilterCLI')?.classList.contains('active')) types.push(1);
+    if (document.getElementById('mapFilterREP')?.classList.contains('active')) types.push(2);
+    if (document.getElementById('mapFilterROOM')?.classList.contains('active')) types.push(3);
+    if (document.getElementById('mapFilterSENS')?.classList.contains('active')) types.push(4);
     return types;
 }
 
@@ -208,11 +208,14 @@ async function showAllContactsOnMap() {
         modalEl.removeEventListener('shown.bs.modal', onShown);
     };
 
-    // Setup filter checkbox listeners
+    // Setup filter badge listeners
     ['mapFilterCLI', 'mapFilterREP', 'mapFilterROOM', 'mapFilterSENS'].forEach(id => {
-        const checkbox = document.getElementById(id);
-        if (checkbox) {
-            checkbox.onchange = updateMapMarkers;
+        const badge = document.getElementById(id);
+        if (badge) {
+            badge.onclick = () => {
+                badge.classList.toggle('active');
+                updateMapMarkers();
+            };
         }
     });
 
diff --git a/app/templates/base.html b/app/templates/base.html
index c8eb5f2..b6c8f34 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -299,32 +299,12 @@
                 <div class="modal-body p-0">
                     <!-- Type filter (hidden for single contact view) -->
                     <div id="mapTypeFilter" class="d-none px-3 py-2 border-bottom bg-light">
-                        <div class="d-flex flex-wrap gap-3 align-items-center">
+                        <div class="d-flex flex-wrap gap-2 align-items-center">
                             <span class="small text-muted me-1">Show:</span>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterCLI" value="1" checked>
-                                <label class="form-check-label small" for="mapFilterCLI">
-                                    <span class="badge" style="background-color: #2196F3;">CLI</span>
-                                </label>
-                            </div>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterREP" value="2" checked>
-                                <label class="form-check-label small" for="mapFilterREP">
-                                    <span class="badge" style="background-color: #4CAF50;">REP</span>
-                                </label>
-                            </div>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterROOM" value="3" checked>
-                                <label class="form-check-label small" for="mapFilterROOM">
-                                    <span class="badge" style="background-color: #9C27B0;">ROOM</span>
-                                </label>
-                            </div>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterSENS" value="4" checked>
-                                <label class="form-check-label small" for="mapFilterSENS">
-                                    <span class="badge" style="background-color: #FF9800;">SENS</span>
-                                </label>
-                            </div>
+                            <span class="map-filter-badge active" data-type="1" id="mapFilterCLI">CLI</span>
+                            <span class="map-filter-badge active" data-type="2" id="mapFilterREP">REP</span>
+                            <span class="map-filter-badge active" data-type="3" id="mapFilterROOM">ROOM</span>
+                            <span class="map-filter-badge active" data-type="4" id="mapFilterSENS">SENS</span>
                         </div>
                     </div>
                     <div id="leafletMap" style="height: 400px; width: 100%;"></div>
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index d176ca2..4768687 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -466,32 +466,12 @@
                 <div class="modal-body p-0">
                     <!-- Type filter (hidden for single contact view) -->
                     <div id="mapTypeFilter" class="d-none px-3 py-2 border-bottom bg-light">
-                        <div class="d-flex flex-wrap gap-3 align-items-center">
+                        <div class="d-flex flex-wrap gap-2 align-items-center">
                             <span class="small text-muted me-1">Show:</span>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterCLI" value="1" checked>
-                                <label class="form-check-label small" for="mapFilterCLI">
-                                    <span class="badge" style="background-color: #2196F3;">CLI</span>
-                                </label>
-                            </div>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterREP" value="2" checked>
-                                <label class="form-check-label small" for="mapFilterREP">
-                                    <span class="badge" style="background-color: #4CAF50;">REP</span>
-                                </label>
-                            </div>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterROOM" value="3" checked>
-                                <label class="form-check-label small" for="mapFilterROOM">
-                                    <span class="badge" style="background-color: #9C27B0;">ROOM</span>
-                                </label>
-                            </div>
-                            <div class="form-check form-check-inline mb-0">
-                                <input class="form-check-input" type="checkbox" id="mapFilterSENS" value="4" checked>
-                                <label class="form-check-label small" for="mapFilterSENS">
-                                    <span class="badge" style="background-color: #FF9800;">SENS</span>
-                                </label>
-                            </div>
+                            <span class="map-filter-badge active" data-type="1" id="mapFilterCLI">CLI</span>
+                            <span class="map-filter-badge active" data-type="2" id="mapFilterREP">REP</span>
+                            <span class="map-filter-badge active" data-type="3" id="mapFilterROOM">ROOM</span>
+                            <span class="map-filter-badge active" data-type="4" id="mapFilterSENS">SENS</span>
                         </div>
                     </div>
                     <div id="leafletMap" style="height: 400px; width: 100%;"></div>