From 3f92b3876d0dd7273bc54108eda824590dcbb226 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Feb 2026 16:37:02 +0700
Subject: [PATCH] Show pin on hover in lists

---
 app/components/catalog/InfoPanel.vue      | 8 ++++----
 app/components/catalog/SelectionPanel.vue | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/catalog/InfoPanel.vue b/app/components/catalog/InfoPanel.vue
index 386c1bc..871029a 100644
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -134,7 +134,7 @@
                 @select="onProductSelect(product)"
               />
               <button
-                class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+                class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
                 @click.stop="emit('pin', 'product', product)"
                 aria-label="Pin product"
                 title="Pin"
@@ -209,7 +209,7 @@
                 @select="onSupplierSelect(supplier)"
               />
               <button
-                class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+                class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
                 @click.stop="emit('pin', 'supplier', supplier)"
                 aria-label="Pin supplier"
                 title="Pin"
@@ -255,7 +255,7 @@
                     @select="onHubSelect(hub)"
                   />
                   <button
-                    class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+                    class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
                     @click.stop="emit('pin', 'hub', hub)"
                     aria-label="Pin hub"
                     title="Pin"
@@ -288,7 +288,7 @@
                     @select="onHubSelect(hub)"
                   />
                   <button
-                    class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+                    class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
                     @click.stop="emit('pin', 'hub', hub)"
                     aria-label="Pin hub"
                     title="Pin"
diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 651931d..1c8a0af 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -38,7 +38,7 @@
               @select="onSelect(item)"
             />
             <button
-              class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+              class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
               @click.stop="emit('pin', 'product', item)"
               aria-label="Pin product"
               title="Pin"
@@ -63,7 +63,7 @@
               @select="onSelect(item)"
             />
             <button
-              class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+              class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
               @click.stop="emit('pin', 'hub', item)"
               aria-label="Pin hub"
               title="Pin"
@@ -88,7 +88,7 @@
               @select="onSelect(item)"
             />
             <button
-              class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
+              class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full glass-bright border border-white/30 shadow-lg p-1.5 hover:scale-105"
               @click.stop="emit('pin', 'supplier', item)"
               aria-label="Pin supplier"
               title="Pin"