bitstream/fuel-alert
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Redesign search UI with unified input, expandable filters, and integrated map controls
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source 
- Consolidate HeroSearch into single responsive form with inline geolocation button and submit actions
- Transform SearchBar into pill-based filter bar with visual state indicators (active filters highlighted)
- Move map toggle from separate component into SearchBar with open/close state management
- Redesign StationList sort controls as pills with icons, move brand filter inline, add result count
- Expand LeafletMap to full-width panel (96 viewport height) controlled by parent open state
- Remove nested mobile/desktop layouts in HeroSearch in favor of single adaptive form
- Add "Refine" and "Sort" labels to filter groups, implement clear-all filters button
- Show verdict card only before first search on mobile, hide after results load
- Position StatsRow within hero gradient, move results section into same gradient container
- Update map initialization to only occur when panel is open, destroy on close
- Add accessibility labels (aria-expanded, aria-controls) to map toggle button
This commit is contained in:
Ovidiu U
2026-04-22 09:38:23 +01:00
parent afe459f248
commit dd9bd95657
6 changed files with 352 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
resources/js/components/StationList.vue
View File

@@ -1,38 +1,54 @@
<template>
<div class="space-y-3">
<!-- Sort tabs + brand filter -->
<div class="flex gap-2 flex-wrap items-center">
<!-- Sort tabs -->
<div class="flex flex-wrap items-center gap-2 md:gap-2.5 py-3 border-b border-zinc-200">
<span class="hidden md:inline text-xs font-mono uppercase tracking-widest text-zinc-400 mr-1">
Sort
</span>
<button
v-for="option in sortOptions"
:key="option.value"
@click="emit('sort', option.value)"
:class="[
'h-10 px-4 rounded-xl text-sm font-bold transition-colors',
'inline-flex items-center gap-2 h-10 px-3 rounded-full border transition-colors cursor-pointer',
currentSort === option.value
? 'bg-accent text-white'
: 'bg-white border border-zinc-300 text-zinc-500 hover:border-accent'
? 'bg-primary/10 border-primary text-primary'
: 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
]"
@click="emit('sort', option.value)"
type="button"
>
{{ option.label }}
<iconify-icon :icon="option.icon" class="text-sm opacity-70"></iconify-icon>
<span class="text-sm font-medium">{{ option.label }}</span>
</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"
<!-- Brand filter -->
<label
v-if="brands.length > 1"
:class="[
'relative group inline-flex items-center gap-2 h-10 pl-3 pr-2 rounded-full border transition-colors cursor-pointer',
brandFilter
? 'bg-primary/10 border-primary text-primary'
: 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
]"
>
<option value="">All brands</option>
<option v-for="brand in availableBrands" :key="brand" :value="brand">{{ brand }}</option>
</select>
</div>
<iconify-icon class="text-sm opacity-70" icon="lucide:tag"></iconify-icon>
<span class="text-sm font-medium">{{ brandFilter || 'All brands' }}</span>
<iconify-icon class="text-sm opacity-50 group-hover:opacity-100" icon="lucide:chevron-down"></iconify-icon>
<select
:value="brandFilter"
aria-label="Filter by brand"
class="absolute inset-0 opacity-0 cursor-pointer"
@change="emit('update:brandFilter', $event.target.value)"
>
<option value="">All brands</option>
<option v-for="brand in brands" :key="brand" :value="brand">{{ brand }}</option>
</select>
</label>
<!-- Count -->
<p class="text-sm text-zinc-500 font-medium">
{{ filteredStations.length }} station{{ filteredStations.length !== 1 ? 's' : '' }}
<span v-if="brandFilter">matching <strong>{{ brandFilter }}</strong></span>
<span v-else>found</span>
</p>
<span class="ml-auto text-sm text-zinc-500 font-medium">
{{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
</span>
</div>
<!-- Grouped results when sorting by reliability -->
<template v-if="currentSort === 'reliable'">
@@ -94,7 +110,7 @@
<!-- Flat list for other sort modes -->
<div v-else class="space-y-2">
<StationCard
v-for="station in filteredStations"
v-for="station in stations"
:key="station.station_id"
:avg-pence="avgPence"
:lowest-price="lowestPrice"
@@ -106,51 +122,38 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed } from 'vue'
import StationCard from './StationCard.vue'
const props = defineProps({
stations: { type: Array, required: true },
currentSort: { type: String, default: 'reliable' },
origin: { type: Object, default: null },
brands: { type: Array, default: () => [] },
brandFilter: { type: String, default: '' },
})
const emit = defineEmits(['sort'])
const brandFilter = ref('')
const emit = defineEmits(['sort', 'update:brandFilter'])
const sortOptions = [
{ label: 'Reliable', value: 'reliable' },
{ label: 'Price', value: 'price' },
{ label: 'Distance', value: 'distance' },
{ label: 'Updated', value: 'updated' },
{ label: 'Reliable', value: 'reliable', icon: 'lucide:shield-check' },
{ label: 'Price', value: 'price', icon: 'lucide:pound-sterling' },
{ label: 'Distance', value: 'distance', icon: 'lucide:map-pin' },
{ label: 'Updated', value: 'updated', icon: 'lucide:clock' },
]
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 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 (!reliable.value.length && !filteredStations.value.length) return null
const pool = reliable.value.length ? reliable.value : filteredStations.value
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))
})
const avgPence = computed(() => {
const prices = filteredStations.value.map(s => s.price_pence).filter(p => typeof p === 'number')
const prices = props.stations.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
})