Refactor ride list and search suggestion templates for improved structure and styling; update view logic to support dynamic template rendering based on request type

rides/templates/rides/partials/search_suggestions.html

@@ -1,24 +1,24 @@
 {% if suggestions %}
-  <div id="search-suggestions" class="search-suggestions">
+  <div id="search-suggestions" class="search-suggestions bg-white rounded-lg shadow-lg overflow-hidden">
     {% for suggestion in suggestions %}
-      <div class="suggestion" 
+      <div class="suggestion px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-2"
            data-type="{{ suggestion.type }}"
            data-suggestion="{{ suggestion.text|escape }}"
            role="option">
         {% if suggestion.type == 'ride' %}
-          <span class="icon">🎢</span>
-          <span class="text">{{ suggestion.text }}</span>
-          <span class="count">({{ suggestion.count }} rides)</span>
+          <span class="icon text-xl">🎢</span>
+          <span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
+          <span class="count text-sm text-gray-500 dark:text-gray-400">({{ suggestion.count }} rides)</span>
         {% elif suggestion.type == 'park' %}
-          <span class="icon">🎪</span>
-          <span class="text">{{ suggestion.text }}</span>
+          <span class="icon text-xl">🎪</span>
+          <span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
           {% if suggestion.location %}
-            <span class="location">{{ suggestion.location }}</span>
+            <span class="location text-sm text-gray-500 dark:text-gray-400">{{ suggestion.location }}</span>
           {% endif %}
         {% elif suggestion.type == 'category' %}
-          <span class="icon">📂</span>
-          <span class="text">{{ suggestion.text }}</span>
-          <span class="count">({{ suggestion.count }} rides)</span>
+          <span class="icon text-xl">📂</span>
+          <span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
+          <span class="count text-sm text-gray-500 dark:text-gray-400">({{ suggestion.count }} rides)</span>
         {% endif %}
       </div>
     {% endfor %}

rides/templates/rides/ride_list.html

@@ -29,10 +29,10 @@
                name="q"
                class="w-full p-4 border rounded-lg shadow-sm"
                placeholder="Search rides by name, park, or category..."
-               hx-get="."
+               hx-get="{% url 'rides:global_ride_list' %}"
                hx-trigger="keyup changed delay:500ms, search"
                hx-target="#ride-list-results"
-               hx-push-url="true"
+               hx-push-url="false"
                hx-indicator="#search-loading"
                autocomplete="off">
         
@@ -52,25 +52,25 @@
     {# Quick Filter Buttons #}
     <div class="flex flex-wrap gap-2 mt-4">
       <button class="filter-btn active"
-              hx-get="."
+              hx-get="{% url 'rides:global_ride_list' %}"
               hx-target="#ride-list-results"
-              hx-push-url="true"
+              hx-push-url="false"
               hx-include="[name='q']">
         All Rides
       </button>
       <button class="filter-btn"
-              hx-get="."
+              hx-get="{% url 'rides:global_ride_list' %}"
               hx-target="#ride-list-results"
-              hx-push-url="true"
+              hx-push-url="false"
               hx-include="[name='q']"
               hx-vals='{"operating": "true"}'>
         Operating
       </button>
       {% for code, name in category_choices %}
         <button class="filter-btn"
-                hx-get="."
+                hx-get="{% url 'rides:global_ride_list' %}"
                 hx-target="#ride-list-results"
-                hx-push-url="true"
+                hx-push-url="false"
                 hx-include="[name='q']"
                 hx-vals='{"category": "{{ code }}"}'>
           {{ name }}
@@ -84,7 +84,7 @@
         <span class="filter-tag">
           Search: {{ request.GET.q }}
           <button class="ml-2"
-                  hx-get="."
+                  hx-get="{% url 'rides:global_ride_list' %}"
                   hx-target="#ride-list-results"
                   hx-push-url="true"
                   title="Clear search">&times;</button>
@@ -94,7 +94,7 @@
         <span class="filter-tag">
           Category: {{ request.GET.category|get_category_display }}
           <button class="ml-2"
-                  hx-get="."
+                  hx-get="{% url 'rides:global_ride_list' %}"
                   hx-target="#ride-list-results"
                   hx-push-url="true"
                   hx-include="[name='q']"
@@ -105,7 +105,7 @@
         <span class="filter-tag">
           Operating Only
           <button class="ml-2"
-                  hx-get="."
+                  hx-get="{% url 'rides:global_ride_list' %}"
                   hx-target="#ride-list-results"
                   hx-push-url="true"
                   hx-include="[name='q']"
@@ -116,7 +116,7 @@
   </div>
 
   {# Results Section #}
-  <div id="ride-list-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  <div id="ride-list-results">
     {% include "rides/partials/ride_list_results.html" %}
   </div>
 </div>