Add zoom toggle button to VNC window controls

- Add zoom/scale toggle button in the window titlebar
- Implement toggle functionality between scaled view (fit to window) and full-size view with scrollbars
- Add CSS styling for the zoom button with active state
- Button toggles between search-plus and search-minus icons
- When active, shows remote desktop at actual size with clipping and scrollbars enabled

wssshd2/templates/vnc.html

@@ -127,6 +127,19 @@
         .minimize-btn:hover {
             background: #ffad2c;
         }
+        .zoom-btn {
+            background: #17a2b8;
+            color: white;
+        }
+        .zoom-btn:hover {
+            background: #138496;
+        }
+        .zoom-btn.active {
+            background: #007bff;
+        }
+        .zoom-btn.active:hover {
+            background: #0056b3;
+        }
         .window-content {
             background: #1e1e1e;
             padding: 8px;
@@ -180,6 +193,9 @@
                     <button id="disconnectBtn" class="btn btn-danger btn-sm me-1" disabled style="height: 24px; font-size: 12px; padding: 0 8px;">
                         <i class="fas fa-stop"></i> Disconnect
                     </button>
+                    <button class="window-btn zoom-btn" title="Toggle Zoom (Scale/Fit)" id="zoomBtn">
+                        <i class="fas fa-search-plus"></i>
+                    </button>
                     <button class="window-btn minimize-btn" title="Exit Fullscreen">_</button>
                     <button class="window-btn maximize-btn" title="Fullscreen"><span class="maximize-icon">□</span></button>
                     <button class="window-btn close-btn" title="Disconnect">×</button>
@@ -227,6 +243,7 @@ document.getElementById('cancelConnectBtn').addEventListener('click', cancelConn
 document.querySelector('.close-btn').addEventListener('click', disconnect);
 document.querySelector('.maximize-btn').addEventListener('click', toggleFullscreen);
 document.querySelector('.minimize-btn').addEventListener('click', toggleFullscreen);
+document.getElementById('zoomBtn').addEventListener('click', toggleZoom);
 
 function showNotification(message, type = 'info') {
     const notificationArea = document.getElementById('notification-area');
@@ -259,6 +276,37 @@ function toggleFullscreen() {
     }
 }
 
+function toggleZoom() {
+    if (!rfb || !connected) return;
+
+    const zoomBtn = document.getElementById('zoomBtn');
+    const zoomIcon = zoomBtn.querySelector('i');
+
+    if (zoomBtn.classList.contains('active')) {
+        // Switch to scaled view (fit to window)
+        zoomBtn.classList.remove('active');
+        zoomBtn.title = 'Toggle Zoom (Scale/Fit)';
+        zoomIcon.className = 'fas fa-search-plus';
+
+        // Enable scaling, disable clipping
+        rfb.scaleViewport = true;
+        rfb.clipViewport = false;
+
+        showNotification('Switched to scaled view (fit to window)', 'info');
+    } else {
+        // Switch to full-size view with scrollbars
+        zoomBtn.classList.add('active');
+        zoomBtn.title = 'Toggle Zoom (Actual Size)';
+        zoomIcon.className = 'fas fa-search-minus';
+
+        // Disable scaling, enable clipping
+        rfb.scaleViewport = false;
+        rfb.clipViewport = true;
+
+        showNotification('Switched to actual size view with scrollbars', 'info');
+    }
+}
+
 function connect() {
     if (connected) return;