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/LeafletMap.vue

@@ -40,7 +40,6 @@
 import {ref, watch, onMounted, onUnmounted, nextTick} from 'vue'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import {zoom} from "leaflet/src/control/Control.Zoom.js";
 
 const CLASSIFICATION_COLOURS = {
 	current: '#22c55e',
@@ -56,37 +55,28 @@ const CLASSIFICATION_BORDER_COLOURS = {
 	outdated: '#dc2626',
 }
 
-function buildMarkerHtml(station, index, colour, borderColour) {
+function buildDirectionsUrl(station, origin) {
+	const base = `https://www.google.com/maps/dir/?api=1&destination=${station.lat},${station.lng}`
+	if (origin?.lat != null && origin?.lng != null) {
+		return `${base}&origin=${origin.lat},${origin.lng}`
+	}
+	return base
+}
+
+function buildMarkerHtml(station, index, colour, borderColour, origin) {
 	const isFirst = index === 0
-	const w = isFirst ? 63 : 59
-	const h = isFirst ? 58 : 51
-	const bw = isFirst ? 56 : 52
-	const bh = isFirst ? 43 : 38
-	const br = isFirst ? 17 : 15
-	const tailTop = isFirst ? 45 : 40
-	const tailW = isFirst ? 9 : 7
-	const tailH = isFirst ? 11 : 9
-	const badgeSize = isFirst ? 18 : 16
-	const badgeFontSize = isFirst ? 10 : 8
-	const priceFontSize = isFirst ? 12 : 11
+	const h = isFirst ? 20 : 18
+	const fontSize = isFirst ? 11 : 10
+	const iconSize = isFirst ? 11 : 10
+	const star = isFirst
+		? `<span style="margin-right:2px;color:#facc15;font-size:10px;line-height:1;">★</span>`
+		: ''
 
-	const initial = escHtml((station.brand || station.name || '?')[0].toUpperCase())
+	const directionsUrl = escHtml(buildDirectionsUrl(station, origin))
+	const navSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>`
 
-	const badge = isFirst
-		? `<div style="position:absolute;top:-4px;right:-4px;width:${badgeSize}px;height:${badgeSize}px;background:#facc15;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.2);z-index:30;"><span style="font-size:${badgeFontSize}px;color:#713f12;">★</span></div>`
-		: `<div style="position:absolute;top:-3px;right:-3px;width:${badgeSize}px;height:${badgeSize}px;background:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:30;"><span style="font-size:${badgeFontSize}px;font-weight:bold;color:white;">${index + 1}</span></div>`
-
-	return `<div style="position:relative;width:${w}px;height:${h}px;">
-        ${badge}
-        <div style="position:absolute;top:6px;left:50%;transform:translateX(-50%);width:${bw}px;height:${bh}px;background:${colour};border-radius:${br}px;border:3px solid ${borderColour};box-shadow:0 2px 6px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.22);overflow:hidden;z-index:10;">
-            <div style="position:absolute;top:0;left:0;right:0;height:11px;background:rgba(15,23,42,0.20);border-bottom:1px solid rgba(255,255,255,0.24);display:flex;align-items:center;justify-content:center;">
-                <span style="font-size:9px;font-weight:700;letter-spacing:-0.05px;color:rgba(255,255,255,0.84);text-transform:uppercase;line-height:1;">${initial}</span>
-            </div>
-            <div style="position:absolute;left:3px;right:3px;top:12px;bottom:2px;display:flex;align-items:center;justify-content:center;text-align:center;">
-                <span style="display:inline-block;max-width:${bw - 13}px;color:#ffffff;font-size:${priceFontSize}px;font-weight:800;letter-spacing:-0.1px;line-height:1.12;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,0.42);">${Number(station.price).toFixed(1)}p</span>
-            </div>
-        </div>
-        <div style="position:absolute;top:${tailTop}px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:${tailW}px solid transparent;border-right:${tailW}px solid transparent;border-top:${tailH}px solid ${colour};z-index:5;"></div>
+	return `<div style="display:inline-flex;align-items:center;height:${h}px;padding:0 4px 0 6px;background:${colour};color:#fff;font-weight:700;font-size:${fontSize}px;line-height:1;letter-spacing:-0.2px;border-radius:10px;border:1.5px solid ${borderColour};box-shadow:0 1px 3px rgba(0,0,0,0.25);white-space:nowrap;gap:3px;">
+        ${star}<span>${Number(station.price).toFixed(1)}</span><a data-directions href="${directionsUrl}" target="_blank" rel="noopener" aria-label="Directions" style="display:inline-flex;align-items:center;justify-content:center;width:${h - 6}px;height:${h - 6}px;margin-left:1px;border-radius:50%;background:rgba(255,255,255,0.22);color:#fff;text-decoration:none;">${navSvg}</a>
     </div>`
 }
 
@@ -102,6 +92,7 @@ const props = defineProps({
 	stations: {type: Array, required: true},
 	defaultOpen: {type: Boolean, default: false},
 	radiusMiles: {type: Number, default: 10},
+	origin: {type: Object, default: null},
 })
 
 const mapContainer = ref(null)
@@ -216,22 +207,29 @@ function renderMarkers() {
         `
 
 		const isFirst = index === 0
-		const w = isFirst ? 63 : 59
-		const h = isFirst ? 58 : 51
+		const w = isFirst ? 65 : 56
+		const h = isFirst ? 20 : 18
 
 		const icon = L.divIcon({
 			className: '',
 			iconSize: [w, h],
-			iconAnchor: [w / 2, h],
-			html: buildMarkerHtml(station, index, colour, borderColour),
+			iconAnchor: [w / 2, h / 2],
+			html: buildMarkerHtml(station, index, colour, borderColour, props.origin),
 		})
 
 		const marker = L.marker([station.lat, station.lng], {icon}).bindPopup(popup)
 
+		marker.on('click', () => {
+			const target = Math.max(mapInstance.getZoom(), 16)
+			mapInstance.setView([station.lat, station.lng], target, {animate: true})
+		})
+
 		markersLayer.addLayer(marker)
 		bounds.push([station.lat, station.lng])
 	})
 
+	const zoom = getZoomForRadius(props.radiusMiles)
+
 	if (bounds.length === 1) {
 		mapInstance.setView(bounds[0], zoom)
 	} else {

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,

resources/js/components/StationCard.vue

@@ -1,20 +1,60 @@
 <template>
-    <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-zinc-300 hover:border-accent transition-colors">
-        <div class="flex items-center gap-3 min-w-0">
-            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
-                <iconify-icon
-                    :icon="station.is_supermarket ? 'lucide:shopping-cart' : 'lucide:fuel'"
-                    style="font-size:1.25rem"
-                    class="text-accent"
-                ></iconify-icon>
+    <div class="bg-zinc-50 p-4 rounded-xl border border-zinc-300 shadow-sm flex flex-col gap-4">
+        <div class="flex justify-between items-start gap-3">
+            <div class="space-y-0.5 min-w-0 flex-1">
+                <h4 class="font-bold text-lg text-zinc-800 truncate">{{ station.name }}</h4>
+                <p class="text-xs text-zinc-500 flex items-center gap-1">
+                    <iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
+                    <span class="truncate">{{ locationLine }}</span>
+                </p>
             </div>
-            <div class="min-w-0">
-                <p class="font-bold text-zinc-800 truncate">{{ station.name }}</p>
-                <p class="text-xs text-zinc-500">{{ station.distance_km.toFixed(1) }} km away · Updated {{ updatedAgo }}</p>
+            <a
+                :href="directionsUrl"
+                aria-label="Directions"
+                class="hidden md:inline-flex w-10 h-10 items-center justify-center rounded-lg bg-accent/10 text-accent active:bg-accent/20 flex-shrink-0"
+                rel="noopener"
+                target="_blank"
+            >
+                <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
+            </a>
+            <div class="text-right flex-shrink-0">
+                <div :class="priceColor" class="text-xl font-black">
+                    {{ station.price }}<span class="text-sm font-bold uppercase ml-0.5">p</span>
+                </div>
+                <p :class="priceColor" class="text-[10px] font-bold uppercase tracking-wider">
+                    {{ statusLabel }}
+                </p>
             </div>
         </div>
-        <div class="text-right flex-shrink-0 ml-4">
-            <p class="text-xl font-black" :class="priceColor">{{ station.price }}p</p>
+        <div class="flex items-center justify-end gap-2 md:hidden">
+            <button
+                v-if="removable"
+                aria-label="Remove"
+                class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
+                type="button"
+                @click="emit('remove', station)"
+            >
+                <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
+            </button>
+            <a
+                :href="directionsUrl"
+                class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-accent/10 text-accent font-bold text-sm active:bg-accent/20"
+                rel="noopener"
+                target="_blank"
+            >
+                <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
+                Directions
+            </a>
+        </div>
+        <div v-if="removable" class="hidden md:flex justify-end">
+            <button
+                aria-label="Remove"
+                class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
+                type="button"
+                @click="emit('remove', station)"
+            >
+                <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
+            </button>
         </div>
     </div>
 </template>
@@ -25,21 +65,42 @@ import { computed } from 'vue'
 const props = defineProps({
     station: { type: Object, required: true },
     lowestPrice: { type: Number, default: null },
+    removable: { type: Boolean, default: false },
+    origin: { type: Object, default: null },
 })
 
+const emit = defineEmits(['remove'])
+
+const RELIABILITY_MAP = {
+    reliable: { label: 'Current', color: 'text-status-good' },
+    stale: { label: 'Stale', color: 'text-status-warn' },
+    outdated: { label: 'Outdated', color: 'text-status-bad' },
+}
+
+const reliabilityInfo = computed(() => RELIABILITY_MAP[props.station.reliability] ?? RELIABILITY_MAP.reliable)
+
 const priceColor = computed(() => {
-    if (!props.lowestPrice) return 'text-zinc-800'
-    if (props.station.price_pence === props.lowestPrice) return 'text-status-good'
-    if (props.station.price_pence > props.lowestPrice + 500) return 'text-status-bad'
-    return 'text-zinc-800'
+    if (props.lowestPrice && props.station.price_pence === props.lowestPrice) {
+        return 'text-status-good'
+    }
+    return reliabilityInfo.value.color
 })
 
-const updatedAgo = computed(() => {
-    const updated = new Date(props.station.price_updated_at)
-    const diff = Math.floor((Date.now() - updated) / 60000)
-    if (diff < 60) return `${diff}m ago`
-    const hours = Math.floor(diff / 60)
-    if (hours < 24) return `${hours}h ago`
-    return `${Math.floor(hours / 24)}d ago`
+const statusLabel = computed(() => reliabilityInfo.value.label)
+
+const distanceMiles = computed(() => (props.station.distance_km * 0.621371).toFixed(1))
+
+const locationLine = computed(() => {
+    const parts = [props.station.address, `${distanceMiles.value} mi`].filter(Boolean)
+    return parts.join(' • ')
+})
+
+const directionsUrl = computed(() => {
+    const { lat, lng } = props.station
+    const base = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`
+    if (props.origin?.lat != null && props.origin?.lng != null) {
+        return `${base}&origin=${props.origin.lat},${props.origin.lng}`
+    }
+    return base
 })
 </script>

resources/js/components/StationList.vue

@@ -34,6 +34,7 @@
                     v-for="station in reliable"
                     :key="station.station_id"
                     :lowest-price="lowestPrice"
+                    :origin="origin"
                     :station="station"
                 />
             </section>
@@ -80,6 +81,7 @@
                 :key="station.station_id"
                 :station="station"
                 :lowest-price="lowestPrice"
+                :origin="origin"
             />
         </div>
     </div>
@@ -92,6 +94,7 @@ import StationCard from './StationCard.vue'
 const props = defineProps({
     stations: { type: Array, required: true },
     currentSort: { type: String, default: 'reliable' },
+    origin: { type: Object, default: null },
 })
 
 const emit = defineEmits(['sort'])