fix: sidebar search filter now syncs with navigation and counter

Arrow keys, nav buttons, and the counter now operate on the filtered
list instead of raw DATA indices. When searching, state.current jumps
to the first visible match and navigation stays within filtered items.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: pftg

lib/capybara_screenshot_diff/reporters/templates/report.html.erb

@@ -735,12 +735,26 @@
   var opSlider = $('opacity-slider'), opVal = $('opacity-val');
   var swContainer = $('swipe-container'), swHandle = $('swipe-handle'), swClip = $('swipe-clip-box');
 
+  /* ── Filtered index list (kept in sync with search) ──────────────── */
+  var filtered = [];
+
+  function rebuildFiltered() {
+    var q = state.search.toLowerCase();
+    filtered = [];
+    DATA.forEach(function(item, idx) {
+      if (!q || item.name.toLowerCase().indexOf(q) !== -1) filtered.push(idx);
+    });
+    /* If current item is no longer visible, jump to first match */
+    if (filtered.length && filtered.indexOf(state.current) === -1) {
+      state.current = filtered[0];
+    }
+  }
+
   /* ── Sidebar ────────────────────────────────────────────────────────── */
   function buildSidebar() {
     sidebarList.innerHTML = '';
-    var q = state.search.toLowerCase();
-    DATA.forEach(function(item, idx) {
-      if (q && item.name.toLowerCase().indexOf(q) === -1) return;
+    filtered.forEach(function(idx) {
+      var item = DATA[idx];
       var btn = document.createElement('button');
       btn.className = 'thumb-btn' + (idx === state.current ? ' active' : '');
       btn.setAttribute('title', item.name);
@@ -764,22 +778,39 @@
 
   /* ── Selection ──────────────────────────────────────────────────────── */
   function selectItem(idx) {
-    if (!DATA.length) return;
-    idx = Math.max(0, Math.min(idx, DATA.length - 1));
+    if (!filtered.length) return;
+    /* Clamp to filtered range */
+    var pos = filtered.indexOf(idx);
+    if (pos === -1) {
+      /* idx not in filtered list — find nearest */
+      pos = Math.max(0, Math.min(idx, filtered.length - 1));
+      idx = filtered[pos];
+    }
     state.current = idx;
     renderMain();
     buildSidebar();
     var active = sidebarList.querySelector('.thumb-btn.active');
     if (active) active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   }
 
+  /* Navigate to next/prev within filtered list */
+  function selectNext() {
+    var pos = filtered.indexOf(state.current);
+    if (pos < filtered.length - 1) selectItem(filtered[pos + 1]);
+  }
+  function selectPrev() {
+    var pos = filtered.indexOf(state.current);
+    if (pos > 0) selectItem(filtered[pos - 1]);
+  }
+
   /* ── Render ─────────────────────────────────────────────────────────── */
   function renderMain() {
     var item = DATA[state.current];
     if (!item) return;
 
     topTitle.textContent = item.name;
-    navCounter.textContent = (state.current + 1) + '/' + DATA.length;
+    var pos = filtered.indexOf(state.current);
+    navCounter.textContent = (pos + 1) + '/' + filtered.length;
     var hasDiff = item.diff || item.heatmap;
     topBadge.textContent = hasDiff ? 'changed' : 'pass';
     topBadge.className = 'diff-badge ' + (hasDiff ? 'diff-badge-fail' : 'diff-badge-pass');
@@ -822,8 +853,8 @@
   });
 
   /* ── Nav buttons ───────────────────────────────────────────────────── */
-  $('nav-prev').addEventListener('click', function() { selectItem(state.current - 1); });
-  $('nav-next').addEventListener('click', function() { selectItem(state.current + 1); });
+  $('nav-prev').addEventListener('click', selectPrev);
+  $('nav-next').addEventListener('click', selectNext);
 
   /* ── Overlay slider ────────────────────────────────────────────────── */
   opSlider.addEventListener('input', function() {
@@ -862,7 +893,12 @@
   document.addEventListener('touchend', function() { dragging = false; });
 
   /* ── Search ────────────────────────────────────────────────────────── */
-  searchEl.addEventListener('input', function() { state.search = this.value; buildSidebar(); });
+  searchEl.addEventListener('input', function() {
+    state.search = this.value;
+    rebuildFiltered();
+    buildSidebar();
+    if (filtered.length) renderMain();
+  });
 
   /* ── Keyboard ──────────────────────────────────────────────────────── */
   document.addEventListener('keydown', function(e) {
@@ -871,8 +907,8 @@
       return;
     }
     switch (e.key) {
-      case 'ArrowRight': case 'ArrowDown': e.preventDefault(); selectItem(state.current + 1); break;
-      case 'ArrowLeft':  case 'ArrowUp':   e.preventDefault(); selectItem(state.current - 1); break;
+      case 'ArrowRight': case 'ArrowDown': e.preventDefault(); selectNext(); break;
+      case 'ArrowLeft':  case 'ArrowUp':   e.preventDefault(); selectPrev(); break;
       case '1': setMode('sidebyside'); break;
       case '2': setMode('overlay');    break;
       case '3': setMode('swipe');      break;
@@ -888,6 +924,7 @@
     topBadge.style.display = 'none';
     Object.keys(views).forEach(function(m) { views[m].style.display = 'none'; });
   } else {
+    rebuildFiltered();
     buildSidebar();
     renderMain();
   }