rfc-app/frontend/src/components/CreateProjectModal.jsx

// CreateProjectModal.jsx — §22 S5. The create-project form the deployment
// directory's "Create your first project" / "New project" control opens, gated
// on the viewer's `can_create_project` capability (a global Owner action).
//
// The form lets the Owner choose a project id (a slug, not "default"), a display
// name, the type of its initial (default) collection, a visibility, and an
// optional content-repo name (defaulting to `<id>-content`). The backend
// provisions the Gitea content repo, commits the project to projects.yaml,
// re-mirrors the registry, and returns the new project; on success the caller
// refreshes the directory (and the N=1 redirect then lands in the new project).

import { useState } from 'react'
import { createProject } from '../api'

const TYPE_OPTIONS = [
  { value: 'document', label: 'Document — prose RFCs' },
  { value: 'specification', label: 'Specification' },
  { value: 'bdd', label: 'BDD — behaviour scenarios' },
]

const VISIBILITY_OPTIONS = [
  { value: 'public', label: 'Public' },
  { value: 'unlisted', label: 'Unlisted (link-only)' },
  { value: 'gated', label: 'Gated (hidden from the public)' },
]

export default function CreateProjectModal({ onClose, onCreated }) {
  const [projectId, setProjectId] = useState('')
  const [name, setName] = useState('')
  const [type, setType] = useState('document')
  const [visibility, setVisibility] = useState('public')
  const [contentRepo, setContentRepo] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState(null)

  async function handleCreate(e) {
    e.preventDefault()
    const pid = projectId.trim().toLowerCase()
    if (!pid || !name.trim()) return
    setSubmitting(true)
    setError(null)
    try {
      const project = await createProject({
        projectId: pid,
        name: name.trim(),
        type,
        visibility,
        contentRepo: contentRepo.trim() || null,
      })
      onCreated?.(project)
    } catch (err) {
      setError(err.message || 'Failed to create the project.')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="modal-overlay" onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="modal" style={{ maxWidth: 560 }}>
        <div className="modal-header">
          <h2>New project</h2>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          <form onSubmit={handleCreate} className="invitations-form">
            <label htmlFor="proj-id">Project id</label>
            <input
              id="proj-id"
              value={projectId}
              onChange={e => setProjectId(e.target.value)}
              placeholder="e.g. ohm, acme"
              autoFocus
              required
            />
            <label htmlFor="proj-name" style={{ marginTop: 10 }}>Display name</label>
            <input
              id="proj-name"
              value={name}
              onChange={e => setName(e.target.value)}
              placeholder="e.g. Open Human Model"
              required
            />
            <label htmlFor="proj-type" style={{ marginTop: 10 }}>Initial collection type</label>
            <select id="proj-type" value={type} onChange={e => setType(e.target.value)}>
              {TYPE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
            </select>
            <label htmlFor="proj-vis" style={{ marginTop: 10 }}>Visibility</label>
            <select id="proj-vis" value={visibility} onChange={e => setVisibility(e.target.value)}>
              {VISIBILITY_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
            </select>
            <label htmlFor="proj-repo" style={{ marginTop: 10 }}>Content repo (optional)</label>
            <input
              id="proj-repo"
              value={contentRepo}
              onChange={e => setContentRepo(e.target.value)}
              placeholder="defaults to <id>-content"
            />
            <div style={{ marginTop: 12, display: 'flex', gap: 8, alignItems: 'center' }}>
              <button type="submit" className="btn-primary" disabled={submitting}>
                {submitting ? 'Creating…' : 'Create project'}
              </button>
              {error && <span style={{ color: '#c33' }}>{error}</span>}
            </div>
          </form>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn-link" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  )
}