create-ailk 0.18.0 → 0.19.1

package/templates/apps/web/app/[locale]/(authed)/account/new-actions.ts

@@ -0,0 +1,219 @@
+"use server";
+
+/**
+ * account/new-actions.ts — the New menu's reads and writes (#8233, spec
+ * docs/specs/8233-member-new-menu-the-new-spec.md D5, D6; the writes are
+ * #8170's).
+ *
+ * A popup reads its data when it opens (D5) and posts through a write here:
+ *
+ *   - `readMeetingTypes` — `member.meetingTypes`, the types the provider
+ *     offers its clients.
+ *   - `readSlots` — `member.availability` for one type, from now to
+ *     `SLOT_WINDOW_DAYS` later. The range is computed here; the browser
+ *     sends only the slug and its time zone.
+ *   - `readRequestForm` — `member.requestForm`, the request-quote magnet's
+ *     current steps, or `form: null` while Request quote is switched off.
+ *   - `sendMessage` · `requestQuote` · `bookService` — `member.sendMessage`,
+ *     `member.requestQuote` and `member.book`.
+ *
+ * Every call sends `forwardedCookieInit()`'s init as built: on a single site
+ * the session cookie plus the request's `Origin` (`apps/api`'s cookie CSRF
+ * check), on a hub-mode spoke the hub credential — so nothing here tests the
+ * topology, and no identity is posted: the server takes the name and the
+ * verified email from the credential (8170 D7).
+ *
+ * A value is sent exactly as typed — never trimmed, never given a scheme: the
+ * server's `plainText` and `isHttpsLink` are the one rule. An optional value
+ * left empty or all-space is omitted, because the server refuses `""`. A
+ * refusal maps to its `error.code` when a popup has words for it, else to
+ * `failed`.
+ *
+ * Not a `*.actions.ts` file and no `*Action`-suffixed export: apps/mcp's
+ * parity test reads that suffix, and these member writes have no MCP twin by
+ * decision (8170's header). Logs carry the function, the status and the code
+ * only — never a typed value or a credential.
+ */
+
+import { member } from "@working-theory/api-client";
+import type {
+  MemberMeetingType,
+  MemberRequestFormResponse,
+  SchedulingSlot,
+} from "@working-theory/validation";
+
+import { forwardedCookieInit } from "../../../../lib/server-api";
+
+/** How far ahead Schedule service offers times (the read's own cap is 60 days). */
+const SLOT_WINDOW_DAYS = 14;
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** The refusal codes a popup has its own words for; anything else is `failed`. */
+const KNOWN_CODES = [
+  "link_not_https",
+  "answers_invalid",
+  "request_form_off",
+  "meeting_type_not_offered",
+  "slot_unavailable",
+  "too_many_requests",
+  "invalid_input",
+] as const;
+
+export type NewActionErrorCode = (typeof KNOWN_CODES)[number] | "failed";
+
+/** What a popup's form shows after a submit. */
+export type NewActionState =
+  | { kind: "idle" }
+  | { kind: "success" }
+  | { kind: "error"; code: NewActionErrorCode };
+
+export type NewReadResult<T> = ({ kind: "ok" } & T) | { kind: "error" };
+
+/** Structural mirror of `@working-theory/api-client`'s `ApiResult<T>` (not re-exported). */
+type ApiResult<T> = { ok: true; body: T } | { ok: false; status: number; body: unknown };
+
+/** PII-safe error identity for logs (the `checkout.actions.ts` idiom: `err.name` only). */
+function errorName(err: unknown): string {
+  return err instanceof Error ? err.name : "unknown";
+}
+
+/** The `error.code` of a member refusal body, when it has one. */
+function errorCode(body: unknown): string | null {
+  if (typeof body !== "object" || body === null) return null;
+  const error = (body as { error?: unknown }).error;
+  if (typeof error !== "object" || error === null) return null;
+  const code = (error as { code?: unknown }).code;
+  return typeof code === "string" ? code : null;
+}
+
+function knownCode(code: string | null): NewActionErrorCode {
+  return KNOWN_CODES.find((known) => known === code) ?? "failed";
+}
+
+/** A posted value as typed; `undefined` when it is absent or not a string. */
+function value(formData: FormData, name: string): string | undefined {
+  const entry = formData.get(name);
+  return typeof entry === "string" ? entry : undefined;
+}
+
+/** An optional posted value as typed, or `undefined` when it is empty or all-space. */
+function optional(formData: FormData, name: string): string | undefined {
+  const entry = value(formData, name);
+  return entry !== undefined && entry.trim() !== "" ? entry : undefined;
+}
+
+async function runRead<T, R>(
+  name: string,
+  call: (init: { headers: Record<string, string> }) => Promise<ApiResult<T>>,
+  shape: (body: T) => R,
+): Promise<NewReadResult<R>> {
+  try {
+    const res = await call(await forwardedCookieInit());
+    if (res.ok) return { kind: "ok", ...shape(res.body) };
+    console.error(`[new-actions] ${name} status=${res.status} code=${errorCode(res.body) ?? "none"}`);
+  } catch (err) {
+    console.error(`[new-actions] ${name} errName=${errorName(err)}`);
+  }
+  return { kind: "error" };
+}
+
+/** Action input is untrusted: a hand-built call may post anything but FormData. */
+function isFormData(input: unknown): input is FormData {
+  return input instanceof FormData;
+}
+
+async function runWrite(
+  name: string,
+  call: (init: { headers: Record<string, string> }) => Promise<ApiResult<unknown>>,
+): Promise<NewActionState> {
+  try {
+    const res = await call(await forwardedCookieInit());
+    if (res.ok) return { kind: "success" };
+    const code = knownCode(errorCode(res.body));
+    console.error(`[new-actions] ${name} status=${res.status} code=${code}`);
+    return { kind: "error", code };
+  } catch (err) {
+    console.error(`[new-actions] ${name} errName=${errorName(err)}`);
+    return { kind: "error", code: "failed" };
+  }
+}
+
+// ── Reads (D5) ───────────────────────────────────────────────────────────────
+
+export async function readMeetingTypes(): Promise<NewReadResult<{ items: MemberMeetingType[] }>> {
+  return runRead("readMeetingTypes", (init) => member.meetingTypes(init), ({ items }) => ({ items }));
+}
+
+export async function readSlots(input: {
+  slug: string;
+  timeZone?: string;
+}): Promise<NewReadResult<{ slots: SchedulingSlot[] }>> {
+  // Action input is untrusted: a hand-built call may send anything.
+  const { slug, timeZone } = (typeof input === "object" && input !== null ? input : {}) as {
+    slug?: unknown;
+    timeZone?: unknown;
+  };
+  if (typeof slug !== "string") return { kind: "error" };
+  const from = new Date();
+  const to = new Date(from.getTime() + SLOT_WINDOW_DAYS * DAY_MS);
+  const query = {
+    slug,
+    from: from.toISOString(),
+    to: to.toISOString(),
+    ...(typeof timeZone === "string" && timeZone !== "" ? { timeZone } : {}),
+  };
+  return runRead("readSlots", (init) => member.availability(query, init), ({ slots }) => ({ slots }));
+}
+
+export async function readRequestForm(): Promise<
+  NewReadResult<{ form: MemberRequestFormResponse["form"] }>
+> {
+  return runRead("readRequestForm", (init) => member.requestForm(init), ({ form }) => ({ form }));
+}
+
+// ── Writes (D6) — `(prev, formData)` for `useActionState` ───────────────────
+
+export async function sendMessage(
+  _prev: NewActionState,
+  formData: FormData,
+): Promise<NewActionState> {
+  if (!isFormData(formData)) return { kind: "error", code: "invalid_input" };
+  const link = optional(formData, "link");
+  const body = {
+    subject: value(formData, "subject") ?? "",
+    body: value(formData, "body") ?? "",
+    ...(link === undefined ? {} : { link }),
+  };
+  return runWrite("sendMessage", (init) => member.sendMessage(body, init));
+}
+
+/** The answers are the entries named `answer.<field name>`; a blank one is omitted. */
+export async function requestQuote(
+  _prev: NewActionState,
+  formData: FormData,
+): Promise<NewActionState> {
+  if (!isFormData(formData)) return { kind: "error", code: "invalid_input" };
+  const answers: Record<string, string> = {};
+  for (const key of new Set(formData.keys())) {
+    if (!key.startsWith("answer.")) continue;
+    const answer = optional(formData, key);
+    if (answer !== undefined) answers[key.slice("answer.".length)] = answer;
+  }
+  return runWrite("requestQuote", (init) => member.requestQuote({ answers }, init));
+}
+
+export async function bookService(
+  _prev: NewActionState,
+  formData: FormData,
+): Promise<NewActionState> {
+  if (!isFormData(formData)) return { kind: "error", code: "invalid_input" };
+  const timeZone = optional(formData, "timeZone");
+  const notes = optional(formData, "notes");
+  const body = {
+    slug: value(formData, "slug") ?? "",
+    start: value(formData, "start") ?? "",
+    ...(timeZone === undefined ? {} : { timeZone }),
+    ...(notes === undefined ? {} : { notes }),
+  };
+  return runWrite("bookService", (init) => member.book(body, init));
+}

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

