Fix browser phone issues and improve UI organization

- Fix 403 Forbidden error in voicemail AJAX by correcting nonce validation
- Create accordion-style collapsible voicemail section with persistent state
- Restructure queue controls to show alert toggle button consistently
- Add global queue actions always visible when user has assigned queues
- Implement smooth slide animations and localStorage state management
- Update dark mode support for new UI elements and improved accessibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

assets/css/browser-phone-frontend.css

@@ -442,6 +442,24 @@
     min-width: 80px;
 }
 
+/* Global Queue Actions */
+.queue-global-actions {
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+.global-queue-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.global-queue-actions .twp-btn {
+    flex: 1;
+    min-width: 100px;
+}
+
 /* Alert Toggle Button */
 #twp-alert-toggle {
     position: relative;
@@ -466,44 +484,64 @@
 /* Voicemail Section */
 .twp-voicemail-section {
     background: #fff;
-    padding: 16px;
     border-radius: 8px;
     border: 2px solid #e9ecef;
     margin-bottom: 20px;
+    overflow: hidden;
 }
 
-.twp-voicemail-section h4 {
-    margin: 0 0 16px 0;
+.voicemail-header {
+    padding: 16px;
+    cursor: pointer;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+    transition: background-color 0.2s ease;
+}
+
+.voicemail-header:hover {
+    background: #e9ecef;
+}
+
+.voicemail-header h4 {
+    margin: 0;
     color: #212529;
     font-size: 1.1rem;
-    text-align: center;
+    display: inline-block;
 }
 
-.voicemail-stats {
+.voicemail-summary {
     display: flex;
-    justify-content: space-around;
-    margin-bottom: 16px;
-    padding: 12px;
-    background: #f8f9fa;
-    border-radius: 6px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
 }
 
-.stat-item {
-    text-align: center;
-}
-
-.stat-label {
-    display: block;
+.summary-stats {
     font-size: 0.9rem;
     color: #6c757d;
-    margin-bottom: 4px;
 }
 
-.stat-value {
-    display: block;
+.voicemail-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+.voicemail-toggle:hover {
+    background: #dee2e6;
+}
+
+.toggle-icon {
     font-size: 1.2rem;
-    font-weight: 600;
     color: #495057;
+    transition: transform 0.2s ease;
+}
+
+.voicemail-content {
+    padding: 16px;
 }
 
 .twp-voicemail-list {
@@ -731,7 +769,8 @@
     .twp-call-info,
     .twp-queue-controls,
     .twp-queue-section,
-    .twp-voicemail-section {
+    .twp-voicemail-section,
+    .queue-global-actions {
         background: #2d3748;
         border-color: #4a5568;
     }
@@ -792,12 +831,20 @@
     }
     
     .no-queues,
-    .voicemail-stats,
+    .voicemail-header,
     .voicemail-transcription {
         background: #2d3748;
         border-color: #4a5568;
     }
     
+    .voicemail-header:hover {
+        background: #4a5568;
+    }
+    
+    .summary-stats {
+        color: #cbd5e0;
+    }
+    
     .voicemail-item {
         background: #2d3748;
         border-color: #4a5568;

assets/js/browser-phone-frontend.js

@@ -32,7 +32,7 @@
         bindEvents();
         loadPhoneNumbers();
         loadUserQueues();
-        loadUserVoicemails();
+        initVoicemailSection();
     });
     
     /**
@@ -293,6 +293,19 @@
             window.open(twp_frontend_ajax.admin_url + 'admin.php?page=twilio-wp-voicemails', '_blank');
         });
         
+        // Voicemail toggle button
+        $('#twp-voicemail-toggle').on('click', function() {
+            toggleVoicemailSection();
+        });
+        
+        // Voicemail header click (also toggles)
+        $('#twp-voicemail-header').on('click', function(e) {
+            // Don't toggle if clicking the toggle button itself
+            if (!$(e.target).closest('.voicemail-toggle').length) {
+                toggleVoicemailSection();
+            }
+        });
+        
         // Voicemail item click handler
         $(document).on('click', '.voicemail-item', function() {
             const voicemailId = $(this).data('voicemail-id');
@@ -522,10 +535,12 @@
         if (userQueues.length === 0) {
             $queueList.html('<div class="no-queues">No queues assigned to you.</div>');
             $('#twp-queue-section').hide();
+            $('#twp-queue-global-actions').hide();
             return;
         }
         
         $('#twp-queue-section').show();
+        $('#twp-queue-global-actions').show();
         
         let html = '';
         userQueues.forEach(function(queue) {
@@ -965,6 +980,48 @@
         });
     }
     
+    /**
+     * Toggle voicemail section visibility
+     */
+    function toggleVoicemailSection() {
+        const $content = $('#twp-voicemail-content');
+        const $toggle = $('#twp-voicemail-toggle .toggle-icon');
+        const isVisible = $content.is(':visible');
+        
+        if (isVisible) {
+            $content.slideUp(300);
+            $toggle.text('▼');
+            localStorage.setItem('twp_voicemail_collapsed', 'true');
+        } else {
+            $content.slideDown(300);
+            $toggle.text('▲');
+            localStorage.setItem('twp_voicemail_collapsed', 'false');
+            // Load voicemails when expanding if not already loaded
+            if ($('#twp-voicemail-list').children('.voicemail-loading').length > 0) {
+                loadUserVoicemails();
+            }
+        }
+    }
+    
+    /**
+     * Initialize voicemail section state
+     */
+    function initVoicemailSection() {
+        const isCollapsed = localStorage.getItem('twp_voicemail_collapsed') === 'true';
+        const $content = $('#twp-voicemail-content');
+        const $toggle = $('#twp-voicemail-toggle .toggle-icon');
+        
+        if (isCollapsed) {
+            $content.hide();
+            $toggle.text('▼');
+        } else {
+            $content.show();
+            $toggle.text('▲');
+            // Load voicemails immediately if expanded
+            loadUserVoicemails();
+        }
+    }
+    
     /**
      * Display voicemails in the UI
      */