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/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>