From 350dc5623a457bc48574bd1952c6afabed1eea2c Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 23:40:31 +0100
Subject: [PATCH] ux(admin): add a leading icon to each Overview card action
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update/Verify (refresh, shield-check), Manage backups (archive), Manage SSH
(key), View system stats (activity). Icons inherit the button's text colour —
no per-button colour, so the footer stays calm; the icon plus the card's status
dot do the distinguishing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../js/components/admin/admin-overview.js     | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/containers/libreportal/frontend/js/components/admin/admin-overview.js b/containers/libreportal/frontend/js/components/admin/admin-overview.js
index f7e5592..7ceb40f 100644
--- a/containers/libreportal/frontend/js/components/admin/admin-overview.js
+++ b/containers/libreportal/frontend/js/components/admin/admin-overview.js
@@ -139,6 +139,20 @@ class AdminOverview {
         return `<div class="admin-card-line"><span>${this.escape(label)}</span><strong>${this.escape(value)}</strong></div>`;
     }
 
+    // Small inline icon for a card action button. Inherits the button's text
+    // colour (no per-button colour) — the icon + the card's status dot do the
+    // distinguishing, so the footer stays calm.
+    icon(name) {
+        const paths = {
+            update: '<path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/>',
+            verify: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/>',
+            backup: '<rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><line x1="10" y1="12" x2="14" y2="12"/>',
+            ssh: '<circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.6 12.4 20 3l1.5 1.5L20 6l1.5 1.5L19 10l-2-2"/>',
+            system: '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
+        };
+        return `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ''}</svg>`;
+    }
+
     render() {
         const root = this.root();
         if (!root) return;
@@ -157,8 +171,8 @@ class AdminOverview {
 
         // Update now takes priority when one's available; otherwise offer Verify now.
         const updActions = (updAvail && upd.can_update)
-            ? `<button type="button" class="backup-primary-btn" data-admin-update>Update now</button>`
-            : `<button type="button" class="backup-secondary-btn" data-admin-verify>Verify now</button>`;
+            ? `<button type="button" class="backup-primary-btn" data-admin-update>${this.icon('update')}Update now</button>`
+            : `<button type="button" class="backup-secondary-btn" data-admin-verify>${this.icon('verify')}Verify now</button>`;
 
         const updCard = this.card(
             'Updates',
@@ -180,7 +194,7 @@ class AdminOverview {
             this.line('Apps protected', `${protectedApps} / ${apps.length}`)
                 + this.line('Locations', String(locs.length))
                 + this.line('Stored', this.bytes(totalSize)),
-            `<button type="button" class="backup-secondary-btn" data-admin-go="backup">Manage backups →</button>`
+            `<button type="button" class="backup-secondary-btn" data-admin-go="backup">${this.icon('backup')}Manage backups →</button>`
         );
 
         // SSH & Security
@@ -195,7 +209,7 @@ class AdminOverview {
             this.line('Password login', pwOn ? 'On' : 'Key-only')
                 + this.line('Authorized keys', String(keyCount))
                 + this.line('Login user', s.user || '—'),
-            `<button type="button" class="backup-secondary-btn" data-admin-go="ssh">Manage SSH access →</button>`
+            `<button type="button" class="backup-secondary-btn" data-admin-go="ssh">${this.icon('ssh')}Manage SSH access →</button>`
         );
 
         // System health
@@ -212,7 +226,7 @@ class AdminOverview {
                     ? `${this.gb(mem.used)} / ${this.gb(mem.total)} (${Math.round(mem.percent) || 0}%)`
                     : (mem.text || '—'))
                 + this.line('Uptime', this.shortUptime(info.uptime)),
-            `<button type="button" class="backup-secondary-btn" data-admin-go="system">View system stats →</button>`
+            `<button type="button" class="backup-secondary-btn" data-admin-go="system">${this.icon('system')}View system stats →</button>`
         );
 
         root.innerHTML = `