From 1a575020e61c9d353ff51d01d32199d94c9884d3 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 30 Mar 2026 21:12:22 -0400
Subject: [PATCH] feat: improve action button visibility with explicit styling
 and icon rendering

- Add explicit border and background colors to action buttons for better visibility
- Ensure Lucide icons are properly rendered in action buttons with deferred safeCreateIcons call
- Adjust badge margin to prevent overlap with action buttons
- Add z-index to action buttons to ensure proper layering
---
 frontend/app.js    | 7 ++++++-
 frontend/style.css | 7 ++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index be80e54..98efbd7 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -4749,7 +4749,8 @@
     button.className = "tree-item-action-btn";
     button.setAttribute("aria-label", "Afficher le menu d’actions");
     button.setAttribute("title", "Actions");
-    button.appendChild(icon("ellipsis", 16));
+    const iconEl = icon("ellipsis", 16);
+    button.appendChild(iconEl);
     button.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -4757,6 +4758,10 @@
       ContextMenuManager.show(pos.x, pos.y, vault, path, type, isReadonly);
     });
     itemEl.appendChild(button);
+    // Ensure Lucide icons are rendered for the button
+    setTimeout(() => {
+      safeCreateIcons(button);
+    }, 0);
   }
 
   function attachTreeItemLongPress(itemEl, getMenuData) {
diff --git a/frontend/style.css b/frontend/style.css
index af962fe..1cc1f2c 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -838,7 +838,7 @@ select {
   color: var(--text-primary);
 }
 .tree-item > .badge-small {
-  margin-left: auto;
+  margin-left: 4px;
 }
 .tree-item.active {
   background: var(--bg-hover);
@@ -890,9 +890,9 @@ select {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: transparent;
+  background: var(--bg-secondary);
   color: var(--text-muted);
   cursor: pointer;
   opacity: 1;
@@ -903,6 +903,7 @@ select {
     background 140ms ease,
     border-color 140ms ease;
   flex-shrink: 0;
+  z-index: 1;
 }
 
 .tree-item-action-btn:hover,