Improve how JavaScript components are loaded and registered

Prevent duplicate registration of Alpine.js components by introducing a flag and ensure components are registered only once, even with multiple registration attempts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9bc9dd7a-5328-4cb7-91de-b3cb33a0c48c
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

backend/static/js/alpine-components.js

@@ -3,19 +3,29 @@
  * Enhanced components matching React frontend functionality
  */
 
+// Flag to prevent duplicate component registration
+let componentsRegistered = false;
+
 // 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');
+  // Prevent duplicate registration
-  
+  if (componentsRegistered) {
-  if (typeof Alpine === 'undefined') {
-    console.error('Alpine still not available when trying to register components!');
     return;
   }
   
+  if (typeof Alpine === 'undefined') {
+    console.warn('Alpine.js not available yet, registration will retry');
+    return;
+  }
+  
+  console.log('Registering Alpine.js components...');
+  
+  // Mark as registered at the start to prevent race conditions
+  componentsRegistered = true;
+
 // Theme Toggle Component
 Alpine.data('themeToggle', () => ({
   theme: localStorage.getItem('theme') || 'system',
@@ -606,7 +616,7 @@ Alpine.store('toast', {
   }
 });
 
-  console.log('All Alpine.js components registered successfully');
+  console.log('Alpine.js components registered successfully');
 }
 
 // Try multiple registration approaches
@@ -615,8 +625,7 @@ document.addEventListener('DOMContentLoaded', registerComponents);
 
 // Fallback - try after a delay
 setTimeout(() => {
-  if (typeof Alpine !== 'undefined') {
+  if (typeof Alpine !== 'undefined' && !componentsRegistered) {
-    console.log('Fallback registration triggered');
     registerComponents();
   }
 }, 100);