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
This commit is contained in:
pac7
2025-09-21 02:27:09 +00:00
committed by pacnpal
parent d0cfe61af3
commit 1208af9696
5 changed files with 7 additions and 7 deletions

View File

@@ -36,7 +36,7 @@ localPort = 5000
externalPort = 80
[[ports]]
localPort = 37519
localPort = 36799
externalPort = 3000
[deployment]

View File

@@ -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"

View File

@@ -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"

View File

@@ -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

View File

@@ -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 #}