Refactor templates to utilize AlpineJS for state management and interactions, replacing custom JavaScript. Updated navigation links for parks and rides, streamlined mobile filter functionality, and enhanced advanced search features. Removed legacy JavaScript code for improved performance and maintainability.

templates/parks/park_list.html

@@ -288,114 +288,21 @@
     </div>
 </div>
 
-<!-- AlpineJS State Management -->
-<script>
-{# Enhanced Mobile-First AlpineJS State Management #}
-function parkListState() {
-    return {
-        showFilters: window.innerWidth >= 1024, // Show on desktop by default
-        viewMode: '{{ view_mode }}',
-        searchQuery: '{{ search_query }}',
-        isLoading: false,
-        error: null,
-        
-        init() {
-            // Handle responsive filter visibility with better mobile UX
-            this.handleResize();
-            window.addEventListener('resize', this.debounce(() => this.handleResize(), 250));
-            
-            // Enhanced HTMX events with better mobile feedback
-            document.addEventListener('htmx:beforeRequest', () => {
-                this.setLoading(true);
-                this.error = null;
-            });
-            
-            document.addEventListener('htmx:afterRequest', (event) => {
-                this.setLoading(false);
-                // Scroll to top of results on mobile after filter changes
-                if (window.innerWidth < 768 && event.detail.target?.id === 'park-results') {
-                    this.scrollToResults();
-                }
-            });
-            
-            document.addEventListener('htmx:responseError', () => {
-                this.setLoading(false);
-                this.showError('Failed to load results. Please check your connection and try again.');
-            });
-            
-            // Handle mobile viewport changes (orientation, virtual keyboard)
-            this.handleMobileViewport();
-        },
-        
-        handleResize() {
-            if (window.innerWidth >= 1024) {
-                this.showFilters = true;
-            }
-            // Auto-hide filters on mobile after interaction for better UX
-            // Keep current state but could add auto-hide logic here
-        },
-        
-        handleMobileViewport() {
-            // Handle mobile viewport changes for better UX
-            if ('visualViewport' in window) {
-                window.visualViewport.addEventListener('resize', () => {
-                    // Handle virtual keyboard appearance/disappearance
-                    document.documentElement.style.setProperty(
-                        '--viewport-height', 
-                        `${window.visualViewport.height}px`
-                    );
-                });
-            }
-        },
-        
-        scrollToResults() {
-            // Smooth scroll to results on mobile for better UX
-            const resultsElement = document.getElementById('park-results');
-            if (resultsElement) {
-                resultsElement.scrollIntoView({ 
-                    behavior: 'smooth', 
-                    block: 'start' 
-                });
-            }
-        },
-        
-        setLoading(loading) {
-            this.isLoading = loading;
-            // Disable form interactions while loading for better UX
-            const formElements = document.querySelectorAll('select, input, button');
-            formElements.forEach(el => {
-                el.disabled = loading;
-            });
-        },
-        
-        showError(message) {
-            this.error = message;
-            // Auto-clear error after 5 seconds
-            setTimeout(() => {
-                this.error = null;
-            }, 5000);
-            console.error(message);
-        },
-        
-        clearAllFilters() {
-            // Add loading state for better UX
-            this.setLoading(true);
-            window.location.href = '{% url "parks:park_list" %}';
-        },
-        
-        // Utility function for better performance
-        debounce(func, wait) {
-            let timeout;
-            return function executedFunction(...args) {
-                const later = () => {
-                    clearTimeout(timeout);
-                    func(...args);
-                };
-                clearTimeout(timeout);
-                timeout = setTimeout(later, wait);
-            };
-        }
-    }
-}
-</script>
-{% endblock %}
+<!-- AlpineJS Component Definition (HTMX + AlpineJS Only) -->
+<div x-data="{
+  showFilters: window.innerWidth >= 1024,
+  viewMode: '{{ view_mode }}',
+  searchQuery: '{{ search_query }}',
+  isLoading: false,
+  error: null,
+  clearAllFilters() {
+    window.location.href = '{% url \"parks:park_list\" %}';
+  }
+}" 
+@htmx:before-request="isLoading = true; error = null"
+@htmx:after-request="isLoading = false"
+@htmx:response-error="isLoading = false; error = 'Failed to load results'"
+style="display: none;">
+  <!-- Park list functionality handled by AlpineJS + HTMX -->
+</div>
+{% endblock %}