Improve Alpine.js component registration and toast functionality

Add more robust Alpine.js component registration with console logs and fallback mechanisms. Update toast container to use an empty x-data object, potentially simplifying its initialization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/AvPcIbY

backend/static/js/alpine-components.js

@@ -3,9 +3,18 @@
  * Enhanced components matching React frontend functionality
  */
 
-// Wrap ALL code to wait for Alpine to be available
-document.addEventListener('alpine:init', () => {
-  console.log('Alpine is ready, registering components...');
+// Debug logging to see what's happening
+console.log('Alpine components script is loading...');
+console.log('Alpine available?', typeof window.Alpine !== 'undefined');
+
+// Try multiple approaches to ensure components register
+function registerComponents() {
+  console.log('Registering components - Alpine available:', typeof Alpine !== 'undefined');
+  
+  if (typeof Alpine === 'undefined') {
+    console.error('Alpine still not available when trying to register components!');
+    return;
+  }
 
 // Theme Toggle Component
 Alpine.data('themeToggle', () => ({
@@ -609,4 +618,16 @@ Alpine.store('toast', {
 });
 
   console.log('All Alpine.js components registered successfully');
-});
+}
+
+// Try multiple registration approaches
+document.addEventListener('alpine:init', registerComponents);
+document.addEventListener('DOMContentLoaded', registerComponents);
+
+// Fallback - try after a delay
+setTimeout(() => {
+  if (typeof Alpine !== 'undefined') {
+    console.log('Fallback registration triggered');
+    registerComponents();
+  }
+}, 100);

backend/templates/components/ui/toast-container.html

@@ -5,7 +5,7 @@ Matches React frontend toast functionality with Sonner-like behavior
 
 <!-- Toast Container -->
 <div 
-  x-data="toast"
+  x-data="{}"
   x-show="$store.toast.toasts.length > 0"
   class="fixed top-4 right-4 z-50 space-y-2"
   x-cloak