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:
2026-08-17 13:49:55 +02:00
commit 80c2362ac2
27 changed files with 5729 additions and 0 deletions
+19
View File
@@ -0,0 +1,19 @@
import type { Widget } from "@/lib/config/schema";
type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
return (
<a
href={widget.href}
target="_blank"
rel="noreferrer"
className="flex flex-col gap-1 rounded-[var(--radius-widget)] border border-border bg-surface p-4 transition-colors hover:border-accent"
>
<span className="text-sm font-medium text-fg">{widget.name}</span>
{widget.description && (
<span className="text-xs text-fg-muted">{widget.description}</span>
)}
</a>
);
}
+13
View File
@@ -0,0 +1,13 @@
import type { ComponentType } from "react";
import type { Widget } from "@/lib/config/schema";
import { BookmarkWidget } from "./bookmark/Widget";
import { SearchWidget } from "./search/Widget";
type WidgetComponent<T extends Widget["type"]> = ComponentType<{
widget: Extract<Widget, { type: T }>;
}>;
export const widgetRegistry: { [K in Widget["type"]]: WidgetComponent<K> } = {
bookmark: BookmarkWidget,
search: SearchWidget,
};
+51
View File
@@ -0,0 +1,51 @@
"use client";
import { useState, type FormEvent } from "react";
import type { SearchEngine, Widget } from "@/lib/config/schema";
type SearchWidget = Extract<Widget, { type: "search" }>;
const ENGINE_URLS: Record<string, string> = {
duckduckgo: "https://duckduckgo.com/?q=",
google: "https://www.google.com/search?q=",
bing: "https://www.bing.com/search?q=",
};
export function SearchWidget({ widget }: { widget: SearchWidget }) {
const [engine, setEngine] = useState(widget.defaultEngine ?? widget.engines[0]);
const [query, setQuery] = useState("");
function handleSubmit(event: FormEvent) {
event.preventDefault();
const trimmed = query.trim();
if (!trimmed) return;
window.open(`${ENGINE_URLS[engine]}${encodeURIComponent(trimmed)}`, "_blank", "noreferrer");
}
return (
<form
onSubmit={handleSubmit}
className="flex items-center gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-2 sm:col-span-2"
>
{widget.engines.length > 1 && (
<select
value={engine}
onChange={(event) => setEngine(event.target.value as SearchEngine)}
className="rounded bg-transparent text-xs text-fg-muted outline-none"
>
{widget.engines.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
)}
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search..."
className="flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-muted"
/>
</form>
);
}