feat: scaffold PulseNode dashboard (M1)
Next.js 16 + TypeScript + Tailwind v4 app with a YAML-driven config system: schema validation (zod), .env interpolation, and a widget registry rendering bookmark/search/group widgets. CSS custom properties (--pn-*) drive theming and are overridable from config.yml's theme.variables. Config load errors surface as a readable error page instead of crashing the app. Hot reload, docker/system/http collectors, and the WebSocket push layer land in later milestones per the approved plan.
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
import type { Config } from "@/lib/config/schema";
|
||||
import { GroupSection } from "./GroupSection";
|
||||
|
||||
export function Dashboard({ config }: { config: Config }) {
|
||||
return (
|
||||
<main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
|
||||
<header className="flex items-center justify-between">
|
||||
<h1 className="text-lg font-semibold text-fg">{config.settings.title}</h1>
|
||||
</header>
|
||||
{config.groups.map((group) => (
|
||||
<GroupSection key={group.name} group={group} />
|
||||
))}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { Group } from "@/lib/config/schema";
|
||||
import { widgetRegistry } from "@/components/widgets/registry";
|
||||
|
||||
export function GroupSection({ group }: { group: Group }) {
|
||||
return (
|
||||
<section className="flex flex-col gap-3">
|
||||
<h2 className="text-xs font-semibold tracking-wide text-fg-muted uppercase">
|
||||
{group.name}
|
||||
</h2>
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
|
||||
{group.widgets.map((widget, index) => {
|
||||
const Component = widgetRegistry[widget.type];
|
||||
return <Component key={index} widget={widget as never} />;
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export function ThemeStyleInjector({ variables }: { variables: Record<string, string> }) {
|
||||
const entries = Object.entries(variables);
|
||||
if (entries.length === 0) return null;
|
||||
|
||||
const css = `:root{${entries.map(([key, value]) => `${key}:${value};`).join("")}}`;
|
||||
|
||||
return <style id="pulsenode-theme-overrides" dangerouslySetInnerHTML={{ __html: css }} />;
|
||||
}
|
||||
Reference in New Issue
Block a user