Fix: offers map coords, map position, orders filter, select-location layout

app/pages/select-location/index.vue

@@ -1,86 +1,78 @@
 <template>
-  <div class="container mx-auto px-4 py-8">
-    <PageHeader :title="t('common.selectLocation')">
-      <template #actions>
-        <button class="btn btn-ghost" @click="router.back()">
-          <Icon name="lucide:x" size="20" />
-        </button>
-      </template>
-    </PageHeader>
-
-    <Stack gap="8" class="mt-6">
-      <!-- My addresses -->
-      <Stack v-if="isAuthenticated && teamAddresses?.length" gap="4">
-        <Heading :level="3">{{ t('profileAddresses.header.title') }}</Heading>
-        <Grid :cols="1" :md="2" :gap="4">
-          <Card
-            v-for="addr in teamAddresses"
-            :key="addr.uuid"
-            padding="small"
-            interactive
-            :class="{ 'ring-2 ring-primary': isSelected('address', addr.uuid) }"
-            @click="selectAddress(addr)"
-          >
-            <Stack gap="2">
-              <Stack direction="row" align="center" gap="2">
-                <Icon name="lucide:map-pin" size="18" class="text-primary" />
-                <Text size="base" weight="semibold">{{ addr.name }}</Text>
-                <Pill v-if="addr.isDefault" variant="outline" size="sm">Default</Pill>
-              </Stack>
-              <Text tone="muted" size="sm">{{ addr.address }}</Text>
-            </Stack>
-          </Card>
-        </Grid>
-      </Stack>
-
-      <!-- Hubs -->
+  <CatalogPage
+    :items="itemsWithCoords"
+    :loading="isLoading"
+    map-id="select-location-map"
+    point-color="#10b981"
+    :selected-id="selectedHubId"
+    v-model:hovered-id="hoveredHubId"
+    @select="selectHub"
+  >
+    <template #header>
       <Stack gap="4">
-        <Heading :level="3">{{ t('catalogMap.hubsTab') }}</Heading>
-
-        <NuxtLink :to="localePath('/select-location/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="select-location-map"
-              :locations="itemsWithCoords"
-              :height="192"
-            />
-          </ClientOnly>
-        </NuxtLink>
-
-        <CatalogFilters :filters="filters" v-model="selectedFilter" />
-
-        <div v-if="isLoading" class="flex items-center justify-center p-8">
-          <span class="loading loading-spinner loading-lg" />
+        <!-- Back button -->
+        <div class="flex justify-between items-center">
+          <Heading :level="2">{{ t('common.selectLocation') }}</Heading>
+          <button class="btn btn-ghost btn-sm" @click="router.back()">
+            <Icon name="lucide:x" size="20" />
+          </button>
         </div>
 
-        <EmptyState
-          v-else-if="!items?.length"
-          :title="t('catalogMap.noHubs')"
-        />
+        <!-- My addresses section -->
+        <Stack v-if="isAuthenticated && teamAddresses?.length" gap="3">
+          <Text weight="semibold">{{ t('profileAddresses.header.title') }}</Text>
+          <Stack gap="2">
+            <Card
+              v-for="addr in teamAddresses"
+              :key="addr.uuid"
+              padding="sm"
+              interactive
+              :class="{ 'ring-2 ring-primary': isSelected('address', addr.uuid) }"
+              @click="selectAddress(addr)"
+            >
+              <Stack gap="1">
+                <Stack direction="row" align="center" gap="2">
+                  <Icon name="lucide:map-pin" size="16" class="text-primary" />
+                  <Text size="sm" weight="semibold">{{ addr.name }}</Text>
+                  <Pill v-if="addr.isDefault" variant="outline" size="sm">Default</Pill>
+                </Stack>
+                <Text tone="muted" size="xs">{{ addr.address }}</Text>
+              </Stack>
+            </Card>
+          </Stack>
+        </Stack>
 
-        <template v-else>
-          <Grid :cols="1" :md="2" :gap="4">
-            <HubCard
-              v-for="hub in items"
-              :key="hub.uuid"
-              :hub="hub"
-              selectable
-              :is-selected="isSelected('hub', hub.uuid)"
-              @select="selectHub(hub)"
-            />
-          </Grid>
-
-          <PaginationLoadMore
-            :shown="items.length"
-            :total="total"
-            :can-load-more="canLoadMore"
-            :loading="isLoadingMore"
-            @load-more="loadMore"
-          />
-        </template>
+        <!-- Hubs section header -->
+        <Text weight="semibold">{{ t('catalogMap.hubsTab') }}</Text>
       </Stack>
-    </Stack>
-  </div>
+    </template>
+
+    <template #filters>
+      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
+    </template>
+
+    <template #card="{ item }">
+      <HubCard
+        :hub="item"
+        selectable
+        :is-selected="isSelected('hub', item.uuid)"
+      />
+    </template>
+
+    <template #pagination>
+      <PaginationLoadMore
+        :shown="items.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+      />
+    </template>
+
+    <template #empty>
+      <EmptyState :title="t('catalogMap.noHubs')" />
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -113,6 +105,10 @@ const {
   init
 } = useCatalogHubs()
 
+// Selected/hovered hub for map
+const selectedHubId = ref<string>()
+const hoveredHubId = ref<string>()
+
 await init()
 
 // Load team addresses
@@ -151,7 +147,7 @@ const goToRequestIfReady = () => {
 }
 
 const selectHub = async (hub: any) => {
-  console.log('[selectHub] called', { hub, isSearchMode: isSearchMode.value })
+  selectedHubId.value = hub.uuid
 
   if (isSearchMode.value) {
     searchStore.setLocation(hub.name)
@@ -162,13 +158,9 @@ const selectHub = async (hub: any) => {
   }
 
   try {
-    console.log('[selectHub] calling locationStore.select')
     const success = await locationStore.select('hub', hub.uuid, hub.name, hub.latitude, hub.longitude)
-    console.log('[selectHub] result:', success)
     if (success) {
       router.back()
-    } else {
-      console.error('[selectHub] Selection failed - success=false')
     }
   } catch (e) {
     console.error('[selectHub] Error:', e)
@@ -176,8 +168,6 @@ const selectHub = async (hub: any) => {
 }
 
 const selectAddress = async (addr: any) => {
-  console.log('[selectAddress] called', { addr, isSearchMode: isSearchMode.value })
-
   if (isSearchMode.value) {
     searchStore.setLocation(addr.address || addr.name)
     searchStore.setLocationUuid(addr.uuid)
@@ -187,13 +177,9 @@ const selectAddress = async (addr: any) => {
   }
 
   try {
-    console.log('[selectAddress] calling locationStore.select')
     const success = await locationStore.select('address', addr.uuid, addr.name, addr.latitude, addr.longitude)
-    console.log('[selectAddress] result:', success)
     if (success) {
       router.back()
-    } else {
-      console.error('[selectAddress] Selection failed - success=false')
     }
   } catch (e) {
     console.error('[selectAddress] Error:', e)