From 3e18a85572e82b4ef551ba4324e275d456710ac1 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 23:28:37 +0100
Subject: [PATCH] ux(system): match the System-page storage links to the pill
 CTA

The "View/Open storage breakdown" links in the System storage summary were
plain text links; restyle them as the same accent pill CTA (icon + label)
used on the Disk metric page.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../frontend/js/components/admin/admin-system.js       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/containers/libreportal/frontend/js/components/admin/admin-system.js b/containers/libreportal/frontend/js/components/admin/admin-system.js
index 1b055c2..f9280fb 100644
--- a/containers/libreportal/frontend/js/components/admin/admin-system.js
+++ b/containers/libreportal/frontend/js/components/admin/admin-system.js
@@ -352,7 +352,10 @@ class AdminSystem {
             return head + `
                 <div class="sys-storage-summary sys-storage-summary-empty">
                     <span>${msg}</span>
-                    <button type="button" class="sys-storage-more" data-sys-storage>Open storage breakdown →</button>
+                    <button type="button" class="sys-storage-cta" data-sys-storage title="Open the full storage breakdown">
+                        <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"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
+                        Open storage breakdown
+                    </button>
                 </div>`;
         }
         const C = window.LPCharts;
@@ -381,7 +384,10 @@ class AdminSystem {
                     <div class="sys-storage-srows">${rows}</div>
                     <div class="sys-storage-summary-foot">
                         <span class="sys-storage-recl-pill">${this.bytes(recl)} reclaimable${reclPct ? ` · ${reclPct}% of total` : ''}</span>
-                        <button type="button" class="sys-storage-more" data-sys-storage>View storage breakdown →</button>
+                        <button type="button" class="sys-storage-cta" data-sys-storage title="Open the full storage breakdown">
+                            <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"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
+                            View storage breakdown
+                        </button>
                     </div>
                 </div>
             </div>`;