refactor: update firewall logs loading mechanism to use Alpine.js for improved data handling and user experience

extensions/Servers/Proxmox/Livewire/Firewall.php

@@ -797,25 +797,23 @@ class Firewall extends Component
         }
     }
 
-    /**
-     * Public method to load firewall logs - called only once on page load via API
-     */
-    #[\Livewire\Attributes\Computed]
-    public function firewallLogs()
-    {
-        return $this->loadFirewallLogs();
-    }
-
     /**
      * Fetch firewall logs via API call - returns logs as JSON
+     * This is called only once on page load via Alpine.js
      */
-    public function fetchFirewallLogs(): array
+    public function fetchFirewallLogs(): void
     {
         $this->loadFirewallLogs();
-        return [
+        $this->dispatch('firewall-logs-loaded', [
             'logs' => $this->firewallLogs,
             'error' => $this->logError,
-        ];
+        ]);
+    }
+
+    #[\Livewire\Attributes\On('fetchFirewallLogsAction')]
+    public function handleFetchFirewallLogs(): void
+    {
+        $this->fetchFirewallLogs();
     }
 
     public function loadFirewallLogs(): void

extensions/Servers/Proxmox/views/firewall.blade.php

@@ -303,35 +303,51 @@
                 </div>
             </div>
 
+            <script>
+                // Initialize firewall logs storage
+                if (typeof window.firewallLogsData === 'undefined') {
+                    window.firewallLogsData = [];
+                    window.firewallLogsLoaded = false;
+                    window.firewallLogsError = '';
+                }
+
+                // Listen for Livewire dispatch event
+                document.addEventListener('firewall-logs-loaded', (event) => {
+                    window.firewallLogsData = event.detail.logs || [];
+                    window.firewallLogsError = event.detail.error || '';
+                    window.firewallLogsLoaded = true;
+                    
+                    // Trigger Alpine update
+                    const container = document.getElementById('firewall-logs-container');
+                    if (container && container.__x_data) {
+                        container.__x_data.logs = window.firewallLogsData;
+                        container.__x_data.error = window.firewallLogsError;
+                        container.__x_data.loading = false;
+                    }
+                });
+            </script>
+
             <div id="firewall-logs-container"
                 x-data="{
-                    logs: [],
+                    logs: window.firewallLogsData || [],
-                    loading: true,
+                    loading: !window.firewallLogsLoaded,
-                    error: '',
+                    error: window.firewallLogsError || '',
                     searchTerm: '',
                     sortField: 'timestamp_iso',
                     sortDirection: 'desc',
                     async initializeLogs() {
                         // Only load logs once on page load
                         if (window.firewallLogsLoaded) {
-                            this.logs = window.firewallLogsData || [];
-                            this.loading = false;
                             return;
                         }
                         
                         try {
-                            // Call Livewire method to fetch logs
+                            this.loading = true;
-                            const result = await @this.call('fetchFirewallLogs');
+                            // Dispatch to Livewire to fetch logs
-                            window.firewallLogsData = result.logs || [];
+                            @this.dispatch('fetchFirewallLogsAction');
-                            window.firewallLogsLoaded = true;
-                            this.logs = window.firewallLogsData;
-                            this.error = result.error || '';
                         } catch (err) {
                             this.error = 'Failed to load firewall logs: ' + (err.message || 'Unknown error');
                             console.error('Error loading firewall logs:', err);
-                            this.logs = [];
-                        } finally {
-                            this.loading = false;
                         }
                     },
                     sort(field) {