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>

2 files changed, 30 insertions, 0 deletions

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;