feat: visual identity, theme toggle, custom CSS, loading states (M4)

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.
2026-08-17 14:27:07 +02:00
parent 847c4be26b
commit 1e550319aa
13 changed files with 276 additions and 44 deletions
@@ -1,31 +1,67 @@
 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" = "dark";
+  let mode: "dark" | "light" | "auto" = "dark";
  let variables: Record<string, string> = {};
+  let customCssPath: string | undefined;

  try {
    const config = configStore.get();
-    mode = config.theme.mode === "light" ? "light" : "dark";
+    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" data-theme={mode} className="h-full">
+    <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 antialiased">{children}</body>
+      <body className="min-h-full font-sans antialiased">{children}</body>
    </html>
  );
 }