feat: Add detailed park and ride pages with HTMX integration

- Implemented park detail page with dynamic content loading for rides and weather.
- Created park list page with filters and search functionality.
- Developed ride detail page showcasing ride stats, reviews, and similar rides.
- Added ride list page with filtering options and dynamic loading.
- Introduced search results page with tabs for parks, rides, and users.
- Added HTMX tests for global search functionality.

templates/components/ui/avatar.html

@@ -0,0 +1,9 @@
+<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full {{ class }}">
+    {% if src %}
+        <img class="object-cover w-full h-full aspect-square" src="{{ src }}" alt="{{ alt|default:'' }}">
+    {% else %}
+        <span class="flex items-center justify-center w-full h-full rounded-full bg-muted text-muted-foreground">
+            {{ fallback|default:alt|make_list|first|upper }}
+        </span>
+    {% endif %}
+</span>

templates/components/ui/button.html

@@ -0,0 +1,61 @@
+{% load widget_tweaks %}
+
+{% if type == 'button' or type == 'submit' or type == 'reset' %}
+    <button 
+        type="{{ type|default:'button' }}"
+        {% if id %}id="{{ id }}"{% endif %}
+        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 
+        {% if variant == 'destructive' %}bg-destructive text-destructive-foreground hover:bg-destructive/90
+        {% elif variant == 'outline' %}border border-input bg-background hover:bg-accent hover:text-accent-foreground
+        {% elif variant == 'secondary' %}bg-secondary text-secondary-foreground hover:bg-secondary/80
+        {% elif variant == 'ghost' %}hover:bg-accent hover:text-accent-foreground
+        {% elif variant == 'link' %}text-primary underline-offset-4 hover:underline
+        {% else %}bg-primary text-primary-foreground hover:bg-primary/90{% endif %}
+        {% if size == 'sm' %}h-9 rounded-md px-3
+        {% elif size == 'lg' %}h-11 rounded-md px-8
+        {% elif size == 'icon' %}h-10 w-10
+        {% else %}h-10 px-4 py-2{% endif %}
+        {{ class }}"
+        {% if disabled %}disabled{% endif %}
+        {% if onclick %}onclick="{{ onclick }}"{% endif %}
+        {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+        {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+        {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+        {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+        {% if hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
+        {% if x_data %}x-data="{{ x_data }}"{% endif %}
+        {% if x_on_click %}@click="{{ x_on_click }}"{% endif %}>
+        {% if icon %}
+            {{ icon|safe }}
+            {% if label %}<span class="ml-2">{{ label }}</span>{% endif %}
+        {% else %}
+            {{ label|default:content }}
+        {% endif %}
+        {% block button_content %}{% endblock %}
+    </button>
+{% else %}
+    <a 
+        href="{{ href }}"
+        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 
+        {% if variant == 'destructive' %}bg-destructive text-destructive-foreground hover:bg-destructive/90
+        {% elif variant == 'outline' %}border border-input bg-background hover:bg-accent hover:text-accent-foreground
+        {% elif variant == 'secondary' %}bg-secondary text-secondary-foreground hover:bg-secondary/80
+        {% elif variant == 'ghost' %}hover:bg-accent hover:text-accent-foreground
+        {% elif variant == 'link' %}text-primary underline-offset-4 hover:underline
+        {% else %}bg-primary text-primary-foreground hover:bg-primary/90{% endif %}
+        {% if size == 'sm' %}h-9 rounded-md px-3
+        {% elif size == 'lg' %}h-11 rounded-md px-8
+        {% elif size == 'icon' %}h-10 w-10
+        {% else %}h-10 px-4 py-2{% endif %}
+        {{ class }}"
+        {% if x_data %}x-data="{{ x_data }}"{% endif %}
+        {% if x_on_click %}@click="{{ x_on_click }}"{% endif %}>
+        {% if icon %}
+            {{ icon|safe }}
+            {% if label %}<span class="ml-2">{{ label }}</span>{% endif %}
+        {% else %}
+            {{ label|default:content }}
+        {% endif %}
+        {% block link_content %}{% endblock %}
+    </a>
+{% endif %}

templates/components/ui/card.html

@@ -0,0 +1,26 @@
+<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
+    {% if header or title %}
+    <div class="flex flex-col space-y-1.5 p-6">
+        {% if title %}
+        <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
+        {% endif %}
+        {% if description %}
+        <p class="text-sm text-muted-foreground">{{ description }}</p>
+        {% endif %}
+        {% if header %}
+        {{ header|safe }}
+        {% endif %}
+    </div>
+    {% endif %}
+    
+    <div class="p-6 pt-0">
+        {{ content|safe }}
+        {% block card_content %}{% endblock %}
+    </div>
+    
+    {% if footer %}
+    <div class="flex items-center p-6 pt-0">
+        {{ footer|safe }}
+    </div>
+    {% endif %}
+</div>

templates/components/ui/dialog.html

@@ -0,0 +1,57 @@
+<div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center"
+     role="dialog"
+     aria-modal="true"
+     x-data="{ open: true }"
+     x-show="open"
+     x-transition:enter="transition ease-out duration-200"
+     x-transition:enter-start="opacity-0"
+     x-transition:enter-end="opacity-100"
+     x-transition:leave="transition ease-in duration-100"
+     x-transition:leave-start="opacity-100"
+     x-transition:leave-end="opacity-0">
+    
+    <!-- Backdrop -->
+    <div class="fixed inset-0 transition-all bg-background/80 backdrop-blur-sm" 
+         @click="open = false; setTimeout(() => $el.closest('[hx-history-elt]').innerHTML = '', 200)"></div>
+    
+    <!-- Dialog Panel -->
+    <div class="fixed z-50 grid w-full gap-4 p-6 duration-200 border shadow-lg bg-background sm:max-w-lg sm:rounded-lg"
+         x-show="open"
+         x-transition:enter="animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]"
+         x-transition:leave="animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-[48%]">
+        
+        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+            {% if title %}
+            <h2 class="text-lg font-semibold leading-none tracking-tight">
+                {{ title }}
+            </h2>
+            {% endif %}
+            
+            {% if description %}
+            <p class="text-sm text-muted-foreground">
+                {{ description }}
+            </p>
+            {% endif %}
+        </div>
+        
+        <div class="py-4">
+            {{ content|safe }}
+            {% block dialog_content %}{% endblock %}
+        </div>
+        
+        {% if footer %}
+        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+            {{ footer|safe }}
+        </div>
+        {% endif %}
+        
+        <!-- Close Button -->
+        <button class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+                @click="open = false">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+            <span class="sr-only">Close</span>
+        </button>
+    </div>
+</div>

templates/components/ui/dropdown.html

@@ -0,0 +1,36 @@
+<div class="relative inline-block text-left" x-data="{ open: false }" @click.away="open = false">
+    <div @click="open = !open">
+        {% if trigger %}
+            {{ trigger|safe }}
+        {% else %}
+            <button type="button" 
+                    class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" 
+                    id="menu-button" 
+                    aria-expanded="true" 
+                    aria-haspopup="true">
+                {{ label|default:"Options" }}
+                <svg class="w-5 h-5 -mr-1 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                </svg>
+            </button>
+        {% endif %}
+    </div>
+
+    <div class="absolute right-0 z-10 w-56 mt-2 transition-all duration-100 ease-in-out origin-top-right transform scale-95 bg-white rounded-md shadow-lg opacity-0 ring-1 ring-black ring-opacity-5 focus:outline-none"
+         x-show="open"
+         x-transition:enter="transition ease-out duration-100"
+         x-transition:enter-start="transform opacity-0 scale-95"
+         x-transition:enter-end="transform opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-75"
+         x-transition:leave-start="transform opacity-100 scale-100"
+         x-transition:leave-end="transform opacity-0 scale-95"
+         role="menu"
+         aria-orientation="vertical"
+         aria-labelledby="menu-button"
+         tabindex="-1">
+        <div class="py-1" role="none">
+            {{ content|safe }}
+            {% block dropdown_content %}{% endblock %}
+        </div>
+    </div>
+</div>

templates/components/ui/form/checkbox.html

@@ -0,0 +1,12 @@
+{% load widget_tweaks %}
+
+<div class="flex items-center space-x-2">
+    {% render_field field class+="aspect-square h-4 w-4 rounded border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" %}
+    
+    <label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {{ label }}
+    </label>
+</div>
+{% if field.errors %}
+<p class="mt-1 text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
+{% endif %}

templates/components/ui/form/input.html

@@ -0,0 +1,19 @@
+{% load widget_tweaks %}
+
+<div class="space-y-2">
+    {% if label %}
+    <label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {{ label }}
+    </label>
+    {% endif %}
+    
+    {% render_field field class+="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder=placeholder %}
+    
+    {% if field.help_text %}
+    <p class="text-sm text-muted-foreground">{{ field.help_text }}</p>
+    {% endif %}
+    
+    {% if field.errors %}
+    <p class="text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
+    {% endif %}
+</div>

templates/components/ui/form/select.html

@@ -0,0 +1,19 @@
+{% load widget_tweaks %}
+
+<div class="space-y-2">
+    {% if label %}
+    <label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {{ label }}
+    </label>
+    {% endif %}
+    
+    {% render_field field class+="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1" %}
+    
+    {% if field.help_text %}
+    <p class="text-sm text-muted-foreground">{{ field.help_text }}</p>
+    {% endif %}
+    
+    {% if field.errors %}
+    <p class="text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
+    {% endif %}
+</div>

templates/components/ui/form/textarea.html

@@ -0,0 +1,19 @@
+{% load widget_tweaks %}
+
+<div class="space-y-2">
+    {% if label %}
+    <label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {{ label }}
+    </label>
+    {% endif %}
+    
+    {% render_field field class+="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder=placeholder %}
+    
+    {% if field.help_text %}
+    <p class="text-sm text-muted-foreground">{{ field.help_text }}</p>
+    {% endif %}
+    
+    {% if field.errors %}
+    <p class="text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
+    {% endif %}
+</div>

templates/components/ui/skeleton.html

@@ -0,0 +1 @@
+<div class="animate-pulse rounded-md bg-muted {{ class }}"></div>

templates/components/ui/toast-container.html

@@ -0,0 +1,58 @@
+<div x-data
+     class="fixed z-50 flex flex-col max-w-sm gap-2 pointer-events-none bottom-4 right-4">
+    
+    <template x-for="toast in $store.toast.toasts" :key="toast.id">
+        <div x-show="true"
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0 translate-y-2"
+             x-transition:enter-end="opacity-100 translate-y-0"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0 translate-x-full"
+             :class="{
+                 'bg-success-50 border-success-200 text-success-800 dark:bg-success-900/20 dark:border-success-800 dark:text-success-200': toast.type === 'success',
+                 'bg-error-50 border-error-200 text-error-800 dark:bg-error-900/20 dark:border-error-800 dark:text-error-200': toast.type === 'error',
+                 'bg-warning-50 border-warning-200 text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200': toast.type === 'warning',
+                 'bg-info-50 border-info-200 text-info-800 dark:bg-info-900/20 dark:border-info-800 dark:text-info-200': toast.type === 'info'
+             }"
+             class="flex items-start w-full gap-3 p-4 border rounded-lg shadow-lg pointer-events-auto">
+            
+            <!-- Icon -->
+            <div class="flex-shrink-0 mt-0.5">
+                <template x-if="toast.type === 'success'">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </template>
+                <template x-if="toast.type === 'error'">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </template>
+                <template x-if="toast.type === 'warning'">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                    </svg>
+                </template>
+                <template x-if="toast.type === 'info'">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </template>
+            </div>
+            
+            <!-- Content -->
+            <div class="flex-1">
+                <p x-text="toast.message" class="text-sm font-medium"></p>
+            </div>
+            
+            <!-- Dismiss -->
+            <button @click="$store.toast.dismiss(toast.id)"
+                    class="flex-shrink-0 p-1 transition-colors rounded hover:bg-black/10 dark:hover:bg-white/10">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        </div>
+    </template>
+</div>