Add WeFax image modal with download and delete buttons

Replace window.open() with a fullscreen modal matching the SSTV
pattern: toolbar with download/delete SVG buttons, close button,
click-outside-to-close, and confirmation before delete.

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

static/css/modes/wefax.css

@@ -592,6 +592,84 @@
     font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
 }
 
+/* --- Image Modal --- */
+.wefax-image-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.9);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    padding: 40px;
+}
+
+.wefax-image-modal.show {
+    display: flex;
+}
+
+.wefax-image-modal img {
+    max-width: 100%;
+    max-height: 100%;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.wefax-modal-toolbar {
+    position: absolute;
+    top: 20px;
+    right: 60px;
+    display: flex;
+    gap: 8px;
+    z-index: 1;
+}
+
+.wefax-modal-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    padding: 6px 12px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+    transition: all 0.15s;
+    text-transform: uppercase;
+}
+
+.wefax-modal-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.wefax-modal-btn.delete:hover {
+    background: var(--accent-red, #ff3366);
+    border-color: var(--accent-red, #ff3366);
+}
+
+.wefax-modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 32px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.15s;
+    z-index: 1;
+}
+
+.wefax-modal-close:hover {
+    opacity: 1;
+}
+
 /* --- Responsive --- */
 @media (max-width: 768px) {
     .wefax-main-row {

static/js/modes/wefax.js

@@ -55,6 +55,7 @@ var WeFax = (function () {
     }
 
     function destroy() {
+        closeImage();
         disconnectSSE();
         stopScope();
         stopCountdownTimer();
@@ -586,23 +587,23 @@ var WeFax = (function () {
             var station = img.station || '';
             var freq = img.frequency_khz ? (img.frequency_khz + ' kHz') : '';
             html += '<div class="wefax-gallery-item">';
-            html += '<img src="' + img.url + '" alt="WeFax" loading="lazy" onclick="WeFax.viewImage(\'' + img.url + '\')">';
+            html += '<img src="' + img.url + '" alt="WeFax" loading="lazy" onclick="WeFax.viewImage(\'' + img.url + '\', \'' + img.filename + '\')">';
             html += '<div class="wefax-gallery-meta">';
             html += '<span>' + station + (freq ? ' ' + freq : '') + '</span>';
             html += '<span>' + ts + '</span>';
             html += '</div>';
-            html += '<div class="wefax-gallery-actions">';
-            html += '<a href="' + img.url + '" download class="wefax-gallery-action" title="Download">&#x2B73;</a>';
-            html += '<button class="wefax-gallery-action delete" onclick="WeFax.deleteImage(\'' + img.filename + '\')" title="Delete">&times;</button>';
-            html += '</div>';
             html += '</div>';
         });
         gallery.innerHTML = html;
     }
 
     function deleteImage(filename) {
+        if (!confirm('Delete this image?')) return;
         fetch('/wefax/images/' + encodeURIComponent(filename), { method: 'DELETE' })
-            .then(function () { loadImages(); })
+            .then(function () {
+                closeImage();
+                loadImages();
+            })
             .catch(function (err) { console.error('WeFax delete error:', err); });
     }
 
@@ -613,9 +614,59 @@ var WeFax = (function () {
             .catch(function (err) { console.error('WeFax delete all error:', err); });
     }
 
-    function viewImage(url) {
+    var currentModalUrl = null;
-        // Open image in modal or new tab
+    var currentModalFilename = null;
-        window.open(url, '_blank');
+
+    function viewImage(url, filename) {
+        currentModalUrl = url;
+        currentModalFilename = filename || null;
+
+        var modal = document.getElementById('wefaxImageModal');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'wefaxImageModal';
+            modal.className = 'wefax-image-modal';
+            modal.innerHTML =
+                '<div class="wefax-modal-toolbar">' +
+                    '<button class="wefax-modal-btn" id="wefaxModalDownload" title="Download">' +
+                        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' +
+                        ' Download' +
+                    '</button>' +
+                    '<button class="wefax-modal-btn delete" id="wefaxModalDelete" title="Delete">' +
+                        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>' +
+                        ' Delete' +
+                    '</button>' +
+                '</div>' +
+                '<button class="wefax-modal-close" onclick="WeFax.closeImage()">&times;</button>' +
+                '<img src="" alt="WeFax Image">';
+            modal.addEventListener('click', function (e) {
+                if (e.target === modal) closeImage();
+            });
+            modal.querySelector('#wefaxModalDownload').addEventListener('click', function () {
+                if (currentModalUrl && currentModalFilename) {
+                    var a = document.createElement('a');
+                    a.href = currentModalUrl;
+                    a.download = currentModalFilename;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                }
+            });
+            modal.querySelector('#wefaxModalDelete').addEventListener('click', function () {
+                if (currentModalFilename) {
+                    deleteImage(currentModalFilename);
+                }
+            });
+            document.body.appendChild(modal);
+        }
+
+        modal.querySelector('img').src = url;
+        modal.classList.add('show');
+    }
+
+    function closeImage() {
+        var modal = document.getElementById('wefaxImageModal');
+        if (modal) modal.classList.remove('show');
     }
 
     // ---- Schedule Timeline ----
@@ -1023,6 +1074,7 @@ var WeFax = (function () {
         deleteImage: deleteImage,
         deleteAllImages: deleteAllImages,
         viewImage: viewImage,
+        closeImage: closeImage,
         toggleScheduler: toggleScheduler,
     };
 })();