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>

1 files changed, 19 insertions, 0 deletions

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;