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>

admin/class-twp-admin.php

@@ -3774,7 +3774,7 @@ class TWP_Admin {
      * AJAX handler for getting user's recent voicemails
      */
     public function ajax_get_user_voicemails() {
-        check_ajax_referer('twp_ajax_nonce', 'nonce');
+        check_ajax_referer('twp_frontend_nonce', 'nonce');
         
         if (!current_user_can('manage_options') && !current_user_can('twp_access_voicemails')) {
             wp_send_json_error('Unauthorized');

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 {
+.voicemail-header {
-    margin: 0 0 16px 0;
+    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;
+    justify-content: space-between;
-    margin-bottom: 16px;
+    align-items: center;
-    padding: 12px;
+    margin-top: 8px;
-    background: #f8f9fa;
-    border-radius: 6px;
 }
 
-.stat-item {
+.summary-stats {
-    text-align: center;
-}
-
-.stat-label {
-    display: block;
     font-size: 0.9rem;
     color: #6c757d;
-    margin-bottom: 4px;
 }
 
-.stat-value {
+.voicemail-toggle {
-    display: block;
+    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
      */

includes/class-twp-shortcodes.php

@@ -178,7 +178,19 @@ class TWP_Shortcodes {
                     <div class="queue-loading">Loading queues...</div>
                 </div>
                 
-                <!-- Queue Controls -->
+                <!-- Queue Actions (Always Visible) -->
+                <div class="queue-global-actions" id="twp-queue-global-actions" style="display: none;">
+                    <div class="global-queue-actions">
+                        <button id="twp-refresh-queues" class="twp-btn twp-btn-secondary">
+                            Refresh
+                        </button>
+                        <button id="twp-alert-toggle" class="twp-btn twp-btn-secondary alert-off">
+                            🔕 Alerts OFF
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Queue Controls (Only When Call Selected) -->
                 <div class="twp-queue-controls" id="twp-queue-controls" style="display: none;">
                     <div class="selected-queue-info">
                         <h5 id="selected-queue-name">No queue selected</h5>
@@ -191,41 +203,38 @@ class TWP_Shortcodes {
                         <button id="twp-accept-queue-call" class="twp-btn twp-btn-success">
                             Accept Next Call
                         </button>
-                        <button id="twp-refresh-queues" class="twp-btn twp-btn-secondary">
-                            Refresh
-                        </button>
-                        <button id="twp-alert-toggle" class="twp-btn twp-btn-secondary alert-off">
-                            🔕 Alerts OFF
-                        </button>
                     </div>
                 </div>
             </div>
             
             <!-- Voicemail Section -->
             <div class="twp-voicemail-section" id="twp-voicemail-section">
-                <h4>Recent Voicemails</h4>
+                <div class="voicemail-header" id="twp-voicemail-header">
-                <div class="voicemail-stats">
+                    <h4>Recent Voicemails</h4>
-                    <div class="stat-item">
+                    <div class="voicemail-summary">
-                        <span class="stat-label">Total:</span>
+                        <span class="summary-stats">
-                        <span class="stat-value" id="twp-total-voicemails">0</span>
+                            Total: <span id="twp-total-voicemails">0</span> | 
-                    </div>
+                            Today: <span id="twp-today-voicemails">0</span>
-                    <div class="stat-item">
+                        </span>
-                        <span class="stat-label">Today:</span>
+                        <button class="voicemail-toggle" id="twp-voicemail-toggle">
-                        <span class="stat-value" id="twp-today-voicemails">0</span>
+                            <span class="toggle-icon">▼</span>
+                        </button>
                     </div>
                 </div>
                 
-                <div class="twp-voicemail-list" id="twp-voicemail-list">
+                <div class="voicemail-content" id="twp-voicemail-content" style="display: none;">
-                    <div class="voicemail-loading">Loading voicemails...</div>
+                    <div class="twp-voicemail-list" id="twp-voicemail-list">
-                </div>
+                        <div class="voicemail-loading">Loading voicemails...</div>
-                
+                    </div>
-                <div class="voicemail-actions">
+                    
-                    <button id="twp-refresh-voicemails" class="twp-btn twp-btn-secondary">
+                    <div class="voicemail-actions">
-                        Refresh
+                        <button id="twp-refresh-voicemails" class="twp-btn twp-btn-secondary">
-                    </button>
+                            Refresh
-                    <button id="twp-view-all-voicemails" class="twp-btn twp-btn-secondary">
+                        </button>
-                        View All
+                        <button id="twp-view-all-voicemails" class="twp-btn twp-btn-secondary">
-                    </button>
+                            View All
+                        </button>
+                    </div>
                 </div>
             </div>