From d86a60c60942ba9f5465520a97907aaa0ea286ae Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 9 Jan 2026 17:00:35 -0500
Subject: [PATCH] feat: Enhance toast system with queuing and manual dismiss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improved toast notification system with queue management:

**Features Added**:
1. **Toast Queuing**:
   - Multiple toasts no longer replace each other
   - Toasts are queued and displayed sequentially
   - Smooth transitions between queued messages
   - Prevents message loss during rapid operations

2. **Manual Dismissal**:
   - Click [×] button to dismiss toast immediately
   - Useful for long-duration error messages
   - Clears auto-dismiss timeout on manual close
   - Next queued toast appears immediately after dismiss

3. **Queue Management**:
   - Internal toastQueue[] array tracks pending messages
   - currentToast reference prevents overlapping displays
   - dismissToast() handles both auto and manual dismissal
   - Automatic dequeue when toast closes

**Implementation**:
- displayToast() separated from showToast() for queue handling
- timeoutId stored on toast element for cleanup
- Close button styled with terminal aesthetic ([×])
- 300ms fade-out animation preserved

**Benefits**:
✓ No lost messages during bulk operations
✓ Better UX - users can dismiss errors immediately
✓ Clean queue management prevents memory leaks
✓ Maintains terminal aesthetic with minimal close button

Example: Bulk assign 10 tickets with 2 failures now shows:
1. "Bulk assign: 8 succeeded, 2 failed" (toast 1)
2. Next operation's message queued (toast 2)
3. User can dismiss or wait for auto-dismiss

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 assets/js/toast.js | 51 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/assets/js/toast.js b/assets/js/toast.js
index 8b5775a..5736bb5 100644
--- a/assets/js/toast.js
+++ b/assets/js/toast.js
@@ -1,17 +1,26 @@
 /**
- * Terminal-style toast notification system
+ * Terminal-style toast notification system with queuing
  */
 
+// Toast queue management
+let toastQueue = [];
+let currentToast = null;
+
 function showToast(message, type = 'info', duration = 3000) {
-    // Remove any existing toasts
-    const existingToast = document.querySelector('.terminal-toast');
-    if (existingToast) {
-        existingToast.remove();
+    // Queue if a toast is already showing
+    if (currentToast) {
+        toastQueue.push({ message, type, duration });
+        return;
     }
 
+    displayToast(message, type, duration);
+}
+
+function displayToast(message, type, duration) {
     // Create toast element
     const toast = document.createElement('div');
     toast.className = `terminal-toast toast-${type}`;
+    currentToast = toast;
 
     // Icon based on type
     const icons = {
@@ -24,6 +33,7 @@ function showToast(message, type = 'info', duration = 3000) {
     toast.innerHTML = `
         <span class="toast-icon">[${icons[type] || 'ℹ'}]</span>
         <span class="toast-message">${message}</span>
+        <span class="toast-close" style="margin-left: auto; cursor: pointer; opacity: 0.7; padding-left: 1rem;">[×]</span>
     `;
 
     // Add to document
@@ -32,11 +42,36 @@ function showToast(message, type = 'info', duration = 3000) {
     // Trigger animation
     setTimeout(() => toast.classList.add('show'), 10);
 
+    // Manual dismiss handler
+    const closeBtn = toast.querySelector('.toast-close');
+    closeBtn.addEventListener('click', () => dismissToast(toast));
+
     // Auto-remove after duration
-    setTimeout(() => {
-        toast.classList.remove('show');
-        setTimeout(() => toast.remove(), 300);
+    const timeoutId = setTimeout(() => {
+        dismissToast(toast);
     }, duration);
+
+    // Store timeout ID for manual dismiss
+    toast.timeoutId = timeoutId;
+}
+
+function dismissToast(toast) {
+    // Clear auto-dismiss timeout
+    if (toast.timeoutId) {
+        clearTimeout(toast.timeoutId);
+    }
+
+    toast.classList.remove('show');
+    setTimeout(() => {
+        toast.remove();
+        currentToast = null;
+
+        // Show next toast in queue
+        if (toastQueue.length > 0) {
+            const next = toastQueue.shift();
+            displayToast(next.message, next.type, next.duration);
+        }
+    }, 300);
 }
 
 // Convenience functions