Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge claude/1

Browse Source
This commit is contained in:
librelad 2026-05-30 07:34:32 +01:00
commit 2b3a3429d7
3 changed files with 115 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
containers/libreportal/frontend/components/updater/updater-content.html
View File

@ -1,49 +1,73 @@
<!-- App Updater page shell. Panels are filled by features/updater/updater-page.js.
Page identity hue: --page-updater (teal), set on the root below. -->
<div id="updater-page" class="updater-page admin-page" style="--page: var(--page-updater); --page-rgb: var(--page-updater-rgb);">
<div class="updater-layout">
<aside class="sidebar updater-sidebar">
<div class="sidebar-heading">App Updater</div>
<button class="category active" data-updater-tab="overview">
<span class="cat-ico">▦</span> Overview
</button>
<button class="category" data-updater-tab="updates">
<span class="cat-ico">⬆</span> Updates
</button>
<button class="category" data-updater-tab="security">
<span class="cat-ico">🛡</span> Security
</button>
<button class="category" data-updater-tab="recovery">
<span class="cat-ico">⟲</span> Recovery
</button>
<button class="category" data-updater-tab="history">
<span class="cat-ico">🗒</span> History
</button>
</aside>
<!-- App Updater page — layout mirrors the Backup page (shared .sidebar/.category
+ .page-header + .config-section card with a padded .updater-page-body).
Panels are filled by components/updater/updater-page.js. Page identity hue
(--page-updater, teal) is set on #updater-page. -->
<div class="container updater-layout">
<div class="mobile-overlay" id="mobile-overlay"></div>
<section class="updater-content">
<header class="updater-header">
<div class="updater-header-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 2v6h-6"></path>
<path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
<path d="M3 22v-6h6"></path>
<path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
</svg>
</div>
<div>
<h1 id="updater-section-title">Overview</h1>
<p id="updater-section-subtitle">Update health, security posture, and recovery readiness at a glance.</p>
</div>
</header>
<div class="updater-panels">
<div class="updater-tabpanel active" id="updater-panel-overview"></div>
<div class="updater-tabpanel" id="updater-panel-updates"></div>
<div class="updater-tabpanel" id="updater-panel-security"></div>
<div class="updater-tabpanel" id="updater-panel-recovery"></div>
<div class="updater-tabpanel" id="updater-panel-history"></div>
<div class="sidebar" id="sidebar">
<div class="sidebar-section" id="updater-sidebar-list">
<div class="category active" data-updater-tab="overview">
<svg class="category-icon" 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>
Overview
</div>
</section>
<div class="category" data-updater-tab="updates">
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3v12"></path><polyline points="7 8 12 3 17 8"></polyline><path d="M5 21h14"></path>
</svg>
Updates
</div>
<div class="category" data-updater-tab="security">
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
Security
</div>
<div class="category" data-updater-tab="recovery">
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
</svg>
Recovery
</div>
<div class="category" data-updater-tab="history">
<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15 14"></polyline>
</svg>
History
</div>
</div>
</div>
<div class="main">
<div class="updater-page" id="updater-page" style="--page: var(--page-updater); --page-rgb: var(--page-updater-rgb);">
<div class="config-section updater-page-section">
<div class="page-header" id="updater-page-header">
<div class="page-header-icon-slot" id="updater-page-header-icon"></div>
<div class="page-header-title">
<h1 id="updater-section-title">Overview</h1>
<p id="updater-section-subtitle">Update health, security posture, and recovery readiness at a glance.</p>
</div>
<div class="page-header-actions">
<button class="updater-btn" data-updater-action="check" title="Refresh versions &amp; vulnerabilities">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 4 23 10 17 10"></polyline>
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
</svg>
Check now
</button>
</div>
</div>
<div class="updater-page-body">
<section class="updater-tabpanel active" id="updater-panel-overview"></section>
<section class="updater-tabpanel" id="updater-panel-updates"></section>
<section class="updater-tabpanel" id="updater-panel-security"></section>
<section class="updater-tabpanel" id="updater-panel-recovery"></section>
<section class="updater-tabpanel" id="updater-panel-history"></section>
</div>
</div>
</div>
</div>
</div>

