From 5fe9f9dc6d960cbecffdeb435f05c726026820ca Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 18:48:25 +0100
Subject: [PATCH] fix: empty results state and validation error display on
 homepage

---
 resources/js/views/Home.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index 75d08b1..c5df9a9 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -108,13 +108,19 @@
                 <!-- Error -->
                 <div v-else-if="error" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-status-bad">
                     <iconify-icon icon="lucide:circle-alert" style="font-size:1.25rem"></iconify-icon>
-                    <span class="font-medium">{{ error.general?.[0] ?? 'Unable to load stations. Please try again.' }}</span>
+                    <span class="font-medium">{{ Object.values(error).flat()[0] ?? 'Unable to load stations. Please try again.' }}</span>
                 </div>
 
                 <!-- Results -->
                 <template v-else>
-                    <LeafletMap :stations="stations" :default-open="true" />
-                    <StationList :stations="stations" :current-sort="sort" @sort="onSort" />
+                    <div v-if="!stations.length" class="flex items-center gap-3 p-4 bg-white border border-zinc-300 rounded-xl text-zinc-500">
+                        <iconify-icon icon="lucide:map-pin-off" style="font-size:1.25rem"></iconify-icon>
+                        <span class="font-medium">No stations found near you. Try a different postcode or increase the radius.</span>
+                    </div>
+                    <template v-else>
+                        <LeafletMap :stations="stations" :default-open="true" />
+                        <StationList :stations="stations" :current-sort="sort" @sort="onSort" />
+                    </template>
                 </template>
 
             </div>