Add live album filter search box

Typing in the search box instantly hides non-matching album cards.
Shown only when an album has more than 4 sub-albums (no point otherwise).
Pure client-side — no server round-trips.

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

2 files changed, 14 insertions, 0 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 61462a4..037b115 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -148,6 +148,7 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
 }
 
 .album-label { padding: 6px 8px; font-size: .88rem; font-weight: 500; color: var(--text); }
+#album-search { display: block; width: 100%; max-width: 280px; margin-bottom: 14px; padding: 5px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; }
 .card-meta { padding: 6px 8px; }
 .card-caption { font-size: .8rem; color: var(--text-dim); }
 
diff --git a/public/js/album.js b/public/js/album.js
index 74d524c..d3a563a 100644
--- a/public/js/album.js
+++ b/public/js/album.js
@@ -96,6 +96,19 @@ window.addEventListener('DOMContentLoaded', () => {
   }
 });
 
+// Album search filter
+(function () {
+  const input = document.getElementById('album-search');
+  if (!input) return;
+  input.addEventListener('input', () => {
+    const q = input.value.trim().toLowerCase();
+    document.querySelectorAll('#album-grid .album-card').forEach(card => {
+      const label = (card.querySelector('.album-label')?.textContent || '').toLowerCase();
+      card.style.display = !q || label.includes(q) ? '' : 'none';
+    });
+  });
+})();
+
 // Touch swipe
 (function () {
   let startX = null;