Improve selection panel and hub card compass

app/components/catalog/HubCard.vue

@@ -16,16 +16,29 @@
       ]"
     >
       <div class="flex flex-col gap-1">
-        <!-- Title -->
+        <!-- Title + distance/compass -->
-        <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
+        <div class="flex items-start justify-between gap-2">
-        <!-- Country left, distance right -->
+          <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
+          <div class="flex items-center gap-2 text-xs text-white/70 whitespace-nowrap">
+            <Text v-if="distanceLabel" size="xs" class="text-white/70">{{ distanceLabel }}</Text>
+            <div v-if="bearing !== null" class="flex items-center gap-1">
+              <div class="w-6 h-6 rounded-full border border-white/20 bg-white/5 flex items-center justify-center">
+                <Icon
+                  name="lucide:arrow-up"
+                  size="12"
+                  class="text-white/80"
+                  :style="{ transform: `rotate(${bearing}deg)` }"
+                />
+              </div>
+              <Text size="xs" class="text-white/60">{{ Math.round(bearing) }}°</Text>
+            </div>
+          </div>
+        </div>
+        <!-- Country -->
         <div class="flex items-center justify-between">
           <Text tone="muted" size="sm">
             {{ countryFlag }} {{ hub.country || t('catalogMap.labels.country_unknown') }}
           </Text>
-          <span v-if="distanceLabel" class="badge badge-neutral badge-dash text-xs">
-            {{ distanceLabel }}
-          </span>
         </div>
         <!-- Transport icons bottom -->
         <div v-if="hub.transportTypes?.length" class="flex items-center gap-1 pt-1">
