From adf79db9e2593e791e31a69efa7916209cc55d7c Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 01:30:46 +0100
Subject: [PATCH] ux(tools): play icon on the Run button

Each tool row's Run button gains a small play-triangle SVG to the left
of the label, matching the iconography pattern the Services tab uses
for its Restart and Open buttons. Same green colour (currentColor), so
the icon inherits the success/destructive variants without extra CSS.

Button becomes a flex container with a 6px gap so icon + label stay
nicely centred regardless of label width.

Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/tools.css               | 6 ++++++
 .../libreportal/frontend/js/components/app/tools-manager.js | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/css/tools.css b/containers/libreportal/frontend/css/tools.css
index faa30f5..8b05c70 100644
--- a/containers/libreportal/frontend/css/tools.css
+++ b/containers/libreportal/frontend/css/tools.css
@@ -184,6 +184,10 @@
    but bigger and green. The delete button uses bootstrap red var(--status-danger);
    we use bootstrap green var(--status-success) for parity. */
 .tool-run-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   background: rgba(var(--status-success-rgb), 0.12);
   border: 1px solid rgba(var(--status-success-rgb), 0.3);
   color: var(--status-success);
@@ -196,6 +200,8 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
+.tool-run-btn-icon { flex-shrink: 0; }
+.tool-run-btn-label { display: inline-block; }
 
 .tool-run-btn:hover {
   background: rgba(var(--status-success-rgb), 0.22);
diff --git a/containers/libreportal/frontend/js/components/app/tools-manager.js b/containers/libreportal/frontend/js/components/app/tools-manager.js
index f0b9ef0..a38ceb8 100644
--- a/containers/libreportal/frontend/js/components/app/tools-manager.js
+++ b/containers/libreportal/frontend/js/components/app/tools-manager.js
@@ -377,7 +377,10 @@ class ToolsManager {
         </div>
         <div class="tool-action">
           <button class="${btnClass}" data-action="run" title="${escapeHtml(tool.label || tool.id)}">
-            Run
+            <svg class="tool-run-btn-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <polygon points="6,4 20,12 6,20"></polygon>
+            </svg>
+            <span class="tool-run-btn-label">Run</span>
           </button>
         </div>
       </div>`;