From 951bb0b98dfbd9006811b8b6e39177721582c10f Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 18:57:03 +0100
Subject: [PATCH] feat: add sort select to homepage SearchBar

---
 resources/js/components/SearchBar.vue | 15 ++++++++++++++-
 resources/js/views/Home.vue           |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/SearchBar.vue b/resources/js/components/SearchBar.vue
index 3ed83ff..894a6da 100644
--- a/resources/js/components/SearchBar.vue
+++ b/resources/js/components/SearchBar.vue
@@ -25,7 +25,7 @@
             </button>
         </div>
 
-        <!-- Row 2: fuel type + radius -->
+        <!-- Row 2: fuel type + radius + sort -->
         <div class="flex gap-3">
             <select
                 v-model="fuelType"
@@ -49,6 +49,17 @@
                 <option :value="10">10 miles</option>
                 <option :value="20">20 miles</option>
             </select>
+            <select
+                v-model="sort"
+                aria-label="Sort by"
+                class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+            >
+                <option value="price">Price</option>
+                <option value="distance">Distance</option>
+                <option value="updated">Updated</option>
+                <option value="brand">Brand</option>
+                <option value="reliable">Reliable</option>
+            </select>
         </div>
     </div>
 </template>
@@ -61,6 +72,7 @@ const emit = defineEmits(['search'])
 const postcode = ref('')
 const fuelType = ref('e10')
 const radius = ref(10)
+const sort = ref('price')
 
 function onSearch() {
     if (!postcode.value.trim()) return
@@ -68,6 +80,7 @@ function onSearch() {
         postcode: postcode.value.trim(),
         fuelType: fuelType.value,
         radius: radius.value,
+        sort: sort.value,
     })
 }
 </script>
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index c5df9a9..a6994d5 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -426,8 +426,9 @@ const searchAttempted = ref(false)
 
 async function onSearch(params) {
     lastParams.value = params
+    sort.value = params.sort ?? sort.value
     searchAttempted.value = true
-    await search({ ...params, sort: sort.value })
+    await search(params)
 }
 
 async function onSort(newSort) {