create-ailk 0.11.2 → 0.11.3

package/templates/apps/web/app/[locale]/(authed)/account/settings/name-form.tsx

@@ -0,0 +1,118 @@
+"use client"; // edits the session's name through Better Auth's client, then refreshes the route
+
+/**
+ * NameForm — User settings › General's name field (#7430, operator fold-in
+ * 2026-10-01). An accepted applicant arrives with no name (#7418), so the
+ * member SETS it here, and edits it later. Saved through Better Auth's own
+ * `updateUser` (its `/update-user` endpoint — no new API), then the route
+ * refreshes so the frame's avatar and the "Add your name" For-you item
+ * re-read the session.
+ *
+ * DESIGN.md §5.12: the form ends with a hairline and a save row — "No
+ * unsaved changes" / "Unsaved changes" and a Save that is disabled until
+ * dirty.
+ */
+
+import { Button, Input, InlineMessage, Label, Text } from "@working-theory/ui/primitives";
+import { createAuthClient } from "better-auth/react";
+import { useRouter } from "next/navigation";
+import { useId, useState, type FormEvent, type ReactElement } from "react";
+
+const authClient = createAuthClient();
+
+export interface NameFormLabels {
+  name: string;
+  placeholder: string;
+  save: string;
+  saving: string;
+  saved: string;
+  unsaved: string;
+  clean: string;
+  required: string;
+  error: string;
+}
+
+export function NameForm({
+  initialName,
+  labels,
+}: {
+  initialName: string;
+  labels: NameFormLabels;
+}): ReactElement {
+  const router = useRouter();
+  const inputId = useId();
+  const [saved, setSaved] = useState(initialName);
+  const [name, setName] = useState(initialName);
+  const [state, setState] = useState<"idle" | "saving" | "saved" | "required" | "error">("idle");
+  const dirty = name !== saved;
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    const next = name.trim();
+    if (!next) {
+      setState("required");
+      return;
+    }
+    setState("saving");
+    try {
+      const { error } = await authClient.updateUser({ name: next });
+      if (error) {
+        setState("error");
+        return;
+      }
+    } catch {
+      // A network failure throws rather than answering `error`.
+      setState("error");
+      return;
+    }
+    setSaved(next);
+    setName(next);
+    setState("saved");
+    router.refresh();
+  };
+
+  const status =
+    state === "saved" && !dirty ? labels.saved : dirty ? labels.unsaved : labels.clean;
+
+  return (
+    <form
+      onSubmit={(event) => void onSubmit(event)}
+      className="flex flex-col gap-2"
+      data-testid="account-name-form"
+    >
+      <Label htmlFor={inputId}>{labels.name}</Label>
+      <Input
+        id={inputId}
+        name="name"
+        autoComplete="name"
+        value={name}
+        placeholder={labels.placeholder}
+        onChange={(event) => {
+          setName(event.target.value);
+          if (state !== "saving") setState("idle");
+        }}
+        className="max-w-md"
+        data-testid="account-name-input"
+      />
+      {state === "required" || state === "error" ? (
+        <InlineMessage variant="error">
+          {state === "required" ? labels.required : labels.error}
+        </InlineMessage>
+      ) : null}
+      <div className="mt-2 flex items-center justify-between gap-4 border-t border-(--color-border) pt-4">
+        <div aria-live="polite" data-testid="account-name-status">
+          <Text as="p" variant="caption" tone="muted">
+            {status}
+          </Text>
+        </div>
+        <Button
+          type="submit"
+          disabled={!dirty || state === "saving"}
+          data-testid="account-name-save"
+        >
+          {state === "saving" ? labels.saving : labels.save}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/settings/page.tsx

@@ -0,0 +1,298 @@
+/**
+ * /[locale]/account/settings — User settings (#7430, spec 7423 U4 · D10,
+ * D10a; DESIGN.md §5.12a's section content).
+ *
+ * RSC, inside the account layout's SignedInShell with the rail visible
+ * (D10a — a member's rail has one row, so a separate no-rail frame would add
+ * a step for nothing). One page of anchored sections — the For-you items
+ * link to `#general` and `#billing`:
+ *
+ *   - General — color mode (only when the site's theme defines more than
+ *     one mode), the email read-only, and the name the member sets and edits
+ *     (an accepted applicant arrives with none, #7418).
+ *   - Security — the sign-in methods this site has configured; a Password
+ *     row only when the password method is on.
+ *   - Notifications — a note until a preference store exists.
+ *   - Privacy — the cookie settings (`/privacy#cookie-settings`, since the
+ *     account area carries no consent Banner, D4) and "Request account
+ *     deletion", which files a Support request of kind `deletion`.
+ *   - Billing — only when `subscription.me()` answers a status or an
+ *     available portal; absent on `status: null` + no portal, and on any
+ *     401/403/404 (the commerce-disabled build answers 404).
+ *   - Then any section a module contributes (`accountSettingsSections`).
+ *
+ * No Credentials, Scope, Organizations or Credits section: those are an
+ * agent's or an operator's (§5.12a), never a member's.
+ */
+
+import { subscription, type SubscriptionMeResponse } from "@working-theory/api-client";
+import { localeHref } from "@working-theory/ui";
+import { DescriptionList } from "@working-theory/ui/blocks";
+import { Button, Heading, Link, Text } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement, ReactNode } from "react";
+
+import { accountSettingsSections } from "../../../../../lib/account-config";
+import { getActiveProviderIds } from "../../../../../lib/auth-env";
+import { accountSession, logReadFailure } from "../account-data";
+import { openBillingPortal } from "../actions";
+
+import { ColorModeSetting } from "./color-mode";
+import { DeletionRequest } from "./deletion-request";
+import { NameForm } from "./name-form";
+import { siteThemeModeCount } from "./theme-modes";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("settings.title"), description: t("settings.lead") };
+}
+
+/** The section role DESIGN.md §5.12 names: a title, a muted subtitle, then the fields. */
+function Section({
+  id,
+  title,
+  lead,
+  children,
+}: {
+  id: string;
+  title: string;
+  lead?: string;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <section
+      id={id}
+      aria-labelledby={`${id}-title`}
+      className="flex scroll-mt-8 flex-col gap-4 border-t border-(--color-border) pt-8"
+      data-testid={`account-settings-${id}`}
+    >
+      <div>
+        <Heading level={2} visual={4} id={`${id}-title`}>
+          {title}
+        </Heading>
+        {lead ? (
+          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
+            {lead}
+          </Text>
+        ) : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** The sign-in methods this deployment has configured, as message keys. */
+const METHOD_KEYS: Record<string, string> = {
+  google: "settings.security.google",
+  github: "settings.security.github",
+  "magic-link": "settings.security.magicLink",
+  email: "settings.security.password",
+};
+
+/** The statuses with a message key; any other renders as the API sent it. */
+const KNOWN_STATUSES: ReadonlySet<string> = new Set(["trialing", "active", "past_due", "canceled"]);
+
+/**
+ * Billing's read: `null` on any non-2xx — 401/403/404 by D10 — and a failed
+ * read leaves the section out rather than failing the whole page. A failure
+ * other than those three is logged, so it is not silent to the operator.
+ */
+async function readSubscription(
+  init: { headers: Record<string, string> },
+): Promise<SubscriptionMeResponse | null> {
+  try {
+    const res = await subscription.me(init);
+    if (res.ok) return res.body;
+    if (![401, 403, 404].includes(res.status)) {
+      console.error(`[account] read failed source=billing status=${res.status}`);
+    }
+    return null;
+  } catch (err) {
+    logReadFailure("billing", err);
+    return null;
+  }
+}
+
+export default async function AccountSettingsPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+
+  // Unreachable behind the (authed) gate; a session that expired between
+  // the layout and the page renders the heading alone.
+  if (!session) {
+    return (
+      <div className="max-w-3xl py-8" data-testid="account-settings">
+        <Heading level={1} visual={2}>
+          {t("settings.title")}
+        </Heading>
+      </div>
+    );
+  }
+
+  const { ctx } = session;
+  const sub = await readSubscription(ctx.init);
+  const showBilling = sub !== null && (sub.status !== null || sub.portalAvailable);
+  const methods = getActiveProviderIds().filter((id) => id in METHOD_KEYS);
+
+  return (
+    <div className="flex max-w-3xl flex-col gap-8 py-8" data-testid="account-settings">
+      <div>
+        <Heading level={1} visual={2}>
+          {t("settings.title")}
+        </Heading>
+        <Text as="p" variant="body-sm" tone="muted" className="mt-block-tight">
+          {t("settings.lead")}
+        </Text>
+      </div>
+
+      <Section id="general" title={t("settings.general.title")} lead={t("settings.general.lead")}>
+        {siteThemeModeCount() > 1 ? (
+          <div className="flex flex-col items-start gap-2">
+            <Text as="p" variant="body-sm" className="font-medium">
+              {t("settings.general.colorMode")}
+            </Text>
+            <ColorModeSetting
+              labels={{
+                title: t("settings.general.colorMode"),
+                light: t("settings.general.light"),
+                auto: t("settings.general.auto"),
+                dark: t("settings.general.dark"),
+              }}
+            />
+          </div>
+        ) : null}
+        <DescriptionList
+          items={[
+            {
+              label: t("settings.general.email"),
+              value: ctx.user.email,
+              "data-testid": "account-settings-email",
+            },
+          ]}
+        />
+        <NameForm
+          initialName={ctx.user.name ?? ""}
+          labels={{
+            name: t("settings.general.name"),
+            placeholder: t("settings.general.namePlaceholder"),
+            save: t("settings.general.save"),
+            saving: t("settings.general.saving"),
+            saved: t("settings.general.saved"),
+            unsaved: t("settings.general.unsaved"),
+            clean: t("settings.general.clean"),
+            required: t("settings.general.nameRequired"),
+            error: t("settings.general.saveError"),
+          }}
+        />
+      </Section>
+
+      <Section id="security" title={t("settings.security.title")} lead={t("settings.security.lead")}>
+        {methods.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            <Text as="p" variant="body-sm" className="font-medium">
+              {t("settings.security.methods")}
+            </Text>
+            <DescriptionList
+              items={methods.map((id) => ({
+                label: ctx.t(METHOD_KEYS[id]!),
+                value: t("settings.security.available"),
+                "data-testid": `account-signin-${id}`,
+              }))}
+            />
+          </div>
+        ) : (
+          <Text as="p" variant="body-sm" tone="muted">
+            {t("settings.security.none")}
+          </Text>
+        )}
+      </Section>
+
+      <Section
+        id="notifications"
+        title={t("settings.notifications.title")}
+        lead={t("settings.notifications.lead")}
+      >
+        <Text as="p" variant="body-sm" tone="muted">
+          {t("settings.notifications.placeholder")}
+        </Text>
+      </Section>
+
+      <Section id="privacy" title={t("settings.privacy.title")} lead={t("settings.privacy.lead")}>
+        <div>
+          <Link
+            href={localeHref(locale, "/privacy#cookie-settings")}
+            className="inline-flex min-h-6 items-center"
+            data-testid="account-cookie-settings"
+          >
+            {t("settings.privacy.cookies")}
+          </Link>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Text as="p" variant="body-sm" tone="muted">
+            {t("settings.privacy.deletionLead")}
+          </Text>
+          <DeletionRequest
+            labels={{
+              action: t("settings.privacy.deletion"),
+              subject: t("settings.privacy.deletionSubject"),
+              message: t("settings.privacy.deletionMessage"),
+              sent: t("settings.privacy.deletionSent"),
+              error: t("settings.privacy.deletionError"),
+            }}
+          />
+        </div>
+      </Section>
+
+      {showBilling ? (
+        <Section id="billing" title={t("settings.billing.title")} lead={t("settings.billing.lead")}>
+          {sub.status !== null || sub.accessRevokesAt ? (
+            <DescriptionList
+              items={[
+                ...(sub.status !== null
+                  ? [
+                      {
+                        label: t("settings.billing.status"),
+                        value: KNOWN_STATUSES.has(sub.status)
+                          ? ctx.t(`settings.billing.statuses.${sub.status}`)
+                          : sub.status,
+                      },
+                    ]
+                  : []),
+                ...(sub.accessRevokesAt
+                  ? [
+                      {
+                        label: t("settings.billing.accessRevokesAt"),
+                        value: new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(
+                          new Date(sub.accessRevokesAt),
+                        ),
+                      },
+                    ]
+                  : []),
+              ]}
+            />
+          ) : null}
+          {sub.portalAvailable ? (
+            <form action={openBillingPortal}>
+              <Button type="submit" variant="secondary" data-testid="account-billing-manage">
+                {t("settings.billing.manage")}
+              </Button>
+            </form>
+          ) : null}
+        </Section>
+      ) : null}
+
+      {accountSettingsSections.map((section) => (
+        <Section key={section.id} id={section.id} title={ctx.t(section.title)}>
+          {section.render(ctx)}
+        </Section>
+      ))}
+    </div>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/settings/theme-modes.ts

@@ -0,0 +1,32 @@
+/**
+ * theme-modes.ts — how many color modes the site's theme defines (#7430,
+ * operator fold-in 2026-10-01: the color-mode control renders only on a
+ * site whose theme has more than one).
+ *
+ * Read from the same `content/_site.mdx` overlay the locale layout applies
+ * (`loadSiteBrandTokens`):
+ *
+ *   - no `theme:` colours (the default palette, light AND dark) → 2;
+ *   - colours declared for both `light` and `dark` → 2;
+ *   - colours declared for ONE mode only → 1. A site that designs a single
+ *     palette (samhenry's light-only DESIGN.md) declares just that mode, and
+ *     the other mode's defaults are not its design.
+ *
+ * A theme the loader rejects counts as the default (2): the layout surfaces
+ * that error itself, and settings must not be where it first appears.
+ */
+
+import { loadSiteBrandTokens } from "../../../../../lib/site-theme";
+
+export function siteThemeModeCount(): 1 | 2 {
+  try {
+    const colors = loadSiteBrandTokens()?.["colors"];
+    if (typeof colors !== "object" || colors === null) return 2;
+    const declared = (["light", "dark"] as const).filter(
+      (mode) => (colors as Record<string, unknown>)[mode] !== undefined,
+    );
+    return declared.length === 1 ? 1 : 2;
+  } catch {
+    return 2;
+  }
+}

package/templates/apps/web/app/[locale]/(authed)/account/support/page.tsx

@@ -0,0 +1,60 @@
+/**
+ * /[locale]/account/support — Contact support (#7430, spec 7423 U4 · D11).
+ *
+ * RSC, inside the account layout's SignedInShell. Reached from the help
+ * menu (the rail's ? and the phone tab bar's Help), never a rail row (D13).
+ * The form files a contact lead of kind `support` with the session's email,
+ * so it lands in the admin Inbox as a message; the reply goes to that email.
+ */
+
+import { Heading, Text } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { accountSession } from "../account-data";
+
+import { SupportForm } from "./support-form";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("support.title") };
+}
+
+export default async function AccountSupportPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+
+  return (
+    <div className="flex max-w-3xl flex-col gap-8 py-8" data-testid="account-support">
+      <div>
+        <Heading level={1} visual={2}>
+          {t("support.title")}
+        </Heading>
+        {session ? (
+          <Text as="p" variant="body-sm" tone="muted" className="mt-block-tight">
+            {t("support.lead", { email: session.ctx.user.email })}
+          </Text>
+        ) : null}
+      </div>
+      <SupportForm
+        labels={{
+          subject: t("support.subject"),
+          message: t("support.message"),
+          submit: t("support.submit"),
+          submitting: t("support.submitting"),
+          required: t("support.required"),
+          success: t("support.success"),
+          error: t("support.error"),
+          unavailable: t("support.unavailable"),
+        }}
+      />
+    </div>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/support/support-form.tsx

@@ -0,0 +1,98 @@
+"use client"; // submits through the account's Server Action and shows its outcome
+
+/**
+ * SupportForm — Contact support's form (#7430, spec 7423 D11): a subject and
+ * a message, filed by `submitSupportRequest` as a contact lead of kind
+ * `support`. The email is the session's, so the form never asks for it.
+ * The fields are controlled so a failed submit keeps what was typed.
+ */
+
+import {
+  Button,
+  InlineMessage,
+  Input,
+  Label,
+  Textarea,
+} from "@working-theory/ui/primitives";
+import { useActionState, useId, useState, type ReactElement } from "react";
+
+import { submitSupportRequest, type SupportRequestState } from "../support-actions";
+
+export interface SupportFormLabels {
+  subject: string;
+  message: string;
+  submit: string;
+  submitting: string;
+  required: string;
+  success: string;
+  error: string;
+  unavailable: string;
+}
+
+export function SupportForm({ labels }: { labels: SupportFormLabels }): ReactElement {
+  const subjectId = useId();
+  const messageId = useId();
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [state, formAction, pending] = useActionState<SupportRequestState, FormData>(
+    submitSupportRequest,
+    { kind: "idle" },
+  );
+
+  if (state.kind === "success") {
+    return (
+      <InlineMessage variant="success" role="status" className="text-body-sm">
+        {labels.success}
+      </InlineMessage>
+    );
+  }
+
+  return (
+    <form action={formAction} className="flex flex-col gap-4" data-testid="account-support-form">
+      <input type="hidden" name="kind" value="support" />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor={subjectId}>{labels.subject}</Label>
+        <Input
+          id={subjectId}
+          name="subject"
+          value={subject}
+          maxLength={200}
+          required
+          onChange={(event) => setSubject(event.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor={messageId}>{labels.message}</Label>
+        <Textarea
+          id={messageId}
+          name="message"
+          value={message}
+          rows={6}
+          maxLength={5000}
+          required
+          onChange={(event) => setMessage(event.target.value)}
+        />
+      </div>
+      {state.kind === "error" ? (
+        <InlineMessage variant="error">
+          {state.reason === "required"
+            ? labels.required
+            : state.reason === "unavailable"
+              ? labels.unavailable
+              : labels.error}
+        </InlineMessage>
+      ) : null}
+      <div>
+        <Button
+          type="submit"
+          disabled={pending}
+          // 44px on a phone (a touch-first context); the 36px primary from md up (DESIGN.md §4).
+          className="max-md:min-h-11"
+          data-testid="account-support-submit"
+        >
+          {pending ? labels.submitting : labels.submit}
+        </Button>
+      </div>
+    </form>
+  );
+}