@@ -0,0 +1,340 @@
+"use client"; // the menu, the dialog and the top-bar portal hold client state
+
+/**
+ * NewMenu — the member area's New button over the Inbox (#8233, spec
+ * docs/specs/8233-member-new-menu-the-new-spec.md D3, D5, D10; brief Layout
+ * item 3). Copied from the Admin's NewMenu idiom (apps do not import apps).
+ *
+ * Its rows are the contributed New actions the Inbox page found offered
+ * (`accountNewActions`, each already gated by its own member read). A row is
+ * a menu item, never a link: it opens that action's popup in one dialog over
+ * the Inbox. With no action offered there is no menu at all.
+ *
+ * Two triggers share the dialog: the desktop New in the page's header row
+ * (`md` up), and a compact + the frame's phone top bar holds. The frame hands
+ * the top-bar node down through `NewMenuSlotProvider` on the Inbox route
+ * only; outside a frame (a test, a story) the node is null and only the
+ * desktop trigger renders.
+ *
+ * A popup body talks back through `useNewMenuPopup()`: `close(true)` after a
+ * successful write closes the dialog and refreshes the Inbox, `open(id)`
+ * switches to another offered action. The two popups that read on open share
+ * `useOpenRead` and `NewPopupStatus`, so loading, a failed read and its retry
+ * look the same in both (D5).
+ */
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  InlineMessage,
+  Text,
+} from "@working-theory/ui/primitives";
+import { ChevronDown, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+
+import type { NewActionErrorCode } from "./new-actions";
+
+/** One offered action, its label already translated. */
+export interface NewMenuAction {
+  id: string;
+  label: string;
+  popup: ReactNode;
+}
+
+export interface NewMenuLabels {
+  trigger: string;
+  close: string;
+}
+
+/** The strings every popup shares (D10, D11). */
+export interface NewPopupLabels {
+  loading: string;
+  loadFailed: string;
+  retry: string;
+  submitting: string;
+  optional: string;
+  errors: Record<NewActionErrorCode, string>;
+}
+
+// ── The top-bar slot ─────────────────────────────────────────────────────────
+
+const NewMenuSlotContext = createContext<HTMLElement | null>(null);
+
+/** Hands the phone top bar's trailing node to the page; `null` where the bar has none. */
+export function NewMenuSlotProvider({
+  node,
+  children,
+}: {
+  node: HTMLElement | null;
+  children: ReactNode;
+}): ReactElement {
+  return <NewMenuSlotContext.Provider value={node}>{children}</NewMenuSlotContext.Provider>;
+}
+
+export function useNewMenuSlot(): HTMLElement | null {
+  return useContext(NewMenuSlotContext);
+}
+
+// ── The popup API ────────────────────────────────────────────────────────────
+
+export interface NewMenuPopupApi {
+  /** Closes the dialog; after a successful write, also refreshes the Inbox. */
+  close(submitted: boolean): void;
+  /** Switches the dialog to another offered action. */
+  open(id: string): void;
+  /** Whether an action is offered. */
+  has(id: string): boolean;
+}
+
+const INERT_POPUP_API: NewMenuPopupApi = {
+  close: () => undefined,
+  open: () => undefined,
+  has: () => false,
+};
+
+const NewMenuPopupContext = createContext<NewMenuPopupApi>(INERT_POPUP_API);
+
+export function useNewMenuPopup(): NewMenuPopupApi {
+  return useContext(NewMenuPopupContext);
+}
+
+// ── The menu ─────────────────────────────────────────────────────────────────
+
+function ActionMenu({
+  compact,
+  actions,
+  label,
+  onPick,
+}: {
+  compact: boolean;
+  actions: readonly NewMenuAction[];
+  label: string;
+  onPick: (id: string, trigger: HTMLElement | null) => void;
+}): ReactElement {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  // A pick hands focus to the dialog, so the closing menu must not take it back.
+  const picked = useRef(false);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {compact ? (
+          <Button
+            ref={triggerRef}
+            variant="ghost"
+            size="big"
+            iconOnly
+            aria-label={label}
+            className="size-11 rounded-full"
+            data-testid="account-new-menu-trigger-compact"
+          >
+            <Icon icon={Plus} size="md" decorative />
+          </Button>
+        ) : (
+          <Button
+            ref={triggerRef}
+            variant="default"
+            className="hidden gap-1 md:inline-flex"
+            data-testid="account-new-menu-trigger"
+          >
+            <Icon icon={Plus} size="sm" decorative />
+            {label}
+            <Icon icon={ChevronDown} size="sm" decorative />
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="min-w-56"
+        onCloseAutoFocus={(event) => {
+          if (picked.current) event.preventDefault();
+          picked.current = false;
+        }}
+        data-testid="account-new-menu-content"
+      >
+        {actions.map((action) => (
+          <DropdownMenuItem
+            key={action.id}
+            onSelect={() => {
+              picked.current = true;
+              onPick(action.id, triggerRef.current);
+            }}
+            data-testid={`account-new-menu-item-${action.id}`}
+          >
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function NewMenu({
+  actions,
+  labels,
+}: {
+  actions: readonly NewMenuAction[];
+  labels: NewMenuLabels;
+}): ReactElement | null {
+  const router = useRouter();
+  const slot = useNewMenuSlot();
+  const [openId, setOpenId] = useState<string | null>(null);
+  // The trigger that opened the dialog gets focus back when it closes.
+  const returnFocus = useRef<HTMLElement | null>(null);
+
+  const api = useMemo<NewMenuPopupApi>(() => {
+    const has = (id: string): boolean => actions.some((action) => action.id === id);
+    return {
+      close(submitted) {
+        setOpenId(null);
+        if (submitted) router.refresh();
+      },
+      open(id) {
+        if (has(id)) setOpenId(id);
+      },
+      has,
+    };
+  }, [actions, router]);
+
+  if (actions.length === 0) return null;
+
+  const current = actions.find((action) => action.id === openId) ?? null;
+  const onPick = (id: string, trigger: HTMLElement | null): void => {
+    returnFocus.current = trigger;
+    setOpenId(id);
+  };
+
+  return (
+    <>
+      <ActionMenu compact={false} actions={actions} label={labels.trigger} onPick={onPick} />
+      {slot
+        ? createPortal(
+            <ActionMenu compact actions={actions} label={labels.trigger} onPick={onPick} />,
+            slot,
+          )
+        : null}
+      <Dialog
+        open={current !== null}
+        onOpenChange={(open) => {
+          if (!open) setOpenId(null);
+        }}
+      >
+        {current ? (
+          <DialogContent
+            closeLabel={labels.close}
+            aria-describedby={undefined}
+            onCloseAutoFocus={(event) => {
+              const trigger = returnFocus.current;
+              if (trigger?.isConnected) {
+                event.preventDefault();
+                trigger.focus();
+              }
+            }}
+            data-testid="account-new-popup"
+          >
+            <DialogHeader>
+              <DialogTitle>{current.label}</DialogTitle>
+            </DialogHeader>
+            <NewMenuPopupContext.Provider value={api}>
+              {/* Keyed, so switching actions mounts a fresh popup that reads anew. */}
+              <div key={current.id} className="mt-block-tight">
+                {current.popup}
+              </div>
+            </NewMenuPopupContext.Provider>
+          </DialogContent>
+        ) : null}
+      </Dialog>
+    </>
+  );
+}
+
+// ── Shared popup parts (D5, D10) ─────────────────────────────────────────────
+
+export type OpenRead<T> = "loading" | { kind: "error" } | ({ kind: "ok" } & T);
+
+/**
+ * Reads a popup's data when it mounts — the dialog mounts a popup only while
+ * it is open, so this is a read per open (D5) — and returns a retry.
+ */
+export function useOpenRead<T>(
+  read: () => Promise<{ kind: "error" } | ({ kind: "ok" } & T)>,
+): [OpenRead<T>, () => void] {
+  const [state, setState] = useState<OpenRead<T>>("loading");
+  // Only the newest read lands: a retry never loses to the read it replaced.
+  const latest = useRef(0);
+  const load = useCallback(() => {
+    const readId = ++latest.current;
+    const land = (next: OpenRead<T>): void => {
+      if (readId === latest.current) setState(next);
+    };
+    setState("loading");
+    read().then(land, () => land({ kind: "error" }));
+  }, [read]);
+  useEffect(load, [load]);
+  return [state, load];
+}
+
+/** A popup's loading line, or its failed-read line with Try again. */
+export function NewPopupStatus({
+  failed,
+  labels,
+  onRetry,
+}: {
+  failed: boolean;
+  labels: NewPopupLabels;
+  onRetry: () => void;
+}): ReactElement {
+  if (!failed) {
+    return (
+      <div role="status" data-testid="new-popup-loading">
+        <Text as="p" variant="body-sm" tone="muted">
+          {labels.loading}
+        </Text>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-3" data-testid="new-popup-load-failed">
+      <InlineMessage variant="error" className="text-body-sm">
+        {labels.loadFailed}
+      </InlineMessage>
+      <Button variant="outline" onClick={onRetry} data-testid="new-popup-retry">
+        {labels.retry}
+      </Button>
+    </div>
+  );
+}
+
+/** A refused write's plain message; the popup stays open with every value kept. */
+export function NewPopupRefusal({
+  code,
+  labels,
+}: {
+  code: NewActionErrorCode;
+  labels: NewPopupLabels;
+}): ReactElement {
+  return (
+    <InlineMessage variant="error" data-testid="new-popup-error">
+      {labels.errors[code]}
+    </InlineMessage>
+  );
+}

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

@@ -0,0 +1,107 @@
+/**
+ * new-popups.tsx — the New menu's actions with their popups bound (#8233 D1,
+ * D2, D6–D8).
+ *
+ * `lib/account-config.ts` carries each action's server half — its id, its
+ * label and the member read that decides whether it is offered — and this
+ * file adds the popup each one opens, composing the `AccountNewAction`
+ * contract (`@working-theory/templates/account`) the Inbox page consumes.
+ *
+ * The split is create-ailk's spoke closure (`spokeExclusions`,
+ * `packages/create-ailk/src/topology.ts`): a spoke without sign-in drops the
+ * whole `(authed)` group, these popups included, and every file that imports
+ * one of them goes too — but `account-config.ts` is a shared lib file every
+ * spoke keeps, so it may import nothing under `(authed)` (the closure guard
+ * refuses the scaffold, naming it). This file sits inside the group: it goes
+ * with the popups on such a spoke, and stays with them on a hub-sign-in one
+ * and on a single site, where the page still renders all three.
+ *
+ * A popup receives only its locale and strings built through `ctx.t` — never
+ * `ctx`, its init, its user or `t` itself — so no credential or email reaches
+ * the client payload (SEC-8233-1). `popups` is keyed on the config's own id
+ * union, so a read added there without a popup here is a type error, never a
+ * menu row that opens nothing.
+ */
+
+import type {
+  AccountContext,
+  AccountNewAction,
+  AccountTranslate,
+} from "@working-theory/templates/account";
+import type { ReactNode } from "react";
+
+import {
+  accountNewActions,
+  type AccountNewActionId,
+} from "../../../../lib/account-config";
+
+import { RequestQuote } from "./components/request-quote";
+import { ScheduleService } from "./components/schedule-service";
+import { SendMessage } from "./components/send-message";
+import type { NewPopupLabels } from "./new-menu";
+
+/** The strings every popup shares — plain strings, so nothing else crosses to the client. */
+function popupLabels(t: AccountTranslate): NewPopupLabels {
+  return {
+    loading: t("new.loading"),
+    loadFailed: t("new.loadFailed"),
+    retry: t("new.retry"),
+    submitting: t("new.submitting"),
+    optional: t("new.optional"),
+    errors: {
+      link_not_https: t("new.errors.linkNotHttps"),
+      answers_invalid: t("new.errors.answersInvalid"),
+      request_form_off: t("new.errors.requestFormOff"),
+      meeting_type_not_offered: t("new.errors.meetingTypeNotOffered"),
+      slot_unavailable: t("new.errors.slotUnavailable"),
+      too_many_requests: t("new.errors.tooManyRequests"),
+      invalid_input: t("new.errors.invalidInput"),
+      failed: t("new.errors.failed"),
+    },
+  };
+}
+
+/** The popup each action opens, keyed on the config's ids (D6–D8). */
+const popups = {
+  "schedule-service": ({ locale, t }) => (
+    <ScheduleService
+      locale={locale}
+      labels={{
+        ...popupLabels(t),
+        service: t("new.schedule.service"),
+        // The popup fills each type's own minutes into the literal placeholder.
+        duration: t("new.schedule.duration", { minutes: "{minutes}" }),
+        time: t("new.schedule.time"),
+        notes: t("new.schedule.notes"),
+        submit: t("new.schedule.submit"),
+        none: t("new.schedule.none"),
+        suggest: t("new.schedule.suggest"),
+        noSlots: t("new.schedule.noSlots"),
+      }}
+    />
+  ),
+  "request-quote": ({ locale, t }) => (
+    <RequestQuote locale={locale} labels={{ ...popupLabels(t), submit: t("new.quote.submit") }} />
+  ),
+  "send-message": ({ locale, t }) => (
+    <SendMessage
+      locale={locale}
+      labels={{
+        ...popupLabels(t),
+        subject: t("new.message.subject"),
+        body: t("new.message.body"),
+        link: t("new.message.link"),
+        linkHelp: t("new.message.linkHelp"),
+        submit: t("new.message.submit"),
+      }}
+    />
+  ),
+} satisfies Record<AccountNewActionId, (ctx: AccountContext) => ReactNode>;
+
+/** The New actions in menu order (D2), each with its popup — what the Inbox page offers. */
+export const newActions: readonly AccountNewAction[] = accountNewActions.map(
+  (read) => ({
+    ...read,
+    renderPopup: popups[read.id],
+  }),
+);