// Team projects — plan T22 (feature-reliable-project-multiplayer).
//
// The designer's way in: pick a project you were added to and work. No folder
// to choose, no Git, no token to paste. Three sources, one action:
//
// • Recent team projects — the copies this computer already keeps
// (`managed_projects_list`); opening one needs no network.
// • Maude Cloud — sign in with the same device flow CloudBar uses, then the
// projects your account belongs to. Viewers get the browser, not a dead
// Open (the workspace would refuse their edits).
// • Your team's server — its address plus the email and password the team
// gave you (the self-hosted hub's own sign-in).
//
// Every path ends in `openTeamProject` / `managedProjectOpen`: the studio holds
// the credential and describes the project, the shell creates or reuses the
// project's own copy and switches to it. The webview never picks a path.
//
// Rendered as an onboarding door (`variant="door"`) and as a dialog from the
// project switcher (`variant="dialog"`); same content, different frame.
import { useEffect, useRef, useState } from 'react';
import { isDisplayableUrl, openExternal, shareViewUrl } from './CloudBar.jsx';
import { managedProjectOpen, managedProjectsList, openTeamProject } from '../github.js';
const api = async (path, init) => {
try {
const res = await fetch(path, init);
const json = await res.json().catch(() => ({}));
return { ok: res.ok, status: res.status, json };
} catch {
return { ok: false, status: 0, json: { error: 'Maude isn’t reachable right now.' } };
}
};
function Icon({ name, size = 16, className }) {
const p = {
check: ,
'arrow-right': (<>),
folder: ,
server: (<>),
globe: (<>),
x: (<>),
external: (<>),
copy: (<>),
spinner: ,
key: (<>),
user: (<>),
}[name];
return (
);
}
function Spark({ size = 15 }) {
return (
);
}
/** "https://acme.cloud.maude.sh" → "acme.cloud.maude.sh" — display only. */
export function serverLabel(url) {
try {
return new URL(url).host;
} catch {
return String(url || '');
}
}
function ErrorLine({ text }) {
if (!text) return null;
return (
{text}
);
}
export default function TeamProjects({ variant = 'door', initialServer = '' }) {
const [recents, setRecents] = useState(null);
const [cloud, setCloud] = useState({ state: 'loading', email: null, url: 'https://cloud.maude.sh' });
const [projects, setProjects] = useState(null);
const [device, setDevice] = useState(null);
const [copied, setCopied] = useState(false);
const [hub, setHub] = useState({ url: initialServer, email: '', password: '' });
const [busy, setBusy] = useState(''); // the key of whatever is opening
const [opening, setOpening] = useState(''); // display name once the switch started
const [err, setErr] = useState('');
const pollRef = useRef(null);
useEffect(() => {
let alive = true;
managedProjectsList()
.then((r) => alive && setRecents(Array.isArray(r) ? r : []))
.catch(() => alive && setRecents([]));
api('/_api/cloud/status').then((r) => {
if (!alive) return;
const url = r.json?.url || 'https://cloud.maude.sh';
if (r.ok && r.json?.connected) {
setCloud({ state: 'in', email: r.json.email ?? null, url });
loadProjects();
} else setCloud({ state: 'out', email: null, url });
});
return () => {
alive = false;
clearInterval(pollRef.current);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
async function loadProjects() {
setProjects(null);
const r = await api('/_api/cloud/projects');
if (r.status === 401) {
setCloud((c) => ({ ...c, state: 'out', email: null }));
setProjects([]);
return;
}
setProjects(r.ok && r.json?.ok ? r.json.projects || [] : []);
if (!r.ok) setErr(r.json?.error || 'Your Maude Cloud projects could not be listed.');
}
async function startCloudSignIn() {
setErr('');
const r = await api('/_api/cloud/signin/start', { method: 'POST' });
if (!r.ok || !r.json?.ok) {
setErr(r.json?.error || 'Maude Cloud could not be reached.');
return;
}
setDevice(r.json);
openExternal(r.json.verificationUrl);
clearInterval(pollRef.current);
pollRef.current = setInterval(async () => {
const p = await api('/_api/cloud/signin/poll', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ deviceCode: r.json.deviceCode }),
});
if (p.json?.pending) return;
clearInterval(pollRef.current);
setDevice(null);
if (p.ok && p.json?.ok) {
setCloud((c) => ({ ...c, state: 'in', email: p.json.email ?? null }));
loadProjects();
} else setErr(p.json?.error || 'The sign-in did not finish. Try again.');
}, (r.json.interval ?? 5) * 1000);
}
function cancelCloudSignIn() {
clearInterval(pollRef.current);
setDevice(null);
}
async function run(key, name, fn) {
if (busy) return;
setErr('');
setBusy(key);
const r = await fn();
if (r.ok) {
// The shell is switching; the window reloads onto the project. Keep the
// row busy so a second click can't start another open meanwhile.
setOpening(name);
return;
}
setBusy('');
setErr(r.error || 'The project could not be opened.');
}
const openRecent = (p) =>
run(`recent:${p.key}`, p.name, async () => {
try {
await managedProjectOpen({ serverUrl: p.server_url, projectId: p.project_id, name: p.name, canvasGroups: [] });
return { ok: true };
} catch (e) {
return { ok: false, error: String(e?.message || e) };
}
});
const openCloud = (p) =>
run(`cloud:${p.id}`, p.name || p.id, () => openTeamProject({ kind: 'cloud', projectId: p.id }));
const openHub = () =>
run('hub', serverLabel(hub.url), () =>
openTeamProject({ kind: 'hub', url: hub.url.trim(), email: hub.email.trim(), password: hub.password })
);
const canHub = hub.url.trim() && hub.email.trim() && hub.password;
return (
{opening && (
Opening {opening}… your canvases arrive as they download.