From b971391fd7a8c1bde732b833937a53cf1a1be746 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 16:52:48 +0700
Subject: [PATCH] Add hover pin to info panel cards

---
 app/components/catalog/InfoPanel.vue | 91 +++++++++++++++++++++-------
 app/pages/catalog/index.vue          |  1 +
 2 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/app/components/catalog/InfoPanel.vue b/app/components/catalog/InfoPanel.vue
index bd17d96..bf69bad 100644
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -111,14 +111,25 @@
             {{ $t('catalog.empty.noProducts') }}
           </div>
           <div v-else-if="!loadingProducts" class="flex flex-col gap-2">
-            <ProductCard
+            <div
               v-for="(product, index) in relatedProducts"
               :key="product.uuid ?? index"
-              :product="product"
-              compact
-              selectable
-              @select="onProductSelect(product)"
-            />
+              class="relative group"
+            >
+              <button
+                v-if="product.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="emit('pin', 'product', product)"
+              >
+                <Icon name="lucide:pin" size="12" />
+              </button>
+              <ProductCard
+                :product="product"
+                compact
+                selectable
+                @select="onProductSelect(product)"
+              />
+            </div>
           </div>
         </section>
 
@@ -169,13 +180,24 @@
             {{ $t('catalog.info.noSuppliers') }}
           </div>
           <div v-else-if="!loadingSuppliers" class="flex flex-col gap-2">
-            <SupplierCard
+            <div
               v-for="(supplier, index) in relatedSuppliers"
               :key="supplier.uuid ?? index"
-              :supplier="supplier"
-              selectable
-              @select="onSupplierSelect(supplier)"
-            />
+              class="relative group"
+            >
+              <button
+                v-if="supplier.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="emit('pin', 'supplier', supplier)"
+              >
+                <Icon name="lucide:pin" size="12" />
+              </button>
+              <SupplierCard
+                :supplier="supplier"
+                selectable
+                @select="onSupplierSelect(supplier)"
+              />
+            </div>
           </div>
         </section>
 
@@ -202,14 +224,25 @@
                     <div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
                   </div>
                 </Card>
-                <HubCard
+                <div
                   v-for="(hub, index) in railHubs"
                   :key="hub.uuid ?? index"
-                  :hub="hub"
-                  :origin="originCoords"
-                  selectable
-                  @select="onHubSelect(hub)"
-                />
+                  class="relative group"
+                >
+                  <button
+                    v-if="hub.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="emit('pin', 'hub', hub)"
+                  >
+                    <Icon name="lucide:pin" size="12" />
+                  </button>
+                  <HubCard
+                    :hub="hub"
+                    :origin="originCoords"
+                    selectable
+                    @select="onHubSelect(hub)"
+                  />
+                </div>
               </div>
             </template>
 
@@ -223,14 +256,25 @@
                     <div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
                   </div>
                 </Card>
-                <HubCard
+                <div
                   v-for="(hub, index) in seaHubs"
                   :key="hub.uuid ?? index"
-                  :hub="hub"
-                  :origin="originCoords"
-                  selectable
-                  @select="onHubSelect(hub)"
-                />
+                  class="relative group"
+                >
+                  <button
+                    v-if="hub.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="emit('pin', 'hub', hub)"
+                  >
+                    <Icon name="lucide:pin" size="12" />
+                  </button>
+                  <HubCard
+                    :hub="hub"
+                    :origin="originCoords"
+                    selectable
+                    @select="onHubSelect(hub)"
+                  />
+                </div>
               </div>
             </template>
           </div>
@@ -277,6 +321,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'close': []
   'add-to-filter': []
+  'pin': [type: 'product' | 'supplier' | 'hub', item: { uuid?: string | null; name?: string | null }]
   'open-info': [type: InfoEntityType, uuid: string]
   'select-product': [uuid: string | null]
   'select-offer': [offer: { uuid: string; productUuid?: string | null }]
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 96cc903..5ab9d40 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -56,6 +56,7 @@
           :loading-offers="isLoadingOffers"
           @close="onInfoClose"
           @add-to-filter="onInfoAddToFilter"
+          @pin="onPinItem"
           @open-info="onInfoOpenRelated"
           @select-product="onInfoSelectProduct"
           @select-offer="onSelectOffer"