pulsenode/components/layout/Dashboard.tsx

"use client";

import type { Config } from "@/lib/config/schema";
import { useConfigSubscription } from "@/lib/ws/client";
import { GroupSection } from "./GroupSection";
import { ThemeToggle } from "./ThemeToggle";
import { PulseMark } from "./PulseMark";

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>
        <ThemeToggle />
      </header>
      {config.groups.map((group, groupIndex) => (
        <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
      ))}
    </main>
  );
}