feat(adminsite): one masthead, a shared page frame, collapsible instance records

The console had components but no shell: a brand bar and a nav strip stacked into 100px carrying eight words, no sign-out, no account identity, and an Overview link hardcoded to text-accent so it read as the current page on every screen. Nine pages each hand-rolled their own header. AppBar replaces both bars and derives its active state from usePathname. Settings moves into AccountMenu — it is your password, not a destination — taking appearance with it, which finally sets the data-theme attribute the token blocks have supported in both directions since they were written. That leaves three customer destinations: Overview, People, Billing. PageFrame adds a support rail so a page has a floor, and InstanceRecord replaces InstanceCard with one component that opens and closes: an account with a single instance used to render a third of a row of summary with its substance a click away. It defaults open when the instance is the only one or needs attention. No plan card in the rail: tier, limits and expiry belong to a licence and a licence belongs to one instance, so an account holding a Free cloud instance and a Professional self-hosted one has no single plan. The rail carries only what is account-wide. Tokens and globals.css are untouched — they stay verbatim shared with site/. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-26 17:45:53 +01:00
parent 6bf288f83e
commit 34a0373eca
27 changed files with 1591 additions and 531 deletions
@@ -1,28 +1,26 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { Providers } from "@/components/Providers";
-import { EnvBadge } from "@/components/EnvBadge";
+import { THEME_BOOT_SCRIPT } from "@/lib/theme";

 export const metadata: Metadata = {
-    title: "Vantage Licensing",
+    title: "Vantage HQ",
    description: "Licences, instances and billing for Vantage.",
 };

+/*
+ * The masthead deliberately does NOT live here. It belongs to the authenticated
+ * layouts, so /login, /signup, /verify and /accept-invite stop rendering a bar
+ * whose navigation and account menu they cannot use.
+ */
 export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
+            <head>
+                {/* Runs before first paint, so a dark-preferring viewer never sees white. */}
+                <script dangerouslySetInnerHTML={{ __html: THEME_BOOT_SCRIPT }} />
+            </head>
            <body>
-                <header className="border-b border-rule bg-panel">
-                    <div className="mx-auto flex max-w-rail flex-wrap items-center justify-between gap-4 px-5 py-4">
-                        <span className="flex items-baseline gap-2 text-[1.16rem] font-extrabold tracking-[-0.02em]">
-                            Vantage
-                            <span className="font-mono text-[0.72rem] font-normal uppercase tracking-[0.14em] text-ink-3">
-                                Licensing
-                            </span>
-                        </span>
-                        <EnvBadge />
-                    </div>
-                </header>
                <Providers>{children}</Providers>
            </body>
        </html>