Add info overlay to lightbox showing photo metadata

Tap "ℹ Info" in the caption bar to toggle a semi-transparent panel at
the bottom of the image showing filename (if different from title),
date taken, and pixel dimensions. Panel resets to hidden on each
photo change. Button is hidden automatically when no metadata is
available. Width/height are now included in the ENTRIES payload.

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

4 files changed, 36 insertions, 0 deletions

diff --git a/app.rb b/app.rb
index f58a99d..8667471 100644
--- a/app.rb
+++ b/app.rb
@@ -94,6 +94,8 @@ helpers do
         visible:  meta.fetch('visible', true),
         type:     media_type_for(name),
         taken_at: meta['taken_at'],
+        width:    meta['width'],
+        height:   meta['height'],
       }
     end
 
diff --git a/public/css/style.css b/public/css/style.css
index bb152aa..3dd2450 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -186,6 +186,17 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
 #lb-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: block; }
 #lb-audio { width: 400px; max-width: 90vw; display: block; }
 
+.lb-info {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: rgba(0,0,0,.72);
+  padding: 10px 14px;
+  font-size: .82rem;
+  line-height: 1.6;
+}
+.lb-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; }
+.lb-info dt { color: #aaa; white-space: nowrap; }
+.lb-info dd { margin: 0; color: #eee; }
+
 .lb-caption-bar {
   padding: 8px 80px;
   text-align: center;
diff --git a/public/js/album.js b/public/js/album.js
index d3a563a..9e921d7 100644
--- a/public/js/album.js
+++ b/public/js/album.js
@@ -30,6 +30,24 @@ function lbNav(delta) {
   }
 }
 
+function lbToggleInfo() {
+  document.getElementById('lb-info-panel').classList.toggle('hidden');
+}
+
+function lbBuildInfo(e) {
+  const rows = [];
+  if (e.name !== e.title) rows.push(['File', e.name]);
+  if (e.taken_at) {
+    const d = new Date(e.taken_at);
+    rows.push(['Date', d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })]);
+  }
+  if (e.width && e.height) rows.push(['Dimensions', `${e.width} × ${e.height}`]);
+  document.getElementById('lb-info-dl').innerHTML =
+    rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('');
+  document.getElementById('lb-info-panel').classList.add('hidden');
+  document.getElementById('lb-info-btn').style.display = rows.length ? '' : 'none';
+}
+
 function renderLightbox() {
   const e   = ENTRIES[lbIndex];
   const img = document.getElementById('lb-img');
@@ -37,6 +55,7 @@ function renderLightbox() {
   const aud = document.getElementById('lb-audio');
 
   [img, vid, aud].forEach(el => { el.classList.add('hidden'); el.pause && el.pause(); });
+  lbBuildInfo(e);
 
   if (e.type === 'image') {
     img.src = e.src; img.alt = e.title;
diff --git a/views/album.erb b/views/album.erb
index bee779a..961b26a 100644
--- a/views/album.erb
+++ b/views/album.erb
@@ -82,6 +82,9 @@
       <audio  id="lb-audio" controls class="hidden"></audio>
       <button class="lb-btn lb-prev" onclick="lbNav(-1)" aria-label="Previous">‹</button>
       <button class="lb-btn lb-next" onclick="lbNav(1)"  aria-label="Next">›</button>
+      <div id="lb-info-panel" class="lb-info hidden">
+        <dl id="lb-info-dl"></dl>
+      </div>
     </div>
   </div>
   <div class="lb-caption-bar">
@@ -89,6 +92,7 @@
     <span id="lb-caption"></span>
     <a id="lb-download" href="" download class="btn btn-sm lb-action">↓ Original</a>
     <button id="lb-copylink" onclick="lbCopyLink()" class="btn btn-sm lb-action">⧉ Copy link</button>
+    <button id="lb-info-btn" onclick="lbToggleInfo()" class="btn btn-sm lb-action">ℹ Info</button>
     <span id="lb-counter"></span>
   </div>
 </div>