From 1208af9696830e5bef2b2dbfd3970b3d0603cb6c Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 02:27:09 +0000
Subject: [PATCH] Update Alpine.js components to use standalone instances

Correctly initialize Alpine.js components by removing unnecessary function calls, ensuring proper scope and state management for UI elements like modals, search, theme toggles, and forms.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/cGHPY6T
---
 .replit                                                  | 2 +-
 backend/templates/components/auth/auth-modal.html        | 2 +-
 backend/templates/components/layout/enhanced_header.html | 6 +++---
 backend/templates/components/ui/toast-container.html     | 2 +-
 backend/templates/parks/park_form.html                   | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.replit b/.replit
index ee461cf9..8529eeaa 100644
--- a/.replit
+++ b/.replit
@@ -36,7 +36,7 @@ localPort = 5000
 externalPort = 80
 
 [[ports]]
-localPort = 37519
+localPort = 36799
 externalPort = 3000
 
 [deployment]
diff --git a/backend/templates/components/auth/auth-modal.html b/backend/templates/components/auth/auth-modal.html
index 5d405339..b8c3137a 100644
--- a/backend/templates/components/auth/auth-modal.html
+++ b/backend/templates/components/auth/auth-modal.html
@@ -9,7 +9,7 @@ Matches React frontend AuthDialog functionality with modal-based auth
 
 <!-- Auth Modal Component -->
 <div 
-  x-data="authModal()" 
+  x-data="authModal" 
   x-show="open" 
   x-cloak
   x-init="window.authModal = $data"
diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 7e543656..475f6928 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -134,7 +134,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
     <!-- Desktop Right Side -->
     <div class="hidden md:flex items-center space-x-4">
       <!-- Enhanced Search -->
-      <div class="relative" x-data="searchComponent()">
+      <div class="relative" x-data="searchComponent">
         <div class="relative">
           <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
           <input
@@ -165,7 +165,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
       </div>
 
       <!-- Theme Toggle -->
-      <div x-data="themeToggle()">
+      <div x-data="themeToggle">
         <button 
           @click="toggleTheme()"
           class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
@@ -257,7 +257,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
     <!-- Mobile Menu -->
     <div class="md:hidden flex items-center space-x-2 flex-shrink-0">
       <!-- Theme Toggle (Mobile) -->
-      <div x-data="themeToggle()">
+      <div x-data="themeToggle">
         <button 
           @click="toggleTheme()"
           class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
diff --git a/backend/templates/components/ui/toast-container.html b/backend/templates/components/ui/toast-container.html
index 0f2f9ee0..04ada137 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="toast"
   x-show="$store.toast.toasts.length > 0"
   class="fixed top-4 right-4 z-50 space-y-2"
   x-cloak
diff --git a/backend/templates/parks/park_form.html b/backend/templates/parks/park_form.html
index 5f8aa63d..b8351256 100644
--- a/backend/templates/parks/park_form.html
+++ b/backend/templates/parks/park_form.html
@@ -26,7 +26,7 @@
             {% if is_edit %}Edit{% else %}Create{% endif %} Park
         </h1>
 
-        <form method="post" enctype="multipart/form-data" class="space-y-6" x-data="parkForm()">
+        <form method="post" enctype="multipart/form-data" class="space-y-6" x-data="parkForm">
             {% csrf_token %}
 
             {# Basic Information #}