Rename SearchBar to PostSearchFilters, add sort controls and brand filter, relocate station count display

- Move SearchBar.vue to PostSearchFilters.vue and expand to include sort buttons, brand filter dropdown, and station count
- Integrate sort controls (Reliable/Price/Distance/Updated) with icons into filter bar
- Add brand filter dropdown with dynamic brand list from parent, emit update events
- Move station count from StationList to PostSearchFilters, display as "X station(s) found"
- Remove sort tabs and brand filter from StationList component
- Add force-new-line div for mobile layout between Refine and Sort groups
- Include brand filter in hasActive check and resetFilters function
- Update Home.vue to pass brands/brandFilter props and handle brandFilter updates
- Add reset() method to useStations composable to clear state on empty query
- Clear search state when route query is empty instead of attempting search
- Update Fuel Finder API base URL to include /api/v1 path
- Adjust map zoom levels for 10-15 mile radius range
- Update API token request to use retry and increase timeout to 60s

resources/js/views/Home.vue

@@ -37,10 +37,12 @@
             <div class="max-w-7xl mx-auto space-y-6">
 
                 <!-- Post-search filter bar -->
-				<SearchBar
+				<PostSearchFilters
+					v-model:brand-filter="brandFilter"
+					:brands="availableBrands"
 					:initial="searchInitial"
 					:map-open="mapOpen"
-					:result-count="filteredStations.length"
+					:station-count="filteredStations.length"
 					@search="onSearch"
 					@toggle-map="mapOpen = !mapOpen"
 				/>
@@ -73,12 +75,9 @@
                             :stations="filteredStations"
                         />
                         <StationList
-                            v-model:brand-filter="brandFilter"
-                            :brands="availableBrands"
                             :current-sort="sort"
                             :origin="searchOrigin"
                             :stations="filteredStations"
-                            @sort="onSort"
                         />
                     </template>
                 </template>
@@ -393,7 +392,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { useAuth } from '../composables/useAuth.js'
 import { useStations } from '../composables/useStations.js'
 import api from '../axios.js'
-import SearchBar from '../components/SearchBar.vue'
+import PostSearchFilters from '../components/PostSearchFilters.vue'
 import StationList from '../components/StationList.vue'
 
 const LeafletMap = defineAsyncComponent(() => import('../components/LeafletMap.vue'))
@@ -453,7 +452,7 @@ const PRICES = {
     annual: { basic: '£9.90', plus: '£24.90', pro: '£39.90' },
 }
 const PRICE_SUFFIX = { monthly: '/mo', annual: '/yr' }
-const { stations, meta, loading, error, search } = useStations()
+const { stations, meta, loading, error, search, reset } = useStations()
 
 watch(loading, (isLoading) => {
     if (!isLoading) return
@@ -571,16 +570,15 @@ async function onSearch(params) {
     await runSearch(params)
 }
 
-async function onSort(newSort) {
-    if (!lastParams.value) return
-    const next = { ...lastParams.value, sort: newSort }
-    await router.push({ query: queryFromParams(next) })
-    await runSearch(next)
-}
-
 watch(() => route.query, (query) => {
     const params = paramsFromQuery(query)
-    if (!params) return
+    if (!params) {
+        searchAttempted.value = false
+        lastParams.value = null
+        brandFilter.value = ''
+        reset()
+        return
+    }
     const sameAsLast = lastParams.value
         && JSON.stringify(queryFromParams(lastParams.value)) === JSON.stringify(queryFromParams(params))
     if (sameAsLast) return