Remove obsolete Livewire fuel search components and consolidate pricing tiers

- Delete unused Livewire Search test and fuel type select Blade component
- Move subscription webhook listener from EventServiceProvider to AppServiceProvider
- Add FUEL_TYPES global config to app layout for client-side use
- Add Billable trait to User model and include email_verified_at in fillable
- Implement monthly/annual cadence toggle with pricing display and smart CTA routing on homepage
- Update VerifyApiKeyMiddlewareTest to use e10 instead of petrol
- Refactor PollFuelPrices to auto-refresh stale stations based on last_seen_at
- Add incremental polling with cached timestamp and effective-start-timestamp param to FuelPriceService
- Normalize amenities/fuel_types from API objects to flat arrays, skip stations missing required fields
- Log response body on API failures in ApiLogger
- Default homepage sort to 'reliable' instead of 'price'

resources/js/components/StationList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="space-y-3">
         <!-- Sort tabs -->
-        <div class="flex gap-2">
+        <div class="flex gap-2 flex-wrap">
             <button
                 v-for="option in sortOptions"
                 :key="option.value"
@@ -22,8 +22,59 @@
             {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
         </p>
 
-        <!-- Results -->
-        <div class="space-y-2">
+        <!-- Grouped results when sorting by reliability -->
+        <template v-if="currentSort === 'reliable'">
+            <section v-if="reliable.length" class="space-y-2">
+                <header class="flex items-center gap-2 pt-2">
+                    <iconify-icon class="text-status-good text-lg" icon="lucide:shield-check"></iconify-icon>
+                    <h3 class="font-black text-zinc-800">Reliable</h3>
+                    <span class="text-xs text-zinc-500 font-medium">Updated in the last 3 days</span>
+                </header>
+                <StationCard
+                    v-for="station in reliable"
+                    :key="station.station_id"
+                    :lowest-price="lowestPrice"
+                    :station="station"
+                />
+            </section>
+
+            <section v-if="stale.length" class="space-y-2 pt-4">
+                <header class="flex items-center gap-2">
+                    <iconify-icon class="text-status-warn text-lg" icon="lucide:clock"></iconify-icon>
+                    <h3 class="font-black text-zinc-800">Older prices</h3>
+                    <span class="text-xs text-zinc-500 font-medium">3–7 days old — verify before driving</span>
+                </header>
+                <div class="opacity-80">
+                    <StationCard
+                        v-for="station in stale"
+                        :key="station.station_id"
+                        :lowest-price="lowestPrice"
+                        :station="station"
+                        class="mb-2"
+                    />
+                </div>
+            </section>
+
+            <section v-if="outdated.length" class="space-y-2 pt-4">
+                <header class="flex items-center gap-2">
+                    <iconify-icon class="text-status-bad text-lg" icon="lucide:triangle-alert"></iconify-icon>
+                    <h3 class="font-black text-zinc-800">Outdated</h3>
+                    <span class="text-xs text-zinc-500 font-medium">Over 7 days old — likely inaccurate</span>
+                </header>
+                <div class="opacity-60">
+                    <StationCard
+                        v-for="station in outdated"
+                        :key="station.station_id"
+                        :lowest-price="lowestPrice"
+                        :station="station"
+                        class="mb-2"
+                    />
+                </div>
+            </section>
+        </template>
+
+        <!-- Flat list for other sort modes -->
+        <div v-else class="space-y-2">
             <StationCard
                 v-for="station in stations"
                 :key="station.station_id"
@@ -40,21 +91,26 @@ import StationCard from './StationCard.vue'
 
 const props = defineProps({
     stations: { type: Array, required: true },
-    currentSort: { type: String, default: 'price' },
+    currentSort: { type: String, default: 'reliable' },
 })
 
 const emit = defineEmits(['sort'])
 
 const sortOptions = [
+    { label: 'Reliable', value: 'reliable' },
     { label: 'Price', value: 'price' },
     { label: 'Distance', value: 'distance' },
     { label: 'Updated', value: 'updated' },
     { label: 'Brand', value: 'brand' },
-    { label: 'Reliable', value: 'reliable' },
 ]
 
+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 lowestPrice = computed(() => {
-    if (!props.stations.length) return null
-    return Math.min(...props.stations.map(s => s.price_pence))
+    if (!reliable.value.length && !props.stations.length) return null
+    const pool = reliable.value.length ? reliable.value : props.stations
+    return Math.min(...pool.map(s => s.price_pence))
 })
 </script>