feat: add fuel price classification markers and responsive search UI improvements

- Move map pin icon to right side of input with adjusted spacing
- Change button styling from accent to primary color

resources/js/components/LeafletMap.vue

@@ -8,11 +8,31 @@
             {{ isOpen ? 'Hide map' : 'Show map' }}
         </button>
 
-        <div
-            v-show="isOpen"
-            ref="mapContainer"
-            class="w-full h-72 rounded-2xl overflow-hidden border border-zinc-300 shadow-sm"
-        ></div>
+        <template v-if="isOpen">
+            <div
+                ref="mapContainer"
+                class="w-full h-72 rounded-2xl overflow-hidden border border-zinc-300 shadow-sm"
+            ></div>
+
+            <div class="flex flex-wrap gap-3 text-xs text-zinc-500">
+                <span class="flex items-center gap-1.5">
+                    <span class="inline-block size-3 rounded-full bg-green-500"></span>
+                    Current (&lt;24h)
+                </span>
+                <span class="flex items-center gap-1.5">
+                    <span class="inline-block size-3 rounded-full bg-slate-500"></span>
+                    Recent (24–48h)
+                </span>
+                <span class="flex items-center gap-1.5">
+                    <span class="inline-block size-3 rounded-full bg-amber-500"></span>
+                    Stale (2–5 days)
+                </span>
+                <span class="flex items-center gap-1.5">
+                    <span class="inline-block size-3 rounded-full bg-red-500"></span>
+                    Outdated (5+ days)
+                </span>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -21,13 +41,61 @@ import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 
-// Fix Leaflet default marker icon path broken by Vite
-delete L.Icon.Default.prototype._getIconUrl
-L.Icon.Default.mergeOptions({
-    iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
-    iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
-    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
-})
+const CLASSIFICATION_COLOURS = {
+    current:  '#22c55e',
+    recent:   '#64748b',
+    stale:    '#f59e0b',
+    outdated: '#ef4444',
+}
+
+const CLASSIFICATION_BORDER_COLOURS = {
+    current:  '#16a34a',
+    recent:   '#475569',
+    stale:    '#d97706',
+    outdated: '#dc2626',
+}
+
+function buildMarkerHtml(station, index, colour, borderColour) {
+    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 initial = escHtml((station.brand || station.name || '?')[0].toUpperCase())
+
+    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>
+    </div>`
+}
+
+function escHtml(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+}
 
 const props = defineProps({
     stations: { type: Array, required: true },
@@ -60,15 +128,44 @@ function renderMarkers() {
 
     const bounds = []
 
-    props.stations.forEach(station => {
-        const marker = L.marker([station.lat, station.lng])
-            .bindPopup(`<strong>${station.name}</strong><br>${station.price}p`)
+    props.stations.forEach((station, index) => {
+        const colour = CLASSIFICATION_COLOURS[station.price_classification] ?? '#64748b'
+        const borderColour = CLASSIFICATION_BORDER_COLOURS[station.price_classification] ?? '#475569'
+        const miles = ((station.distance_km ?? 0) * 0.621371).toFixed(1)
+        const supermarketTag = station.is_supermarket
+            ? '<span style="display:inline-block;background:#84cc16;color:#fff;font-size:10px;padding:1px 5px;border-radius:3px;margin-left:4px;">Supermarket</span>'
+            : ''
+
+        const popup = `
+            <div style="min-width:160px">
+                <strong style="font-size:13px">${escHtml(station.name)}</strong>${supermarketTag}<br>
+                <span style="font-size:20px;font-weight:700;color:${escHtml(colour)}">${Number(station.price).toFixed(1)}p</span><br>
+                <span style="font-size:12px;color:#6b7280">${escHtml(miles)} miles away</span><br>
+                <span style="font-size:11px;color:#9ca3af">${escHtml(station.address)}, ${escHtml(station.postcode)}</span>
+            </div>
+        `
+
+        const isFirst = index === 0
+        const w = isFirst ? 63 : 59
+        const h = isFirst ? 58 : 51
+
+        const icon = L.divIcon({
+            className: '',
+            iconSize: [w, h],
+            iconAnchor: [w / 2, h],
+            html: buildMarkerHtml(station, index, colour, borderColour),
+        })
+
+        const marker = L.marker([station.lat, station.lng], { icon }).bindPopup(popup)
+
         markersLayer.addLayer(marker)
         bounds.push([station.lat, station.lng])
     })
 
-    if (bounds.length) {
-        mapInstance.fitBounds(bounds, { padding: [30, 30] })
+    if (bounds.length === 1) {
+        mapInstance.setView(bounds[0], 14)
+    } else {
+        mapInstance.fitBounds(bounds, { padding: [40, 40], maxZoom: 14 })
     }
 }
 

resources/js/components/SearchBar.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="flex flex-col gap-3 max-w-md w-full">
         <!-- Row 1: postcode + button -->
-        <div class="relative flex flex-col sm:flex-row gap-3">
+        <div class="flex flex-col sm:flex-row gap-3">
             <div class="relative flex-1">
                 <label for="postcode-input" class="sr-only">Postcode or city</label>
-                <span aria-hidden="true" class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
+                <span aria-hidden="true"
+					  class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 p-4"
+				>
                     <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
                 </span>
                 <input
@@ -12,37 +14,37 @@
                     v-model="postcode"
                     type="text"
                     placeholder="Enter postcode, e.g. SW1A 1AA"
-                    class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
+                    class="w-full h-14 pr-12 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()"
-                class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                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
             </button>
         </div>
 
         <!-- Row 2: fuel type + radius + sort -->
-        <div class="flex gap-3">
+        <div class="grid grid-cols-3 gap-2">
             <select
                 v-model="fuelType"
                 aria-label="Fuel type"
-                class="flex-1 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+                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 truncate"
             >
                 <option value="e10">Petrol (E10)</option>
-                <option value="e5">Premium Petrol (E5)</option>
+                <option value="e5">Premium (E5)</option>
                 <option value="b7_standard">Diesel (B7)</option>
-                <option value="b7_premium">Premium Diesel (B7)</option>
+                <option value="b7_premium">Prem Diesel</option>
                 <option value="b10">Diesel (B10)</option>
                 <option value="hvo">HVO</option>
             </select>
             <select
                 v-model="radius"
                 aria-label="Search radius"
-                class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+                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="5">5 miles</option>
@@ -52,7 +54,7 @@
             <select
                 v-model="sort"
                 aria-label="Sort by"
-                class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
+                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="price">Price</option>
                 <option value="distance">Distance</option>