P1 flow fix: register makes a solo user by default, collective creation is an opt-in flag, post-login menu for collective-less accounts

apps/web/src/app/(main)/collectives/new/page.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { MANUAL_LANGUAGES, DEFAULT_MANUAL_LANGUAGE, type ManualLanguage } from "@tactical-media-broadcast-hub/core";
+import { Button, Card, Input } from "../../../../components/ui/primitives";
+import { api, errorMessage } from "../../../../lib/api-client";
+import type { CollectiveNode } from "../../../../lib/api-types";
+
+/**
+ * Create a collective (operator reorder #3: the door from the no-collectives
+ * home). Posts /collectives — the provisioner mints the room set, the founder
+ * membership and the onboarding manual land in one transaction, then the user
+ * is dropped on the tree. Bilingual by the same Spanish-first rule as the rest
+ * of the product.
+ */
+export default function NewCollectivePage(): React.ReactElement {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [language, setLanguage] = useState<ManualLanguage>(DEFAULT_MANUAL_LANGUAGE);
+  const [description, setDescription] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const ready = name.trim().length >= 2;
+
+  async function create(): Promise<void> {
+    setBusy(true);
+    setError(null);
+    try {
+      const collective = await api.post<CollectiveNode>("/collectives", {
+        name: name.trim(),
+        language,
+        ...(description.trim() === "" ? {} : { description: description.trim() }),
+      });
+      // Full navigation so the tree mounts with the new collective in place.
+      router.push(`/streams?created=${encodeURIComponent(collective.name)}`);
+    } catch (err) {
+      setError(errorMessage(err));
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <Card className="w-[520px] max-w-full p-6">
+        <h1 className="text-xl font-semibold tracking-tight">Crear un colectivo</h1>
+        <p className="mt-1 text-xs text-text-faint">
+          Se crean tres salas — abierta (pública, nunca cifrada), cerrada (cifrada desde su creación) y de acogida
+          (con el manual de participación) — y quedas como fundador/a.
+        </p>
+        <div className="mt-5 space-y-2">
+          <Input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Nombre del colectivo"
+            autoFocus
+          />
+          <label className="flex items-center justify-between gap-2 rounded-md border border-border bg-surface-2 px-3 py-2 text-xs">
+            Idioma del manual
+            <select
+              value={language}
+              onChange={(e) => setLanguage(e.target.value as ManualLanguage)}
+              className="rounded-md border border-border bg-surface-2 px-2 py-1 text-xs"
+            >
+              {MANUAL_LANGUAGES.map((code) => (
+                <option key={code} value={code}>
+                  {code === "es" ? "Español" : "English"}
+                </option>
+              ))}
+            </select>
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+            placeholder="Descripción (opcional)"
+            className="w-full resize-none rounded-md border border-border bg-surface-2 p-2 text-sm focus:border-accent focus:outline-none"
+          />
+        </div>
+        {error !== null && <p className="mt-2 text-xs text-danger">{error}</p>}
+        <div className="mt-6 flex items-center justify-between">
+          <Button variant="ghost" onClick={() => router.back()}>Cancelar</Button>
+          <Button variant="primary" disabled={busy || !ready} onClick={() => void create()}>
+            {busy ? "Creando…" : "Crear colectivo"}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}