feat(find-training): Refactor marker visibility dots into inline tab checkboxes

Replace standalone colored dot toggles with custom checkboxes inline
beside each category tab heading (Events, Trainers, Venues). Version
bump 2.2.17 → 2.2.18 for CDN cache busting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Status.md

@@ -1,8 +1,8 @@
 # HVAC Community Events - Project Status
 
 **Last Updated:** February 9, 2026
-**Current Session:** Mobile Find Training Scroll Fix
+**Current Session:** Marker Visibility Toggle Checkbox Refactor
-**Version:** 2.2.14 (Deployed to Production)
+**Version:** 2.2.18 (Deployed to Production)
 
 ---
 
@@ -20,7 +20,118 @@
 
 ---
 
-## 🎯 CURRENT SESSION - MOBILE FIND TRAINING SCROLL FIX (Feb 9, 2026)
+## 🎯 CURRENT SESSION - MARKER VISIBILITY TOGGLE CHECKBOX REFACTOR (Feb 9, 2026)
+
+### Status: ✅ **COMPLETE - Deployed to Production (v2.2.18)**
+
+**Objective:** Refactor the marker visibility toggles on the Find Training page from standalone colored dots into inline checkboxes beside each category tab heading.
+
+### Changes Made
+
+1. **Inline Checkboxes in Tab Buttons** (`templates/page-find-training.php`)
+   - Removed standalone `hvac-visibility-toggles` div with 3 colored dot toggles
+   - Moved each checkbox inline into its corresponding tab button (`Events`, `Trainers`, `Venues`)
+   - `onclick="event.stopPropagation()"` on labels prevents checkbox clicks from triggering tab switches
+   - Checkbox IDs unchanged (`hvac-show-events`, `hvac-show-trainers`, `hvac-show-venues`) — no JS changes needed
+
+2. **Custom Checkbox Styling** (`assets/css/find-training-map.css`)
+   - Replaced old dot-based toggle CSS with custom checkbox styles
+   - 14x14px checkboxes with rounded corners, white background, CSS checkmark
+   - Category-specific colors when checked: teal for events (`#0ebaa6`), green for trainers (`#6aad1e`), green for venues (`#89c92e`)
+   - Unchecked state: grey-bordered empty box
+   - Tablet: smaller 12px checkboxes
+   - Mobile (<768px): checkboxes hidden (same behavior as before)
+
+3. **Trainer Checkbox Color Fix** (`assets/css/find-training-map.css`)
+   - `--hvac-trainer-color` CSS variable is `#f0f7e8` (near-white), too light for checkbox fill
+   - Overrode trainer checkbox specifically with `#6aad1e` for visible green
+
+4. **Version Bump** (`includes/class-hvac-plugin.php`)
+   - Bumped `HVAC_VERSION` and `HVAC_PLUGIN_VERSION` from `2.2.17` to `2.2.18` for CDN cache busting
+
+### Files Modified
+
+| File | Change |
+|------|--------|
+| `templates/page-find-training.php` | Removed visibility toggles div, added inline checkboxes in tab buttons |
+| `assets/css/find-training-map.css` | Replaced dot toggle CSS with checkbox styles, responsive adjustments |
+| `includes/class-hvac-plugin.php` | Version bump `2.2.17` → `2.2.18` |
+
+### Verification
+
+- ✅ All 3 checkboxes render inline beside tab headings with category colors
+- ✅ Unchecking a checkbox removes that category's markers from map
+- ✅ Re-checking restores markers
+- ✅ Tab switching works independently of checkbox state
+- ✅ Counts display correctly: Events (8), Trainers (42), Venues (9)
+- ✅ No JS changes required — existing event handlers work with unchanged checkbox IDs
+
+---
+
+## 📋 PREVIOUS SESSION - FIND TRAINING TAB REORDER, MARKER HIGHLIGHTING & MAP RESET (Feb 9, 2026)
+
+### Status: ✅ **COMPLETE - Deployed to Production (v2.2.17)**
+
+**Objective:** Reorder Find Training page tabs to make Events the default, add visual marker highlighting when switching tabs, add a map reset button, and fix mobile overflow caused by the changes.
+
+### Changes Made
+
+1. **Tab Reorder: Events First** (`templates/page-find-training.php`, `assets/js/find-training-map.js`)
+   - Moved Events tab from 3rd to 1st position (default active tab)
+   - Tab order is now: **Events | Trainers | Venues**
+   - Updated search placeholder to "Search events..."
+   - Updated skip link to target `#hvac-event-grid`
+   - Updated filter bar aria-label for all three categories
+   - Reordered tab panels to match (Events panel active with loading spinner)
+
+2. **Marker Highlighting on Tab Selection** (`assets/js/find-training-map.js`)
+   - Added 4 highlighted icon methods: `getTrainerIconHighlighted()`, `getChampionIconHighlighted()`, `getVenueIconHighlighted()`, `getEventIconHighlighted()`
+   - Highlighted icons are larger (scale +4) with brighter/thicker strokes (strokeWeight 3)
+   - URL-based icons scale from 32x32 to 40x40 with adjusted anchors
+   - Added `highlightMarkersForTab(tab)` method with no-map guard
+   - Highlighted markers get `zIndex: 100` (vs default `1`) to render on top
+   - Called from both `switchTab()` and `updateMarkers()`
+
+3. **Map Reset Button** (`templates/page-find-training.php`, `assets/js/find-training-map.js`, `assets/css/find-training-map.css`)
+   - Added reset button (rotate icon) positioned bottom-right of map container
+   - Calls `fitBounds()` to restore original zoom encompassing all markers
+   - Styled to match Google Maps UI controls (white, rounded, shadow)
+
+4. **Mobile Overflow Fix** (`assets/css/find-training-map.css`)
+   - **Symptom:** Making Events the default tab exposed long event titles (e.g., "measureQuick 101: Cooling and Heat Pump Commissioning") that pushed sidebar beyond viewport width
+   - **Root Cause:** Tablet media query had `overflow: visible !important` on `.hvac-sidebar`, overriding base `overflow: hidden`
+   - **Fix:** Changed to `overflow-x: hidden !important; overflow-y: visible !important;`
+   - Also added `overflow: hidden` and `min-width: 0; text-overflow: ellipsis` to tab buttons
+
+5. **Version Bump** (`includes/class-hvac-plugin.php`)
+   - Bumped `HVAC_VERSION` and `HVAC_PLUGIN_VERSION` from `2.2.14` to `2.2.17`
+   - Intermediate bumps (2.2.15, 2.2.16) needed during debugging to bust CSS cache
+
+### Files Modified
+
+| File | Change |
+|------|--------|
+| `templates/page-find-training.php` | Reorder tabs/panels (Events first), update placeholder/skip link/aria, add reset button |
+| `assets/js/find-training-map.js` | Default to `'events'`, 4 highlighted icon methods, `highlightMarkersForTab()`, `resetMapView()`, dynamic `showLoading()` |
+| `assets/css/find-training-map.css` | Reset button styles, mobile overflow fix (`overflow-x: hidden`), tab overflow protection |
+| `includes/class-hvac-plugin.php` | Version bump `2.2.14` → `2.2.17` |
+
+### Git Commit
+- `9dbe472c` - feat(find-training): Reorder tabs (Events first), add marker highlighting and map reset
+
+### Verification
+
+- ✅ Events tab active and first on page load, placeholder says "Search events..."
+- ✅ Event markers highlighted (larger, brighter) by default
+- ✅ Switching tabs highlights corresponding marker category, others revert to normal
+- ✅ Highlighted markers render on top (zIndex 100)
+- ✅ Reset button restores original zoom/bounds after zooming in
+- ✅ Mobile (375px): no horizontal overflow, sidebar fits viewport
+- ✅ Keyboard tab navigation still works (arrow keys)
+
+---
+
+## 📋 PREVIOUS SESSION - MOBILE FIND TRAINING SCROLL FIX (Feb 9, 2026)
 
 ### Status: ✅ **COMPLETE - Deployed to Production (v2.2.14)**
 
