From 4d54d6a9b0820cf8118921df07b62332d8acb653 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Tue, 2 Jun 2026 23:29:16 +0100
Subject: [PATCH] feat(webui): unify Overview tab headers as in-content,
 app-detail style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the floating fleet header; every Overview tab now renders its heading
inside the pane, under the tab strip, in the per-app detail .config-title
format (emoji + title + description) — matching the Migrate tab.

Introduces a small modular system so the area can't drift:
- OV_TAB_META is the single source of truth for each tab's icon/title/blurb.
- renderHeader(id) is the only thing that turns it into markup; renderTab()
  prepends it for the string tabs and mountMigrate() injects it once for the
  static Migrate pane. Body renderers now only ever produce the body.

Retires the now-dead floating-header plumbing: updateHeader(), the
ov-backups-active/ov-migrate-active hide toggles + CSS, and the .overview-header
rules. The tabbed interface owns the top padding the header used to provide.

Backups is the documented exception — it embeds the full BackupPage, which
supplies its own header.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../apps/core/html/apps-unified-layout.html   | 20 ++----
 .../components/apps/overview/css/overview.css | 26 +++-----
 .../apps/overview/js/overview-manager.js      | 63 +++++++++++--------
 3 files changed, 50 insertions(+), 59 deletions(-)

diff --git a/containers/libreportal/frontend/components/apps/core/html/apps-unified-layout.html b/containers/libreportal/frontend/components/apps/core/html/apps-unified-layout.html
index f96260f..2494a88 100755
--- a/containers/libreportal/frontend/components/apps/core/html/apps-unified-layout.html
+++ b/containers/libreportal/frontend/components/apps/core/html/apps-unified-layout.html
@@ -279,14 +279,9 @@
     <!-- Fleet Overview View (Overview · Updates · Improvements · Backups).
          Driven by OverviewManager; shares the persistent apps sidebar. -->
     <div id="overview-view" class="content-view">
-      <div class="overview-header">
-        <div class="overview-header-text">
-          <h2 id="overview-title">Overview</h2>
-          <p id="overview-subtitle">Updates, improvements, and backups across all your apps.</p>
-        </div>
-        <button class="updater-btn" data-updater-action="check">↻ Check now</button>
-      </div>
-
+      <!-- No floating header: every tab renders its own in-content .config-title
+           header (icon + title + description) under the tab strip, just like the
+           per-app detail tabs. See OverviewManager.renderHeader / OV_TAB_META. -->
       <div class="tabbed-interface overview-tabbed">
         <div class="tab-navigation">
           <button class="main-tab-button active" data-tab="overview" onclick="if(window.overviewManager) window.overviewManager.switchTab('overview')">
@@ -317,13 +312,8 @@
           <div class="tab-pane" data-tab="improvements" id="ov-pane-improvements"></div>
           <div class="tab-pane" data-tab="backups" id="ov-pane-backups"></div>
           <div class="tab-pane" data-tab="migrate" id="ov-pane-migrate">
-            <!-- In-content header (mirrors the per-app Config tab's .config-title:
-                 icon + title + description sit inside the pane, above the sub-tabs).
-                 The generic fleet header is hidden for this tab (.ov-migrate-active). -->
-            <div class="config-title">
-              <h3>🔀 Migrate</h3>
-              <p>Move apps in from another LibrePortal, and manage the peers you share backup locations with.</p>
-            </div>
+            <!-- The in-content header (.ov-tab-header) is injected here by
+                 mountMigrate() from OV_TAB_META, above the sub-tabs. -->
             <!-- Cross-host area: nested segmented sub-tabs (Config-tab design). -->
             <div class="tabs-wrapper ov-subtabs">
               <div class="tabs-list">
diff --git a/containers/libreportal/frontend/components/apps/overview/css/overview.css b/containers/libreportal/frontend/components/apps/overview/css/overview.css
index a9dbc51..a7f810a 100644
--- a/containers/libreportal/frontend/components/apps/overview/css/overview.css
+++ b/containers/libreportal/frontend/components/apps/overview/css/overview.css
@@ -36,18 +36,11 @@
 }
 .sidebar-overview-entry .ov-entry-icon { width: 18px; height: 18px; flex: 0 0 auto; }
 
