From 69bb5532b75895a4171452f9f93d32860c77f105 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Mon, 1 Jun 2026 10:46:30 +0100
Subject: [PATCH] refactor(webui): move Peers out of Admin; harmonize Backups
 sub-tab strip

- Remove the Admin sidebar Peers entry; /peers and /admin/tools/peers now
  redirect to /overview/migrate/peers (its new home next to cross-host Restore).
- Re-skin the embedded Backups center's sub-tab strip from pills to the per-app
  Config .tabs-list/.tab-button segmented look (full-width bar, accent underline)
  so every nested sub-tab row is consistent.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../admin/config/js/config-sidebar.js         | 16 ++--------
 .../components/apps/overview/css/overview.css | 32 ++++++++++++-------
 .../frontend/core/kernel/js/spa.js            |  3 +-
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/containers/libreportal/frontend/components/admin/config/js/config-sidebar.js b/containers/libreportal/frontend/components/admin/config/js/config-sidebar.js
index 726295d..845de25 100755
--- a/containers/libreportal/frontend/components/admin/config/js/config-sidebar.js
+++ b/containers/libreportal/frontend/components/admin/config/js/config-sidebar.js
@@ -138,20 +138,8 @@ class ConfigSidebar {
     });
     self.categoriesList.appendChild(sshItem);
 
-    const peersItem = document.createElement('div');
-    peersItem.className = 'category';
-    peersItem.setAttribute('data-category', 'peers');
-    peersItem.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:8px;vertical-align:middle"><circle cx="6" cy="7" r="3"></circle><circle cx="18" cy="7" r="3"></circle><path d="M9 17l3-3 3 3"></path><path d="M12 14v7"></path><path d="M6 10v3a3 3 0 003 3"></path><path d="M18 10v3a3 3 0 01-3 3"></path></svg> Peers';
-    peersItem.addEventListener('click', function () {
-      window.history.pushState({}, '', window.adminPath('peers'));
-      document.querySelectorAll('.category').forEach(function (item) { item.classList.remove('active'); });
-      this.classList.add('active');
-      window.configCategory = 'peers';
-      if (window.configManager && typeof window.configManager.renderConfig === 'function') {
-        window.configManager.renderConfig('peers');
-      }
-    });
-    self.categoriesList.appendChild(peersItem);
+    // Peers moved out of Admin → Overview › Migrate › Peers (it pairs with the
+    // cross-host Restore there). /admin/tools/peers + /peers redirect there.
 
     // Set initial active category
     this.setActiveCategory(window.configCategory || 'overview');
diff --git a/containers/libreportal/frontend/components/apps/overview/css/overview.css b/containers/libreportal/frontend/components/apps/overview/css/overview.css
index 92318e1..051c7d4 100644
--- a/containers/libreportal/frontend/components/apps/overview/css/overview.css
+++ b/containers/libreportal/frontend/components/apps/overview/css/overview.css
@@ -148,30 +148,40 @@
   background: transparent;
   border: none;
 }
+/* Match the per-app Config .tabs-list/.tab-button segmented look (full-width
+   bar, evenly-flexed items, 2px accent underline on the active one). */
 #overview-view #ov-pane-backups .backup-layout > .sidebar #backup-sidebar-list,
 #overview-view #ov-pane-backups .backup-layout > .sidebar .sidebar-section {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  width: 100%;
+  background: var(--hover-bg);
+  border-bottom: 1px solid var(--border-color);
+  overflow-x: auto;
 }
 #overview-view #ov-pane-backups .backup-layout > .sidebar .category {
-  display: inline-flex;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
   align-items: center;
+  justify-content: center;
   gap: 8px;
-  width: auto;
   margin: 0;
-  padding: 8px 14px;
-  border-radius: 8px;
-  border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
+  padding: 12px 14px;
+  white-space: nowrap;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
   cursor: pointer;
 }
 #overview-view #ov-pane-backups .backup-layout > .sidebar .category:hover {
-  background: rgba(255, 255, 255, .06);
+  color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.1);
 }
 #overview-view #ov-pane-backups .backup-layout > .sidebar .category.active {
-  background: rgba(var(--page-backups-rgb), .18);
-  border-color: rgba(var(--page-backups-rgb), .5);
-  color: #fff;
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.1);
 }
 #overview-view #ov-pane-backups .backup-layout > .sidebar .category .category-icon {
   width: 16px;
diff --git a/containers/libreportal/frontend/core/kernel/js/spa.js b/containers/libreportal/frontend/core/kernel/js/spa.js
index 5aaad27..096c0dd 100755
--- a/containers/libreportal/frontend/core/kernel/js/spa.js
+++ b/containers/libreportal/frontend/core/kernel/js/spa.js
@@ -362,7 +362,8 @@ class LibrePortalSPAClean {
     const full = path || '';
     const p = full.split('?')[0];
     if (p === '/ssh' || p.startsWith('/ssh/')) return '/admin/tools/ssh-access';
-    if (p === '/peers' || p.startsWith('/peers/')) return '/admin/tools/peers';
+    // Peers now lives under Overview › Migrate › Peers (moved out of Admin).
+    if (p === '/peers' || p.startsWith('/peers/') || p === '/admin/tools/peers' || p.startsWith('/admin/tools/peers/')) return '/overview/migrate/peers';
     if (p === '/config' || p.startsWith('/config/') || full.startsWith('/config?')) {
       let cat = 'overview';
       if (full.includes('?=')) cat = full.split('?=')[1] || 'overview';