From 276f9bf612512550200d7f3ad5fa9642575ce1b4 Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 18:46:34 +0100
Subject: [PATCH] feat: wire up homepage search with map and station list

---
 resources/js/views/Home.vue | 52 ++++++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index 85c1ea5..75d08b1 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -93,6 +93,33 @@
             </div>
         </section>
 
+        <!-- Search Results -->
+        <section v-if="searchAttempted" class="px-6 py-10 bg-zinc-100">
+            <div class="max-w-7xl mx-auto space-y-6">
+
+                <!-- Loading -->
+                <div v-if="loading" class="flex items-center justify-center py-16">
+                    <div class="flex items-center gap-3 text-zinc-500">
+                        <iconify-icon icon="lucide:loader-circle" class="animate-spin text-2xl text-accent"></iconify-icon>
+                        <span class="font-medium">Finding stations near you…</span>
+                    </div>
+                </div>
+
+                <!-- 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>
+                </div>
+
+                <!-- Results -->
+                <template v-else>
+                    <LeafletMap :stations="stations" :default-open="true" />
+                    <StationList :stations="stations" :current-sort="sort" @sort="onSort" />
+                </template>
+
+            </div>
+        </section>
+
         <!-- How It Works -->
         <section id="how-it-works" class="py-12 md:py-24 px-6 bg-zinc-50">
             <div class="max-w-7xl mx-auto">
@@ -376,14 +403,31 @@
 </template>
 
 <script setup>
-import { RouterLink, useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { RouterLink } from 'vue-router'
 import { useAuth } from '../composables/useAuth.js'
+import { useStations } from '../composables/useStations.js'
 import SearchBar from '../components/SearchBar.vue'
+import LeafletMap from '../components/LeafletMap.vue'
+import StationList from '../components/StationList.vue'
 
 const { isAuthenticated } = useAuth()
-const router = useRouter()
+const { stations, loading, error, search } = useStations()
 
-function onSearch(postcode) {
-    router.push({ path: '/dashboard', query: { postcode } })
+const sort = ref('price')
+const lastParams = ref(null)
+const searchAttempted = ref(false)
+
+async function onSearch(params) {
+    lastParams.value = params
+    searchAttempted.value = true
+    await search({ ...params, sort: sort.value })
+}
+
+async function onSort(newSort) {
+    sort.value = newSort
+    if (lastParams.value) {
+        await search({ ...lastParams.value, sort: newSort })
+    }
 }
 </script>