From 66f5cb4af4b6fbe0be46d5bae70d55d990ef4a1c Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 23:16:21 +0100
Subject: [PATCH] ux(system): link the Disk metric page to the storage
 breakdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a "View storage breakdown →" button on the Disk metric page (disk
only) that opens /admin/config/system/storage — keeps the trend page and
the breakdown page focused but a click apart, instead of merging them.

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

diff --git a/containers/libreportal/frontend/js/components/admin/system-metric-page.js b/containers/libreportal/frontend/js/components/admin/system-metric-page.js
index 2b60037..2481678 100644
--- a/containers/libreportal/frontend/js/components/admin/system-metric-page.js
+++ b/containers/libreportal/frontend/js/components/admin/system-metric-page.js
@@ -112,6 +112,11 @@ class SystemMetricPage {
         const back = e.target.closest('[data-back]');
         if (back && window.navigateToRoute) {
             window.navigateToRoute('/admin/config/system');
+            return;
+        }
+        const go = e.target.closest('[data-go-storage]');
+        if (go && window.navigateToRoute) {
+            window.navigateToRoute('/admin/config/system/storage');
         }
     }
 
@@ -170,6 +175,7 @@ class SystemMetricPage {
                         <p class="sys-metric-sub">${fmt.escape(this._subline())}</p>
                     </div>
                     <div class="sys-metric-actions">
+                        ${this.metricKey === 'disk' ? `<button type="button" class="sys-storage-more" data-go-storage>View storage breakdown →</button>` : ''}
                         <div class="sys-detail-range" role="tablist" aria-label="Time range">
                             ${[[60,'1h'],[360,'6h'],[1440,'24h'],[10080,'7d']]
                                 .map(([m,l]) => `<button type="button" role="tab" class="sys-detail-range-btn ${this.rangeMin===m?'active':''}" data-rng="${m}">${l}</button>`).join('')}