@@ -1127,7 +1238,7 @@ DISPLAY=:1 HEADLESS=false node test-comprehensive-validation.js
 
 ### Production Environment
 **URL:** https://upskillhvac.com
-**Version:** 2.2.13 (latest)
+**Version:** 2.2.17 (latest)
 **Server:** Cloudways Shared VPS
 
 ---

assets/css/find-training-map.css

@@ -1362,14 +1362,20 @@ body .hvac-find-training-page {
         font-size: 12px;
     }
 
-    .hvac-visibility-toggles {
+    .hvac-marker-checkbox {
-        gap: 8px;
+        width: 12px;
-        padding: 4px 0;
+        height: 12px;
     }
 
-    .hvac-toggle-dot {
+    .hvac-marker-checkbox::after {
-        width: 14px;
+        left: 2px;
-        height: 14px;
+        top: 0px;
+        width: 3px;
+        height: 6px;
+    }
+
+    .hvac-marker-toggle {
+        margin-right: 2px;
     }
 }
 
@@ -1448,7 +1454,7 @@ body .hvac-find-training-page {
         font-size: 11px;
     }
 
-    .hvac-visibility-toggles {
+    .hvac-marker-toggle {
         display: none;
     }
 
@@ -1804,57 +1810,71 @@ body .hvac-find-training-page {
     font-weight: 600;
 }
 
-/* Visibility Toggles */
+/* Marker Toggle Checkboxes (inline in tab buttons) */
-.hvac-visibility-toggles {
+.hvac-marker-toggle {
-    display: flex;
+    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 0;
-}
-
-.hvac-visibility-toggle {
-    display: flex;
     align-items: center;
     cursor: pointer;
+    margin-right: 4px;
+    vertical-align: middle;
+    position: relative;
 }
 
-.hvac-visibility-toggle input {
+.hvac-marker-toggle input {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
 }
 
-.hvac-toggle-dot {
+.hvac-marker-checkbox {
-    width: 18px;
+    width: 14px;
-    height: 18px;
+    height: 14px;
-    border-radius: 50%;
+    border: 2px solid #999;
-    border: 2px solid;
+    border-radius: 3px;
-    transition: all 0.2s;
+    display: inline-block;
+    position: relative;
+    transition: all 0.15s ease;
+    background: #fff;
+    flex-shrink: 0;
 }
 
-.hvac-toggle-trainer {
+.hvac-marker-checkbox::after {
-    background: var(--hvac-trainer-color);
+    content: '';
-    border-color: #5a8a1a;
+    position: absolute;
+    left: 3px;
+    top: 0px;
+    width: 4px;
+    height: 8px;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    opacity: 0;
+    transition: opacity 0.15s ease;
 }
 
-.hvac-toggle-venue {
+.hvac-marker-toggle input:checked + .hvac-marker-checkbox::after {
+    opacity: 1;
+}
+
+/* Category-specific checkbox colors */
+.hvac-marker-toggle-trainer input:checked + .hvac-marker-checkbox {
+    background: #6aad1e;
+    border-color: #6aad1e;
+}
+
+.hvac-marker-toggle-venue input:checked + .hvac-marker-checkbox {
     background: var(--hvac-venue-color);
-    border-color: #6fa024;
+    border-color: var(--hvac-venue-color);
 }
 
-.hvac-toggle-event {
+.hvac-marker-toggle-event input:checked + .hvac-marker-checkbox {
     background: var(--hvac-event-color);
-    border-color: #0a9a8a;
+    border-color: var(--hvac-event-color);
 }
 
-.hvac-visibility-toggle input:not(:checked) + .hvac-toggle-dot {
+.hvac-marker-toggle:hover .hvac-marker-checkbox {
-    background: #f5f5f5;
+    border-color: #666;
-    border-color: #ccc;
-}
-
-.hvac-visibility-toggle:hover .hvac-toggle-dot {
-    transform: scale(1.1);
 }
 
 /* Tab Panels */

includes/class-hvac-plugin.php

@@ -112,10 +112,10 @@ final class HVAC_Plugin {
      */
     private function defineConstants(): void {
         if (!defined('HVAC_PLUGIN_VERSION')) {
-            define('HVAC_PLUGIN_VERSION', '2.2.17');
+            define('HVAC_PLUGIN_VERSION', '2.2.18');
         }
         if (!defined('HVAC_VERSION')) {
-            define('HVAC_VERSION', '2.2.17');
+            define('HVAC_VERSION', '2.2.18');
         }
         if (!defined('HVAC_PLUGIN_FILE')) {
             define('HVAC_PLUGIN_FILE', dirname(__DIR__) . '/hvac-community-events.php');

templates/page-find-training.php

@@ -138,32 +138,28 @@ $api_key_configured = $find_training->is_api_key_configured();
                 <!-- Tab Navigation -->
                 <div class="hvac-sidebar-tabs" role="tablist" aria-label="Browse by category">
                     <button role="tab" class="hvac-tab active" data-tab="events" aria-selected="true" aria-controls="hvac-panel-events">
+                        <label class="hvac-marker-toggle hvac-marker-toggle-event" title="Show events on map" onclick="event.stopPropagation()">
+                            <input type="checkbox" id="hvac-show-events" checked>
+                            <span class="hvac-marker-checkbox"></span>
+                        </label>
                         Events (<span data-count="events">0</span>)
                     </button>
                     <button role="tab" class="hvac-tab" data-tab="trainers" aria-selected="false" aria-controls="hvac-panel-trainers">
+                        <label class="hvac-marker-toggle hvac-marker-toggle-trainer" title="Show trainers on map" onclick="event.stopPropagation()">
+                            <input type="checkbox" id="hvac-show-trainers" checked>
+                            <span class="hvac-marker-checkbox"></span>
+                        </label>
                         Trainers (<span data-count="trainers">0</span>)
                     </button>
                     <button role="tab" class="hvac-tab" data-tab="venues" aria-selected="false" aria-controls="hvac-panel-venues">
+                        <label class="hvac-marker-toggle hvac-marker-toggle-venue" title="Show venues on map" onclick="event.stopPropagation()">
+                            <input type="checkbox" id="hvac-show-venues" checked>
+                            <span class="hvac-marker-checkbox"></span>
+                        </label>
                         Venues (<span data-count="venues">0</span>)
                     </button>
                 </div>
 
-                <!-- Visibility Toggles (moved from map overlay) -->
-                <div class="hvac-visibility-toggles">
-                    <label class="hvac-visibility-toggle" title="Show trainers on map">
-                        <input type="checkbox" id="hvac-show-trainers" checked>
-                        <span class="hvac-toggle-dot hvac-toggle-trainer"></span>
-                    </label>
-                    <label class="hvac-visibility-toggle" title="Show venues on map">
-                        <input type="checkbox" id="hvac-show-venues" checked>
-                        <span class="hvac-toggle-dot hvac-toggle-venue"></span>
-                    </label>
-                    <label class="hvac-visibility-toggle" title="Show events on map">
-                        <input type="checkbox" id="hvac-show-events" checked>
-                        <span class="hvac-toggle-dot hvac-toggle-event"></span>
-                    </label>
-                </div>
-
                 <!-- Mobile collapse toggle -->
                 <button type="button"
                         class="hvac-sidebar-toggle"