From 06e3efc6033b62a339b5a382b7dec6aa8addb6d2 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 03:04:45 +0000
Subject: [PATCH] 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        | 29 ++++++++++++++++---
 .../components/ui/toast-container.html        |  2 +-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/backend/static/js/alpine-components.js b/backend/static/js/alpine-components.js
index 4799f991..0c238994 100644
--- a/backend/static/js/alpine-components.js
+++ b/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);
diff --git a/backend/templates/components/ui/toast-container.html b/backend/templates/components/ui/toast-container.html
index 04ada137..34543ed7 100644
--- a/backend/templates/components/ui/toast-container.html
+++ b/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