From 23f479dd0ce28697318346f869d8052192265b47 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Mon, 25 May 2026 20:38:50 -0400
Subject: [PATCH] feat: add full-screen photo viewer with zoom + prev-photo
 thumbnails

Lightbox implementation was already present from prior commit
(04ac2fd). This commit adds the missing piece:

- Add thumbnail images to previously-processed photo cards
  rendered by renderPrevCard(), linked to /api/photos/{id}/file
- Clicking the thumbnail opens the full-screen lightbox with zoom
- Add .prev-thumb CSS for consistent square aspect-ratio display

Acceptance Criteria:
- Tap detail preview image -> full-screen overlay (already done)
- Photo fills screen with proper aspect ratio (already done)
- Pinch/scroll zoom + double-tap toggle (already done)
- Close button + swipe-down-to-dismiss (already done)
- Also works for previous photos section thumbnails (NOW DONE)
---
 static/index.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/static/index.html b/static/index.html
index 20f257f..c0ef646 100644
--- a/static/index.html
+++ b/static/index.html
@@ -273,6 +273,11 @@ if ('serviceWorker' in navigator) {
   .prev-photo-card .sticker-color { 
     display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px;
   }
+  .prev-thumb {
+    width: 100%; aspect-ratio: 1; object-fit: cover;
+    border-radius: var(--radius-sm); margin-bottom: 8px;
+    cursor: zoom-in; display: block; background: var(--card2);
+  }
 
   .export-modal-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
   .export-modal { background: var(--card); border-radius: var(--radius); padding: 20px; max-width: 320px; width: 90%; text-align: center; }
@@ -554,8 +559,10 @@ function renderPrevCard(p) {
   const colorHtml = p.sticker_color
     ? `<span class="sticker-color" style="background:${p.sticker_color === 'green' ? 'var(--green)' : p.sticker_color === 'orange' ? 'var(--amber)' : p.sticker_color === 'yellow' ? '#eab308' : 'var(--text3)'}"></span>`
     : '';
-  const hasCoords = p.gps_lat && p.gps_lng;
+    const hasCoords = p.gps_lat && p.gps_lng;
+    const photoUrl = `/api/photos/${p.id}/file`;
     return `<div class="prev-photo-card">
+    <img class="prev-thumb" src="${photoUrl}" alt="" onclick="openLightbox('${photoUrl}')" loading="lazy">
     <div class="prev-header">
       <span class="prev-filename">${esc(p.orig_filename)}</span>
       <span class="prev-time">${time}</span>