From e3d8481f4f0b8aedd73630f20b7b7e27f63f8531 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Mon, 25 May 2026 21:23:04 -0400
Subject: [PATCH] Fix GPS filter: decouple chip state from event.target, sync
 on re-render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extracted updateFilterChips() helper to decouple chip visual state from
  the brittle event.target dependency in setFilter()
- Call updateFilterChips() inside renderGallery() so chip visual state
  always matches currentFilter when gallery re-renders
- Reset chip classes in resetAll() to prevent stale active state from
  persisting across sessions
- Fixes a bug where resetAll() set currentFilter='all' but left a
  previous chip (e.g. '📍 GPS') visually active
---
 static/index.html | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index af9008a..8d76f3a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -889,10 +889,17 @@ function updateSummary() {
   document.getElementById('bulkBtn').style.display = gps > 0 ? 'block' : 'none';
 }
 
+function updateFilterChips() {
+  const chipMap = { all: 'All', gps: '📍 GPS', nogps: '⚠️ No GPS' };
+  document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
+  const target = Array.from(document.querySelectorAll('.filter-chip'))
+    .find(c => c.textContent.trim() === chipMap[currentFilter]);
+  if (target) target.classList.add('active');
+}
+
 function setFilter(f) {
   currentFilter = f;
-  document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
-  event.target.classList.add('active');
+  updateFilterChips();
   renderGallery();
 }
 
@@ -901,6 +908,9 @@ function renderGallery() {
   if (currentFilter === 'gps') filtered = allPhotos.filter(p => p.hasGps);
   else if (currentFilter === 'nogps') filtered = allPhotos.filter(p => !p.hasGps);
 
+  // Sync filter chip visual state with currentFilter
+  updateFilterChips();
+
   const gallery = document.getElementById('gallery');
   gallery.innerHTML = filtered.map(p => {
     const idx = allPhotos.indexOf(p);
@@ -1330,6 +1340,11 @@ function resetAll() {
   allPhotos = [];
   selectedIdx = -1;
   currentFilter = 'all';
+  // Reset filter chips to default state
+  document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
+  const allChip = Array.from(document.querySelectorAll('.filter-chip'))
+    .find(c => c.textContent.trim() === 'All');
+  if (allChip) allChip.classList.add('active');
   bulkData = [];
   if (bulkMap) { bulkMap.remove(); bulkMap = null; }
   document.getElementById('fileInput').value = '';