valknar
e1e571754a
Imports the visual direction from a claude.ai/design session ("PulseNode
Dashboard.dc.html") and reconciles it with the app's existing choices
rather than a wholesale swap: kept the IBM Plex Sans/Mono + Space
Grotesk typography and the pulse-green accent concept from the earlier
pass, adopted the imported design's structural ideas - a real
tonal/elevation token system (derived divider/muted colors via
color-mix instead of hardcoded per-theme duplicates, actual box-shadow
elevation), a 12-column bento grid with per-widget-type column spans
instead of uniform equal-width cards, fading-edge section dividers,
and a shared WidgetCard/MetricBar/StatusTag vocabulary so every widget
type stops repeating its own card markup.
Icons come from @phosphor-icons/react's /ssr entrypoint (bundled at
build time) rather than the imported design's unpkg.com CDN script -
that script is fine for the standalone design-tool preview, but a
runtime third-party call would break the self-hosted-only principle
already established (fonts self-hosted via next/font, no external
requests). New app/icon.svg reuses the same nav badge mark as the
favicon, replacing the never-touched create-next-app default.
Two new pieces of real functionality prompted by the design's mockup
toast/live-indicator, not just decoration: a "live" WebSocket
connection-status indicator (lib/ws/client.ts now tracks and exposes
real connection state), and a toast that fires on actual config:update
and config:error events - the latter finally surfaces config validation
failures in the browser, previously visible only in server logs despite
being designed for exactly this back in M1.
25 lines
828 B
TypeScript
25 lines
828 B
TypeScript
import { ConfigError } from "@/lib/config/loader";
|
|
import { effectiveConfigStore } from "@/lib/config/effective";
|
|
import { Dashboard } from "@/components/layout/Dashboard";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default function Home() {
|
|
let config;
|
|
try {
|
|
config = effectiveConfigStore.get();
|
|
} catch (err) {
|
|
const message = err instanceof ConfigError ? err.message : "Unknown configuration error";
|
|
return (
|
|
<main className="mx-auto flex max-w-2xl flex-col gap-4 px-6 py-16">
|
|
<h1 className="font-display text-lg font-semibold text-status-down">Configuration Error</h1>
|
|
<pre className="rounded-lg border border-status-down bg-surface p-4 text-sm whitespace-pre-wrap text-fg">
|
|
{message}
|
|
</pre>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return <Dashboard config={config} />;
|
|
}
|