From de0025d1a709c8b3f661892ed6f1183724e9e24d Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Fri, 3 Jul 2026 19:44:40 +0100
Subject: [PATCH] feat(webui/system): app icons in Per-app usage rows

Prepend a boxed app icon (tasks-notification style) to each row of the
System page's Per-app usage table. Multi-instance slugs (<type>_<id>)
resolve to the base type's icon; missing icons fall back to default.svg.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../frontend/components/admin/core/css/admin.css    | 13 +++++++++++++
 .../components/admin/system/js/system-page.js       |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/components/admin/core/css/admin.css b/containers/libreportal/frontend/components/admin/core/css/admin.css
index b34e56c..5a4bd7f 100644
--- a/containers/libreportal/frontend/components/admin/core/css/admin.css
+++ b/containers/libreportal/frontend/components/admin/core/css/admin.css
@@ -462,6 +462,19 @@ table.sys-apps td {
 table.sys-apps tr:last-child td { border-bottom: none; }
 table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); }
 .sys-app-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
+/* Boxed app icon, mirroring the tasks-notification app icon at row scale. */
+.sys-app-icon {
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    background: rgba(var(--text-rgb), 0.10);
+    border: 1px solid rgba(var(--text-rgb), 0.18);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.sys-app-icon img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
 .sys-app-sub { font-size: 0.72rem; font-weight: 500; color: rgba(var(--text-rgb), 0.45); }
 .sys-cell-val { font-size: 0.78rem; color: rgba(var(--text-rgb), 0.65); margin-left: 2px; }
 .sys-net-cell { font-size: 0.78rem; color: rgba(var(--text-rgb), 0.7); white-space: nowrap; }
diff --git a/containers/libreportal/frontend/components/admin/system/js/system-page.js b/containers/libreportal/frontend/components/admin/system/js/system-page.js
index bcd7dfe..cf51df1 100644
--- a/containers/libreportal/frontend/components/admin/system/js/system-page.js
+++ b/containers/libreportal/frontend/components/admin/system/js/system-page.js
@@ -302,8 +302,10 @@ class SystemPage {
         const appsBody = apps.length ? apps.map(a => {
             const spark = (appsHist[a.app] || []).map(p => Number(p.cpu) || 0);
             const statusCls = a.status === 'running' ? 'ok' : 'none';
+            // Multi-instance slugs (<type>_<id>) share the base type's icon.
+            const iconSlug = String(a.app).replace(/_\d+$/, '');
             return `<tr class="sys-app-row" data-sys-app="${this.escape(a.app)}" tabindex="0" role="button" aria-label="Open ${this.escape(a.app)} details">
-                <td class="sys-app-name"><span class="admin-status-dot ${statusCls}"></span>${this.escape(a.app)}
+                <td class="sys-app-name"><span class="sys-app-icon"><img src="/core/icons/apps/${encodeURIComponent(iconSlug)}.svg" alt="" onerror="this.onerror=null; this.src='/core/icons/apps/default.svg'"></span><span class="admin-status-dot ${statusCls}"></span>${this.escape(a.app)}
                     <span class="sys-app-sub">${a.running}/${a.containers} up</span></td>
                 <td>${C.bar(a.cpu_percent)}<span class="sys-cell-val">${(a.cpu_percent || 0).toFixed(1)}%</span></td>
                 <td>${C.bar(a.mem_percent)}<span class="sys-cell-val">${this.bytes(a.mem_bytes)}</span></td>