Website: Next.js app for accounts, linking, who's online, device sign-in and the console

apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the
server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server
actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies
are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back).
Standalone output with a Dockerfile; deploys to Vercel as is.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/components/forms.tsx

@@ -0,0 +1,87 @@
+"use client";
+// Forms that run a server action and show its answer, with buttons that show when they're working.
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
+import { Button } from "@/components/ui/button";
+import type { ActionState } from "@/lib/actions";
+import { cn } from "@/lib/utils";
+
+type Action = (state: ActionState, form: FormData) => Promise<ActionState>;
+
+export function ActionForm({
+  action,
+  fields = {},
+  className,
+  children,
+}: {
+  action: Action;
+  /** Hidden fields sent with the form. */
+  fields?: Record<string, string | number>;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [state, formAction] = useActionState(action, null);
+  return (
+    <form action={formAction} className={cn("space-y-3", className)}>
+      {Object.entries(fields).map(([name, value]) => (
+        <input key={name} type="hidden" name={name} value={value} />
+      ))}
+      {children}
+      <FormMessage state={state} />
+    </form>
+  );
+}
+
+export function FormMessage({ state }: { state: ActionState }) {
+  if (state?.error) return <ErrorText>{state.error}</ErrorText>;
+  if (state?.notice)
+    return (
+      <p role="status" className="text-sm text-muted-foreground">
+        {state.notice}
+      </p>
+    );
+  return null;
+}
+
+export function ErrorText({ children }: { children: React.ReactNode }) {
+  return (
+    <p role="alert" className="text-sm text-red-700 dark:text-red-400">
+      {children}
+    </p>
+  );
+}
+
+/**
+ * A submit button that shows pending while its form is being sent. With name and value, it's one of several
+ * buttons in the form, and only shows pending when it was the one pressed. With confirm, it asks first.
+ */
+export function SubmitButton({
+  name,
+  value,
+  pendingLabel,
+  confirm,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "type" | "name" | "value" | "onClick"> & {
+  name?: string;
+  value?: string;
+  pendingLabel?: string;
+  confirm?: string;
+}) {
+  const status = useFormStatus();
+  const mine = status.pending && (name === undefined || status.data?.get(name) === value);
+  return (
+    <Button
+      type="submit"
+      name={name}
+      value={value}
+      disabled={status.pending}
+      onClick={(e) => {
+        if (confirm && !window.confirm(confirm)) e.preventDefault();
+      }}
+      {...props}
+    >
+      {mine ? (pendingLabel ?? children) : children}
+    </Button>
+  );
+}