feat: add location-based search, redesign station cards, and implement URL state management

- Support geolocation search (lat/lng) as alternative to postcode with automatic fallback
- Redesign StationCard with expanded layout showing address, distance in miles, reliability status, directions link, and optional remove button
- Add directions integration with Google Maps including origin parameter support
- Persist search parameters (postcode/coords, fuel type, radius, sort) in URL query and hydrate on mount
- Implement compact map markers with inline directions link and click-to-zoom behavior
- Auto-trigger search when filters change (fuel type, radius, sort) if search already performed
- Add removable prop to StationCard for watchlist integration
- Display reliability status (Current/Stale/Outdated) with color-coded pricing
- Remove 2-mile radius option from search filters

resources/js/components/SearchBar.vue

@@ -20,14 +20,14 @@
                     id="postcode-input"
                     v-model="postcode"
                     type="text"
-                    placeholder="Enter postcode, e.g. SW1A 1AA"
+                    :placeholder="coords ? 'Using your current location' : 'Enter postcode, e.g. SW1A 1AA'"
                     class="w-full h-14 pr-28 pl-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
                     @keyup.enter="onSearch"
                 />
             </div>
             <button
                 @click="onSearch"
-                :disabled="!postcode.trim()"
+                :disabled="!postcode.trim() && !coords"
                 class="h-14 px-8 bg-primary text-white rounded-xl font-bold text-base shadow-xl hover:bg-primary-dark transition-all disabled:cursor-not-allowed"
             >
                 Find Prices
@@ -50,7 +50,8 @@
                 aria-label="Search radius"
                 class="min-w-0 h-10 px-2 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="2">2 miles</option>
+                <!-- <option :value="2">2 miles</option> -->
+
                 <option :value="5">5 miles</option>
                 <option :value="10">10 miles</option>
                 <option :value="20">20 miles</option>
@@ -71,32 +72,51 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { FUEL_TYPES } from '../constants/fuelTypes.js'
 
+const props = defineProps({
+    initial: { type: Object, default: () => ({}) },
+})
+
 const emit = defineEmits(['search'])
 
 const postcode = ref('')
+const coords = ref(null)
 const fuelType = ref('e10')
 const radius = ref(10)
 const sort = ref('reliable')
 const locating = ref(false)
 
+let hydrating = false
+
+watch(() => props.initial, (v) => {
+    if (!v) return
+    hydrating = true
+    if (typeof v.postcode === 'string') postcode.value = v.postcode
+    if (v.lat != null && v.lng != null) coords.value = { lat: v.lat, lng: v.lng }
+    if (v.fuelType) fuelType.value = v.fuelType
+    if (v.radius != null) radius.value = Number(v.radius)
+    if (v.sort) sort.value = v.sort
+    nextTick(() => { hydrating = false })
+}, { immediate: true, deep: true })
+
+watch(postcode, () => { coords.value = null })
+
+watch([fuelType, radius, sort], () => {
+    if (hydrating) return
+    if (postcode.value.trim() || coords.value) onSearch()
+})
+
 function useMyLocation() {
     if (!navigator.geolocation) return
     locating.value = true
     navigator.geolocation.getCurrentPosition(
-        async ({ coords }) => {
-            try {
-                const res = await fetch(`https://api.postcodes.io/postcodes?lon=${coords.longitude}&lat=${coords.latitude}&limit=1`)
-                const json = await res.json()
-                if (json.result?.[0]?.postcode) {
-                    postcode.value = json.result[0].postcode
-                    onSearch()
-                }
-            } finally {
-                locating.value = false
-            }
+        ({ coords: c }) => {
+            coords.value = { lat: c.latitude, lng: c.longitude }
+            postcode.value = ''
+            locating.value = false
+            onSearch()
         },
         () => { locating.value = false },
         { timeout: 8000, enableHighAccuracy: false, maximumAge: 30000 },
@@ -104,9 +124,14 @@ function useMyLocation() {
 }
 
 function onSearch() {
-    if (!postcode.value.trim()) return
+    const hasPostcode = postcode.value.trim().length > 0
+    const hasCoords = coords.value !== null
+    if (!hasPostcode && !hasCoords) return
+
     emit('search', {
-        postcode: postcode.value.trim(),
+        postcode: hasPostcode ? postcode.value.trim() : null,
+        lat: hasCoords ? coords.value.lat : null,
+        lng: hasCoords ? coords.value.lng : null,
         fuelType: fuelType.value,
         radius: radius.value,
         sort: sort.value,