Prism UI

// app/settings/page.tsx — Server Component
import { getSession } from "@/lib/auth";
import { getUserSettings } from "@/lib/api/user";
import { SettingsForm } from "./SettingsForm";
import { redirect } from "next/navigation";

export default async function SettingsPage() {
  const session = await getSession();
  if (!session) redirect("/login");

  const settings = await getUserSettings(session.userId);

  return (
    <main className="mx-auto max-w-2xl px-4 py-10">
      <h1 className="text-[--text-heading] text-2xl font-semibold mb-8">
        Account settings
      </h1>
      <SettingsForm initialValues={settings} userId={session.userId} />
    </main>
  );
}

// app/settings/SettingsForm.tsx — Client Component (needs interactivity)
"use client";

import { useActionState } from "react";
import { updateSettings } from "@/lib/actions/user";
import { FormField } from "@/components/ui/FormField";
import { Button } from "@/components/ui/Button";
import type { UserSettings } from "@/lib/types";

type Props = { initialValues: UserSettings; userId: string };

export function SettingsForm({ initialValues, userId }: Props) {
  const [state, action, isPending] = useActionState(updateSettings, null);

  return (
    <form action={action} className="space-y-6">
      <input type="hidden" name="userId" value={userId} />

      <FormField
        label="Display name"
        name="displayName"
        defaultValue={initialValues.displayName}
        error={state?.errors?.displayName}
        required
      />

      <FormField
        label="Email"
        name="email"
        type="email"
        defaultValue={initialValues.email}
        error={state?.errors?.email}
        required
      />

      {state?.error && (
        <p role="alert" className="text-sm text-[--color-danger]">
          {state.error}
        </p>
      )}

      {state?.success && (
        <p role="status" className="text-sm text-[--color-success]">
          Settings saved.
        </p>
      )}

      <Button type="submit" loading={isPending}>
        Save changes
      </Button>
    </form>
  );
}

┌─ UI: [Screen/Feature Name] ─────────────────────────────────┐
│ Route: [path]                                                 │
│ Stack: [framework · styling · state · data fetching]          │
│                                                               │
│ Files written                                                 │
│   [list each file and its role]                              │
│                                                               │
│ Component tree                                                │
│   [indented tree — server/client boundary marked]            │
│                                                               │
│ Data                                                          │
│   Source: [API endpoints / server actions / DB]              │
│   Loading: [skeleton approach]                               │
│   Error: [user-facing error approach]                        │
│   Empty: [empty state approach]                              │
│                                                               │
│ Responsive: mobile (375px) · tablet (768px) · desktop        │
│                                                               │
│ a11y: [landmark regions, heading hierarchy, keyboard model]  │
│                                                               │
│ Spec gaps filled: [any assumptions made — flag for Form]     │
└──────────────────────────────────────────────────────────────┘