@@ -47,6 +60,8 @@ interface Hub {
   name?: string | null
   country?: string | null
   countryCode?: string | null
+  latitude?: number | null
+  longitude?: number | null
   distance?: string
   distanceKm?: number | null
   transportTypes?: (string | null)[] | null
@@ -54,6 +69,7 @@ interface Hub {
 
 const props = defineProps<{
   hub: Hub
+  origin?: { latitude: number; longitude: number } | null
   selectable?: boolean
   isSelected?: boolean
   linkTo?: string
@@ -88,4 +104,27 @@ const distanceLabel = computed(() => {
   if (props.hub.distanceKm != null) return `${Math.round(props.hub.distanceKm)} km`
   return ''
 })
+
+const toRadians = (deg: number) => (deg * Math.PI) / 180
+const toDegrees = (rad: number) => (rad * 180) / Math.PI
+
+const bearing = computed(() => {
+  const origin = props.origin
+  const lat2 = props.hub.latitude
+  const lon2 = props.hub.longitude
+  if (!origin || lat2 == null || lon2 == null) return null
+  const lat1 = origin.latitude
+  const lon1 = origin.longitude
+  if (lat1 == null || lon1 == null) return null
+
+  const φ1 = toRadians(lat1)
+  const φ2 = toRadians(lat2)
+  const Δλ = toRadians(lon2 - lon1)
+
+  const y = Math.sin(Δλ) * Math.cos(φ2)
+  const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ)
+  const θ = Math.atan2(y, x)
+  const deg = (toDegrees(θ) + 360) % 360
+  return deg
+})
 </script>

app/components/catalog/InfoPanel.vue

@@ -206,6 +206,7 @@
                   v-for="(hub, index) in railHubs"
                   :key="hub.uuid ?? index"
                   :hub="hub"
+                  :origin="originCoords"
                   selectable
                   @select="onHubSelect(hub)"
                 />
@@ -226,6 +227,7 @@
                   v-for="(hub, index) in seaHubs"
                   :key="hub.uuid ?? index"
                   :hub="hub"
+                  :origin="originCoords"
                   selectable
                   @select="onHubSelect(hub)"
                 />
@@ -306,6 +308,13 @@ const entityLocation = computed(() => {
   return parts.length > 0 ? parts.join(', ') : null
 })
 
+const originCoords = computed(() => {
+  const lat = props.entity?.locationLatitude ?? props.entity?.latitude
+  const lon = props.entity?.locationLongitude ?? props.entity?.longitude
+  if (lat == null || lon == null) return null
+  return { latitude: Number(lat), longitude: Number(lon) }
+})
+
 // Products section title based on entity type
 const productsSectionTitle = computed(() => {
   return props.entityType === 'hub'

app/components/catalog/SelectionPanel.vue

@@ -8,12 +8,21 @@
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
-      <input
+      <div
-        v-model="searchQuery"
+        v-if="pinnedItems.length"
-        type="text"
+        class="input input-sm w-full bg-white/10 border-white/20 text-white/80 flex flex-wrap items-center gap-1 py-1"
-        :placeholder="searchPlaceholder"
+      >
-        class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
+        <span
-      />
+          v-for="item in pinnedItems"
+          :key="item.uuid"
+          class="badge badge-neutral badge-sm flex items-center gap-1"
+        >
+          {{ item.name }}
+          <button class="text-white/70 hover:text-white" @click.stop="togglePin(item)">
+            <Icon name="lucide:x" size="12" />
+          </button>
+        </span>
+      </div>
     </div>
 
     <!-- Content (scrollable) -->
@@ -22,7 +31,7 @@
         <span class="loading loading-spinner loading-md text-white" />
       </div>
 
-      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-white/60">
+      <div v-else-if="displayItems.length === 0" class="text-center py-8 text-white/60">
         <Icon name="lucide:search-x" size="32" class="mb-2" />
         <p>{{ $t('catalog.empty.noResults') }}</p>
       </div>
@@ -31,11 +40,19 @@
         <!-- Products -->
         <template v-if="selectMode === 'product'">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayItems"
             :key="item.uuid ?? index"
+            class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
             @mouseleave="emit('hover', null)"
           >
+            <button
+              v-if="item.uuid"
+              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
+              @click.stop="togglePin(item)"
+            >
+              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+            </button>
             <ProductCard
               :product="item"
               selectable
@@ -48,11 +65,19 @@
         <!-- Hubs -->
         <template v-else-if="selectMode === 'hub'">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayItems"
             :key="item.uuid ?? index"
+            class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
             @mouseleave="emit('hover', null)"
           >
+            <button
+              v-if="item.uuid"
+              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
+              @click.stop="togglePin(item)"
+            >
+              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+            </button>
             <HubCard
               :hub="item"
               selectable
@@ -64,11 +89,19 @@
         <!-- Suppliers -->
         <template v-else-if="selectMode === 'supplier'">
           <div
-            v-for="(item, index) in filteredItems"
+            v-for="(item, index) in displayItems"
             :key="item.uuid ?? index"
+            class="relative group"
             @mouseenter="emit('hover', item.uuid ?? null)"
             @mouseleave="emit('hover', null)"
           >
+            <button
+              v-if="item.uuid"
+              class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
+              @click.stop="togglePin(item)"
+            >
+              <Icon :name="isPinned(item.uuid) ? 'lucide:pin-off' : 'lucide:pin'" size="12" />
+            </button>
             <SupplierCard
               :supplier="item"
               selectable
@@ -79,7 +112,7 @@
 
         <!-- Infinite scroll sentinel -->
         <div
-          v-if="hasMore && !searchQuery"
+          v-if="hasMore"
           ref="loadMoreSentinel"
           class="flex items-center justify-center py-4"
         >
@@ -118,8 +151,8 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const searchQuery = ref('')
 const loadMoreSentinel = ref<HTMLElement | null>(null)
+const pinnedIds = ref<string[]>([])
 
 // Infinite scroll using IntersectionObserver
 let observer: IntersectionObserver | null = null
@@ -128,7 +161,7 @@ onMounted(() => {
   observer = new IntersectionObserver(
     (entries) => {
       const entry = entries[0]
-      if (entry?.isIntersecting && props.hasMore && !props.loadingMore && !searchQuery.value) {
+      if (entry?.isIntersecting && props.hasMore && !props.loadingMore) {
         emit('load-more')
       }
     },
@@ -158,15 +191,6 @@ const title = computed(() => {
   }
 })
 
-const searchPlaceholder = computed(() => {
-  switch (props.selectMode) {
-    case 'product': return t('catalog.search.searchProducts')
-    case 'hub': return t('catalog.search.searchHubs')
-    case 'supplier': return t('catalog.search.searchSuppliers')
-    default: return t('catalog.search.placeholder')
-  }
-})
-
 const items = computed(() => {
   switch (props.selectMode) {
     case 'product': return props.products || []
@@ -176,14 +200,27 @@ const items = computed(() => {
   }
 })
 
-const filteredItems = computed(() => {
+const isPinned = (uuid: string) => pinnedIds.value.includes(uuid)
-  if (!searchQuery.value.trim()) return items.value
 
-  const query = searchQuery.value.toLowerCase()
+const togglePin = (item: Item) => {
-  return items.value.filter(item =>
+  if (!item.uuid) return
-    item.name?.toLowerCase().includes(query) ||
+  if (isPinned(item.uuid)) {
-    item.country?.toLowerCase().includes(query)
+    pinnedIds.value = pinnedIds.value.filter(id => id !== item.uuid)
-  )
+  } else {
+    pinnedIds.value = [...pinnedIds.value, item.uuid]
+  }
+}
+
+const pinnedItems = computed(() =>
+  items.value.filter(item => item.uuid && isPinned(item.uuid))
+)
+
+const displayItems = computed(() => {
+  if (pinnedIds.value.length === 0) return items.value
+  const pinned = pinnedItems.value
+  const pinnedSet = new Set(pinned.map(p => p.uuid).filter(Boolean) as string[])
+  const rest = items.value.filter(item => !item.uuid || !pinnedSet.has(item.uuid))
+  return [...pinned, ...rest]
 })
 
 // Select item and emit

app/pages/catalog/index.vue

@@ -6,6 +6,7 @@
       :use-server-clustering="true"
       :use-typed-clusters="true"
       :cluster-node-type="clusterNodeType"
+      panel-width="w-[32rem]"
       map-id="unified-catalog-map"
       :point-color="mapPointColor"
       :items="currentSelectionItems"