ux(admin): rename Overview → Dashboard + add header icons

Renames the Admin landing to "Dashboard" in both the page title and the sidebar
label, and adds a leading header icon (the grid icon, matching the Backup
dashboard) via the shared .page-header-icon-slot. System gets a cpu icon in its
header too. The slot styles come from the globally-loaded backup.css, so no new
CSS is needed.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-29 00:20:09 +01:00
parent 00736b57a7
commit 33a749c8d1
3 changed files with 4 additions and 2 deletions

View File

@ -233,9 +233,10 @@ class AdminOverview {
root.innerHTML = `
<div class="admin-page">
<div class="page-header config-page-header">
<div class="page-header-icon-slot"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg></div>
<div class="page-header-title">
<div class="admin-breadcrumb">Admin</div>
<h1>Overview</h1>
<h1>Dashboard</h1>
<p>System health and admin status at a glance. Manage anything from the cards below.</p>
</div>
</div>

View File

@ -324,6 +324,7 @@ class AdminSystem {
root.innerHTML = `
<div class="admin-page sys-page">
<div class="page-header config-page-header">
<div class="page-header-icon-slot"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg></div>
<div class="page-header-title">
<div class="admin-breadcrumb">Admin</div>
<h1>System</h1>

View File

@ -24,7 +24,7 @@ class ConfigSidebar {
const overviewItem = document.createElement('div');
overviewItem.className = 'category';
overviewItem.setAttribute('data-category', 'overview');
overviewItem.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:8px;vertical-align:middle"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg> Overview';
overviewItem.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:8px;vertical-align:middle"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg> Dashboard';
overviewItem.addEventListener('click', function () {
window.history.pushState({}, '', window.adminPath('overview'));
document.querySelectorAll('.category').forEach(function (item) { item.classList.remove('active'); });