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 {