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>

3 files changed, 18 insertions, 1 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;
diff --git a/views/album.erb b/views/album.erb
index 077e119..03eb3bb 100644
--- a/views/album.erb
+++ b/views/album.erb
@@ -20,7 +20,10 @@
 <% unless @albums.empty? %>
 <section class="grid-section">
   <% if @entries.any? %><h2 class="section-label">Albums</h2><% end %>
-  <div class="grid">
+  <% if @albums.length > 4 %>
+  <input type="search" id="album-search" placeholder="Filter albums…" autocomplete="off">
+  <% end %>
+  <div class="grid" id="album-grid">
     <% @albums.each do |a| %>
       <% href = @rel.empty? ? "/browse/#{a[:name]}" : "/browse/#{@rel}/#{a[:name]}" %>
       <a href="<%= href %>" class="card album-card">