From 4699360147dad7378fb2f28b276ece892920580a Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Thu, 30 Jan 2025 15:45:04 -0700
Subject: [PATCH] Show bookmark buttons when item is focused (#2386)

---
 src/components/common/TreeExplorer.vue             | 1 +
 src/components/common/TreeExplorerTreeNode.vue     | 4 +++-
 src/components/sidebar/tabs/SidebarTabTemplate.vue | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 3023df29a..1db78e4a6 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -9,6 +9,7 @@
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
       nodeContent: ({ context }) => ({
+        class: 'group/tree-node',
         onClick: (e: MouseEvent) =>
           onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
         onContextmenu: (e: MouseEvent) =>
diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index f77374211..e9aab7df5 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -27,7 +27,9 @@
         class="leaf-count-badge"
       />
     </div>
-    <div class="node-actions">
+    <div
+      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+    >
       <slot name="actions" :node="props.node"></slot>
     </div>
   </div>
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 4f0dae2af..fc829bec5 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="comfy-vue-side-bar-container flex flex-col h-full group"
+    class="comfy-vue-side-bar-container flex flex-col h-full group/sidebar-tab"
     :class="props.class"
   >
     <div class="comfy-vue-side-bar-header">
@@ -12,7 +12,7 @@
         </template>
         <template #end>
           <div
-            class="flex flex-row w-0 opacity-0 group-focus-within:w-auto group-focus-within:opacity-100 group-hover:w-auto group-hover:opacity-100 touch:w-auto touch:opacity-100 transition-all duration-200"
+            class="flex flex-row motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 touch:w-auto touch:opacity-100 transition-all duration-200"
           >
             <slot name="tool-buttons"></slot>
           </div>