feat: Replace browser alerts with terminal-aesthetic notifications
Replaced all native browser dialogs with custom terminal-style UI:
**Utility Functions** (dashboard.js):
- showConfirmModal() - Reusable confirmation modal with type-based colors
- showInputModal() - Text input modal for user prompts
- Both support keyboard shortcuts (ESC to cancel, Enter to submit)
**Alert Replacements** (22 instances):
- Validation warnings → toast.warning() (amber, 2s)
- Error messages → toast.error() (red, 5s)
- Success messages → toast.success() or toast.warning() with details
- Example: "Bulk close: 5 succeeded, 2 failed" vs simple "Operation complete"
**Confirm Replacements** (3 instances):
- dashboard.js:509 - Bulk close confirmation → showConfirmModal()
- ticket.js:417 - Status change warning → showConfirmModal()
- advanced-search.js:321 - Delete filter → showConfirmModal('error' type)
**Prompt Replacement** (1 instance):
- advanced-search.js:151 - Save filter name → showInputModal()
**Benefits**:
✓ Visual consistency - matches terminal CRT aesthetic
✓ Non-blocking - toasts don't interrupt workflow
✓ Better UX - different colors for different message types
✓ Keyboard friendly - ESC/Enter support in modals
✓ Reusable - modal functions available for future use
All dialogs maintain retro aesthetic with:
- ASCII borders (╚ ╝)
- Terminal green glow
- Monospace fonts
- Color-coded by type (amber warning, red error, cyan info)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -414,14 +414,27 @@ function updateTicketStatus() {
|
||||
|
||||
// Warn if comment is required
|
||||
if (requiresComment) {
|
||||
const proceed = confirm(`This status change requires a comment. Please add a comment explaining the reason for this transition.\n\nProceed with status change to "${newStatus}"?`);
|
||||
if (!proceed) {
|
||||
// Reset to current status
|
||||
statusSelect.selectedIndex = 0;
|
||||
return;
|
||||
}
|
||||
showConfirmModal(
|
||||
'Status Change Requires Comment',
|
||||
`This transition to "${newStatus}" requires a comment explaining the reason.\n\nPlease add a comment before changing the status.`,
|
||||
'warning',
|
||||
() => {
|
||||
// User confirmed, proceed with status change
|
||||
performStatusChange(statusSelect, newStatus);
|
||||
},
|
||||
() => {
|
||||
// User cancelled, reset to current status
|
||||
statusSelect.selectedIndex = 0;
|
||||
}
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
performStatusChange(statusSelect, newStatus);
|
||||
});
|
||||
|
||||
// Extract status change logic into reusable function
|
||||
function performStatusChange(statusSelect, newStatus) {
|
||||
// Extract ticket ID
|
||||
let ticketId;
|
||||
if (window.location.href.includes('?id=')) {
|
||||
|
||||
Reference in New Issue
Block a user