2026-08-17 13:49:55 +02:00
|
|
|
import type { Metadata } from "next";
|
2026-08-17 14:27:07 +02:00
|
|
|
import { IBM_Plex_Sans, IBM_Plex_Mono, Space_Grotesk } from "next/font/google";
|
2026-08-17 13:49:55 +02:00
|
|
|
import "./globals.css";
|
|
|
|
|
import { configStore } from "@/lib/config/loader";
|
|
|
|
|
import { ThemeStyleInjector } from "@/components/layout/ThemeStyleInjector";
|
|
|
|
|
|
2026-08-17 14:27:07 +02:00
|
|
|
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"],
|
|
|
|
|
});
|
|
|
|
|
|
2026-08-17 13:49:55 +02:00
|
|
|
export const metadata: Metadata = {
|
|
|
|
|
title: "PulseNode",
|
|
|
|
|
description: "Self-hosted infrastructure dashboard",
|
|
|
|
|
};
|
|
|
|
|
|
2026-08-17 14:27:07 +02:00
|
|
|
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){}`;
|
|
|
|
|
|
2026-08-17 13:49:55 +02:00
|
|
|
export default function RootLayout({ children }: LayoutProps<"/">) {
|
2026-08-17 14:27:07 +02:00
|
|
|
let mode: "dark" | "light" | "auto" = "dark";
|
2026-08-17 13:49:55 +02:00
|
|
|
let variables: Record<string, string> = {};
|
2026-08-17 14:27:07 +02:00
|
|
|
let customCssPath: string | undefined;
|
2026-08-17 13:49:55 +02:00
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const config = configStore.get();
|
2026-08-17 14:27:07 +02:00
|
|
|
mode = config.theme.mode;
|
2026-08-17 13:49:55 +02:00
|
|
|
variables = config.theme.variables;
|
2026-08-17 14:27:07 +02:00
|
|
|
customCssPath = config.theme.customCssPath;
|
2026-08-17 13:49:55 +02:00
|
|
|
} catch {
|
|
|
|
|
// page.tsx surfaces the actual config error; layout falls back to defaults
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2026-08-17 14:27:07 +02:00
|
|
|
<html
|
|
|
|
|
lang="en"
|
|
|
|
|
{...(mode !== "auto" ? { "data-theme": mode } : {})}
|
|
|
|
|
className={`h-full ${plexSans.variable} ${plexMono.variable} ${spaceGrotesk.variable}`}
|
|
|
|
|
>
|
2026-08-17 13:49:55 +02:00
|
|
|
<head>
|
2026-08-17 14:27:07 +02:00
|
|
|
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
|
2026-08-17 13:49:55 +02:00
|
|
|
<ThemeStyleInjector variables={variables} />
|
2026-08-17 14:27:07 +02:00
|
|
|
{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" />
|
|
|
|
|
)}
|
2026-08-17 13:49:55 +02:00
|
|
|
</head>
|
2026-08-17 14:27:07 +02:00
|
|
|
<body className="min-h-full font-sans antialiased">{children}</body>
|
2026-08-17 13:49:55 +02:00
|
|
|
</html>
|
|
|
|
|
);
|
|
|
|
|
}
|
