feat: apply imported design (bento grid, real elevation tokens, live indicator)

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.
2026-08-17 17:21:18 +02:00
parent fa73750a28
commit e1e571754a
22 changed files with 486 additions and 192 deletions
@@ -1,28 +1,48 @@
 "use client";

+import { Broadcast } from "@phosphor-icons/react/ssr";
 import type { Config } from "@/lib/config/schema";
-import { useConfigSubscription } from "@/lib/ws/client";
+import { useConfigSubscription, useConnectionStatus } from "@/lib/ws/client";
 import { GroupSection } from "./GroupSection";
 import { ThemeToggle } from "./ThemeToggle";
 import { PulseMark } from "./PulseMark";
+import { ToastStack } from "./Toast";
+
+function LiveIndicator() {
+  const status = useConnectionStatus();
+  const label = status === "connected" ? "live" : status === "reconnecting" ? "reconnecting…" : "connecting…";
+
+  return (
+    <div className="pn-live-label flex items-center gap-1.5 text-xs text-fg-muted">
+      <Broadcast size={15} className={status === "connected" ? "text-accent" : "text-status-degraded"} aria-hidden />
+      <span>{label}</span>
+    </div>
+  );
+}

 export function Dashboard({ config: initialConfig }: { config: Config }) {
  const config = useConfigSubscription(initialConfig);

  return (
-    <main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
-      <header className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <PulseMark />
-          <h1 className="font-display text-lg font-semibold tracking-tight text-fg">
-            {config.settings.title}
-          </h1>
+    <div className="relative min-h-screen">
+      <div className="sticky top-0 z-20 border-b border-border bg-bg/70 backdrop-blur-lg">
+        <div className="mx-auto flex max-w-6xl items-center gap-4 px-6 py-3">
+          <div className="mr-auto flex items-center gap-2.5">
+            <PulseMark size={30} />
+            <span className="font-display text-lg font-semibold tracking-tight text-fg">
+              {config.settings.title}
+            </span>
+          </div>
+          <LiveIndicator />
+          <ThemeToggle />
        </div>
-        <ThemeToggle />
-      </header>
-      {config.groups.map((group, groupIndex) => (
-        <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
-      ))}
-    </main>
+      </div>
+      <main className="mx-auto max-w-6xl px-6 pt-2 pb-20">
+        {config.groups.map((group, groupIndex) => (
+          <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
+        ))}
+      </main>
+      <ToastStack />
+    </div>
  );
 }
@@ -4,11 +4,14 @@ import { widgetRegistry } from "@/components/widgets/registry";

 export function GroupSection({ group, groupIndex }: { group: Group; groupIndex: number }) {
  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">
+    <section className="mt-8 flex flex-col gap-4">
+      <div className="flex items-baseline gap-2.5">
+        <h6 className="m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase">
+          {group.name}
+        </h6>
+        <div className="pn-hr" />
+      </div>
+      <div className="pn-bento gap-4">
        {group.widgets.map((widget, index) => {
          const Component = widgetRegistry[widget.type];
          const id = widgetId(groupIndex, index);
@@ -1,18 +1,21 @@
-export function PulseMark() {
+export function PulseMark({ size = 30 }: { size?: number }) {
  return (
-    <svg
-      width="30"
-      height="16"
-      viewBox="0 0 60 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      className="text-accent"
-    >
-      <path
-        d="M0 12H11L15 5L20 19L24 12H33L37 8L41 12H60"
-        stroke="currentColor"
-        strokeWidth="2.5"
+    <svg width={size} height={size} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <rect
+        x="1"
+        y="1"
+        width="28"
+        height="28"
+        rx="8"
+        fill="var(--pn-surface-raised)"
+        stroke="color-mix(in srgb, var(--pn-accent) 45%, transparent)"
+      />
+      <circle cx="15" cy="15" r="8" stroke="var(--pn-accent)" strokeWidth="1.5" />
+      <polyline
+        points="8,15 12,15 14,9 17,21 19,15 22,15"
+        fill="none"
+        stroke="var(--pn-accent)"
+        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
@@ -1,6 +1,7 @@
 "use client";

 import { useEffect, useState } from "react";
+import { MoonStars, Sun } from "@phosphor-icons/react/ssr";

 const STORAGE_KEY = "pulsenode-theme";

@@ -34,17 +35,19 @@ export function ThemeToggle() {
  }

  if (theme === null) {
-    return <div className="h-7 w-16 rounded-[var(--radius-widget)] border border-border bg-surface" />;
+    return <div className="h-9 w-9 rounded-md border border-border bg-surface" />;
  }

  return (
    <button
      type="button"
      onClick={toggle}
-      className="rounded-[var(--radius-widget)] border border-border bg-surface px-3 py-1.5 text-xs text-fg-muted transition-colors hover:text-fg"
+      className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-surface text-fg-muted transition-colors hover:text-fg"
      aria-label="Toggle color theme"
    >
-      {theme === "light" ? "Light" : "Dark"}
+      <span key={theme} className="pn-spin-in flex">
+        {theme === "dark" ? <MoonStars size={17} /> : <Sun size={17} />}
+      </span>
    </button>
  );
 }
@@ -0,0 +1,28 @@
+"use client";
+
+import { CheckCircle, WarningCircle } from "@phosphor-icons/react/ssr";
+import { useConfigToasts } from "@/lib/ws/client";
+
+export function ToastStack() {
+  const toasts = useConfigToasts();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed right-6 bottom-6 z-50 flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className="pn-toast flex max-w-[340px] items-center gap-2.5 rounded-lg border border-border bg-surface px-3.5 py-3 shadow-[var(--pn-shadow-md)]"
+        >
+          {toast.tone === "ok" ? (
+            <CheckCircle size={20} className="shrink-0 text-accent" aria-hidden />
+          ) : (
+            <WarningCircle size={20} className="shrink-0 text-status-down" aria-hidden />
+          )}
+          <span className="text-[13px] text-fg">{toast.message}</span>
+        </div>
+      ))}
+    </div>
+  );
+}