feat: add fullscreen photo navigation

src/server/app-assets.ts

@@ -621,6 +621,8 @@ export const APP_STYLES = `      :root {
         border: 0;
         box-shadow: none;
         color: var(--timeline-text);
+        touch-action: none;
+        user-select: none;
       }
 
       .overlay-media {
@@ -728,6 +730,41 @@ export const APP_STYLES = `      :root {
         border-color: var(--timeline-border-strong);
       }
 
+      .overlay-nav {
+        position: fixed;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1001;
+        width: 44px;
+        height: 44px;
+        padding: 0;
+        justify-content: center;
+        background: var(--timeline-surface-soft);
+        color: var(--timeline-text);
+        border: 1px solid var(--timeline-border);
+        box-shadow: var(--shadow-soft);
+        backdrop-filter: blur(14px);
+      }
+
+      .overlay-nav:hover {
+        background: var(--timeline-surface-strong);
+        border-color: var(--timeline-border-strong);
+      }
+
+      .overlay-prev {
+        left: 16px;
+      }
+
+      .overlay-next {
+        right: 16px;
+      }
+
+      .overlay-nav[disabled] {
+        opacity: 0.45;
+        cursor: default;
+        pointer-events: none;
+      }
+
       .thumb {
         width: min(210px, 100%);
         box-sizing: border-box;

src/server/page-template.ts

@@ -140,21 +140,35 @@ ${APP_STYLES}
     </section>
 
     <div class="overlay" id="overlay" aria-hidden="true">
+      <button class="overlay-nav overlay-prev" id="overlay-prev" type="button" aria-label="Previous photo">
+        <span class="button-icon" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+      </button>
       <button class="close overlay-close" id="close-overlay" type="button" aria-label="Close photo">
         x
       </button>
-      <div class="overlay-card">
-        <div class="overlay-media">
+      <div class="overlay-card" id="overlay-card">
+        <div class="overlay-media" id="overlay-media">
           <div class="overlay-loading" id="overlay-loading" aria-live="polite" aria-atomic="true">
             <span class="spinner active" aria-hidden="true"></span>
             <strong id="overlay-loading-text">Loading full-size image...</strong>
           </div>
           <img id="overlay-image" alt="" />
         </div>
-        <footer class="overlay-caption">
+        <footer class="overlay-caption" id="overlay-caption">
           <strong id="overlay-title">Photo</strong>
         </footer>
       </div>
+      <button class="overlay-nav overlay-next" id="overlay-next" type="button" aria-label="Next photo">
+        <span class="button-icon" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.5 4 10.5 8l-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+      </button>
     </div>
 
     <script src="/vendor/leaflet/leaflet.js"></script>