13
containers/libreportal/frontend/components/updater/updater-page.js
View File

@ -54,11 +54,13 @@ class UpdaterPage {
debounceMs: 800,
});
// Delegated click handling for the whole feature root.
const root = document.getElementById('updater-page');
// Delegated click handling on the whole layout (sidebar is a sibling of the
// page card, both inside .updater-layout). The element is replaced on
// navigation, so the listener is GC'd with it — no cross-page leak.
const root = document.querySelector('.updater-layout');
if (!root) return;
root.addEventListener('click', (e) => {
const tabBtn = e.target.closest('.updater-layout .sidebar .category[data-updater-tab]');
const tabBtn = e.target.closest('.sidebar .category[data-updater-tab]');
if (tabBtn) { this.switchTab(tabBtn.dataset.updaterTab); return; }
const action = e.target.closest('[data-updater-action]');
@ -210,6 +212,11 @@ class UpdaterPage {
const subEl = document.getElementById('updater-section-subtitle');
if (titleEl) titleEl.textContent = t[0];
if (subEl) subEl.textContent = t[1];
// Fill the shared page-header icon slot once (update-cycle glyph).
const iconEl = document.getElementById('updater-page-header-icon');
if (iconEl && !iconEl.firstChild) {
iconEl.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"></path><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M3 22v-6h6"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>';
}
}
render() {

89
containers/libreportal/frontend/components/updater/updater.css
View File

@ -1,58 +1,42 @@
/* App Updater feature styles. Self-contained (does not borrow other features'
classes); uses the shared palette tokens + the --page-updater identity hue
/* App Updater feature styles. Layout mirrors the Backup page: shared
.sidebar/.category + .page-header chrome, with an updater-owned .config-section
card + padded body. Content widgets (stat grid, rows, badges, CVEs) are
updater-specific. Uses the shared palette tokens + the --page-updater hue
set on #updater-page. Eager-linked from index.html. */
.updater-page { padding: 4px 2px 40px; }
/* ---- Layout (copied from .backup-* so the two pages match exactly) ---- */
.updater-layout {
display: grid;
grid-template-columns: 210px 1fr;
gap: 22px;
align-items: start;
}
/* Sidebar */
.updater-sidebar {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border-radius: 14px;
background: rgba(var(--text-rgb), 0.03);
border: 1px solid rgba(var(--text-rgb), 0.07);
min-height: calc(100vh - var(--topbar-height, 60px));
}
.updater-sidebar .sidebar-heading {
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
color: rgba(var(--text-rgb), 0.45);
padding: 6px 10px 8px;
.updater-layout .main {
flex: 1;
min-width: 0;
overflow-y: auto;
}
.updater-sidebar .category {
display: flex; align-items: center; gap: 9px;
width: 100%; text-align: left;
padding: 9px 11px; border: 0; border-radius: 9px;
background: transparent; color: rgba(var(--text-rgb), 0.7);
font-size: 0.86rem; font-weight: 500; cursor: pointer;
transition: background 0.15s, color 0.15s;
.updater-page {
color: var(--text-primary);
width: 100%;
padding-bottom: 48px;
}
.updater-sidebar .category .cat-ico { opacity: 0.8; font-size: 0.95em; width: 1.1em; text-align: center; }
.updater-sidebar .category:hover { background: rgba(var(--text-rgb), 0.05); color: rgba(var(--text-rgb), 0.95); }
.updater-sidebar .category.active {
background: rgba(var(--page-rgb, var(--accent-rgb)), 0.16);
/* One .config-section card holding the .page-header (flush, its border acts as
the divider) + the body, which carries the padding. */
.updater-page-section {
padding: 0;
overflow: hidden;
}
.updater-page-section > .page-header {
margin-bottom: 0;
}
.updater-page-body {
padding: 22px;
}
/* The page-header icon tints with the page hue. */
#updater-page .page-header-icon-slot {
color: rgb(var(--page-rgb, var(--accent-rgb)));
}
/* Header */
.updater-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.updater-header-icon {
display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
color: rgb(var(--page-rgb, var(--accent-rgb)));
background: rgba(var(--page-rgb, var(--accent-rgb)), 0.14);
border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.3);
}
.updater-header h1 { margin: 0; font-size: 1.5rem; }
.updater-header p { margin: 2px 0 0; color: rgba(var(--text-rgb), 0.55); font-size: 0.86rem; }
/* Stat grid (overview) */
/* ---- Overview stat cards ---- */
.updater-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.updater-stat {
position: relative; padding: 18px; border-radius: 14px;
@ -64,7 +48,7 @@
.updater-stat-sub { color: rgba(var(--text-rgb), 0.5); font-size: 0.78rem; margin-top: 2px; }
.updater-stat .updater-btn { margin-top: 12px; }
/* Lists / rows */
/* ---- Lists / rows ---- */
.updater-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.updater-list { display: flex; flex-direction: column; gap: 8px; }
.updater-row {
@ -77,7 +61,7 @@
.updater-row-ver { color: rgba(var(--text-rgb), 0.6); font-family: var(--font-mono); font-size: 0.8rem; }
.updater-arrow { color: rgb(var(--page-rgb, var(--accent-rgb))); }
/* Badges */
/* ---- Badges ---- */
.updater-badge {
display: inline-block; padding: 1px 8px; border-radius: 999px;
font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
@ -91,7 +75,7 @@
.sev-medium { background: rgba(234, 179, 8, 0.16); color: #fcd34d; }
.sev-low { background: rgba(var(--text-rgb), 0.1); color: rgba(var(--text-rgb), 0.6); }
/* CVE blocks */
/* ---- CVE blocks ---- */
.updater-cve-app { padding: 12px 15px; border-radius: 11px; background: rgba(var(--text-rgb), 0.035); border: 1px solid rgba(var(--text-rgb), 0.07); }
.updater-cve-app-name { font-weight: 600; margin-bottom: 8px; }
.updater-cve { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(var(--text-rgb), 0.06); font-size: 0.82rem; }
@ -104,8 +88,9 @@
.updater-cve-pkg { color: rgba(var(--text-rgb), 0.6); }
.updater-cve-fix { margin-left: auto; color: rgba(var(--page-verify-rgb), 0.9); font-size: 0.76rem; }
/* Buttons */
/* ---- Buttons ---- */
.updater-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
background: rgba(var(--text-rgb), 0.07); color: rgba(var(--text-rgb), 0.9);
border: 1px solid rgba(var(--text-rgb), 0.12); transition: background 0.15s, border-color 0.15s;
@ -118,13 +103,11 @@
}
.updater-btn-primary:hover { background: rgba(var(--page-rgb, var(--accent-rgb)), 0.3); }
/* Hints / empty states */
/* ---- Hints / empty states ---- */
.updater-hint { padding: 12px 15px; border-radius: 11px; margin-bottom: 14px; font-size: 0.84rem;
background: rgba(var(--page-rgb, var(--accent-rgb)), 0.08); border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.2); color: rgba(var(--text-rgb), 0.75); }
.updater-empty { padding: 40px 20px; text-align: center; color: rgba(var(--text-rgb), 0.55); display: flex; flex-direction: column; gap: 14px; align-items: center; }
@media (max-width: 820px) {
.updater-layout { grid-template-columns: 1fr; }
.updater-sidebar { flex-direction: row; flex-wrap: wrap; }
@media (max-width: 600px) {
.updater-row { grid-template-columns: 1fr; gap: 6px; }
}