Enhance park search with autocomplete and improved filtering options

Introduce autocomplete for park searches, optimize park data fetching with select_related and prefetch_related, add new API endpoints for autocomplete and quick filters, and refactor the park list view to use new Django Cotton components for a more dynamic and user-friendly experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

templates/cotton/view_toggle.html

@@ -0,0 +1,67 @@
+{% comment %}
+View Toggle Component - Django Cotton Version
+
+Provides toggle between grid and list view modes with visual indicators.
+Integrates with HTMX for seamless view switching without page reloads.
+
+Usage Examples:
+
+<c-view_toggle current_view="grid" />
+
+<c-view_toggle 
+    current_view="list"
+    class="custom-class"
+/>
+
+Parameters:
+- current_view: Currently selected view mode ("grid" or "list", default: "grid")
+- class: Additional CSS classes (optional)
+
+Features:
+- Clean toggle button design
+- Visual indicators for current view
+- HTMX integration for seamless switching
+- Accessible with proper ARIA labels
+- Icons for grid and list views
+{% endcomment %}
+
+<c-vars 
+    current_view="grid"
+    class=""
+/>
+
+<div class="inline-flex rounded-lg border border-gray-200 dark:border-gray-700 {{ class }}" role="group" aria-label="View toggle">
+    <button
+        type="button"
+        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-l-lg transition-colors {% if current_view == 'grid' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700{% endif %}"
+        hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'view_mode' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}view_mode=grid"
+        hx-target="#park-results"
+        hx-push-url="true"
+        hx-indicator="#search-spinner"
+        aria-label="Grid view"
+        aria-pressed="{% if current_view == 'grid' %}true{% else %}false{% endif %}"
+        title="Grid view"
+    >
+        <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+        </svg>
+        <span class="ml-1 hidden sm:inline">Grid</span>
+    </button>
+    
+    <button
+        type="button"
+        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-r-lg transition-colors {% if current_view == 'list' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700{% endif %}"
+        hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'view_mode' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}view_mode=list"
+        hx-target="#park-results"
+        hx-push-url="true"
+        hx-indicator="#search-spinner"
+        aria-label="List view"
+        aria-pressed="{% if current_view == 'list' %}true{% else %}false{% endif %}"
+        title="List view"
+    >
+        <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="M4 6h16M4 10h16M4 14h16M4 18h16" />
+        </svg>
+        <span class="ml-1 hidden sm:inline">List</span>
+    </button>
+</div>