-/* ---- header ------------------------------------------------------------- */
-.overview-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 20px 24px 12px;
-  flex-wrap: wrap;
-}
-.overview-header h2 { margin: 0 0 2px; font-size: 1.5rem; }
-.overview-header p { margin: 0; color: var(--text-muted, rgba(255, 255, 255, .65)); font-size: .9rem; }
-.overview-tabbed { padding: 0 24px 24px; }
+/* ---- layout ------------------------------------------------------------- */
+/* No floating header — each tab renders its own in-content .config-title header
+   under the tab strip (OverviewManager.renderHeader). The tabbed interface owns
+   the area padding the old header used to provide at the top. */
+.overview-tabbed { margin-top: 0; padding: 22px 24px 24px; }
 
 /* ---- Updates: filter chips + toolbar ------------------------------------ */
 .ov-toolbar {
@@ -132,12 +125,9 @@
 .updater-detail-empty { color: var(--text-muted, rgba(255, 255, 255, .6)); margin: 0; }
 
 /* ---- Backups tab: embedded backup center -------------------------------- */
-/* The Backups tab mounts the real BackupPage. Its own page-header replaces the
-   generic fleet header, and its left sidebar is restyled into a horizontal
-   nested tab strip so the whole thing reads as tabs-within-tabs. */
-#overview-view.ov-backups-active .overview-header,
-#overview-view.ov-migrate-active .overview-header { display: none; }
-
+/* The Backups tab mounts the real BackupPage, which supplies its own header, and
+   its left sidebar is restyled into a horizontal nested tab strip so the whole
+   thing reads as tabs-within-tabs. */
 #overview-view #ov-pane-backups .backup-layout { display: block; }
 #overview-view #ov-pane-backups .backup-layout > .sidebar {
   width: auto;
diff --git a/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js b/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js
index 0a76f7f..21f340f 100644
--- a/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js
+++ b/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js
@@ -12,6 +12,24 @@
 // health is read directly from the same generated JSON the backup page uses.
 // System config edits are never inline here — they bounce to Admin / the per-app
 // tabs (operate/view here; change-the-system there).
+
+// Single source of truth for every fleet tab's in-content header. Each tab
+// renders the SAME .config-title block the per-app detail tabs use — emoji +
+// title + description, sitting inside the pane, directly above the body and
+// under the tab strip. renderHeader() is the only thing that turns this into
+// markup, and renderTab()/mountMigrate() are the only callers, so the area
+// cannot drift from the shared app-detail header format: to change a heading,
+// edit it HERE and nowhere else. (Backups is the one exception — it embeds the
+// full BackupPage, which supplies its own header — so it has no entry to render
+// but is listed for completeness.)
+const OV_TAB_META = {
+  overview:     { icon: '🛰️', title: 'Overview',     desc: 'Updates, improvements, and backups across all your apps.' },
+  updates:      { icon: '⬆️', title: 'Updates',      desc: 'Available versions per app — expand a row for CVEs, recovery, and history. Every update is snapshotted first.' },
+  improvements: { icon: '✨', title: 'Improvements', desc: 'Signed, individually-reversible hotfixes from the LibrePortal team — applied with a snapshot first.' },
+  backups:      { icon: '💾', title: 'Backups',      desc: 'Backup health across your apps. Open an app for snapshots and restore.' },
+  migrate:      { icon: '🔀', title: 'Migrate',      desc: 'Move apps in from another LibrePortal, and manage the peers you share backup locations with.' },
+};
+
 class OverviewManager {
   constructor(services) {
     this.services = services || (window.LP && window.LP.services) || {};
@@ -117,52 +135,39 @@ class OverviewManager {
 
   _applyTab(id) {
     if (this.tabs) this.tabs.switch(id);
-    // Backups embeds the full backup center (its own header + nested sub-tab
-    // strip) and Migrate carries its own in-content .config-title header above
-    // its sub-tabs — both supply their own heading, so hide the generic fleet
-    // header for them.
-    const root = document.getElementById('overview-view');
-    if (root) {
-      root.classList.toggle('ov-backups-active', id === 'backups');
-      root.classList.toggle('ov-migrate-active', id === 'migrate');
-    }
-    this.updateHeader(id);
     this.renderTab(id);
     this.current = id;
   }
 
-  updateHeader(id) {
-    const titles = {
-      overview: ['Overview', 'Updates, improvements, and backups across all your apps.'],
-      updates: ['Updates', 'Available versions per app — expand a row for CVEs, recovery, and history. Every update is snapshotted first.'],
-      improvements: ['Improvements', 'Signed, individually-reversible hotfixes from the LibrePortal team — applied with a snapshot first.'],
-      backups: ['Backups', 'Backup health across your apps. Open an app for snapshots and restore.'],
-      migrate: ['Migrate', 'Move apps in from another LibrePortal, and manage the peers you share backup locations with.'],
-    };
-    const t = titles[id] || titles.overview;
-    const titleEl = document.getElementById('overview-title');
-    const subEl = document.getElementById('overview-subtitle');
-    if (titleEl) titleEl.textContent = t[0];
-    if (subEl) subEl.textContent = t[1];
+  // The shared in-content header. Sourced only from OV_TAB_META so every fleet
+  // tab matches the per-app detail tabs' .config-title (emoji + title + blurb,
+  // inside the pane, above the body). renderTab() prepends this for the string
+  // tabs; mountMigrate() injects it once for the static Migrate pane.
+  renderHeader(id) {
+    const m = OV_TAB_META[id];
+    if (!m) return '';
+    return `<div class="config-title ov-tab-header"><h3>${m.icon} ${this.escape(m.title)}</h3><p>${this.escape(m.desc)}</p></div>`;
   }
 
   renderTab(id) {
     const pane = document.querySelector(`#overview-view .tab-pane[data-tab="${id}"]`);
     if (!pane) return;
+    // Every string-rendered tab leads with the shared in-content header, so the
+    // body renderers below only ever produce the body (never a heading).
     switch (id) {
-      case 'overview': pane.innerHTML = this.renderOverview(); break;
+      case 'overview': pane.innerHTML = this.renderHeader(id) + this.renderOverview(); break;
       case 'updates': {
         // Preserve which rows are expanded across a rebuild — a background
         // task-refresh repaints the whole table, so restore ALL open rows, not
         // just the single ?app= deep-link.
         const open = Array.from(document.querySelectorAll('#overview-view .ov-row-details:not([hidden])'))
           .map((d) => d.id.replace(/^ov-detail-/, ''));
-        pane.innerHTML = this.renderUpdates();
+        pane.innerHTML = this.renderHeader(id) + this.renderUpdates();
         open.forEach((app) => this._openDetail(app));
         this._honorAppDeepLink();
         break;
       }
-      case 'improvements': pane.innerHTML = this.renderImprovements(); break;
+      case 'improvements': pane.innerHTML = this.renderHeader(id) + this.renderImprovements(); break;
       case 'backups': this.mountBackupCenter(pane); break;
       case 'migrate': this.mountMigrate(); break;
     }
@@ -171,6 +176,12 @@ class OverviewManager {
   // ---- Migrate tab: Restore (standalone MigratePage) + Peers (PeersPage) ----
 
   mountMigrate() {
+    // The Migrate pane is static layout (its sub-tabs live in the HTML, not an
+    // innerHTML rebuild), so inject the shared header once, above the sub-tabs.
+    const pane = document.getElementById('ov-pane-migrate');
+    if (pane && !pane.querySelector(':scope > .ov-tab-header')) {
+      pane.insertAdjacentHTML('afterbegin', this.renderHeader('migrate'));
+    }
     const seg = window.location.pathname.replace(/^\/overview\/migrate\/?/, '').split('/')[0];
     const sub = (seg === 'peers' || seg === 'restore') ? seg : (this._migrateSub || 'restore');
     this.switchMigrateSub(sub, { fromUrl: true });