refactor(hub): use CatalogPage component for split layout

app/pages/catalog/hubs/[id].vue

@@ -25,8 +25,15 @@
     </Section>
 
     <template v-else>
-      <!-- Header with product filter -->
-      <Section variant="plain" paddingY="md">
+      <CatalogPage
+        :items="sources"
+        :loading="isLoadingRoutes"
+        :with-map="true"
+        map-id="hub-sources-map"
+        point-color="#10b981"
+        v-model:selected-id="selectedSourceUuid"
+      >
+        <template #header>
           <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div>
               <Heading :level="1">{{ hub.name }}</Heading>
@@ -37,89 +44,56 @@
                 </span>
               </Text>
             </div>
+          </div>
+        </template>
+
+        <template #filters>
           <select
             v-model="selectedProductUuid"
-            class="select select-bordered w-full sm:w-64"
+            class="select select-bordered w-full"
           >
             <option value="">{{ t('catalogHub.sources.selectProduct') }}</option>
             <option v-for="product in products" :key="product.uuid" :value="product.uuid">
               {{ product.name }}
             </option>
           </select>
-        </div>
-      </Section>
+        </template>
 
-      <!-- Split: list + map -->
-      <Section variant="plain" paddingY="md">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <!-- Sources list -->
-          <div class="order-2 lg:order-1">
-            <!-- Loading routes -->
-            <div v-if="isLoadingRoutes" class="flex items-center justify-center h-64">
-              <Stack align="center" gap="2">
-                <Spinner />
-                <Text tone="muted" size="sm">{{ t('catalogHub.sources.loading') }}</Text>
-              </Stack>
-            </div>
-
-            <!-- No product selected -->
-            <div v-else-if="!selectedProductUuid" class="flex items-center justify-center h-64">
-              <Text tone="muted">{{ t('catalogHub.sources.selectProduct') }}</Text>
-            </div>
-
-            <!-- Sources list -->
-            <div v-else-if="sources.length > 0" class="space-y-3 max-h-[600px] overflow-y-auto pr-2">
-              <Card
-                v-for="source in sources"
-                :key="source.sourceUuid"
-                padding="sm"
-                interactive
-                class="cursor-pointer"
-                @click="selectSource(source)"
-                :class="{ 'ring-2 ring-primary': selectedSourceUuid === source.sourceUuid }"
-              >
+        <template #card="{ item }">
+          <Card padding="sm" interactive>
             <div class="flex items-center justify-between">
               <div>
-                    <Text weight="semibold">{{ source.sourceName }}</Text>
-                    <Text tone="muted" size="sm">
-                      {{ selectedProductName }}
-                    </Text>
+                <Text weight="semibold">{{ item.name }}</Text>
+                <Text tone="muted" size="sm">{{ selectedProductName }}</Text>
               </div>
               <div class="text-right">
                 <Text weight="semibold" class="text-primary">
-                      {{ formatDistance(source.distanceKm) }} км
+                  {{ formatDistance(item.distanceKm) }} км
                 </Text>
                 <Text tone="muted" size="sm">
-                      {{ formatDuration(source.routes?.[0]?.totalTimeSeconds) }}
+                  {{ formatDuration(item.durationSeconds) }}
                 </Text>
               </div>
             </div>
           </Card>
-            </div>
+        </template>
 
-            <!-- Empty state -->
-            <div v-else class="flex items-center justify-center h-64">
+        <template #empty>
           <Stack align="center" gap="2">
             <Icon name="lucide:package-x" size="32" class="text-base-content/40" />
-                <Text tone="muted">{{ t('catalogHub.sources.empty') }}</Text>
+            <Text tone="muted">
+              {{ selectedProductUuid ? t('catalogHub.sources.empty') : t('catalogHub.sources.selectProduct') }}
+            </Text>
           </Stack>
-            </div>
-          </div>
-
-          <!-- Map -->
-          <div class="order-1 lg:order-2">
-            <RequestRoutesMap :routes="allRoutes" :height="600" />
-          </div>
-        </div>
-      </Section>
+        </template>
+      </CatalogPage>
     </template>
   </Stack>
 </template>
 
 <script setup lang="ts">
-import { GetNodeConnectionsDocument } from '~/composables/graphql/public/geo-generated'
+import { GetNodeConnectionsDocument, FindProductRoutesDocument } from '~/composables/graphql/public/geo-generated'
 import { GetAvailableProductsDocument } from '~/composables/graphql/public/exchange-generated'
-import { FindProductRoutesDocument, type ProductRouteOptionType, type RoutePathType } from '~/composables/graphql/public/geo-generated'
 
 definePageMeta({
   layout: 'topnav'
@@ -135,8 +109,8 @@ const isLoadingRoutes = ref(false)
 const hub = ref<any>(null)
 const products = ref<Array<{ uuid: string; name: string }>>([])
 const selectedProductUuid = ref('')
-const sources = ref<ProductRouteOptionType[]>([])
-const selectedSourceUuid = ref<string | null>(null)
+const selectedSourceUuid = ref('')
+const rawSources = ref<any[]>([])
 
 const hubId = computed(() => route.params.id as string)
 
@@ -146,32 +120,27 @@ const selectedProductName = computed(() => {
   return product?.name || ''
 })
 
-// All routes for map (flatten sources -> routes)
-const allRoutes = computed(() => {
-  if (selectedSourceUuid.value) {
-    const source = sources.value.find(s => s.sourceUuid === selectedSourceUuid.value)
-    return (source?.routes || []).filter((r): r is RoutePathType => r !== null)
-  }
-  return sources.value.flatMap(s => (s.routes || []).filter((r): r is RoutePathType => r !== null))
+// Transform sources for CatalogPage (needs uuid, latitude, longitude, name)
+const sources = computed(() => {
+  return rawSources.value.map(source => ({
+    uuid: source.sourceUuid || '',
+    name: source.sourceName || '',
+    latitude: source.sourceLat,
+    longitude: source.sourceLon,
+    distanceKm: source.distanceKm,
+    durationSeconds: source.routes?.[0]?.totalTimeSeconds
+  }))
 })
 
-const selectSource = (source: ProductRouteOptionType) => {
-  if (selectedSourceUuid.value === source.sourceUuid) {
-    selectedSourceUuid.value = null
-  } else {
-    selectedSourceUuid.value = source.sourceUuid || null
-  }
-}
-
 // Load routes when product changes
 const loadRoutes = async () => {
   if (!selectedProductUuid.value || !hubId.value) {
-    sources.value = []
+    rawSources.value = []
     return
   }
 
   isLoadingRoutes.value = true
-  selectedSourceUuid.value = null
+  selectedSourceUuid.value = ''
 
   try {
     const data = await execute(
@@ -185,10 +154,10 @@ const loadRoutes = async () => {
       'public',
       'geo'
     )
-    sources.value = (data?.findProductRoutes || []).filter((s): s is ProductRouteOptionType => s !== null)
+    rawSources.value = (data?.findProductRoutes || []).filter(Boolean)
   } catch (error) {
     console.error('Error loading routes:', error)
-    sources.value = []
+    rawSources.value = []
   } finally {
     isLoadingRoutes.value = false
   }