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>
This commit is contained in:
2025-08-15 09:56:04 -07:00
parent f26cb24dfd
commit 872182a393
4 changed files with 164 additions and 51 deletions

View File

@@ -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-stats">
<div class="stat-item">
<span class="stat-label">Total:</span>
<span class="stat-value" id="twp-total-voicemails">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Today:</span>
<span class="stat-value" id="twp-today-voicemails">0</span>
<div class="voicemail-header" id="twp-voicemail-header">
<h4>Recent Voicemails</h4>
<div class="voicemail-summary">
<span class="summary-stats">
Total: <span id="twp-total-voicemails">0</span> |
Today: <span id="twp-today-voicemails">0</span>
</span>
<button class="voicemail-toggle" id="twp-voicemail-toggle">
<span class="toggle-icon"></span>
</button>
</div>
</div>
<div class="twp-voicemail-list" id="twp-voicemail-list">
<div class="voicemail-loading">Loading voicemails...</div>
</div>
<div class="voicemail-actions">
<button id="twp-refresh-voicemails" class="twp-btn twp-btn-secondary">
Refresh
</button>
<button id="twp-view-all-voicemails" class="twp-btn twp-btn-secondary">
View All
</button>
<div class="voicemail-content" id="twp-voicemail-content" style="display: none;">
<div class="twp-voicemail-list" id="twp-voicemail-list">
<div class="voicemail-loading">Loading voicemails...</div>
</div>
<div class="voicemail-actions">
<button id="twp-refresh-voicemails" class="twp-btn twp-btn-secondary">
Refresh
</button>
<button id="twp-view-all-voicemails" class="twp-btn twp-btn-secondary">
View All
</button>
</div>
</div>
</div>