From 96290fdd58853910a902b5bc32fbecc711f62375 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 03:00:09 +0000
Subject: [PATCH] Improve Alpine.js component initialization and logging

Refactor Alpine.js component initialization to ensure all components are registered after Alpine is ready, and update console logs for better debugging.

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/moJlpyM
---
 backend/static/js/alpine-components.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/backend/static/js/alpine-components.js b/backend/static/js/alpine-components.js
index ddf714d9..294533e2 100644
--- a/backend/static/js/alpine-components.js
+++ b/backend/static/js/alpine-components.js
@@ -3,6 +3,10 @@
  * 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...');
+
 // Theme Toggle Component
 Alpine.data('themeToggle', () => ({
   theme: localStorage.getItem('theme') || 'system',
@@ -705,7 +709,5 @@ Alpine.store('toast', {
   }
 });
 
-// Initialize Alpine.js when DOM is ready
-document.addEventListener('alpine:init', () => {
-  console.log('Alpine.js components initialized');
+  console.log('All Alpine.js components registered successfully');
 });