valknar
1e550319aa
Grounds the visual design in the product's own subject matter (vital- signs monitoring) rather than generic dark-mode defaults: a signature "pulse" green tied to healthy status (the accent color and the "up" status color are the same hue - a steady green pulse reads as healthy, same convention as a cardiac monitor), a small ECG-trace brand mark, and a restrained pulsing-glow animation on healthy status dots (prefers-reduced-motion respected) as the one deliberate motion touch. Typography moves off the bare system-ui stack: IBM Plex Sans for UI text, IBM Plex Mono with tabular numerals for metric values (CPU/mem/uptime/latency), Space Grotesk used once for the wordmark - chosen partly for IBM Plex's own systems-monitoring heritage. Functional additions: - Light/dark toggle, independent of config.yml's theme.mode, persisted to localStorage with a blocking inline script to avoid a flash of the wrong theme on load; auto mode now genuinely follows prefers-color-scheme instead of hardcoding dark. - theme.customCssPath support via a new route handler that serves a user-mounted CSS file at runtime (can't be a build-time import, hence the targeted no-css-tags lint suppression), with a path- traversal guard since it's still reading from disk on every request. - Loading-skeleton state for widgets awaiting their first WebSocket result, distinct from both the error state and genuine no-data. Verified visually in Chrome: theme toggle switches instantly in both directions, a live docker widget's status dot and monospace metrics render correctly in both palettes, and config hot-reload still adds a new widget without a page refresh.
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { IBM_Plex_Sans, IBM_Plex_Mono, Space_Grotesk } from "next/font/google";
|
|
import "./globals.css";
|
|
import { configStore } from "@/lib/config/loader";
|
|
import { ThemeStyleInjector } from "@/components/layout/ThemeStyleInjector";
|
|
|
|
const plexSans = IBM_Plex_Sans({
|
|
variable: "--font-plex-sans",
|
|
subsets: ["latin"],
|
|
weight: ["400", "500", "600"],
|
|
});
|
|
|
|
const plexMono = IBM_Plex_Mono({
|
|
variable: "--font-plex-mono",
|
|
subsets: ["latin"],
|
|
weight: ["400", "500"],
|
|
});
|
|
|
|
const spaceGrotesk = Space_Grotesk({
|
|
variable: "--font-space-grotesk",
|
|
subsets: ["latin"],
|
|
weight: ["600"],
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "PulseNode",
|
|
description: "Self-hosted infrastructure dashboard",
|
|
};
|
|
|
|
const THEME_STORAGE_KEY = "pulsenode-theme";
|
|
|
|
const themeInitScript = `try{var t=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});if(t==="dark"||t==="light"){document.documentElement.dataset.theme=t;}}catch(e){}`;
|
|
|
|
export default function RootLayout({ children }: LayoutProps<"/">) {
|
|
let mode: "dark" | "light" | "auto" = "dark";
|
|
let variables: Record<string, string> = {};
|
|
let customCssPath: string | undefined;
|
|
|
|
try {
|
|
const config = configStore.get();
|
|
mode = config.theme.mode;
|
|
variables = config.theme.variables;
|
|
customCssPath = config.theme.customCssPath;
|
|
} catch {
|
|
// page.tsx surfaces the actual config error; layout falls back to defaults
|
|
}
|
|
|
|
return (
|
|
<html
|
|
lang="en"
|
|
{...(mode !== "auto" ? { "data-theme": mode } : {})}
|
|
className={`h-full ${plexSans.variable} ${plexMono.variable} ${spaceGrotesk.variable}`}
|
|
>
|
|
<head>
|
|
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
|
|
<ThemeStyleInjector variables={variables} />
|
|
{customCssPath && (
|
|
// Served at runtime from a user-mounted file via a route handler;
|
|
// can't be a build-time CSS import.
|
|
// eslint-disable-next-line @next/next/no-css-tags
|
|
<link rel="stylesheet" href="/api/theme/custom-css" />
|
|
)}
|
|
</head>
|
|
<body className="min-h-full font-sans antialiased">{children}</body>
|
|
</html>
|
|
);
|
|
}
|