add manual refresh button

Author: knktc

templates/main.tmpl

@@ -13,6 +13,7 @@
                 'subtitle': 'Send requests to your-host/your-path',
                 'auto_refresh': 'Auto Refresh',
                 'seconds': 'seconds',
+                'refresh': 'Refresh',
                 'captured_requests': 'Captured Requests',
                 'no_requests': 'No requests captured yet.',
                 'welcome_title': 'Welcome!',
@@ -32,6 +33,7 @@
                 'subtitle': '发送请求到 your-host/your-path',
                 'auto_refresh': '自动刷新',
                 'seconds': '秒',
+                'refresh': '刷新',
                 'captured_requests': '已捕获的请求',
                 'no_requests': '尚未捕获任何请求。',
                 'welcome_title': '欢迎！',
@@ -102,6 +104,12 @@
         </div>
         <div class="w-1/3 flex justify-end items-center pr-4">
             <div class="flex items-center space-x-2">
+                <button id="manualRefreshButton" class="hidden px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors" data-i18n-title="refresh_requests">
+                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                    </svg>
+                    <span data-i18n="refresh">刷新</span>
+                </button>
                 <input type="checkbox" id="autoRefreshCheckbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                 <label for="autoRefreshCheckbox" class="text-sm text-gray-600" data-i18n="auto_refresh">自动刷新</label>
                 <input type="number" id="refreshIntervalInput" class="w-16 text-sm border-gray-300 rounded-md shadow-sm" min="1" value="5">
@@ -227,6 +235,7 @@
             // --- Auto-refresh logic ---
             const checkbox = document.getElementById('autoRefreshCheckbox');
             const intervalInput = document.getElementById('refreshIntervalInput');
+            const manualRefreshButton = document.getElementById('manualRefreshButton');
             let refreshInterval;
 
             function startRefresh() {
@@ -244,9 +253,17 @@
                 refreshInterval = null;
             }
 
+            function toggleManualRefreshButton() {
+                if (checkbox.checked) {
+                    manualRefreshButton.classList.add('hidden');
+                } else {
+                    manualRefreshButton.classList.remove('hidden');
+                }
+            }
+
             // Function to update only the request list via AJAX
             function updateRequestList() {
-                fetch('/api/requests')
+                return fetch('/api/requests')
                     .then(response => response.json())
                     .then(requests => {
                         const requestList = document.querySelector('aside .overflow-y-auto');
@@ -314,6 +331,38 @@
                     localStorage.setItem('autoRefreshEnabled', 'false');
                     stopRefresh();
                 }
+                toggleManualRefreshButton();
+            });
+
+            // Manual refresh button click handler
+            let isRefreshing = false;
+            const originalButtonContent = `
+                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+                <span data-i18n="refresh">${translations[currentLang]['refresh']}</span>
+            `;
+            
+            function resetButtonState() {
+                manualRefreshButton.innerHTML = originalButtonContent;
+                isRefreshing = false;
+            }
+            
+            manualRefreshButton.addEventListener('click', () => {
+                if (isRefreshing) return; // Prevent multiple clicks
+                
+                isRefreshing = true;
+                updateRequestList();
+                
+                // Add visual feedback
+                manualRefreshButton.innerHTML = `
+                    <svg class="w-4 h-4 inline mr-1 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                    </svg>
+                    <span data-i18n="refresh">${translations[currentLang]['refresh']}</span>
+                `;
+                
+                setTimeout(resetButtonState, 500);
             });
 
             intervalInput.addEventListener('change', () => {
@@ -335,6 +384,7 @@
             if (isEnabled) {
                 startRefresh();
             }
+            toggleManualRefreshButton(); // Initialize manual refresh button visibility
 
             // --- Collapsible sections logic ---
             const sections = ['headers', 'body'];