From d8a8f278dc63bf6ad6431dbc96e39db30bafa3f1 Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@axon-networks.com>
Date: Sat, 24 May 2025 14:53:46 -0700
Subject: [PATCH] feat(image viewer): add image fit/full toggle feature

---
 web/admin.html | 95 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 87 insertions(+), 8 deletions(-)

diff --git a/web/admin.html b/web/admin.html
index 8cfea6e..e40278c 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -358,32 +358,40 @@
 
     <!-- Image Viewer Modal -->
     <div id="imageViewerModal" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center" style="z-index: 9999;">
-        <div class="relative max-w-[95vw] max-h-[95vh] flex items-center justify-center">
+        <div class="relative w-full h-full flex items-center justify-center">
             <!-- Close button -->
-            <button onclick="window.admin.closeImageViewer()" class="absolute -top-10 right-0 p-2 rounded-lg bg-black/50 hover:bg-black/70 transition-colors">
+            <button onclick="window.admin.closeImageViewer()" class="absolute top-4 right-4 p-2 rounded-lg bg-black/50 hover:bg-black/70 transition-colors z-10">
                 <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                 </svg>
             </button>
             
             <!-- Previous button -->
-            <button onclick="window.admin.previousImage()" class="absolute left-4 top-1/2 transform -translate-y-1/2 p-3 rounded-full bg-black/50 hover:bg-black/70 transition-colors">
+            <button onclick="window.admin.previousImage()" class="absolute left-4 top-1/2 transform -translate-y-1/2 p-3 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10">
                 <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                 </svg>
             </button>
             
             <!-- Next button -->
-            <button onclick="window.admin.nextImage()" class="absolute right-4 top-1/2 transform -translate-y-1/2 p-3 rounded-full bg-black/50 hover:bg-black/70 transition-colors">
+            <button onclick="window.admin.nextImage()" class="absolute right-4 top-1/2 transform -translate-y-1/2 p-3 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10">
                 <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                 </svg>
             </button>
             
-            <img id="viewerImage" src="" alt="Generated image" class="max-w-full max-h-full object-contain rounded-lg">
+            <!-- View mode indicator -->
+            <div id="viewModeIndicator" class="absolute top-4 left-4 text-white text-sm bg-black/50 px-3 py-1 rounded-full z-10">
+                Fit to Window
+            </div>
+            
+            <!-- Image container -->
+            <div class="w-full h-full flex items-center justify-center p-4">
+                <img id="viewerImage" src="" alt="Generated image" class="rounded-lg cursor-pointer transition-all duration-300" onclick="window.admin.toggleImageSize()">
+            </div>
             
             <!-- Image counter -->
-            <div id="imageCounter" class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 text-white text-sm bg-black/50 px-3 py-1 rounded-full">
+            <div id="imageCounter" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white text-sm bg-black/50 px-3 py-1 rounded-full z-10">
                 1 / 1
             </div>
         </div>
@@ -400,6 +408,8 @@
                 };
                 this.categories = [];
                 this.tags = [];
+                this.imageViewMode = 'fit'; // 'fit' or 'full'
+                this.naturalImageSize = { width: 0, height: 0 };
 
                 this.init();
             }
@@ -1190,6 +1200,16 @@
                 this.currentImageIndex = imageIndex;
                 this.currentGalleryImages = this.currentGalleryImages || [];
                 
+                // Reset to fit mode when opening a new image
+                this.imageViewMode = 'fit';
+                
+                // Load the image and get its natural dimensions
+                img.onload = () => {
+                    this.naturalImageSize.width = img.naturalWidth;
+                    this.naturalImageSize.height = img.naturalHeight;
+                    this.applyImageSizing();
+                };
+                
                 img.src = imageUrl;
                 this.updateImageCounter();
                 this.showModal("imageViewerModal");
@@ -1202,7 +1222,17 @@
                 
                 this.currentImageIndex = (this.currentImageIndex + 1) % this.currentGalleryImages.length;
                 const nextImageUrl = `/prompt_manager/images/${this.currentGalleryImages[this.currentImageIndex].id}/file`;
-                document.getElementById("viewerImage").src = nextImageUrl;
+                const img = document.getElementById("viewerImage");
+                
+                // Reset view mode and apply sizing when new image loads
+                this.imageViewMode = 'fit';
+                img.onload = () => {
+                    this.naturalImageSize.width = img.naturalWidth;
+                    this.naturalImageSize.height = img.naturalHeight;
+                    this.applyImageSizing();
+                };
+                
+                img.src = nextImageUrl;
                 this.updateImageCounter();
             }
 
@@ -1211,7 +1241,17 @@
                 
                 this.currentImageIndex = (this.currentImageIndex - 1 + this.currentGalleryImages.length) % this.currentGalleryImages.length;
                 const prevImageUrl = `/prompt_manager/images/${this.currentGalleryImages[this.currentImageIndex].id}/file`;
-                document.getElementById("viewerImage").src = prevImageUrl;
+                const img = document.getElementById("viewerImage");
+                
+                // Reset view mode and apply sizing when new image loads
+                this.imageViewMode = 'fit';
+                img.onload = () => {
+                    this.naturalImageSize.width = img.naturalWidth;
+                    this.naturalImageSize.height = img.naturalHeight;
+                    this.applyImageSizing();
+                };
+                
+                img.src = prevImageUrl;
                 this.updateImageCounter();
             }
 
@@ -1230,6 +1270,37 @@
                 this.hideModal("imageViewerModal");
                 document.getElementById("viewerImage").src = "";
                 this.currentImageIndex = 0;
+                this.imageViewMode = 'fit';
+            }
+
+            applyImageSizing() {
+                const img = document.getElementById("viewerImage");
+                const indicator = document.getElementById("viewModeIndicator");
+                
+                if (!img || !indicator) return;
+                
+                if (this.imageViewMode === 'fit') {
+                    // Fit to viewport with padding
+                    img.style.maxWidth = 'calc(100vw - 8rem)';
+                    img.style.maxHeight = 'calc(100vh - 8rem)';
+                    img.style.width = 'auto';
+                    img.style.height = 'auto';
+                    img.style.objectFit = 'contain';
+                    indicator.textContent = 'Fit to Window';
+                } else {
+                    // Show at full size
+                    img.style.maxWidth = 'none';
+                    img.style.maxHeight = 'none';
+                    img.style.width = this.naturalImageSize.width + 'px';
+                    img.style.height = this.naturalImageSize.height + 'px';
+                    img.style.objectFit = 'none';
+                    indicator.textContent = 'Full Size';
+                }
+            }
+
+            toggleImageSize() {
+                this.imageViewMode = this.imageViewMode === 'fit' ? 'full' : 'fit';
+                this.applyImageSizing();
             }
 
             formatFileSize(bytes) {
@@ -1453,6 +1524,14 @@
                 }
             }
         });
+
+        // Window resize listener for responsive image sizing
+        window.addEventListener('resize', function() {
+            // Only apply resize adjustments if image viewer is open and in fit mode
+            if (!document.getElementById('imageViewerModal').classList.contains('hidden') && admin.imageViewMode === 'fit') {
+                admin.applyImageSizing();
+            }
+        });
     </script>
 </body>
 </html>
\ No newline at end of file