feat: layout improvements

assets/controllers/toast_controller.js

@@ -24,14 +24,25 @@ export default class extends Controller {
     }
 
     handleNotifications(event) {
+        console.log('[VOUCHER DEBUG] showNotifications event received:', event)
+        console.log('[VOUCHER DEBUG] event.detail:', event.detail)
+
         // HTMX wraps the trigger value in an object with 'value' and 'elt' properties
         // event.detail.value contains the actual array from the HX-Trigger header
-        const notifications = event.detail?.value || []
+        const notifications = event.detail?.value || event.detail || []
 
-        notifications.forEach(notification => {
-            const className = this.getClassForType(notification.type)
-            this.showToast(notification.message, className)
-        })
+        console.log('[VOUCHER DEBUG] notifications array:', notifications)
+        console.log('[VOUCHER DEBUG] notifications count:', Array.isArray(notifications) ? notifications.length : 'not an array')
+
+        if (Array.isArray(notifications)) {
+            notifications.forEach((notification, index) => {
+                console.log(`[VOUCHER DEBUG] Processing notification ${index}:`, notification)
+                const className = this.getClassForType(notification.type)
+                this.showToast(notification.message, className)
+            })
+        } else {
+            console.error('[VOUCHER DEBUG] Notifications is not an array:', notifications)
+        }
     }
 
     showToast(text, className = '') {
@@ -49,6 +60,7 @@ export default class extends Controller {
         const typeMap = {
             'success': 'toastify--success',
             'warning': 'toastify--warning',
+            'error': 'toastify--error',
             'info': 'toastify--info',
         }
 

assets/styles/components/toast.css

@@ -14,6 +14,11 @@
     background: theme('colors.red.600');
 }
 
+.toastify--error {
+    @apply text-gray-100;
+    background: theme('colors.red.700');
+}
+
 .toastify--info {
     @apply text-gray-100;
     background: theme('colors.primary');