feat: expand station cards with detailed information and add live statistics endpoint

- Add `/stats/live` endpoint returning station count and latest price timestamp with 5-minute cache
- Transform StationCard into expandable component with click/keyboard interaction showing full details
- Display brand label, badges (24h/Supermarket/Motorway), fuel types, amenities, opening hours, and price delta vs average
- Add brand filter dropdown to StationList with dynamic brand extraction from results
- Calculate and display price comparison against filtered stations average
- Redesign map markers to simpler price display; move directions link to popup alongside station details
- Add "locate-me" button to SearchBar for geolocation trigger
- Show "Live" indicator with station count and last-update time on homepage hero
- Remove standalone directions link from marker HTML; consolidate in popup with click propagation handling
- Persist `avgPence` calculation across StationList and pass to cards for delta display
- Add `@iconify-json/lucide` dev dependency and register collection on app mount
- Stop click propagation on card action buttons (directions, remove)

resources/js/components/StationList.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="space-y-3">
-        <!-- Sort tabs -->
-        <div class="flex gap-2 flex-wrap">
+        <!-- Sort tabs + brand filter -->
+        <div class="flex gap-2 flex-wrap items-center">
             <button
                 v-for="option in sortOptions"
                 :key="option.value"
                 @click="emit('sort', option.value)"
                 :class="[
-                    'px-4 py-1.5 rounded-full text-sm font-bold transition-colors',
+                    'h-10 px-4 rounded-xl text-sm font-bold transition-colors',
                     currentSort === option.value
                         ? 'bg-accent text-white'
                         : 'bg-white border border-zinc-300 text-zinc-500 hover:border-accent'
@@ -15,11 +15,23 @@
             >
                 {{ option.label }}
             </button>
+
+            <select
+                v-if="availableBrands.length > 1"
+                v-model="brandFilter"
+                aria-label="Filter by brand"
+                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="">All brands</option>
+                <option v-for="brand in availableBrands" :key="brand" :value="brand">{{ brand }}</option>
+            </select>
         </div>
 
         <!-- Count -->
         <p class="text-sm text-zinc-500 font-medium">
-            {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
+            {{ filteredStations.length }} station{{ filteredStations.length !== 1 ? 's' : '' }}
+            <span v-if="brandFilter">matching <strong>{{ brandFilter }}</strong></span>
+            <span v-else>found</span>
         </p>
 
         <!-- Grouped results when sorting by reliability -->
@@ -33,6 +45,7 @@
                 <StationCard
                     v-for="station in reliable"
                     :key="station.station_id"
+                    :avg-pence="avgPence"
                     :lowest-price="lowestPrice"
                     :origin="origin"
                     :station="station"
@@ -49,7 +62,9 @@
                     <StationCard
                         v-for="station in stale"
                         :key="station.station_id"
+                        :avg-pence="avgPence"
                         :lowest-price="lowestPrice"
+                        :origin="origin"
                         :station="station"
                         class="mb-2"
                     />
@@ -66,7 +81,9 @@
                     <StationCard
                         v-for="station in outdated"
                         :key="station.station_id"
+                        :avg-pence="avgPence"
                         :lowest-price="lowestPrice"
+                        :origin="origin"
                         :station="station"
                         class="mb-2"
                     />
@@ -77,18 +94,19 @@
         <!-- Flat list for other sort modes -->
         <div v-else class="space-y-2">
             <StationCard
-                v-for="station in stations"
+                v-for="station in filteredStations"
                 :key="station.station_id"
-                :station="station"
+                :avg-pence="avgPence"
                 :lowest-price="lowestPrice"
                 :origin="origin"
+                :station="station"
             />
         </div>
     </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import StationCard from './StationCard.vue'
 
 const props = defineProps({
@@ -99,21 +117,41 @@ const props = defineProps({
 
 const emit = defineEmits(['sort'])
 
+const brandFilter = ref('')
+
 const sortOptions = [
     { label: 'Reliable', value: 'reliable' },
     { label: 'Price', value: 'price' },
     { label: 'Distance', value: 'distance' },
     { label: 'Updated', value: 'updated' },
-    { label: 'Brand', value: 'brand' },
 ]
 
-const reliable = computed(() => props.stations.filter(s => s.reliability === 'reliable'))
-const stale = computed(() => props.stations.filter(s => s.reliability === 'stale'))
-const outdated = computed(() => props.stations.filter(s => s.reliability === 'outdated'))
+const availableBrands = computed(() => {
+    const brands = new Set()
+    props.stations.forEach(s => {
+        if (s.brand) brands.add(s.brand)
+    })
+    return [...brands].sort((a, b) => a.localeCompare(b))
+})
+
+const filteredStations = computed(() => {
+    if (!brandFilter.value) return props.stations
+    return props.stations.filter(s => s.brand === brandFilter.value)
+})
+
+const reliable = computed(() => filteredStations.value.filter(s => s.reliability === 'reliable'))
+const stale = computed(() => filteredStations.value.filter(s => s.reliability === 'stale'))
+const outdated = computed(() => filteredStations.value.filter(s => s.reliability === 'outdated'))
 
 const lowestPrice = computed(() => {
-    if (!reliable.value.length && !props.stations.length) return null
-    const pool = reliable.value.length ? reliable.value : props.stations
+    if (!reliable.value.length && !filteredStations.value.length) return null
+    const pool = reliable.value.length ? reliable.value : filteredStations.value
     return Math.min(...pool.map(s => s.price_pence))
 })
+
+const avgPence = computed(() => {
+    const prices = filteredStations.value.map(s => s.price_pence).filter(p => typeof p === 'number')
+    if (!prices.length) return null
+    return prices.reduce((a, b) => a + b, 0) / prices.length
+})
 </script>