Group hubs by rail/sea in info panel

app/components/catalog/InfoPanel.vue

@@ -190,41 +190,46 @@
           <div v-if="!loadingHubs && relatedHubs.length === 0" class="text-white/50 text-sm py-2">
             {{ $t('catalog.info.noHubs') }}
           </div>
-          <div v-else-if="!loadingHubs" class="space-y-2">
+          <div v-else-if="!loadingHubs" class="space-y-4">
-            <div v-if="nearestRailHub || nearestSeaHub" class="grid grid-cols-2 gap-2">
+            <template v-if="railHubs.length">
-              <Card v-if="nearestRailHub" padding="small" class="border border-white/10 bg-white/5">
+              <Card padding="small" class="border border-white/10 bg-white/5">
-                <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
-                  <div class="flex items-center gap-2">
+                  <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
-                    <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+                    <Icon name="lucide:train-front" size="16" class="text-white/80" />
-                      <Icon name="lucide:train-front" size="16" class="text-white/80" />
-                    </div>
-                    <div class="text-sm text-white/80">Ближайший ЖД хаб</div>
                   </div>
-                  <div class="text-xs text-white/60">{{ formatDistance(nearestRailHub.distanceKm) }}</div>
+                  <div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
                 </div>
               </Card>
-              <Card v-if="nearestSeaHub" padding="small" class="border border-white/10 bg-white/5">
+              <div class="flex flex-col gap-2">
-                <div class="flex items-center justify-between">
+                <HubCard
-                  <div class="flex items-center gap-2">
+                  v-for="(hub, index) in railHubs"
-                    <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+                  :key="hub.uuid ?? index"
-                      <Icon name="lucide:ship" size="16" class="text-white/80" />
+                  :hub="hub"
-                    </div>
+                  selectable
-                    <div class="text-sm text-white/80">Ближайший морской хаб</div>
+                  @select="onHubSelect(hub)"
-                  </div>
+                />
-                  <div class="text-xs text-white/60">{{ formatDistance(nearestSeaHub.distanceKm) }}</div>
+              </div>
-                </div>
+            </template>
-              </Card>
-            </div>
 
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            <template v-if="seaHubs.length">
-              <HubCard
+              <Card padding="small" class="border border-white/10 bg-white/5">
-                v-for="(hub, index) in relatedHubs"
+                <div class="flex items-center gap-2">
-                :key="hub.uuid ?? index"
+                  <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
-                :hub="hub"
+                    <Icon name="lucide:ship" size="16" class="text-white/80" />
-                selectable
+                  </div>
-                @select="onHubSelect(hub)"
+                  <div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
-              />
+                </div>
-            </div>
+              </Card>
+              <div class="flex flex-col gap-2">
+                <HubCard
+                  v-for="(hub, index) in seaHubs"
+                  :key="hub.uuid ?? index"
+                  :hub="hub"
+                  selectable
+                  @select="onHubSelect(hub)"
+                />
+              </div>
+            </template>
           </div>
         </section>
 
@@ -338,18 +343,13 @@ const formatPrice = (price: number | string) => {
   return new Intl.NumberFormat('ru-RU').format(num)
 }
 
-const formatDistance = (km?: number | null) => {
+const railHubs = computed(() =>
-  if (!km && km !== 0) return ''
+  relatedHubs.value.filter(h => h.transportTypes?.includes('rail'))
-  return `${Math.round(km).toLocaleString('ru-RU')} км`
+)
-}
 
-const nearestRailHub = computed(() => {
+const seaHubs = computed(() =>
-  return relatedHubs.value.find(h => h.transportTypes?.includes('rail'))
+  relatedHubs.value.filter(h => h.transportTypes?.includes('sea'))
-})
+)
-
-const nearestSeaHub = computed(() => {
-  return relatedHubs.value.find(h => h.transportTypes?.includes('sea'))
-})
 
 // Mock KYC teaser data (will be replaced with real data later)
 const kycTeaser = computed(() => {

i18n/locales/en/catalog.json

@@ -72,7 +72,9 @@
       "active": "Active",
       "inactive": "Inactive",
       "sourcesCount": "Data Sources",
-      "viewFullKyc": "View full company profile"
+      "viewFullKyc": "View full company profile",
+      "railHubs": "Rail hubs",
+      "seaHubs": "Sea hubs"
     },
     "modes": {
       "explore": "Explore",

i18n/locales/ru/catalog.json

@@ -72,7 +72,9 @@
       "active": "Действующая",
       "inactive": "Недействующая",
       "sourcesCount": "Источников данных",
-      "viewFullKyc": "Подробнее о компании"
+      "viewFullKyc": "Подробнее о компании",
+      "railHubs": "ЖД хабы",
+      "seaHubs": "Морские хабы"
     },
     "modes": {
       "explore": "Исследовать",