small changes to UI stuff

Overlord-Server/public/assets/main.css

@@ -209,6 +209,15 @@
 * {
   box-sizing: border-box;
 }
+
+html {
+  scrollbar-gutter: stable;
+}
+
+@view-transition {
+  navigation: auto;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -1626,6 +1635,15 @@ mark.search-current {
 /* Dashboard polish */
 #top-nav {
   box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
+  /* Reserve the topbar's height before nav.js mounts so the page below it
+     doesn't visibly jump when the nav HTML is injected. The min-height is
+     overridden by `body.sb-ready #top-nav` for sidebar mode, which has its
+     own explicit dimensions. */
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  min-height: 60px;
 }
 
 #top-nav nav a {
@@ -2014,17 +2032,26 @@ tbody tr:hover {
   --sb-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Offset body content so it sits beside the sidebar */
+/* Offset body content so it sits beside the sidebar.
+   `html.nav-pre-sidebar` is set by the inline pre-paint script in each
+   page <head> and triggers the sidebar layout before nav.js mounts;
+   `body.sb-ready` is what the JS controller adds afterward. Both
+   selectors fire the same rules so there's no layout shift between the
+   two states. The same pattern applies to the rules below. */
+html.nav-pre-sidebar body,
 body.sb-ready {
   padding-left: var(--sb-w);
   transition: padding-left var(--sb-speed) var(--sb-ease);
 }
+html.nav-pre-sidebar.nav-pre-collapsed body,
 body.sb-ready.sb-collapsed {
   padding-left: var(--sb-w-collapsed);
 }
 
 /* On mobile the sidebar becomes a drawer, not a persistent rail */
 @media (max-width: 767px) {
+  html.nav-pre-sidebar body,
+  html.nav-pre-sidebar.nav-pre-collapsed body,
   body.sb-ready,
   body.sb-ready.sb-collapsed {
     padding-left: 0;
@@ -2033,12 +2060,14 @@ body.sb-ready.sb-collapsed {
 }
 
 /* ---- The sidebar element (#top-nav) ---- */
+html.nav-pre-sidebar #top-nav,
 body.sb-ready #top-nav {
   position: fixed;
   top: 0;
   left: 0;
   height: 100dvh;
   width: var(--sb-w);
+  min-height: 0;
   background: rgba(2, 8, 22, 0.97);
   border-right: 1px solid rgba(255, 255, 255, 0.07);
   backdrop-filter: blur(16px);
@@ -2050,10 +2079,12 @@ body.sb-ready #top-nav {
   padding: 0;
   transition: width var(--sb-speed) var(--sb-ease);
 }
+html.nav-pre-sidebar.nav-pre-collapsed #top-nav,
 body.sb-collapsed #top-nav {
   width: var(--sb-w-collapsed);
 }
 @media (max-width: 767px) {
+  html.nav-pre-sidebar #top-nav,
   body.sb-ready #top-nav {
     width: var(--sb-w) !important;
     transform: translateX(calc(-100% - 2px));
@@ -2066,6 +2097,11 @@ body.sb-collapsed #top-nav {
   }
 }
 
+/* Pre-paint nav-hidden: keep the nav from flashing in before JS removes it */
+html.nav-pre-hidden #top-nav {
+  visibility: hidden;
+}
+
 /* ---- Sidebar header (logo row) ---- */
 .sb-header {
   display: flex;

Overlord-Server/public/assets/nav-prelude.js

@@ -0,0 +1,8 @@
+(function () {
+  try {
+    var h = document.documentElement, L = localStorage;
+    h.classList.add(L.getItem("sb_mode") === "sidebar" ? "nav-pre-sidebar" : "nav-pre-topbar");
+    if (L.getItem("sb_collapsed") === "true") h.classList.add("nav-pre-collapsed");
+    if (L.getItem("nav_hidden") === "true") h.classList.add("nav-pre-hidden");
+  } catch (e) {}
+})();

Overlord-Server/public/build.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Client Builder - Overlord</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/console.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Overlord Console</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/deploy.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>Execution - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/file-share.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>File Share - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/filebrowser.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>File Browser - Overlord</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/hvnc.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Overlord Backstage</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/vendor/inter/400.css" />

Overlord-Server/public/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Overlord Dashboard</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />
@@ -14,9 +16,9 @@
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
     <script defer src="/vendor/animejs/anime.min.js"></script>
-    <link rel="preload" href="/api/clients?page=1&amp;pageSize=12&amp;q=&amp;sort=stable&amp;status=all&amp;os=all&amp;country=all&amp;group=all" as="fetch" crossorigin />
+    <link rel="preload" href="/api/clients?page=1&amp;pageSize=12&amp;q=&amp;sort=stable&amp;status=all&amp;os=all&amp;country=all&amp;group=all" as="fetch" crossorigin="use-credentials" />
-    <link rel="preload" href="/api/auth/me" as="fetch" crossorigin />
+    <link rel="preload" href="/api/auth/me" as="fetch" crossorigin="use-credentials" />
-    <link rel="preload" href="/api/groups" as="fetch" crossorigin />
+    <link rel="preload" href="/api/groups" as="fetch" crossorigin="use-credentials" />
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/keylogger.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>Keylogger - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/logs.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Client Logs - Overlord</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/metrics.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Metrics - Overlord</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/notifications.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Notifications - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/vendor/inter/400.css" />

Overlord-Server/public/plugins.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Overlord Plugins</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/vendor/inter/400.css" />

Overlord-Server/public/processes.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Process Manager - Overlord</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/purgatory.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>Purgatory - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/remotedesktop.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Overlord Remote Desktop</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/vendor/inter/400.css" />

Overlord-Server/public/scripts.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>Script Execution - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/settings.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>Settings - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/socks5-manager.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>SOCKS5 Proxy Manager - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/sol-publish.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Solana Memo Publisher - Overlord</title>
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />

Overlord-Server/public/user-client-access.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>User Client Access - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/users.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>User Management - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />

Overlord-Server/public/voice.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>Voice Support</title>
     <link rel="stylesheet" href="/assets/tailwind.css" />
     <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />

Overlord-Server/public/webcam.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
     <title>Overlord Webcam Viewer</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/vendor/inter/400.css" />

Overlord-Server/public/winre.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/assets/nav-prelude.js"></script>
+    <link rel="modulepreload" href="/assets/nav.js" />
+    <link rel="stylesheet" href="/vendor/inter/400.css" />
+    <link rel="stylesheet" href="/vendor/inter/600.css" />
+    <link rel="stylesheet" href="/vendor/inter/700.css" />
     <title>WinRE Persistence - Overlord</title>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/tailwind.css" />