QR Code Maker update

map/app/public/js/mkdocs-search.js

@@ -215,18 +215,128 @@ export class MkDocsSearch {
             resultsCount.textContent = 'No results';
         } else {
             resultsCount.textContent = `${results.length} result${results.length > 1 ? 's' : ''}`;
-            resultsContainer.innerHTML = results.map(result => `
-                <a href="${result.url}" class="search-result" target="_blank" rel="noopener">
-                    <div class="search-result-title">${this.escapeHtml(result.title)}</div>
-                    <div class="search-result-snippet">${result.snippet}</div>
-                    <div class="search-result-path">${result.location}</div>
-                </a>
+            resultsContainer.innerHTML = results.map((result, index) => `
+                <div class="search-result-item">
+                    <a href="${result.url}" class="search-result" target="_blank" rel="noopener">
+                        <div class="search-result-title">${this.escapeHtml(result.title)}</div>
+                        <div class="search-result-snippet">${result.snippet}</div>
+                        <div class="search-result-path">${result.location}</div>
+                    </a>
+                    <button class="btn btn-sm btn-secondary make-qr-btn" data-url="${result.url}" data-index="${index}">
+                        <span class="btn-icon">📱</span>
+                        <span class="btn-text">Make QR</span>
+                    </button>
+                </div>
             `).join('');
+            
+            // Add event listeners to QR buttons
+            this.attachQRButtonListeners();
         }
         
         resultsElement.classList.remove('hidden');
     }
 
+    // Add new method to handle QR button clicks
+    attachQRButtonListeners() {
+        const qrButtons = document.querySelectorAll('.make-qr-btn');
+        qrButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const url = button.getAttribute('data-url');
+                this.showQRCodeModal(url);
+            });
+        });
+    }
+
+    // Add method to show QR code modal
+    showQRCodeModal(url) {
+        // Create or get existing QR modal
+        let modal = document.getElementById('qr-code-modal');
+        if (!modal) {
+            modal = this.createQRModal();
+            document.body.appendChild(modal);
+        }
+        // Ensure modal has correct z-index and class
+        modal.classList.add('qr-modal');
+        modal.style.zIndex = '11000'; // Force above all overlays
+
+        // Update modal content
+        const qrImage = modal.querySelector('.qr-code-image');
+        const qrUrl = modal.querySelector('.qr-code-url');
+        const qrLoading = modal.querySelector('.qr-loading');
+        
+        // Show modal and loading state
+        modal.classList.remove('hidden');
+        qrLoading.style.display = 'block';
+        qrImage.style.display = 'none';
+        
+        // Update URL display
+        qrUrl.textContent = url;
+        qrUrl.href = url;
+        
+        // Generate QR code
+        const qrApiUrl = `/api/qr?text=${encodeURIComponent(url)}&size=256`;
+        qrImage.src = qrApiUrl;
+        
+        qrImage.onload = () => {
+            qrLoading.style.display = 'none';
+            qrImage.style.display = 'block';
+        };
+        
+        qrImage.onerror = () => {
+            qrLoading.innerHTML = '<p style="color: var(--danger-color);">Failed to generate QR code</p>';
+        };
+    }
+
+    // Add method to create QR modal
+    createQRModal() {
+        const modal = document.createElement('div');
+        modal.id = 'qr-code-modal';
+        modal.className = 'modal qr-modal'; // Ensure both classes for styling
+        modal.innerHTML = `
+            <div class="modal-content qr-modal-content">
+                <div class="modal-header">
+                    <h2>QR Code</h2>
+                    <button class="modal-close" id="close-qr-modal">&times;</button>
+                </div>
+                <div class="modal-body qr-modal-body">
+                    <div class="qr-loading">
+                        <div class="spinner"></div>
+                        <p>Generating QR code...</p>
+                    </div>
+                    <img class="qr-code-image" alt="QR Code" style="display: none;">
+                    <div class="qr-code-info">
+                        <p>Scan this QR code to open:</p>
+                        <a class="qr-code-url" target="_blank" rel="noopener"></a>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add close functionality
+        const closeBtn = modal.querySelector('#close-qr-modal');
+        closeBtn.addEventListener('click', () => {
+            modal.classList.add('hidden');
+        });
+        
+        // Close on background click
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.add('hidden');
+            }
+        });
+        
+        // Close on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+                modal.classList.add('hidden');
+            }
+        });
+        
+        return modal;
+    }
+
     closeResults(inputElement, resultsElement) {
         resultsElement.classList.add('hidden');
         inputElement.value = '';