Improve nearest hubs layout and show distance

app/components/catalog/HubCard.vue

@@ -23,8 +23,8 @@
           <Text tone="muted" size="sm">
             {{ countryFlag }} {{ hub.country || t('catalogMap.labels.country_unknown') }}
           </Text>
-          <span v-if="hub.distance" class="badge badge-neutral badge-dash text-xs">
-            {{ hub.distance }}
+          <span v-if="distanceLabel" class="badge badge-neutral badge-dash text-xs">
+            {{ distanceLabel }}
           </span>
         </div>
         <!-- Transport icons bottom -->
@@ -48,6 +48,7 @@ interface Hub {
   country?: string | null
   countryCode?: string | null
   distance?: string
+  distanceKm?: number | null
   transportTypes?: (string | null)[] | null
 }
 
@@ -82,4 +83,9 @@ const countryFlag = computed(() => {
 })
 
 const hasTransport = (type: string) => props.hub.transportTypes?.some(t => t === type)
+const distanceLabel = computed(() => {
+  if (props.hub.distance) return props.hub.distance
+  if (props.hub.distanceKm != null) return `${Math.round(props.hub.distanceKm)} km`
+  return ''
+})
 </script>