Implement early access handling and UI enhancements for LoRA downloads

- Added error handling for early access restrictions in the API routes, returning appropriate status codes and messages.
- Enhanced the Civitai client to log unauthorized access attempts and provide user-friendly error messages.
- Updated the download manager to check for early access requirements and log warnings accordingly.
- Introduced UI elements to indicate early access status for LoRAs, including badges and warning messages in the import manager.
- Improved toast notifications to inform users about early access download failures and provide relevant information.

static/js/utils/uiHelpers.js

@@ -6,11 +6,54 @@ export function showToast(message, type = 'info') {
     const toast = document.createElement('div');
     toast.className = `toast toast-${type}`;
     toast.textContent = message;
-    document.body.append(toast);
+    
+    // Get or create toast container
+    let toastContainer = document.querySelector('.toast-container');
+    if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.className = 'toast-container';
+        document.body.append(toastContainer);
+    }
+    
+    toastContainer.append(toast);
+
+    // Calculate vertical position for stacked toasts
+    const existingToasts = Array.from(toastContainer.querySelectorAll('.toast'));
+    const toastIndex = existingToasts.indexOf(toast);
+    const topOffset = 20; // Base offset from top
+    const spacing = 10; // Space between toasts
+    
+    // Set position based on existing toasts
+    toast.style.top = `${topOffset + (toastIndex * (toast.offsetHeight || 60 + spacing))}px`;
 
     requestAnimationFrame(() => {
         toast.classList.add('show');
-        setTimeout(() => toast.remove(), 2300);
+        
+        // Set timeout based on type
+        let timeout = 2000; // Default (info)
+        if (type === 'warning' || type === 'error') {
+            timeout = 5000;
+        }
+        
+        setTimeout(() => {
+            toast.classList.remove('show');
+            toast.addEventListener('transitionend', () => {
+                toast.remove();
+                
+                // Reposition remaining toasts
+                if (toastContainer) {
+                    const remainingToasts = Array.from(toastContainer.querySelectorAll('.toast'));
+                    remainingToasts.forEach((t, index) => {
+                        t.style.top = `${topOffset + (index * (t.offsetHeight || 60 + spacing))}px`;
+                    });
+                    
+                    // Remove container if empty
+                    if (remainingToasts.length === 0) {
+                        toastContainer.remove();
+                    }
+                }
+            });
+        }, timeout);
     });
 }