From 872182a3932f3ae0a58147420fd28b8af411f141 Mon Sep 17 00:00:00 2001 From: Josh Knapp Date: Fri, 15 Aug 2025 09:56:04 -0700 Subject: [PATCH] Fix browser phone issues and improve UI organization MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- admin/class-twp-admin.php | 2 +- assets/css/browser-phone-frontend.css | 91 ++++++++++++++++++++------- assets/js/browser-phone-frontend.js | 59 ++++++++++++++++- includes/class-twp-shortcodes.php | 63 +++++++++++-------- 4 files changed, 164 insertions(+), 51 deletions(-) diff --git a/admin/class-twp-admin.php b/admin/class-twp-admin.php index 056d727..1ade072 100644 --- a/admin/class-twp-admin.php +++ b/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'); diff --git a/assets/css/browser-phone-frontend.css b/assets/css/browser-phone-frontend.css index 681eedd..4b81462 100644 --- a/assets/css/browser-phone-frontend.css +++ b/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; diff --git a/assets/js/browser-phone-frontend.js b/assets/js/browser-phone-frontend.js index f353f77..d3ddce6 100644 --- a/assets/js/browser-phone-frontend.js +++ b/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('
No queues assigned to you.
'); $('#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 */ diff --git a/includes/class-twp-shortcodes.php b/includes/class-twp-shortcodes.php index fba849c..8766e5d 100644 --- a/includes/class-twp-shortcodes.php +++ b/includes/class-twp-shortcodes.php @@ -178,7 +178,19 @@ class TWP_Shortcodes {
Loading queues...
- + + + +
-

Recent Voicemails

-
-
- Total: - 0 -
-
- Today: - 0 +
+

Recent Voicemails

+
+ + Total: 0 | + Today: 0 + +
-
-
Loading voicemails...
-
- -
- - +